/* ─────────────────────────────────────────────────────────────────────────
   Plato — website stylesheet
   Palette: "Attic" (WEBSITE.md section 4)
   Type:    Newsreader / IBM Plex Sans / IBM Plex Mono (section 5)

   Dark is the primary theme. Light is built to be correct, not an afterthought.
   ───────────────────────────────────────────────────────────────────────── */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* the Attic palette, exactly as named in the brief */
  --ink:         #0C1113;   /* dark page ground — near-black, faint blue-green cast */
  --surface:     #141B1E;   /* raised panels and cards */
  --paper:       #EEF1F0;   /* light page ground — cool paper, not cream */
  --accent:      #3FC1D4;   /* the owl's eye. the only bright thing on the page */
  --accent-deep: #0E7C8C;   /* the same accent for light mode and text on paper */
  --olive:       #8A9A5B;   /* the olive sprig. used ONCE, in the rule below */

  --owl-ink: currentColor;
  --owl-accent: var(--accent);
}

/* ── dark (primary) ─────────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
  --ground:      var(--ink);
  --panel:       var(--surface);
  --text:        #EDF2F1;
  --text-soft:   #B9C6C8;   /* raised for contrast on the dark ground */
  --text-faint:  #7E8F92;
  --rule:        #223035;
  --rule-strong: #33474D;
  --link:        var(--accent);
  --code-bg:     #101819;
  --code-text:   #D6E6E8;
  --accent-text: var(--accent);
  --owl-accent:  var(--accent);
}

/* ── light ──────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --ground:      var(--paper);
  --panel:       #FFFFFF;
  --text:        #10181A;
  --text-soft:   #3F5257;
  --text-faint:  #5D7075;
  --rule:        #D3DBD9;
  --rule-strong: #B6C3C0;
  --link:        #0B6A78;
  /* The accent on paper. The brief's --accent-deep (#0E7C8C) measures 4.32:1 on
     --paper, just under AA for normal text, and the eyebrow label is small text.
     #0B6A78 is the same blue-green family at 5.52:1, so the identity is kept and
     the contrast passes. See HANDOFF.md "contrast". */
  --accent-text: #0B6A78;
  --code-bg:     #E4EAE8;
  --code-text:   #16333A;
  --owl-accent:  var(--accent-deep);
}

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.wrap.narrow { max-width: 760px; }

/* running text stays near 65 characters */
p, li, blockquote, figcaption { max-width: 68ch; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--panel); color: var(--text);
  padding: 10px 16px; z-index: 100; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ── type ───────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 500; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }

.sec-title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  letter-spacing: -0.02em;
  margin-bottom: .6em;
}
.sec-title.spaced { margin-top: 2.4em; }

.sec-lede {
  font-size: 1.08rem;
  color: var(--text-soft);
  margin: 0 0 2.2em;
}

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1.4em;
}

code, pre, .ui {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  font-variant-numeric: tabular-nums;
}
code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: .12em .42em;
  border-radius: 4px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
pre {
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0;
}
pre code { background: none; border: 0; padding: 0; white-space: pre; }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.head-inner {
  display: flex; align-items: center; gap: 28px;
  min-height: 66px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--text);
  font-weight: 600; letter-spacing: -0.01em;
}
.brand-name { font-size: 1.05rem; }

/* The mark sits on its own tile. On the dark ground the owl's ink head is the
   same value as the page, so without a ground of its own the head vanishes and
   only the eyes read. The tile gives the silhouette something to sit against,
   in both themes. This is the treatment validated for the favicon (see
   ASSETS-BRIEF.md). */
.brand-mark,
.foot-mark {
  display: grid; place-items: center;
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  flex: none;
}
.brand-mark { width: 34px; height: 34px; }
.foot-mark  { width: 30px; height: 30px; border-radius: 7px; }

.site-nav { display: flex; gap: 26px; margin-left: auto; }
.site-nav a {
  color: var(--text-soft); text-decoration: none;
  font-size: .9rem; padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--text); border-bottom-color: var(--accent-text); }

.theme-toggle {
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--panel); color: var(--text-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font-weight: 500;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent-text); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

@media (max-width: 880px) {
  .site-nav { display: none; }
  .head-inner { justify-content: space-between; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { padding: clamp(64px, 9vw, 128px) 0 clamp(48px, 6vw, 80px); }
.hero-inner { max-width: 1120px; }

.hero-title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 1.3rem + 4.6vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 .5em;
  max-width: 19ch;
}
.hero-title em {
  font-style: italic;
  color: var(--accent-text);
}

.hero-lede {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem);
  color: var(--text-soft);
  max-width: 54ch;
  margin: 0 0 1.6em;
}
.hero-maker { color: var(--text-faint); font-size: .95rem; margin: 0 0 3em; }
.hero-maker strong { color: var(--text); font-weight: 600; }

/* ── screenshots ────────────────────────────────────────────────────────── */
/* Every shot is captured at a width close to the size it is displayed, so the
   UI text inside stays at ~100% and can be read without zooming. A capture
   scaled down to 40% is decorative; it shows nothing. */
.shot { margin: 0; }
.shot-frame {
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 8px 24px -12px rgb(0 0 0 / .45);
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot figcaption {
  margin-top: 12px;
  font-size: .88rem;
  color: var(--text-soft);
}
/* Figures share one column width and one aspect ratio, so a row of them sits
   level. Shots are re-cropped to 16:10 to make that possible. */
.shot-row, .shot-pair {
  display: grid;
  gap: 28px;
  margin-top: 32px;
}
.shot-row figure, .shot-pair figure { display: flex; flex-direction: column; }
.shot-row figure .shot-frame, .shot-pair figure .shot-frame {
  aspect-ratio: 16 / 10;
  display: flex;
}
.shot-row figure .shot-frame img,
.shot-pair figure .shot-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
/* A single wide shot reads best near full column width but never stretched
   past its capture width, or the text inside blurs. */
.shot-solo { margin: 32px auto 0; max-width: 1000px; }
/* Tall panels (settings, undo) would otherwise run past a viewport. Cap them
   only gently: too tight a cap shrinks the UI text with it. */
.shot-tall { max-width: 980px; }
.shot-tall .shot-frame { max-height: 660px; }
.shot-tall .shot-frame img { object-fit: cover; object-position: top center; }
/* The team editor cannot be cropped to 16:10 without losing half its content
   (it is 1173px tall at 720px wide), so it keeps its natural portrait aspect.
   It must be shown at >=846px wide or its UI text drops below 11px: the panel
   was captured at a 1000px viewport and its column is 720px, so a narrow slot
   shrinks the text with it. 880px gives 11.4px text at 1074px tall. */
.shot-portrait { max-width: 880px; margin: 32px auto 0; }
.shot-narrow { max-width: 760px; }
.shot-owl { max-width: 300px; }
/* Shot 7 as delivered is 86% empty sidebar to the right of the icon column,
   so it is placed small and beside text rather than framed large. The 350x330
   re-crop will fill this frame properly; these sizes do not need to change. */
.shot-inline { display: flex; align-items: center; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.shot-inline-text { flex: 1 1 280px; }
.shot-inline-text h3 { font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.shot-inline-text p { margin: 0; color: var(--text-soft); font-size: .96rem; max-width: 46ch; }
.shot-inline .shot figcaption { margin-top: 10px; font-size: .82rem; }
.hero-shot { margin: 0 auto; max-width: 1180px; }
@media (min-width: 820px) {
  .shot-row, .shot-pair { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ── sections ───────────────────────────────────────────────────────────── */
.sec { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--rule); }
.sec-alt { background: color-mix(in srgb, var(--panel) 55%, var(--ground)); }

/* the olive sprig — used exactly once */
#watch .sec-title::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: .5em;
  background: var(--olive);
  border-radius: 2px;
}

/* ── steps ──────────────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0 0 3em; padding: 0; display: grid; gap: 22px; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; }
.step-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: .82rem;
  color: var(--accent-text);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: grid; place-items: center;
}
.steps h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .2em; }
.steps p { margin: 0; color: var(--text-soft); font-size: .97rem; }

/* ── cards ──────────────────────────────────────────────────────────────── */
.controls, .modes-grid, .team-grid {
  display: grid; gap: 18px; margin: 0 0 2.5em;
}
@media (min-width: 700px) {
  .controls { grid-template-columns: repeat(2, 1fr); }
  .modes-grid, .team-grid { grid-template-columns: repeat(3, 1fr); }
}
.card, .mode-card, .team-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 22px 24px;
}
.card h3, .mode-card h3, .team-card h3 {
  font-size: 1rem; font-weight: 600; margin-bottom: .35em;
  display: flex; align-items: center; gap: 8px;
}
.card p, .mode-card p, .team-card p { margin: 0; color: var(--text-soft); font-size: .95rem; }
.mode-card h3 code { font-size: .95rem; color: var(--accent-text); }
.mode-note { margin-top: .7em !important; font-size: .87rem !important; color: var(--text-faint) !important; }
.team-card h3 { font-size: 1.15rem; }

/* ── quote ──────────────────────────────────────────────────────────────── */
.modes-quote {
  margin: 0 0 2.5em;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent-text);
}
.modes-quote p {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: 1.4;
  margin: 0;
  color: var(--text);
}
.modes-quote strong { color: var(--accent-text); font-weight: 500; }

/* ── facts / two-col ────────────────────────────────────────────────────── */
.facts, .two-col { display: grid; gap: 24px; margin: 0 0 2.2em; }
@media (min-width: 700px) {
  .facts, .two-col { grid-template-columns: 1fr 1fr; }
}
.facts h3, .two-col h3 { font-size: 1rem; font-weight: 600; }
.facts p, .two-col p { margin: 0; color: var(--text-soft); font-size: .96rem; }

/* ── callouts ───────────────────────────────────────────────────────────── */
.exception, .limit {
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent-text);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 0 1.4em;
  font-size: .96rem;
  color: var(--text-soft);
}
.limit { color: var(--text); }
.tag {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 10px;
}

/* ── lists ──────────────────────────────────────────────────────────────── */
.plain { margin: 0 0 2.2em; padding-left: 1.15em; }
.plain li { margin-bottom: .5em; color: var(--text-soft); }

.feature-list { list-style: none; margin: 0 0 3em; padding: 0; display: grid; gap: 16px; }
.feature-list li {
  padding-left: 22px;
  position: relative;
  color: var(--text-soft);
  font-size: .97rem;
}
.feature-list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-text);
}
.feature-list strong { color: var(--text); font-weight: 600; }

.note { font-size: .92rem; color: var(--text-faint); margin: 1.6em 0 0; }

/* ── colophon ───────────────────────────────────────────────────────────── */
.colophon {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px 30px;
}
.colophon h3 { font-size: 1rem; font-weight: 600; }
.colophon p { color: var(--text-soft); font-size: .96rem; margin: 0 0 1.2em; }
.paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.paths li { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: .9rem; }
.paths span { color: var(--text-faint); font-size: .86rem; }

/* ── tables ─────────────────────────────────────────────────────────────── */
.cmd-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: .95rem;
}
.cmd-table th, .cmd-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.cmd-table th {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}
.cmd-table td { color: var(--text-soft); }
.cmd-table td:first-child { white-space: nowrap; }
.cmd-table td:first-child code { color: var(--accent-text); }

/* ── tools ──────────────────────────────────────────────────────────────── */
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tools code { font-size: .84rem; }

/* ── install ────────────────────────────────────────────────────────────── */
.install {
  margin: 0 0 1.5em;
  padding-left: 1.2em;
  display: grid;
  gap: 22px;
  /* keep the grid children inside the column on narrow screens */
  min-width: 0;
}
.install li { min-width: 0; }
.install h3 { font-size: 1rem; font-weight: 600; margin-bottom: .4em; }
.install p { margin: 0; color: var(--text-soft); font-size: .96rem; }
.ui { color: var(--text); }

/* a long command must wrap rather than push the page sideways on a phone */
.install pre { max-width: 100%; }
.install pre code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--rule);
  padding: 44px 0 64px;
  background: color-mix(in srgb, var(--panel) 55%, var(--ground));
}
.foot-inner { display: grid; gap: 16px; }
.foot-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: .98rem;
  flex-wrap: wrap;
}
/* The Applivity mark is placed here with the owner's brand asset
   (assets/brand/applivity-logo.svg), never a redrawn one — WEBSITE.md decides
   that ask before placing a second logo. The asset is self-contained: it carries
   its own gradients, so it does not follow the page theme. */
.foot-by { color: var(--text-faint); font-weight: 400; margin: 0 2px; }
.foot-applivity { display: block; margin-left: 4px; }
.foot-applivity-name { font-weight: 600; }
.foot-note { color: var(--text-faint); font-size: .88rem; margin: 0; max-width: 58ch; }

/* ── print ──────────────────────────────────────────────────────────────── */
@media print {
  .site-head, .theme-toggle { display: none; }
  body { background: #fff; color: #000; }
}