/* Progressive additions to the original Zinc mobile-first design. */
body{overflow-wrap:break-word}.workspace,.main-content,.row>*{min-width:0}.surface{margin-bottom:18px}.action-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0}.form-stack{gap:18px}.form-help{font-size:var(--font-small);color:var(--muted);margin-top:7px}.form-help ul{padding-left:18px}.notice{padding:15px 18px;border:1px solid var(--line);border-radius:10px;background:var(--accent-soft);margin-bottom:18px}.notice.error,.errorlist{color:var(--red,#d98989)}.errorlist{font-size:var(--font-small);padding-left:20px;margin:7px 0}.auth-card{max-width:540px;margin:20px auto}.auth-card h1{font-size:28px;margin:14px 0}.pagination-bar{display:flex;gap:14px;align-items:center;justify-content:center;margin:20px 0}.finance-table td small{display:block;color:var(--muted);font-size:var(--font-small);margin-top:4px}.filter-row{flex-wrap:wrap;overflow:visible}progress{display:block;width:100%;height:7px;margin:12px 0;appearance:none;border:0;border-radius:99px;background:var(--surface-3)}progress::-webkit-progress-bar{background:var(--surface-3);border-radius:99px}progress::-webkit-progress-value{background:var(--accent);border-radius:99px}progress::-moz-progress-bar{background:var(--accent);border-radius:99px}.rule-info{border-top:1px solid var(--line);padding-top:14px;margin-top:14px;font-size:var(--font-small)}.explanation-output{font-size:var(--font-body);line-height:1.8;white-space:pre-wrap;margin-top:16px}.lesson-block{margin-bottom:26px}.block-callout,.block-warning,.block-example{background:var(--accent-soft);border-left:3px solid var(--accent);padding:18px;border-radius:8px}.menu-backdrop{position:fixed;inset:0;background:#0009;z-index:80;border:0}.menu-backdrop[hidden]{display:none}.sidebar.is-open{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:min(290px,85vw);padding:24px 14px;background:var(--sidebar);z-index:90;overflow-y:auto}.sidebar.is-open .nav-scroll{overflow:auto;margin-top:20px}.sidebar.is-open .side-link{display:flex;padding:10px;gap:10px}.sidebar.is-open .nav-heading{padding:10px;font-size:var(--font-small);list-style:none;color:var(--muted)}.sidebar.is-open .sidebar-profile{margin-top:auto;padding:15px}.sidebar.is-open .nav-group{margin-bottom:12px}.sidebar.is-open .nav-links{display:grid;gap:3px}.sidebar.is-open .side-link.active{border-radius:10px;background:var(--accent-soft)}button:disabled{opacity:.6;cursor:wait}input[type=checkbox],input[type=radio]{accent-color:var(--accent);min-width:16px;min-height:16px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.mobile-link{min-width:44px;min-height:44px}.topbar-actions .secondary-button,.topbar-actions .primary-button{font-size:var(--font-small);padding:8px}.editorial-body h2{scroll-margin-top:90px}.narrow-section{max-width:800px}.line-chart{max-width:100%;height:auto;min-height:150px}
@media(min-width:992px){.sidebar.is-open{position:sticky;inset:auto;width:auto}.menu-backdrop{display:none}.top-add{display:inline-flex!important}.auth-card{margin-top:40px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Local, decorative SVG icons share a single size and stroke throughout the UI. */
.icon{display:inline-block;width:18px;height:18px;flex-shrink:0;vertical-align:-.2em;pointer-events:none}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0}
.nav-icon .icon,.mobile-link>.icon{width:21px;height:21px}
.side-link{gap:11px}
.mobile-link>.icon{margin:0 auto 3px}
.primary-button,.secondary-button{align-items:center;justify-content:center;gap:7px}
.primary-button>.icon,.secondary-button>.icon,.text-link>.icon,.back-link>.icon{width:16px;height:16px}
.icon-button .icon{width:22px;height:22px}
.brand{gap:10px;font-size:22px;letter-spacing:-.7px}
.brand-mark{font-size:24px;letter-spacing:-2px;line-height:1;flex-shrink:0}
.brand-accent{color:var(--accent)}
.calculator-icon,.account-icon{margin-bottom:16px}
.calculator-icon .icon,.account-icon .icon{width:23px;height:23px}
.course-cover>span>.icon{width:72px;height:72px;stroke-width:1.25}
.course-cover>i>.icon{width:32px;height:32px}
.article-card-art>.icon,.book-card-art>.icon,.book-card-art>span>.icon{width:42px;height:42px;stroke-width:1.4}
.stat-card .eyebrow-muted>.icon{width:17px;height:17px;margin-right:5px;color:var(--accent)}
.lesson-index>.icon{width:18px;height:18px}
.lesson-arrow>.icon{width:19px;height:19px}
.notice>.icon,.status-pill>.icon{margin-right:4px}
.topbar-left{min-width:0;flex:1}
.topbar{height:auto;min-height:70px;padding-block:12px}.topbar-title{min-width:0;white-space:normal;line-height:1.4}
.topbar-actions,.topbar-left>.icon-button{flex-shrink:0}
.topbar-actions .top-settings{display:grid}
.primary-button,.secondary-button{max-width:100%;white-space:normal}
.topbar-actions .primary-button,.topbar-actions .secondary-button{white-space:nowrap}
.text-link{white-space:normal}
@media(max-width:575px){.page-intro{flex-wrap:wrap}.lesson-next{flex-wrap:wrap}}

/* Calendar: stable month grid, explicit day counts and a local entry form. */
.calendar-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.calendar-toolbar h2{font-size:21px;margin:0;text-transform:capitalize}
.calendar-month-counts{margin:5px 0 0}
.calendar-month-counts strong{color:var(--text);font-variant-numeric:tabular-nums}
.calendar-month-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;width:100%;max-width:440px;align-items:center}
.calendar-month-form{display:flex;gap:6px;min-width:0}
.calendar-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.calendar-main{min-width:0}
.calendar-grid-card{padding:12px}
.calendar-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--font-small);color:var(--muted);margin-bottom:16px}
.calendar-legend>span{display:inline-flex;align-items:center;gap:5px}
.calendar-legend>span:first-child .icon{color:var(--accent)}
.calendar-legend>span:last-child .icon{color:var(--warning)}
.calendar-weekdays,.server-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.calendar-weekdays{text-align:center;font-size:var(--font-caption);font-weight:800;color:var(--muted);margin-bottom:8px}
.server-day{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:85px;padding:6px 2px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font-size:var(--font-small);text-align:center}
.server-day.muted-day{opacity:.45}
.server-day:hover{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}
.server-day time{display:grid;place-items:center;min-width:24px;min-height:24px;border-radius:50%;font-weight:700;font-variant-numeric:tabular-nums}
.server-day.is-selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.calendar-day-today time{background:var(--accent);color:#20283b}
.calendar-day-counter{display:inline-flex;align-items:center;justify-content:center;gap:3px;max-width:100%;padding:1px 5px;min-height:23px;min-width:23px;border-radius:6px;background:var(--accent);color:#20283b;font-variant-numeric:tabular-nums;line-height:1.2}
.calendar-day-counter strong{font-size:var(--font-body);overflow-wrap:anywhere}
.calendar-day-counter .icon{display:none;width:12px;height:12px}
.calendar-day-counter.is-zero{background:var(--surface-2);color:var(--muted)}
.calendar-day-planned{border:1px dashed var(--warning);background:transparent;color:var(--warning)}
.calendar-grid-help{margin:14px 0 0;font-size:var(--font-small)}
.calendar-day-details,.calendar-quick-add{scroll-margin-top:85px}
.calendar-day-details [hidden]{display:none!important}
.calendar-day-details .section-head{margin-bottom:10px}
.calendar-day-details .section-head p{margin:7px 0 0}
.calendar-day-details .secondary-button{margin-top:15px}
.calendar-event{display:flex;align-items:flex-start;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.calendar-event-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);flex-shrink:0}
.calendar-event-description{flex:1;min-width:0;font-size:var(--font-small)}
.calendar-event-description>a{font-weight:800}
.calendar-event-description small,.calendar-event-amount small{display:block;font-size:var(--font-caption);font-weight:500;color:var(--muted);margin-top:3px}
.calendar-event-description small .icon{width:11px;height:11px}
.calendar-event-status{display:inline-block;font-size:var(--font-caption);color:var(--positive);margin-top:4px}
.calendar-event-status.is-planned{color:var(--warning)}
.calendar-event-amount{text-align:right;max-width:45%;font-size:var(--font-small);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.calendar-quick-add{margin:0;min-width:0}
.calendar-quick-add h2{font-size:17px;margin-bottom:10px}
.calendar-quick-add>p{margin-bottom:18px}
.calendar-quick-form{gap:12px}
.calendar-quick-form .field-group{min-width:0}
.calendar-quick-form .field-group[hidden]{display:none}
.calendar-quick-form>.primary-button{width:100%;margin-top:5px}
.calendar-quick-form>.text-link{font-size:var(--font-small)}
@media(min-width:576px){.calendar-grid-card{padding:18px}.server-calendar,.calendar-weekdays{gap:6px}.server-day{min-height:100px;padding:8px 5px}.calendar-day-counter .icon{display:inline-block}.calendar-day-counter strong{font-size:var(--font-body)}.calendar-event-amount{font-size:var(--font-body)}}
@media(min-width:1200px){.calendar-layout{grid-template-columns:minmax(0,1fr) 310px}.calendar-quick-add{position:sticky;top:84px}}

/* Give mobile titles their own line so text and actions keep their size. */
@media(max-width:575px){.topbar{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;height:auto;min-height:64px;padding-block:12px}.topbar-left{display:contents}.topbar-left>.icon-button{grid-column:1;grid-row:1;align-self:start}.topbar-title{grid-column:1/-1;grid-row:2;white-space:normal;overflow:visible;line-height:1.4}.topbar-actions{grid-column:2;grid-row:1;justify-content:flex-end;flex-wrap:wrap;gap:8px;min-width:0}}

/* Shared chart controls, progressive refresh and native accessible dialogs. */
.interactive-chart{position:relative;min-width:0;margin-block:16px}.interactive-chart svg{display:block;width:100%;min-height:180px;touch-action:pan-y}.interactive-chart .plot-label{font-size:10px}.interactive-chart .plot-tooltip{max-width:min(100%,340px);min-width:0;overflow-wrap:anywhere;background:var(--surface);box-sizing:border-box}.interactive-chart .plot-tooltip>span{white-space:normal}.interactive-chart .plot-tooltip b{float:none;display:block;margin-left:12px}.chart-legend-button{display:inline-flex;align-items:center;border:0;border-radius:6px;padding:5px;background:transparent;color:var(--text);font:inherit;font-size:var(--font-small);text-align:left}.chart-legend-button[aria-pressed=false]{opacity:.45;text-decoration:line-through}.interaction-dialog{position:fixed;inset:0;margin:auto;padding:22px;border:1px solid var(--line);color:var(--text);background:var(--surface);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}.interaction-dialog::backdrop{background:#0009}.interaction-dialog.drawer-dialog{inset:0 0 0 auto;margin:0;max-width:100%;max-height:100dvh}.interaction-dialog .dialog-menu{display:grid;gap:12px}.assistant-thread{min-height:0}.live-status{flex-basis:100%;margin:4px 0;min-height:1.5em}.results-pending .result-panel{opacity:.65}.allocation-ring{display:grid;place-items:center;width:min(220px,100%);aspect-ratio:1;margin:20px auto;border-radius:50%;position:relative;text-align:center;font-size:var(--font-small);font-weight:800;padding:38px;isolation:isolate}.allocation-ring:before{content:"";position:absolute;inset:24%;background:var(--surface);border-radius:50%;z-index:-1}.allocation-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}[data-tabs][hidden]{display:none!important}[data-tab-panel][hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.interaction-dialog{animation:none}}
.draft-event{padding:16px;border:1px solid var(--line);border-radius:10px;min-width:0;margin-bottom:16px}.draft-event legend{float:none;width:auto;font-size:var(--font-body);font-weight:800}.draft-event .field-group{margin-bottom:12px}

/* Shared form controls for generated fields and hand-written filters. */
:root {
  --control-height: 44px;
  --control-radius: 10px;
}
.form-control,
.form-select,
.field-group :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden])),
.field-group select,
.field-group textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--control-height);
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background-color: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--font-small);
  font-weight: 500;
  line-height: 1.375;
  transition: border-color .16s, box-shadow .16s;
}
.form-control:not(textarea),
.form-select:not([multiple]),
.field-group :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden])),
.field-group select:not([multiple]) {
  height: var(--control-height);
}
.form-control::placeholder { color: var(--subtle); }
.form-select:not([multiple]),
.field-group select:not([multiple]) {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23cbcbcf' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
}
select option { background: var(--surface); color: var(--text); }
.field-group textarea { min-height: 112px; resize: vertical; }
.form-control[type=file], .field-group input[type=file] { padding: 0; line-height: 42px; }
.form-control::file-selector-button, .field-group input::file-selector-button {
  height: 42px;
  margin: 0 12px 0 0;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
}
.form-control:focus,
.form-select:focus,
.field-group :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden])):focus,
.field-group select:focus,
.field-group textarea:focus {
  border-color: var(--accent);
  background-color: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-group { min-width: 0; }
.field-group > label,
.form-stack > label,
.filter-form > label,
.control-bar > label,
.bulk-action-group > label {
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 1.5;
}
.field-group > label { margin-bottom: 6px; }
:is(.form-stack, .filter-form, .control-bar, .bulk-action-group) > label > :is(input:not([type=checkbox]):not([type=radio]), select) {
  display: block;
  margin-top: 6px;
}
.form-stack > .action-row { margin: 0; }
.surface > h2 + .form-stack { margin-top: 20px; }
.filter-form {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: end;
  gap: 16px;
  margin-bottom: 20px;
}
.filter-actions { grid-column: 1 / -1; margin: 0; }
.control-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 12px;
  margin: 0 0 20px;
}
.control-bar > label { flex: 0 1 220px; }
.control-bar > :is(.form-control, .form-select) { flex: 1 1 220px; width: auto; }
.control-bar > :is(button, .primary-button, .secondary-button) { flex-shrink: 0; }
.page-intro:has(> .control-bar) { flex-wrap: wrap; }
.page-intro > .control-bar { margin-bottom: 0; }
.forecast-controls { margin-bottom: 0; }
.forecast-actions { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.bulk-actions { align-items: flex-end; gap: 16px; }
.bulk-action-group { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; }
.bulk-action-group > label { flex: 1 1 180px; max-width: 240px; }
.calendar-month-form { align-items: center; }
.calendar-month-form input { min-width: 0; width: 100%; }
.calendar-month-form button { flex-shrink: 0; padding-inline: 10px; }
.calendar-month-controls > .icon-button { width: var(--control-height); height: var(--control-height); }
@media (min-width: 576px) {
  .filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 992px) {
  .filter-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 575px) {
  .control-bar > label { flex: 1 1 100%; }
  .control-bar > :is(button, .primary-button, .secondary-button) { flex: 1 1 100%; }
  .control-bar > :is(.form-control, .form-select) { flex-basis: 100%; width: 100%; }
  .page-intro > .control-bar { width: 100%; }
  .bulk-action-group { width: 100%; }
  .bulk-action-group > label { max-width: none; }
  .bulk-action-group > .secondary-button { flex: 1 1 100%; }
  .bulk-actions > .secondary-button { width: 100%; }
  .filter-actions > :is(.primary-button, .secondary-button) { flex: 1 1 auto; }
  .calendar-month-controls { align-items: start; }
  .calendar-month-form { flex-wrap: wrap; }
  .calendar-month-form input, .calendar-month-form button { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  .form-select:not([multiple]), .field-group select:not([multiple]) { appearance: auto; background-image: none; }
}

.finance-guide { margin: 24px 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-soft); font-size: var(--font-small); }
.finance-guide > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.finance-guide > summary::-webkit-details-marker { display: none; }
.finance-guide-toggle { flex-shrink: 0; color: var(--muted); font-size: 12px; }
.finance-guide .guide-collapse, .finance-guide[open] .guide-expand { display: none; }
.finance-guide[open] .guide-collapse { display: inline; }
.finance-guide-body { padding: 0 18px 16px; max-width: 900px; line-height: 1.7; }
.finance-guide-body p { margin: 0 0 10px; }
.finance-guide-body p:last-child { margin-bottom: 0; }
@media (max-width: 575px) { .finance-guide > summary { align-items: flex-start; flex-direction: column; gap: 6px; } }

/* Reading rhythm: keep Cyrillic headings open and separate long-form ideas. */
.main-content :is(h1, h2, h3, .card-title) {
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.4;
}
.main-content .page-intro h1 {
  line-height: 1.3;
  margin-bottom: 16px;
}
.page-intro p {
  line-height: 1.8;
}
.main-content :is(.course-card, .article-card, .book-card) p {
  line-height: 1.75;
}

.editorial-body,
article.article {
  padding: clamp(22px, 4vw, 44px);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .01em;
  word-spacing: .03em;
}
:is(.editorial-body, article.article) > :is(section, p, .quiz-form, .lesson-controls) {
  max-width: 64ch;
  margin-inline: auto;
}
:is(.editorial-body, article.article) > section + section {
  margin-top: 2.5em;
}
:is(.editorial-body, article.article) h2 {
  font-size: clamp(23px, 3vw, 28px);
  margin: 0 0 .8em;
}
:is(.editorial-body, article.article) p {
  margin: 0 0 1.15em;
  color: var(--text);
}
:is(.editorial-body, article.article) p:last-child {
  margin-bottom: 0;
}
:is(.editorial-body, article.article) :is(ul, ol) {
  margin: 1.15em 0;
  padding-left: 1.5em;
  color: var(--text);
}
:is(.editorial-body, article.article) li {
  padding-left: .25em;
}
:is(.editorial-body, article.article) li + li {
  margin-top: .7em;
}
:is(.editorial-body, article.article) :is(ul, ol):last-child {
  margin-bottom: 0;
}
.editorial-body .book-takeaways,
article.article :is(.block-callout, .block-warning, .block-example) {
  padding: clamp(18px, 3vw, 28px);
}
article.article .lesson-block {
  margin-bottom: 0;
}
.article-meta {
  margin-block: 0 24px;
  line-height: 1.7;
  font-weight: 500;
}
.main-content :is(.article-side, .lesson-outline, .lesson-assistant) h2,
.app-shell[data-page="lesson"] .col-xl-4 .card-pad > h2 {
  margin-bottom: 18px;
  font-size: 22px;
}
.app-shell[data-page="course"] .card-pad > h2 {
  margin-bottom: 20px;
  font-size: 26px;
}
.app-shell[data-page="course"] .card-pad > h3 {
  margin: 32px 0 14px;
  font-size: 22px;
}
.app-shell[data-page="course"] .card-pad > p {
  margin-bottom: 20px;
  line-height: 1.8;
}
.app-shell[data-page="course"] .card-pad > .primary-button + p {
  margin-top: 16px;
}
.lesson-outline-link {
  padding-block: 12px;
  line-height: 1.65;
}
.lesson-index,
.lesson-arrow {
  flex-shrink: 0;
}
.lesson-link > span:nth-child(2) {
  min-width: 0;
}
.lesson-link strong {
  line-height: 1.6;
  font-weight: 700;
}
.lesson-link small {
  margin-top: 6px;
  line-height: 1.6;
}
.quiz-question {
  margin: 0;
  padding-block: 24px;
}
.quiz-question legend {
  line-height: 1.65;
  font-weight: 700;
}
.quiz-question label {
  padding-block: 6px;
  line-height: 1.7;
}
.explanation-output {
  max-width: 64ch;
  line-height: 1.85;
  letter-spacing: .01em;
}

/* Calculator explanations share the form/result rhythm. */
.calculator-method p { line-height: 1.75; }
.calculator-method h3 { font-size: var(--font-body); margin: 24px 0 8px; }
.calculator-detail .result-number { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.calculator-detail .data-row { gap: 12px; align-items: baseline; }
.calculator-detail .data-row > span { min-width: 0; }
.calculator-detail .data-row > b { flex-shrink: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 575px) {
  .calculator-detail .data-row > b { flex-shrink: 1; }
}