/* ============================================================
   Done.ai — shared UI layer for the brand site.
   The shell every page uses: header, buttons, cards, badges,
   modal, toast, form fields. Pages link this after done.css and
   then declare only what is genuinely their own.

   Component geometry follows the design system: buttons 28/36/48
   at radius full, inputs 36 at radius md, cards at radius xl with
   a border-subtle edge, chips 28 at radius md.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100vh;
  font-family:var(--font-sans);font-weight:400;
  color:var(--color-text-strong);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--brand-wash);background-attachment:fixed;
}
body.locked{overflow:hidden}
::selection{background:var(--color-brand-iris-500);color:var(--color-brand-white)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
input{font:inherit}
img{display:block}

/* ---------- header ----------
   The bar spans the window; its contents sit on the same column as the
   page below, so the mark lines up with the heading and the cards.
   Pages whose content is full-bleed leave --shell-max unset. */
.top{position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border-subtle)}
.top-inner{display:flex;align-items:center;gap:var(--space-400);
  height:64px;width:100%;max-width:var(--shell-max,none);margin:0 auto;
  padding:0 var(--space-500)}
.top-inner>*{flex:0 0 auto;white-space:nowrap}
.top-inner .spacer{flex:1 1 auto}
.brand{display:flex;align-items:center;transition:opacity .14s}
.brand svg{display:block;height:28px;width:auto}
.brand svg path{fill:var(--color-brand-iris-800)}
a.brand:hover{opacity:.62}
a.brand:focus-visible{outline:2px solid var(--color-brand-iris-500);outline-offset:4px;border-radius:var(--radius-sm)}
/* Current page, as plain text after a hairline — not a pill. */
.here{display:inline-flex;align-items:center;gap:var(--space-400);
  font-size:var(--type-body-md-size);line-height:var(--type-body-md-lh);
  letter-spacing:var(--type-body-track);color:var(--color-text-muted)}
.here::before{content:"";width:1px;height:20px;background:var(--color-border-subtle)}

/* ---------- buttons · md (height 36, pad 16, ui-md, radius full) ---------- */
.btn,.tbtn{display:inline-flex;align-items:center;gap:var(--space-200);
  height:36px;padding:0 var(--space-400);border-radius:var(--radius-full);
  font-size:var(--type-ui-md-size);line-height:var(--type-ui-md-lh);letter-spacing:var(--type-body-track);
  border:1px solid transparent;transition:background .14s,color .14s,border-color .14s}
.btn svg,.tbtn svg{width:16px;height:16px}
/* Button style · Text Link: no fill, text.strong. The hover fill is derived —
   the spec's only Text Link hover is an underline, which this site does not use. */
.tbtn{color:var(--color-text-strong)}
.tbtn:hover{background:var(--color-action-secondary-default)}
.tbtn.icon{width:36px;padding:0;justify-content:center}
.tbtn:disabled{opacity:.35;cursor:default}
.tbtn:disabled:hover{background:none;color:var(--color-text-muted)}
.btn{background:var(--color-action-secondary-default);color:var(--color-text-strong)}
.btn:hover{background:var(--color-action-secondary-hover)}
.btn.primary{background:var(--color-action-primary-default);color:var(--color-action-primary-foreground)}
.btn.primary:hover{background:var(--color-action-primary-hover)}
.btn:disabled{opacity:.35;cursor:default}
.btn:focus-visible,.tbtn:focus-visible,.thumb:focus-visible,.seg button:focus-visible{
  outline:2px solid var(--color-brand-iris-500);outline-offset:2px}

/* ---------- page furniture ---------- */
.wrap{max-width:1088px;margin:0 auto;padding:var(--space-700) var(--space-500) var(--space-900)}
/* ---------- hero ----------
   Matches the final screen of northstar-onboarding.html: mark pinned top
   left, heading and intro centred in a 640px column, heading filled with
   the Primary ramp.

   Two values differ from that prototype, both deliberate:
   · 56px / 110% / -2% are the display size and the brand-surface Title
     metrics. The prototype used 58px / 1.1 / -.02em, which is 2px off the
     type ladder and otherwise identical.
   · the intro uses the AA-passing muted tier, not ink-a-600 (4.02:1). */
.mark{position:absolute;top:30px;left:32px;z-index:40;display:inline-flex;transition:opacity .14s}
.mark svg{display:block;height:26px;width:auto}
.mark svg path{fill:var(--color-brand-black)}
a.mark:hover{opacity:.62}
a.mark:focus-visible{outline:2px solid var(--color-brand-iris-500);outline-offset:4px;
  border-radius:var(--radius-sm)}

.hero{max-width:640px;margin:0 auto var(--space-800);padding:0 var(--space-500);text-align:center}
.page-title{font-size:var(--type-display-size);line-height:var(--type-display-lh);
  letter-spacing:-0.02em;font-weight:400;color:var(--color-text-strong)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* padding-bottom keeps the clip from shaving descenders */
  .page-title{background-image:var(--gradient-heading);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;padding-bottom:6px}
}
.page-intro{margin:18px auto 0;max-width:520px;text-wrap:balance;
  font-size:var(--type-heading-sm-size);line-height:1.45;
  color:var(--color-text-muted)}

/* The hero owns the gap beneath it; the first section must not add to it. */
.sec{margin-top:var(--space-700);scroll-margin-top:88px}
.hero + .sec{margin-top:0}
.seclbl{display:flex;align-items:center;gap:var(--space-200);margin-bottom:var(--space-400);
  font-size:var(--type-body-md-size);line-height:var(--type-body-md-lh);letter-spacing:var(--type-body-track);
  font-weight:400;color:var(--color-text-medium)}
.dot{width:6px;height:6px;flex:none;border-radius:var(--radius-full);background:var(--color-brand-iris-500)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-400)}

/* ---------- card ----------
   Figma OS "Apps" 1339:6232. Elevation separates, never shadows or borders:
   an Elevated Highest surface over the tinted page field, blurred behind. */
.card{position:relative;display:flex;flex-direction:column;gap:var(--space-300);width:100%;
  padding:var(--space-400);border-radius:var(--radius-xl);
  background:var(--surface-highest);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);
  transition:transform .16s,background-color .16s}
a.card:hover,button.card:hover{transform:translateY(-2px);background:var(--color-brand-white)}
a.card:hover .act,button.card:hover .act{background:var(--color-action-secondary-hover)}
a.card:focus-visible,button.card:focus-visible{outline:2px solid var(--color-brand-iris-500);outline-offset:2px}
.card.pending{background:var(--surface-low)}
.tile{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  padding:var(--space-300);border-radius:var(--radius-lg);
  color:var(--color-brand-white);background:var(--gradient-primary)}
.card.pending .tile{background:var(--color-fill-strong)}
.txt{display:flex;flex-direction:column;gap:2px}
.t{font-size:var(--type-body-md-size);line-height:var(--type-body-md-lh);
  letter-spacing:var(--type-body-track);color:var(--color-text-strong)}
/* One line, always. Copy is written to fit; this is the guard. */
.d{font-size:var(--type-body-md-size);line-height:var(--type-body-md-lh);
  letter-spacing:var(--type-body-track);color:var(--color-text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{position:absolute;top:var(--space-400);right:var(--space-400);
  display:inline-flex;align-items:center;height:20px;padding:0 var(--space-200);
  border-radius:var(--radius-full);background:var(--color-fill-subtle);
  font-size:var(--type-ui-sm-size);line-height:var(--type-ui-sm-lh);letter-spacing:var(--type-body-track);
  color:var(--color-text-medium)}
.hr{height:1px;background:var(--color-border-subtle)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-300);margin-top:auto}
.meta{font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-lh);
  letter-spacing:var(--type-body-track);color:var(--color-text-muted)}
.act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;
  border-radius:var(--radius-full);background:var(--color-action-secondary-default);
  color:var(--color-text-strong);transition:background .14s}

/* ---------- chip ----------
   Canonical Chip (Figma Components): height 28, padding-x 8, gap 4,
   radius md, ui-sm. Default = border.normal + no fill + text.medium;
   hover = no border + fill.subtle; active = fill.strong + inverse text.
   Its role is selection, filter and toggle — which is what the signature
   version picker and the mail-client tabs both are.

   One deviation: the default border uses dark-alpha-600 rather than
   border.normal, because border.normal measures 1.99:1 on white and the
   border is the only thing identifying an unselected chip (WCAG 1.4.11
   wants 3:1). dark-alpha-600 is the lowest tier that clears it, at 4.02:1. */
.chip-group{display:flex;flex-wrap:wrap;gap:var(--space-200)}
.chip{display:inline-flex;align-items:center;gap:var(--space-100);
  height:28px;padding:0 var(--space-200);border-radius:var(--radius-md);
  font-size:var(--type-ui-sm-size);line-height:var(--type-ui-sm-lh);
  letter-spacing:var(--type-body-track);
  color:var(--color-text-medium);background:none;
  border:1px solid var(--dark-alpha-600);
  transition:background .14s,color .14s,border-color .14s}
.chip:hover{border-color:transparent;background:var(--color-fill-subtle);
  color:var(--color-text-medium)}
.chip[aria-checked="true"],.chip[aria-selected="true"],.chip.on{
  border-color:transparent;background:var(--color-fill-strong);
  color:var(--color-text-inverse-primary)}
.chip:focus-visible{outline:2px solid var(--color-brand-iris-500);outline-offset:2px}
.chip svg{width:16px;height:16px}

/* ---------- form field · input md ---------- */
.lbl{font-size:var(--type-label-size);line-height:var(--type-label-lh);letter-spacing:var(--type-label-track);
  font-weight:600;text-transform:uppercase;color:var(--color-text-muted)}
.field{margin-bottom:var(--space-400)}
.field label{display:block;margin-bottom:var(--space-100);
  font-size:var(--type-label-size);line-height:var(--type-label-lh);letter-spacing:var(--type-label-track);
  font-weight:600;text-transform:uppercase;color:var(--color-text-muted)}
/* Boundary contrast: the spec calls for border.normal here, but that tier
   measures 1.99:1 on white and the border is the only thing identifying the
   field (WCAG 1.4.11 wants 3:1). dark-alpha-600 is the lowest tier that passes,
   at 4.02:1. Revert the two --color-border-normal overrides below if the design
   system resolves this centrally. */
.field input{width:100%;height:36px;padding:0 var(--space-300);
  font-size:var(--type-ui-md-size);line-height:var(--type-ui-md-lh);letter-spacing:var(--type-body-track);
  color:var(--color-text-strong);background:var(--color-brand-white);
  border:1px solid var(--dark-alpha-600);border-radius:var(--radius-md);
  transition:border-color .15s,box-shadow .15s;outline:none}
.field input::placeholder{color:var(--color-text-muted)}
.field input:hover{border-color:var(--color-border-strong)}
/* The Iris focus ring is an accessibility feature — never soften past visibility. */
.field input:focus{border-color:var(--color-action-accent-default);box-shadow:0 0 0 3px var(--color-brand-iris-200)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:var(--space-500)}
.modal[hidden]{display:none}
/* scrim = darkAlpha500, per the system's modal rule */
.modal .scrim{position:absolute;inset:0;background:var(--dark-alpha-500);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal .box{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-300);
  width:min(1000px,calc(100vw - 48px));max-height:calc(100vh - 48px);
  padding:var(--space-500);border-radius:var(--radius-lg);
  background:var(--surface-highest);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);
  animation:rise .2s cubic-bezier(0,0,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal .head{display:flex;align-items:center;gap:var(--space-300)}
.modal h2{font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-lh);
  letter-spacing:var(--type-body-track);font-weight:400;color:var(--color-text-strong)}
.modal .close{margin-left:auto}
.modal .stage{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;
  padding:var(--space-400);border-radius:var(--radius-lg);
  background:var(--color-fill-subtle);overflow:hidden}
.modal .stage img{max-width:100%;max-height:calc(100vh - 340px);width:auto;height:auto;
  object-fit:contain;border-radius:var(--radius-sm)}
.opts{display:flex;gap:var(--space-200)}
.opts[hidden]{display:none}
.thumb{width:64px;height:36px;padding:0;flex:none;border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:0 0 0 1px var(--dark-alpha-600);transition:box-shadow .14s,transform .14s}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{transform:translateY(-1px)}
.thumb.on{box-shadow:0 0 0 2px var(--color-brand-iris-500)}

/* ---------- toast ---------- */
/* deriveByRule · toasts: "status Badge logic on Elevated Highest" —
   an elevated surface carrying the status trio, not an ink pill. */
.toast{position:fixed;bottom:var(--space-500);left:50%;transform:translateX(-50%) translateY(18px);
  display:flex;align-items:center;gap:var(--space-200);
  padding:var(--space-300) var(--space-500);border-radius:var(--radius-full);
  background:var(--surface-highest);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);
  color:var(--color-text-strong);
  font-size:var(--type-ui-md-size);line-height:var(--type-ui-md-lh);letter-spacing:var(--type-body-track);
  opacity:0;transition:opacity .25s,transform .25s;z-index:200;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* status.success.foreground: Green 500 is the Badge *detail* tier and needs a
   status surface behind it — on an Elevated surface it measures only 2.17:1. */
.toast svg{width:16px;height:16px;color:var(--color-green-800)}

@media (max-width:720px){
  .top-inner{padding:0 var(--space-400);gap:var(--space-300)}
  .brand svg{height:24px}
  .wrap{padding:var(--space-500) var(--space-400) var(--space-700)}
  .modal{padding:var(--space-400)}
  .modal .box{padding:var(--space-400);width:100%}
}
@media (prefers-reduced-motion:reduce){
  .modal .box{animation:none}
  *{transition:none!important}
}