/* styles.css — Trust Distributions Worksheet, on top of Broadsheet.
 *
 * Broadsheet (broadsheet.css) owns every colour, font and spacing token; this
 * file only lays out the page. Its bare headings all resolve to 15px, so the
 * display scale is set here — as the design specifies it, in clamp() so the
 * hero survives a phone.
 *
 * Mobile is the primary case: a client writing long-form on a sofa. The one
 * rule that must not bend is that the save state stays on screen, so the rail
 * is sticky and everything else scrolls under it.
 */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* ---- head furniture ------------------------------------------------------ */
.ws-rail {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-bg);
  padding: 0 var(--space-6);
}
.ws-rule-thick { height: 2px; background: var(--color-text); }
.ws-rule-thin  { height: 1px; background: var(--color-text); margin-top: 3px; }
.ws-rail .ws-rule-thin:last-of-type { margin-top: 0; }
.ws-dateline {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  padding: .55rem 0;
  max-width: 40rem; margin: 0 auto; width: 100%;
}
.ws-state { font-variant-numeric: tabular-nums; }
.ws-state.err { font-weight: 700; color: var(--color-accent-2); }
@keyframes ws-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.ws-state.saving { animation: ws-pulse 1.2s ease-in-out infinite; }

/* The failed-save explanation sits inside the sticky block, so a client who is
   still typing cannot miss it. */
.ws-errorline {
  max-width: 40rem; margin: 0 auto; padding: var(--space-2) 0 var(--space-3);
  font-size: .9375rem; line-height: 1.5; max-width: 56ch;
  color: var(--color-accent-2-900);
}
.ws-errorline a { color: var(--color-accent-700); }

.ws-staffbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-accent-2-100); color: var(--color-accent-2-900);
  padding: var(--space-2) var(--space-4);
  font-size: .9375rem; text-align: center;
}

/* ---- column -------------------------------------------------------------- */
.ws-col { max-width: 40rem; margin: 0 auto; padding: 0 var(--space-6) 6rem; }

.ws-hero {
  font-family: var(--font-heading);
  font-size: clamp(42px, 7vw, 58px); line-height: 1.08; letter-spacing: -.02em;
  margin: var(--space-8) 0 var(--space-4); margin-left: -.035em;
}
.ws-hero span { display: block; }
.ws-hero-sm { font-size: clamp(38px, 6vw, 52px); }
.ws-slug {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--space-3) 0 var(--space-8);
}
.ws-open p { font-size: 1.125rem; line-height: 1.65; max-width: 52ch; margin: 0 0 var(--space-3); }
.ws-open-note { font-size: 1.0625rem !important; font-style: italic; color: var(--color-neutral-800); margin-bottom: 4rem !important; }
.ws-lede { font-size: 1.125rem; line-height: 1.65; max-width: 48ch; margin: 0 0 var(--space-3); }
.ws-plain { padding-bottom: 6rem; }

/* ---- a section ----------------------------------------------------------- */
.ws-sec { margin: 0 0 4rem; }
.ws-sec-head { display: grid; grid-template-columns: 2.75rem 1fr; align-items: baseline; }
.ws-num { font-variant-numeric: tabular-nums; font-size: 1.375rem; color: var(--color-accent-700); }
.ws-title { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.2; margin: 0; }
.ws-body { padding-left: 2.75rem; }
.ws-q { font-style: italic; font-size: 1.0625rem; line-height: 1.55; color: var(--color-neutral-800); margin: var(--space-2) 0 var(--space-3); }

.ws-extoggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .9375rem;
  color: var(--color-accent-700);
}
.ws-extoggle:hover { color: var(--color-accent-600); text-decoration: underline; }
.ws-ex { margin: var(--space-3) 0 0; display: flex; flex-direction: column; gap: 15px; }
.ws-ex p { font-style: italic; font-size: 1rem; line-height: 1.65; color: var(--color-neutral-800); max-width: 54ch; margin: 0; }
.ws-ex-cap { font-size: .875rem; color: var(--color-neutral-600); font-style: normal !important; }

/* Broadsheet ships `textarea.input { min-height: 90px }`, which outranks a bare
   class — hence the element-qualified selector, so the design's 8.5rem wins. */
textarea.ws-ta {
  width: 100%; box-sizing: border-box; margin-top: var(--space-3);
  min-height: 8.5rem; field-sizing: content; resize: vertical;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
}
.ws-count { font-size: .875rem; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; margin: var(--space-1) 0 0; }
.ws-over { font-size: .9375rem; line-height: 1.5; color: var(--color-accent-2-900); margin: var(--space-1) 0 0; max-width: 56ch; }

/* The eleventh section changes subject — it restrains rather than supports —
   so the design gives it a break rather than letting it read as item 11. */
.ws-movement { margin: 5rem 0 4rem; }
.ws-movement h2 { font-family: var(--font-heading); font-size: 1.75rem; line-height: 1.15; margin: 0 0 var(--space-3); }
.ws-movement p { max-width: 52ch; margin: 0; }

.ws-close { margin-top: 5rem; }
.ws-close h2 { font-family: var(--font-heading); font-size: 1.75rem; line-height: 1.15; margin: 0 0 var(--space-3); }
.ws-close p { font-size: 1.0625rem; line-height: 1.65; max-width: 52ch; margin: 0 0 var(--space-4); }
.ws-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* Client decision: buttons are pills, overriding the system's 2px radius.
   Buttons only — nothing else in the design rounds. */
.ws-pill { border-radius: 999px; }
a.ws-pill { text-decoration: none; display: inline-block; }

@media (max-width: 640px) {
  .ws-col, .ws-rail { padding-left: var(--space-4); padding-right: var(--space-4); }
  .ws-body { padding-left: 0; }
  .ws-sec-head { grid-template-columns: 2.25rem 1fr; }
}