/* firma.css: firma's shared look, "a contemporary company ledger": warm
   paper, ink, one deep green for actions. Every page links it first, then its
   own stylesheet (site.css, start.css, office.css).

   How it cascades:
   - The tokens (custom properties on :root, light and dark) are plain.
   - [hidden] and .sr-only are plain too, so nothing can undo them.
   - Everything else is in the `firma` cascade layer. Unlayered page CSS beats
     it wherever the page sets the same property, whatever the specificity:
     office.css keeps its look until it chooses firma's. The flip side: a
     page rule on an element (say `button { background: … }`) also beats
     firma's class rules for that property (`button.primary`), so restyle
     components by class, or leave the property to firma.
   - Nothing here loads from elsewhere: the pages' CSP allows only 'self'. */

:root {
  color-scheme: light dark;

  /* Colour: Astra's pairs (each text/fill pair checked for contrast). */
  --page: #f5f4ef;
  --surface: #ffffff;
  --surface-subtle: #efeee9;
  --text: #202820;
  --text-secondary: #626b63;
  --divider: #dddfd7;          /* decoration only */
  --control-border: #858b84;   /* what makes a control visible */
  --primary: #244d40;
  --primary-hover: #19392f;
  --on-primary: #ffffff;
  --selected: #e6efe8;
  --focus: #315fd6;
  --success: #246443;
  --success-fill: #e8f2eb;
  --attention: #8a4b08;
  --attention-fill: #fbf0dd;
  --error: #ac342f;
  --error-fill: #fcece9;

  /* Type: system fonts only. The serif is for document-like titles. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Iowan Old Style", Charter, Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --fs-1: 0.8125rem; /* 13px: metadata */
  --fs-2: 0.875rem;  /* 14px: compact UI */
  --fs-3: 1rem;      /* 16px: body and inputs */
  --fs-4: 1.25rem;   /* 20px: section titles */
  --fs-5: 1.75rem;   /* 28px: page titles */
  --fs-6: clamp(2.5rem, 1.875rem + 2.5vw, 3.5rem); /* 40–56px: the landing headline */

  /* Space */
  --sp-1: 0.25rem; /* 4 */
  --sp-2: 0.5rem;  /* 8 */
  --sp-3: 0.75rem; /* 12 */
  --sp-4: 1rem;    /* 16 */
  --sp-5: 1.5rem;  /* 24 */
  --sp-6: 2rem;    /* 32 */
  --sp-7: 3rem;    /* 48 */
  --sp-8: 4rem;    /* 64 */

  /* Shape, depth, motion */
  --r-control: 8px;
  --r-card: 12px;
  --r-dialog: 16px;
  --r-pill: 999px;
  --shadow-overlay: 0 12px 40px rgb(0 0 0 / 0.14);
  --dur-fast: 120ms;  /* control feedback */
  --dur-panel: 180ms; /* panels opening */
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #171b18;
    --surface: #202621;
    --surface-subtle: #282f29;
    --text: #edf1ea;
    --text-secondary: #aab3aa;
    --divider: #394239;
    --control-border: #777f78;
    --primary: #9fcbb5;
    --primary-hover: #b5dac7;
    --on-primary: #15231c;
    --selected: #293e32;
    --focus: #a6bbff;
    --success: #95d3ac;
    --success-fill: #203429;
    --attention: #edbf77;
    --attention-fill: #342918;
    --error: #f0a099;
    --error-fill: #3a2324;
    --shadow-overlay: 0 12px 40px rgb(0 0 0 / 0.35);
  }
}

/* On paper: ink on white, whatever the screen's scheme. */
@media print {
  :root {
    color-scheme: light;
    --page: #ffffff;
    --surface: #ffffff;
    --surface-subtle: #f3f2ee;
    --text: #111611;
    --text-secondary: #4d554e;
    --divider: #cfd2c9;
    --control-border: #858b84;
    --primary: #244d40;
    --on-primary: #ffffff;
    --selected: #e6efe8;
  }
}

[hidden] { display: none !important; }

/* Read by screen readers, not shown. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@layer firma {
  /* ---------------------------------------------------------------- Base */

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-3);
    line-height: 1.55;
  }
  h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; text-wrap: balance; }
  h1 { letter-spacing: -0.015em; }
  h3, h4 { line-height: 1.3; }
  strong, b { font-weight: 600; }
  a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  a:hover { text-decoration-thickness: 2px; }
  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

  /* Controls: 16px text in fields, so phones don't zoom in on them. */
  button, input, select, textarea { font: inherit; color: inherit; }
  button {
    font-size: var(--fs-3);
    font-weight: 600;
    line-height: 1.5;
    /* 44px tall: 24 + 2 × 9 + 2 × 1. Padding, not min-height, so a page
       that sets its own padding (the office) keeps its size. */
    padding: calc(var(--sp-2) + 1px) var(--sp-4);
    border: 1px solid var(--control-border);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  button:not(:disabled):hover { background: var(--surface-subtle); border-color: var(--text-secondary); }
  button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  button.primary:not(:disabled):hover { background: var(--primary-hover); border-color: var(--primary-hover); }
  button.quiet { background: transparent; border-color: transparent; }
  button.quiet:not(:disabled):hover { background: var(--surface-subtle); border-color: transparent; }
  /* Danger: error text and a boundary; filled (with .primary) for the final confirmation. */
  button.danger { color: var(--error); border-color: var(--error); }
  button.danger:not(:disabled):hover { background: var(--error-fill); border-color: var(--error); }
  button.primary.danger { background: var(--error); border-color: var(--error); color: var(--on-primary); }
  button.primary.danger:not(:disabled):hover { background: var(--error); border-color: var(--error); }
  button.small { font-size: var(--fs-2); line-height: 1.4; padding: var(--sp-1) var(--sp-3); }
  button.link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
  button.link:not(:disabled):hover { background: none; text-decoration-thickness: 2px; }
  button:disabled { opacity: 0.5; cursor: not-allowed; }

  /* A link that does what a button does (open an office). */
  a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--control-border);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  a.button:hover { background: var(--surface-subtle); border-color: var(--text-secondary); }
  a.button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  a.button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: var(--fs-3);
    line-height: 1.5;
    padding: calc(var(--sp-2) + 1px) var(--sp-3);
    border: 1px solid var(--control-border);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease);
  }
  input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: var(--text-secondary); }
  input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
  textarea { resize: vertical; }
  [aria-invalid="true"] { border-color: var(--error) !important; }

  /* ---------------------------------------------------------- Utilities */

  .muted { color: var(--text-secondary); }
  .small { font-size: var(--fs-1); }
  .error { color: var(--error); }
  .help { margin: 0; color: var(--text-secondary); font-size: var(--fs-2); }
  .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  /* The serif, for document titles: at its regular weight, like print. */
  .serif { font-family: var(--font-serif); font-weight: 400; }
  /* A short label above a title ("Example", "This week's move"). Never uppercase. */
  .kicker { margin: 0; color: var(--text-secondary); font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.01em; }

  /* ---------------------------------------------------------- Components */

  /* Cards: one surface, no shadow, no nesting. */
  .card {
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--r-card);
    padding: var(--sp-5);
  }

  /* Badges spell out a state. Planned is neutral; amber (warn) means attention. */
  .badge {
    display: inline-block;
    padding: 0.0625rem var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--surface-subtle);
    font-size: var(--fs-1);
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
  }
  .badge.good { background: var(--success-fill); color: var(--success); }
  .badge.warn { background: var(--attention-fill); color: var(--attention); }
  .badge.bad { background: var(--error-fill); color: var(--error); }
  .badge.info { background: var(--selected); color: var(--primary); }
  .badge.ro { background: transparent; border: 1px solid var(--divider); color: var(--text-secondary); }
  /* firma's label is "PLANNED": shown as "Planned", read and copied as written. */
  .badge.planned {
    background: transparent;
    border: 1px solid var(--control-border);
    color: var(--text-secondary);
    text-transform: lowercase;
  }
  .badge.planned::first-letter { text-transform: uppercase; }

  /* A form field: label, control, then help or error text (aria-describedby). */
  .field { display: grid; gap: var(--sp-2); }
  .field > label { font-weight: 600; }
  .field > .help { margin-top: calc(-1 * var(--sp-1)); }
  /* Why a field needs fixing: right under it, and named in its aria-describedby. */
  .field-error { margin: 0; color: var(--error); font-size: var(--fs-2); font-weight: 600; }
  .field > input:not([type="checkbox"]):not([type="radio"]), .field > textarea, .field > select { width: 100%; }

  /* Choices: native radios (one answer) or checkboxes (several), drawn as
     44px tiles with a visible check. The input covers its tile, so a tap
     anywhere picks it, and the keyboard works as it does for any radio group. */
  .choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
    border: 1px solid var(--control-border);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .choice:hover { border-color: var(--text-secondary); background: var(--surface-subtle); }
  .choice > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .choice-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--control-border);
    border-radius: 50%;
    background: var(--surface);
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .choice > input[type="checkbox"] + .choice-mark { border-radius: 4px; }
  .choice-mark::after {
    content: "";
    width: 0.5625rem;
    height: 0.3125rem;
    margin-top: -0.125rem;
    border-left: 2px solid var(--on-primary);
    border-bottom: 2px solid var(--on-primary);
    transform: rotate(-45deg);
    opacity: 0;
  }
  .choice > input:checked + .choice-mark { background: var(--primary); border-color: var(--primary); }
  .choice > input:checked + .choice-mark::after { opacity: 1; }
  .choice:has(> input:checked) { background: var(--selected); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
  .choice:has(> input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
  .choice:has(> input:disabled) { opacity: 0.5; cursor: not-allowed; }

  /* Flashes: an inline line that stays until it's dealt with. */
  .flash {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--divider);
    border-radius: var(--r-control);
    background: var(--surface-subtle);
    color: var(--text);
  }
  .flash.good { background: var(--success-fill); border-color: transparent; color: var(--success); }
  .flash.warn { background: var(--attention-fill); border-color: transparent; color: var(--attention); }
  .flash.bad { background: var(--error-fill); border-color: transparent; color: var(--error); }
  .flash.info { background: var(--selected); border-color: transparent; color: var(--text); }

  /* Empty states: what belongs here, and the next step. */
  .empty {
    display: grid;
    gap: var(--sp-2);
    justify-items: start;
    padding: var(--sp-5);
    border-radius: var(--r-card);
    background: var(--surface-subtle);
    color: var(--text-secondary);
  }
  .empty > strong { color: var(--text); }

  /* Loading: says what's happening; reserves its line. */
  .loading { margin: 0; min-height: 1.55em; color: var(--text-secondary); }

  /* Progress without a number: a calm sweep for "working, no end known".
     Never a fake percentage; with reduced motion it isn't drawn at all. */
  .progress {
    position: relative;
    height: 3px;
    border-radius: var(--r-pill);
    background: var(--divider);
    overflow: hidden;
  }
  .progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 32%;
    border-radius: inherit;
    background: var(--primary);
    animation: firma-sweep 2.6s var(--ease) infinite;
  }

  /* The step line: Mission → Questions → Plan. The page marks the current
     step with aria-current="step" and finished ones with .done. */
  .steps ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: var(--fs-2);
  }
  .steps li { display: flex; align-items: center; gap: var(--sp-2); }
  .steps li + li::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: var(--control-border);
  }
  .steps-n {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--control-border);
    border-radius: 50%;
    font-size: var(--fs-1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .steps li[aria-current="step"] { color: var(--text); font-weight: 600; }
  .steps li[aria-current="step"] .steps-n { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  .steps li.done { color: var(--text); }
  /* A finished step's number gives way to a check. */
  .steps li.done .steps-n { border-color: var(--primary); background: var(--selected); font-size: 0; }
  .steps li.done .steps-n::after {
    content: "";
    width: 0.5625rem;
    height: 0.3125rem;
    margin-top: -0.125rem;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
  }

  /* Lists */
  .bullets { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--sp-1); }
  .bullets > li::marker { color: var(--text-secondary); }
  .ruled { margin: 0; padding: 0; list-style: none; }
  .ruled > li { padding: var(--sp-3) 0; }
  .ruled > li + li { border-top: 1px solid var(--divider); }

  /* Documents (the first plan, the example brief): one card, its parts ruled apart. */
  .doc { padding: 0; }
  .doc-part { padding: var(--sp-5) var(--sp-6); }
  .doc-part + .doc-part { border-top: 1px solid var(--divider); }

  /* A plan's roles, each with its state badge. */
  .roles { margin: 0; padding: 0; list-style: none; }
  .roles > li { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; }
  .roles > li + li { border-top: 1px solid var(--divider); }
  .roles > li:first-child { padding-top: 0; }
  .roles > li:last-child { padding-bottom: 0; }
  .role-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
  .role-head > * { margin: 0; font-size: var(--fs-3); }
  .role-head > .badge { font-size: var(--fs-1); }

  /* A draft to use, quoted as written. */
  .draft {
    margin: 0;
    padding: var(--sp-4) var(--sp-5);
    border-left: 3px solid var(--control-border);
    border-radius: 0 var(--r-control) var(--r-control) 0;
    background: var(--surface-subtle);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* A numbered run of days: a rule down the left, a dot per day. */
  .timeline { margin: 0; padding: 0; list-style: none; display: grid; }
  .timeline > li {
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  }
  .timeline > li::before {
    content: "";
    position: absolute;
    left: 0.3125rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--divider);
  }
  .timeline > li:first-child::before { top: 1.25rem; }
  .timeline > li:last-child::before { bottom: calc(100% - 1.25rem); }
  .timeline > li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 0.6875rem;
    height: 0.6875rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: var(--surface);
  }
  .timeline-day { font-weight: 600; font-variant-numeric: tabular-nums; }

  /* The frame shared by the public pages: masthead and footer. */
  .masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4);
  }
  .wordmark {
    color: var(--text);
    font-size: var(--fs-4);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
  }
  a.wordmark:hover { color: var(--primary); }
  .site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    align-items: baseline;
    padding: var(--sp-5) var(--sp-4) var(--sp-7);
    border-top: 1px solid var(--divider);
    color: var(--text-secondary);
    font-size: var(--fs-2);
  }
  .site-footer a { color: var(--text-secondary); }
  .site-footer a:hover { color: var(--text); }

  @media (max-width: 600px) {
    .card { padding: var(--sp-4); }
    .doc { padding: 0; }
    .doc-part { padding: var(--sp-4); }
    .timeline > li { grid-template-columns: minmax(0, 1fr); }
  }
  /* The narrowest phones: the step line stays on one line. */
  @media (max-width: 360px) {
    .steps ol, .steps li { gap: 0.375rem; }
    .steps ol { font-size: var(--fs-1); }
    .steps li + li::before { width: 0.75rem; }
  }

  /* Forced colours (Windows High Contrast): fills are dropped, so the chosen
     tile and the current step are marked in the system's own colours. */
  @media (forced-colors: active) {
    .choice:has(> input:checked) { border-color: Highlight; outline: 1px solid Highlight; outline-offset: -3px; }
    .choice > input:checked + .choice-mark { background: Highlight; border-color: Highlight; }
    .choice > input:checked + .choice-mark::after { border-color: HighlightText; }
    .steps li[aria-current="step"] .steps-n { background: Highlight; border-color: Highlight; color: HighlightText; }
    .progress::after { background: Highlight; }
  }

  /* Reduced motion: no movement and no pulsing, anywhere. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition-duration: 0s !important;
      scroll-behavior: auto !important;
    }
    .progress { display: none; }
  }
}

@keyframes firma-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(315%); }
}