/* The public site, on the dashboard's own tokens (packages/themes/src/overhand): harbour-fog paper and ink, and one
   colour, signal orange, only for what needs you and for the mark. Geist for every word, headings included; Geist Mono
   for data: times, counts, keys and readouts. Solid panes with a white edge and a soft lift; only the floating bar is
   frosted. Every page is the day's light (.paper); .ink forces the night's dark. The ink scale and the state colours
   (--ink-1…12, --you, --ok, --bad), the faces, radii, motion and surfaces come from system.css, which site/build.ts writes
   from packages/themes/src/system.ts. This file keeps only layout. */
:root {
  /* the pages' names for the system's faces and easing */
  --display: var(--font-body);
  --ui: var(--font-body);
  --mono: var(--font-mono);
  --ease: var(--m-arrive);
  --gutter: max(16px, 4vw);
  /* the reading column */
  --cw: 1180px;
  --zoom: 1;
  --panel-r: 28px; --card-r: var(--radius-pane);
}
.ink, .paper { background: var(--ink-1); color: var(--ink-12); }

* { box-sizing: border-box; margin: 0; }
html { scroll-padding-top: calc(92px * var(--zoom)); -webkit-text-size-adjust: 100%; }
body { background: var(--ink-1); color: var(--ink-12); font: var(--t-body-weight) var(--t-body-size)/var(--t-body-line) var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--ink-12); outline-offset: 3px; }
::selection { background: var(--ink-12); color: var(--ink-1); }
.skip { position: absolute; left: 16px; top: -80px; z-index: 40; background: var(--ink-12); color: var(--ink-1); padding: 10px 14px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(calc(100% - 2 * var(--gutter)), var(--cw)); margin-left: auto; margin-right: auto; }
/* very wide screens: the column grows with the screen instead of floating in it */
@media (min-width: 2400px) { :root { --zoom: 1.5; } .wrap { zoom: 1.5; } }
@media (min-width: 3600px) { :root { --zoom: 2; } .wrap { zoom: 2; } }

/* ---------------------------------------------------------------- type */
h1, .h1 { font: var(--t-display-weight) var(--t-display-size)/var(--t-display-line) var(--font-body); letter-spacing: var(--t-display-track); text-wrap: balance; }
h2, .h2 { font: var(--t-h2-weight) var(--t-h2-size)/var(--t-h2-line) var(--font-body); letter-spacing: var(--t-h2-track); text-wrap: balance; }
h3, .h3 { font: var(--t-h3-weight) var(--t-h3-size)/var(--t-h3-line) var(--font-body); letter-spacing: var(--t-h3-track); text-wrap: balance; }
h4 { font: 600 18px/1.2 var(--font-body); letter-spacing: -.02em; }
.prose, .story { font: 400 clamp(17px, 1.35vw, 19px)/1.55 var(--font-body); color: var(--ink-10); max-width: 34em; }
.prose b, .story b { font-weight: 500; color: var(--ink-12); }
.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: var(--ink-10); max-width: 30em; }
.t { font: var(--t-mono-weight) var(--t-mono-size)/var(--t-mono-line) var(--font-mono); color: var(--ink-10); font-variant-numeric: tabular-nums; letter-spacing: var(--t-mono-track); }
.muted { color: var(--ink-10); }
.fine { margin-top: 14px; font-size: 15px; color: var(--ink-10); }

/* ---------------------------------------------------------------- the mark, and the floating bar (the one frosted surface) */
.mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 21px/1 var(--font-body); letter-spacing: -.025em; text-decoration: none; color: inherit; }
.mark i { width: 11px; height: 11px; background: var(--you-fill); flex: none; }
.bar { position: sticky; top: 12px; z-index: 20; margin-top: 12px; display: flex; align-items: center; gap: 28px; min-height: 64px; padding: 8px 8px 8px 18px; border-radius: 20px;
  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-bar); }
.bar .mark { font-size: 19px; }
.bar nav { display: flex; gap: 14px; margin-left: auto; font-size: 15px; }
.bar nav a { display: flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink-10); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ink-12); }
.bar nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.bar .pill { min-height: 44px; }
@media (max-width: 640px) { .bar nav { display: none; } .bar .pill { margin-left: auto; } }

/* ---------------------------------------------------------------- controls: pills; the primary is ink, the answer is the one orange */
.pill { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 500 15px/1 var(--font-body); color: var(--ink-12); background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-6), var(--shadow-pill);
  transition: transform var(--m-base) var(--m-arrive); }
.pill:hover { transform: translateY(-1px); text-decoration: none; }
.pill:focus-visible { outline: 2px solid var(--ink-12); outline-offset: 3px; }
.pill.dark { background: var(--ink-12); color: var(--ink-1); box-shadow: var(--shadow-pill-dark); }
.pill .arr { font-size: 17px; line-height: 1; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; }
/* outlined buttons (the prototypes) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ink-12);
  background: transparent; color: var(--ink-12); font: 500 16px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--m-instant), color var(--m-instant); }
.btn:hover { background: var(--ink-12); color: var(--ink-1); text-decoration: none; }
.btn.primary { background: var(--ink-12); color: var(--ink-1); }
.btn.primary:hover { background: var(--ink-11); border-color: var(--ink-11); }
.btn.answer { background: var(--you-fill); color: var(--you-ink); border-color: var(--you-fill); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- panes, their heads and kickers (a time from the sample morning, then words) */
main { padding-bottom: clamp(32px, 6vh, 72px); }
.panel { border-radius: var(--panel-r); padding: clamp(22px, 4vw, 52px); margin-top: clamp(16px, 2.4vw, 28px); background: var(--pane);
  box-shadow: var(--glass-lift), 0 0 0 1px var(--glass-edge); }
section[id], article[id] { scroll-margin-top: 92px; }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(22px, 3vw, 34px); }
.head > div { display: grid; gap: 10px; }
.head p { color: var(--ink-10); font-size: clamp(16px, 1.25vw, 18px); max-width: 34em; }
.kicker { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ink-10); }
.kicker time { font: 500 14px/1 var(--font-mono); color: var(--ink-12); padding: 5px 8px; border-radius: 8px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-6); }
/* a page's opening pane */
.intro { display: grid; gap: 18px; }
.intro h1 { max-width: 13em; }
/* the shore strip (_partials/shore.html): the harbour at the page's hour, a quiet header above the opening words */
canvas.shore { display: block; width: 100%; height: clamp(84px, 12vw, 168px); border-radius: 14px; }

/* ---------------------------------------------------------------- cards */
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* one column that may shrink: a long command or name scrolls inside the card instead of widening it */
.card { border-radius: var(--card-r); padding: clamp(20px, 2.2vw, 28px); background: var(--white); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; box-shadow: inset 0 0 0 1px var(--ink-6); }
.card .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-6); }
.card .ico svg { width: 22px; height: 22px; stroke: var(--ink-12); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card p { color: var(--ink-10); }
.card q { quotes: none; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--ink-2); font-size: 15px; line-height: 1.4; }
.card q small { font-size: 13px; color: var(--ink-10); }
.card .small { font-size: 14px; color: var(--ink-10); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
/* a still of the real dashboard, inside a card */
.still { border-radius: 14px; overflow: hidden; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-6); display: grid; place-items: center; padding: 12px; }
.still img { border-radius: 10px; box-shadow: var(--shadow-still); max-height: 300px; width: auto; }
.still.full { padding: 0; }
.still.full img { border-radius: 0; box-shadow: none; max-height: none; width: 100%; }
/* what a plan or a feature includes: a quiet list, a "coming" item says so in words */
.list { list-style: none; padding: 0; display: grid; gap: 8px; align-content: start; }
.list li { position: relative; padding-left: 18px; color: var(--ink-10); font-size: 15px; }
.list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--ink-12); }
.list li.soon::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-9); }
.soon-note { color: var(--ink-10); font-size: 13px; }

/* ---------------------------------------------------------------- your rules, as an instrument (rules.js): a row per project, a switch for its mode */
.rules { display: grid; gap: 10px; }
.row { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(0, 1.3fr); gap: 12px 20px; align-items: center; padding: 12px 12px 12px 20px; border-radius: var(--card-r); background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-6); }
.row .who { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: -.01em; }
.row .who i { width: 10px; height: 10px; border-radius: 2px; background: var(--ink-12); }
.row[data-mode="watch"] .who i { background: var(--ink-8); }
.row[data-mode="propose"] .who i { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-12); }
.row .means { color: var(--ink-10); font-size: 15px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-6); }
.seg button { all: unset; cursor: pointer; padding: 9px 14px; border-radius: 999px; font-size: 14px; color: var(--ink-10); white-space: nowrap; }
.seg button:focus-visible { outline: 2px solid var(--ink-12); outline-offset: 3px; }
.seg button[aria-pressed="true"] { background: var(--white); color: var(--ink-12); box-shadow: var(--shadow-seg); }
.row.fixed .seg button { cursor: default; }
.row.quiet .seg button[aria-pressed="true"] { background: var(--ink-12); color: var(--ink-1); }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; padding: 16px; } .seg { justify-self: start; } }
/* in a narrow column (a chapter or a step), the row always stacks */
.narrow .row { grid-template-columns: 1fr; padding: 14px 16px; }
.narrow .seg { justify-self: start; }

/* ---------------------------------------------------------------- a live piece of the dashboard (pieces.js), on sample data */
.piece { min-height: 160px; border-radius: 22px; background: var(--ink-2); transition: background-color var(--m-base); }
.piece[data-ready] { min-height: 0; background: none; }
.piece iframe { border-radius: 22px; }
/* an illustration made of the product's own shapes: who runs on what */
.illus { list-style: none; padding: 0; display: grid; gap: 8px; }
.illus li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-6); }
.illus b { grid-column: 1; font-weight: 600; letter-spacing: -.01em; }
.illus span { grid-column: 1; font-size: 14px; color: var(--ink-10); }
.illus em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font: 500 13px/1 var(--font-mono); color: var(--ink-12); padding: 6px 9px; border-radius: 999px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-6); }

/* ---------------------------------------------------------------- long text: pricing notes, contact, the legal pages */
.doc { display: grid; gap: 18px; }
.doc > * { max-width: 68ch; }
.doc h1 { margin-bottom: 4px; }
.doc h2 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 18px; }
.doc p, .doc li { color: var(--ink-11); }
.doc ul { display: grid; gap: 8px; padding-left: 1.1em; }
.doc strong { color: var(--ink-12); font-weight: 600; }
.draft { justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-6); font-size: 14px; color: var(--ink-11); }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--hair); margin-top: clamp(24px, 4vw, 48px); padding-top: 32px; padding-bottom: 48px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot p { color: var(--ink-10); font-size: 15px; max-width: 32ch; margin-top: 4px; }
.foot nav { display: grid; align-content: start; }
.foot nav h2 { font: 600 15px/1 var(--font-body); letter-spacing: -.01em; margin-bottom: 8px; }
.foot nav a { display: flex; align-items: center; min-height: 36px; color: var(--ink-11); text-decoration: none; font-size: 15px; }
.foot nav a:hover, .foot nav a[aria-current="page"] { color: var(--ink-12); text-decoration: underline; }
.foot .legal { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 13px; max-width: none; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } .foot .brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }