/* Legacy shared classes (spec 7.1) and base element rules; plan.html and readiness.html still link this file.
   Owner: foundation. Every value here is a ui-kit token — this file carries no colour of its own, so the two published
   pages and the legacy classes inside the app cannot drift back to the old olive palette (tests/gates.test.mjs gate 3).

   Two legacy names are also kit compatibility classes: statusPill renders "uk-pill status-chip" and kpiTile renders
   "uk-kpi metric-card", because tests read those names. This file loads last, so an unscoped .status-chip or
   .metric-card rule here would repaint every kit pill and KPI tile. Both are scoped with :not() for that reason.

   .form-field rules skip kit fields (.uk-field) so the number, date and yes/no controls that field() and tri() emit keep
   their kit styling inside legacy form grids. A block marked "kept here for the cascade" belongs to a surface file but
   has to load after a legacy rule it overrides; it moves once that surface stops using the legacy class. */

:root{
  font-family:var(--font-sans);color:var(--text-1);background:var(--canvas);font-synthesis:none;
  /* legacy aliases, kept so old rules in surface files keep resolving */
  --ink:var(--text-1);--muted:var(--text-3);--line:var(--border);--green:var(--primary);--soft:var(--green-50);--radius:var(--r-sm);
}

*{box-sizing:border-box}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;border:0;background:none}
button:disabled{cursor:default}
a{color:inherit;text-underline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--green-600);outline-offset:2px}
h1,h2,h3,p{margin-top:0}
h1{font:var(--t-h1);letter-spacing:-.02em;font-variation-settings:"opsz" 32}
h2{font:var(--t-h2);letter-spacing:-.015em;font-variation-settings:"opsz" 32}
h3{font:var(--t-title);letter-spacing:-.006em}
p{line-height:1.6}
textarea{color:var(--text-1)}
svg{display:block}

/* ------------------------------------------------------------------ buttons */
/* One green primary per view (spec 1.3). Everything secondary is white with a hairline. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 15px;border:1px solid var(--primary);border-radius:var(--r-md);background:var(--primary);color:var(--on-accent);font:600 14px/20px var(--font-sans);letter-spacing:-.003em;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(15,90,52,.24)}
.button:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.button:active{background:var(--primary-pressed);border-color:var(--primary-pressed)}
.button.secondary{background:var(--surface);color:var(--text-1);border-color:var(--border-interactive);box-shadow:var(--shadow-xs)}
.button.secondary:hover{background:var(--gray-50);border-color:var(--gray-600)}
.text-button{display:inline-flex;align-items:center;gap:8px;padding:10px 4px;font:var(--t-ui);letter-spacing:-.003em;text-decoration:none}
.text-button:hover{color:var(--link)}
.icon-button{width:36px;height:36px;border:1px solid var(--border-interactive);border-radius:var(--r-md);background:var(--surface);color:var(--text-2);font-size:24px;line-height:1}
.icon-button:hover{background:var(--hover)}

/* ------------------------------------------------------------- page header */
.eyebrow,.small-label{font:var(--t-small);letter-spacing:0;color:var(--text-3);text-transform:none}
.eyebrow{margin-bottom:12px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}
.page-head h1{margin-bottom:12px}
.page-head p{max-width:640px;margin-bottom:0;font:var(--t-body);letter-spacing:-.006em;color:var(--text-2)}
.page-head .button{margin-top:3px}

/* ------------------------------------------------- one page-head shape */
/* Kept here for the cascade. Spec 4.2 gives the product one page header: pageHead(), drawn by .uk-page-head. Four
   surfaces still emit their own head markup from their own file, and a fifth resets the kit's own gaps with
   `.tool-page p{margin:0}` (css/tools.css:6), so the top of the page changed shape on every route — a green eyebrow
   on a stage page, a 40px title in setup, three description measures (560px, 640px and none) and four different
   gaps between eyebrow, title and description.
   Each rule carries only the properties that diverged, so every surface keeps its own phone type scale
   (css/course.css:474, css/onboarding.css:86, css/financial.css:316 all still apply). The kit's opt-in green
   eyebrow (.is-link) is excluded rather than overwritten. Delete a line when its surface starts calling pageHead();
   the head classes named here are the last ones that do not.
   The endpoint, which needs the surface owners: .stage-hero, .financial-head, .funnel-head, .onb-page__head,
   .onb-head and work-ui's .wa-head all become pageHead() calls and these rules go with them. */
.uk-page-head .uk-page-head__eyebrow:not(.is-link),.page-header__eyebrow,.onb-eyebrow,.financial-eyebrow,.funnel-head .page-head .eyebrow{margin:0 0 6px;color:var(--text-3)}
.onb-title{font:var(--t-h1);letter-spacing:-.02em}
.uk-page-head .uk-page-head__title,.funnel-head .page-head h1{margin:0}
.uk-page-head .uk-page-head__lead,.page-header__lead,.onb-subhead,.funnel-head .page-head p{margin:8px 0 0;max-width:640px;color:var(--text-2)}
/* css/financial.css:21 sets margin-top with !important, so only !important can put it back on the shared measure. */
.financial-subtitle{margin-top:8px!important;max-width:640px}
.financial-head,.funnel-head,.onb-page__head,.onb-head{padding-top:8px}

/* --------------------------------------------------------------- surfaces */
.empty{padding:60px 24px;text-align:center;border:1px dashed var(--border);border-radius:var(--r-lg);background:var(--surface-sunken)}
.empty h2{font:var(--t-h2);letter-spacing:-.015em}
.empty p{font:var(--t-body);letter-spacing:-.006em;color:var(--text-3)}
.work-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;margin-bottom:22px;min-width:0}
.work-card h2{font:var(--t-h2);letter-spacing:-.015em;margin:10px 0 14px}
.work-card>p{max-width:680px;font:var(--t-body);letter-spacing:-.006em;color:var(--text-2)}
.work-card>ul{font:var(--t-body);letter-spacing:-.006em;line-height:1.8;color:var(--text-2)}
.work-card>ul li{overflow-wrap:anywhere}
.work-card details{margin:22px 0 15px;border-top:1px solid var(--border);padding-top:17px}
.work-card summary{font:600 14px/20px var(--font-sans);letter-spacing:-.003em;color:var(--text-2);cursor:pointer}
.work-card details>p,.work-card details li{font:var(--t-body);letter-spacing:-.006em;line-height:1.7;color:var(--text-2)}
.work-card details[open] summary{margin-bottom:20px}
.work-card form{margin-top:20px}

/* ------------------------------------------------------------------ forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid>.form-field{margin-bottom:0}
.form-field{display:flex;flex-direction:column;gap:9px;margin-bottom:20px;min-width:0;font:var(--t-ui);font-weight:400;letter-spacing:-.003em;color:var(--text-1)}
.form-field input:where(:not(.uk-field *)),.form-field textarea:where(:not(.uk-field *)){width:100%;min-width:0;padding:12px;border:1px solid var(--border-interactive);border-radius:var(--r-md);background:var(--surface);color:var(--text-1);font:var(--t-input);letter-spacing:-.006em}
.form-field textarea:where(:not(.uk-field *)){resize:vertical;min-height:75px;max-height:450px}
.form-field textarea:where(:not(.uk-field *)):focus-visible{outline:2px solid var(--green-600);outline-offset:2px}
.form-field small{font:var(--t-caption);letter-spacing:0;color:var(--text-3)}
.form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.form-error{margin-bottom:20px;padding:15px 18px;border:1px solid var(--danger-border);border-left:3px solid var(--danger-solid);border-radius:var(--r-md);background:var(--danger-bg);color:var(--danger-text);font:var(--t-body);letter-spacing:-.006em}
.form-error[hidden]{display:none}

/* --------------------------------------------------------- notes and tiles */
.small-copy{margin:16px 0 0;font-size:13px!important;line-height:1.7;color:var(--text-3)}
.storage-note{margin-top:26px;padding-top:16px;border-top:1px solid var(--border);font:var(--t-caption);letter-spacing:0;color:var(--text-3)}
.demo-banner{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:24px;padding:12px 16px;border:1px solid var(--warning-border);border-radius:var(--r-md);background:var(--warning-bg);color:var(--warning-text);font:var(--t-small);letter-spacing:0}
.demo-banner strong{font-size:inherit}
.demo-banner .text-button{margin-left:auto;font-size:inherit}
.priority-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px;padding:17px 20px;border:1px solid var(--green-100);border-radius:var(--r-md);background:var(--green-50);color:var(--green-900);font:var(--t-body);letter-spacing:-.006em;line-height:1.65}
.priority-strip strong{font-weight:600}
.priority-strip a{margin-left:auto;white-space:nowrap}
.inline-warning{padding:12px 15px;border-radius:var(--r-sm);background:var(--warning-bg);color:var(--warning-text);font:var(--t-caption);letter-spacing:0}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* :not(.uk-kpi) / :not(.uk-pill): these two names are also kit compatibility classes, and this file loads last. */
.metric-card:not(.uk-kpi){min-width:0;padding:22px 20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.metric-card:not(.uk-kpi)>span{display:block;min-height:34px;font:var(--t-ui);font-weight:400;letter-spacing:-.003em;color:var(--text-3)}
.metric-card:not(.uk-kpi)>strong{display:block;margin:14px 0;font:var(--t-kpi);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 32;overflow-wrap:anywhere}
.metric-card:not(.uk-kpi)>small{display:block;font:var(--t-caption);letter-spacing:0;color:var(--text-3)}
.status-chip:not(.uk-pill){display:inline-block;margin-right:12px;padding:5px 8px;border:1px solid var(--neutral-border);border-radius:var(--r-xs);background:var(--neutral-bg);color:var(--neutral-text);font:var(--t-caption);letter-spacing:0}
.status-chip:not(.uk-pill).failed{border-color:var(--warning-border);background:var(--warning-bg);color:var(--warning-text)}

/* kept here for the cascade: belongs to css/course.css */
.reader-actions .saved{background:var(--green-50);border-color:var(--green-200)}
/* kept here for the cascade: belongs to css/work.css */
.next-work{border-left:3px solid var(--green-500)}
/* kept here for the cascade: belongs to css/financial.css */
.financial-stage-actions button{font:inherit;background:transparent;border:1px solid var(--border);padding:6px 8px;border-radius:var(--r-xs);cursor:pointer}
/* kept here for the cascade: belongs to css/funnels.css */
.funnel-workspace textarea{min-height:90px}

@media(max-width:1199px){
  .tool-grid{grid-template-columns:1fr}
  .form-grid.three{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .page-head{display:block;margin-bottom:22px;overflow-wrap:anywhere}
  .page-head .button{margin-top:15px}
  .empty{padding:40px 20px}
  .work-card{padding:22px 18px}
  .work-card .button{max-width:100%;white-space:normal}
  .form-grid,.form-grid.three{grid-template-columns:1fr;gap:12px}
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions>.button{flex:auto;width:100%;max-width:100%;white-space:normal}
  .priority-strip{padding:16px;gap:9px}
  .priority-strip a{margin-left:0}
  .demo-banner{gap:8px;padding:12px}
  .demo-banner .text-button{margin-left:0}
  .metric-card:not(.uk-kpi){padding:20px}
  .metric-card:not(.uk-kpi)>span{min-height:0}
  .metric-card:not(.uk-kpi)>strong{margin:8px 0}
}
/* Kept here for the cascade: belongs to css/course.css, and only #actions has a .toolbar. Two things kept the seven
   stage chips at 28px to the touch on a phone while the same kit chips on #library and #tool/funnels measured 44px:
   1. The chip rail asks for 8px of padding-block under a coarse pointer so each 28px chip reaches 44px
      (ui-kit.css, .uk-chips--scroll-phone), and this row clipped it straight back off with overflow:hidden
      (css/course.css:520). Only the vertical clip has to go: the row's children are a horizontal scroller
      (overflow-x:auto, min-width:0) and one fixed chip, so nothing runs off the side without it.
   2. Even unclipped, the two rows are 10px apart, and the small segmented control above extends its own touch area
      10px downwards (ui-kit.css .uk-seg--sm .uk-seg__item::before) from a z-index:1 box. It therefore won the top
      6px of the chips' reach. Two stacked 44px targets need 88px of room, so the rows are given 8px more. */
@media(pointer:coarse) and (max-width:767px){
  .toolbar{gap:18px}
  .toolbar__row--chips{overflow:visible}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}