/* site.css: the thedesk.sh landing page. Layout only; colour, type and the
   component look come from desk.css (the desk design system). House rules
   kept: zero radius, no shadows, state carried by 2px edges and type. */

/* Greek first: the design system's stacks lead with Japanese faces (Shippori
   Mincho, Hiragino), which set Greek as full-width glyphs on Apple devices.
   This page keeps the three voices but leads with faces that carry Greek. */
:root{
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif",serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
html{scroll-behavior:smooth}
#sample,#detail,#list,#today,#advisor,.layers,.next{scroll-margin-top:72px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--bg)}
html,body{height:auto}
.wrap{max-width:1180px; margin:0 auto; padding-left:16px; padding-right:16px}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:16px; top:8px; z-index:9; background:var(--panel); padding:6px 10px; border:1px solid var(--accent)}

/* top bar */
.top{position:sticky; top:0; z-index:5}
.lang{
  font-family:var(--font-mono); font-size:var(--type-meta); letter-spacing:var(--tracking-chip);
  background:transparent; color:var(--muted); border:1px solid var(--line); padding:4px 10px; cursor:pointer;
}
.lang + .lang{margin-left:-9px}
.lang[aria-pressed=true]{background:var(--text); color:var(--bg); border-color:var(--text)}
.lang:hover{border-color:var(--accent)}

/* hero */
.hero{padding-top:48px; padding-bottom:20px}
.promise{
  font-family:var(--font-serif); font-weight:600; font-size:clamp(28px,4.4vw,44px); line-height:1.2;
  margin:0 0 18px; max-width:22em; text-wrap:balance;
}
.morning{font-size:var(--type-body); line-height:var(--leading-read); margin:0 0 10px; max-width:40em}
.lead{font-size:var(--type-body); color:var(--meta); margin:0; max-width:40em}

/* sample */
.sample{padding-top:12px; padding-bottom:40px}
.fiction{
  font-family:var(--font-mono); font-size:var(--type-meta); letter-spacing:var(--tracking-meta);
  color:var(--meta); margin:0 0 10px; padding-left:10px; border-left:2px solid var(--line);
}
.desk{border:1px solid var(--line); background:var(--panel)}
.desk-head{position:static}
.desk-head h2{margin:0}
.role{margin:0; padding:12px 20px 0; font-size:var(--type-card); color:var(--meta); line-height:var(--leading-card)}
.tally{
  margin:10px 20px 0; font-family:var(--font-mono); font-size:var(--type-meta); letter-spacing:var(--tracking-meta);
  color:var(--text);
}
.tally b{color:var(--accent-ink); font-weight:600}
.views{margin:12px 20px 6px}
.viewnote{margin:0 20px 12px; font-size:var(--type-note); color:var(--muted)}

.board{display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--line)}
@media (min-width:900px){
  .board{grid-template-columns:minmax(300px,38%) minmax(0,1fr)}
  .list{border-right:1px solid var(--line); max-height:720px; overflow-y:auto}
  .detail{position:sticky; top:56px; align-self:start; max-height:calc(100vh - 72px); overflow-y:auto}
  .back{display:none}
}
.list{background:var(--rail-bg)}
.row{
  display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line-faint);
  background:transparent; color:var(--text); font:inherit; font-size:var(--type-card);
  transition:opacity .3s ease, background .2s ease;
}
.row .dds-caserow-sender{display:flex; gap:10px; white-space:normal}
.row .t{color:var(--faint); flex:0 0 auto}
.row .dds-chip{margin-top:6px}
.row--faded{opacity:.35}
.row--decided .dds-caserow-subject{color:var(--muted)}

.detail{padding:22px 24px 28px; background:var(--panel); outline:none}
.detail .meta{font-family:var(--font-mono); font-size:var(--type-meta); letter-spacing:var(--tracking-meta); color:var(--meta)}
.detail h3.subj{font-family:var(--font-serif); font-weight:600; font-size:24px; line-height:1.25; margin:6px 0 14px}
.blk{margin:0 0 16px}
.blk-h{
  font-family:var(--font-mono); font-size:var(--type-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--meta); margin:0 0 6px; padding-bottom:5px; border-bottom:1px solid var(--line-soft);
}
.orig{
  margin:0; padding:10px 14px; background:var(--client-b); border-left:2px solid var(--line);
  font-size:var(--type-card); line-height:var(--leading-card); white-space:pre-line;
}
.blk p{margin:0; font-size:var(--type-card); line-height:var(--leading-card)}
.rulechip{cursor:default}
.rulechip:hover,.rulechip:focus{border-color:var(--ok)}
.unsure{
  border:1px solid var(--accent-border); background:var(--accent-tint); color:var(--warn);
  padding:8px 12px; font-size:var(--type-note); margin:0 0 16px;
}

.dds-pc-draft::before{content:attr(data-label)}
.dds-pc.draft{font-size:var(--type-card); white-space:pre-line}
.choices{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px}
.choice{
  font-family:var(--font-sans); font-size:var(--type-note); font-weight:500; padding:7px 14px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--text);
}
.choice:hover{border-color:var(--accent); background:var(--accent-tint)}
.choice.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.choice.primary:hover{background:var(--accent-hov)}
.editbox{width:100%; min-height:150px; padding:10px; font:inherit; font-size:var(--type-card);
  border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:0}
.editbox:focus{outline:none; border-color:var(--accent)}
.stamp{
  border:1px solid var(--ok-border); border-left:2px solid var(--ok); background:var(--ok-tint);
  padding:10px 14px; margin:10px 0; font-size:var(--type-note);
}
.stamp .note{display:block; margin-top:6px; font-family:var(--font-mono); font-size:var(--type-meta); color:var(--meta)}
.linkbtn{background:none; border:0; padding:0; color:var(--accent-ink); text-decoration:underline; cursor:pointer; font-size:var(--type-note)}
.back{margin-top:14px}
.empty{color:var(--muted); font-size:var(--type-card)}

.keys{margin:0; padding:10px 20px; border-top:1px solid var(--line); font-family:var(--font-mono);
  font-size:var(--type-meta); color:var(--faint)}

/* the upbringing toggle: vermilion while every item waits on a person,
   indigo once the playbook settles them */
.upbringing{margin:14px 20px 0}
.modes{display:flex; flex-wrap:wrap; border:2px solid var(--text); width:max-content; max-width:100%}
.mode{
  font-family:var(--font-sans); font-size:var(--type-card); font-weight:600; padding:10px 18px; cursor:pointer;
  background:var(--panel); color:var(--text); border:0; transition:background .3s ease, color .3s ease;
}
.mode + .mode{border-left:2px solid var(--text)}
.mode:hover{background:var(--dim)}
.mode[data-mode=without].mode--on{background:var(--accent); color:var(--on-accent)}
.mode[data-mode=with].mode--on{background:var(--ok); color:var(--bg)}
.upline{font-family:var(--font-serif); font-size:20px; line-height:1.3; margin:10px 0 0}
.streams{margin:4px 20px 0; font-size:var(--type-note); color:var(--muted)}
.row .st{font-family:var(--font-mono); font-size:var(--type-meta); letter-spacing:var(--tracking-meta); color:var(--meta); flex:0 0 auto}
.listempty{padding:18px 20px; margin:0}

.blk-q .q{font-family:var(--font-serif); font-size:20px; line-height:1.3; margin:0}
.blk-gap{border:1px solid var(--accent-border); border-left:2px solid var(--accent); background:var(--accent-tint); padding:10px 14px}
.blk-gap .blk-h{color:var(--warn); border-bottom-color:var(--accent-border)}
.withline{border-left:2px solid var(--ok); background:var(--ok-tint); padding:10px 14px; margin:0 0 16px}
.withline p{margin:0 0 6px; font-size:var(--type-card)}
.rulebox{display:flex; gap:10px; align-items:flex-start}
.rulebox .dds-chip{flex:0 0 auto}
.choice small{display:block; font-family:var(--font-mono); font-size:var(--type-meta); font-weight:400; opacity:.85; margin-top:2px}
.choice.forgood{border:2px solid var(--ok); color:var(--ok)}
.choice.forgood:hover{background:var(--ok-tint)}
.newrule{border:1px dashed var(--ok-border); padding:8px 12px; margin:6px 0 0}
.newrule p{margin:0; font-size:var(--type-note)}
.stamp--rule{border-left-color:var(--ok)}

/* the playbook panel */
.playbook{border-top:1px solid var(--line); padding:20px 20px 24px; background:var(--panel)}
.pb-title{font-family:var(--font-serif); font-weight:600; font-size:24px; margin:0 0 4px}
.pb-by{margin:0 0 14px; color:var(--meta); font-size:var(--type-note); max-width:48em}
.pb-put{font-size:var(--type-card)}
.pb-sec{margin:0 0 14px}
.pb-sec h4{
  font-family:var(--font-mono); font-size:var(--type-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--meta); margin:0 0 6px; padding-bottom:5px; border-bottom:1px solid var(--line-soft);
}
.pb-rule{display:grid; grid-template-columns:2.2em minmax(0,1fr); gap:8px; padding:8px 8px 8px 0; border-left:2px solid transparent; transition:background .2s ease, border-color .2s ease}
.pb-rule--lit,.pb-rule:hover{border-left-color:var(--ok); background:var(--ok-tint)}
.pb-rule--new{border-left-color:var(--ok)}
.pb-n{font-family:var(--font-mono); font-size:var(--type-meta); color:var(--ok); text-align:right; padding-top:2px}
.pb-body p{margin:0 0 4px; font-size:var(--type-card); line-height:var(--leading-card)}
.pb-links{display:flex; flex-wrap:wrap; gap:4px 6px; align-items:baseline}
.pb-lab{font-family:var(--font-mono); font-size:var(--type-meta); color:var(--meta)}
.pb-short .pb-lab{color:var(--warn)}
.itemlink{
  font:inherit; font-size:var(--type-meta); font-family:var(--font-mono); background:transparent; cursor:pointer;
  border:1px solid var(--line); padding:2px 6px; color:var(--text); max-width:100%; text-align:left;
}
.itemlink:hover{border-color:var(--ok); color:var(--ok)}
.pb-short .itemlink{border-color:var(--accent-border); color:var(--warn)}
.pb-added{border-top:2px solid var(--ok); padding-top:10px}

/* layers and steps */
.layers,.next{padding-top:36px; padding-bottom:24px}
.h2{font-family:var(--font-serif); font-weight:600; font-size:30px; line-height:1.2; margin:0 0 6px}
.sub{color:var(--meta); margin:0 0 18px}
.grid4{list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{border:1px solid var(--line); border-left:2px solid var(--line); background:var(--panel); padding:14px 16px 16px;
  transition:border-color .2s ease}
.card:hover{border-left-color:var(--accent)}
.card h3,.steps h3{font-size:20px; margin:6px 0 6px; font-weight:600}
.card p,.steps p{margin:0; font-size:var(--type-card); line-height:var(--leading-card)}
.eyebrow{font-family:var(--font-mono); font-size:var(--type-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--accent-ink)}
.steps{margin:14px 0 0; padding:0; list-style:none; counter-reset:s; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.steps li{counter-increment:s; border-top:2px solid var(--text); padding-top:10px}
.steps li::before{content:counter(s); font-family:var(--font-mono); font-size:var(--type-meta); color:var(--meta)}
.contact{padding-top:24px; padding-bottom:48px}
.contact p{font-family:var(--font-serif); font-size:22px; margin:0}
.contact a{color:var(--accent-ink)}

.dds-footer{flex-wrap:wrap}

/* the before and after, beside the toggle, with the invitation to press it */
.invite{margin:0 0 8px; font-weight:600; font-size:var(--type-card); color:var(--accent-ink)}
.desk[data-mode=without] .mode[data-mode=with]{outline:2px dashed var(--ok); outline-offset:-5px}
@media (prefers-reduced-motion: no-preference){
  .desk[data-mode=without] .mode[data-mode=with]{animation:nudge 2.4s ease-in-out 3}
}
@keyframes nudge{0%,100%{background:var(--panel)}50%{background:var(--ok-tint)}}
.compare{display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin:12px 0 0}
.cmp{flex:1 1 220px; border:1px solid var(--line); border-left:2px solid var(--line); padding:8px 12px;
  font-size:var(--type-note); line-height:1.35; color:var(--meta); background:var(--panel)}
.cmp-h{display:block; font-family:var(--font-mono); font-size:var(--type-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; margin-bottom:2px}
.cmp-n{font-family:var(--font-serif); font-weight:600; font-size:30px; line-height:1.1; color:var(--text)}
.cmp-rest{display:block; font-family:var(--font-mono); font-size:var(--type-meta); margin-top:2px}
.cmp-arrow{align-self:center; font-size:22px; color:var(--meta)}
.cmp--without.cmp--on{border-left-color:var(--accent); background:var(--accent-tint); color:var(--text)}
.cmp--with.cmp--on{border-left-color:var(--ok); background:var(--ok-tint); color:var(--text)}
.cmp--with .cmp-n{color:var(--ok)}
.cmp--without .cmp-n{color:var(--accent-ink)}
.role{padding-top:14px}

/* who authorises, and the two new choices */
.authority{margin:0 0 8px !important; font-size:var(--type-note) !important; color:var(--meta)}
.choice.reject{border-color:var(--line); color:var(--muted)}
.stamp--reject{border-color:var(--line); border-left-color:var(--muted); background:var(--dim)}
.pb-invite{margin:-6px 0 14px; font-size:var(--type-note)}
.pb-invite a,.fiction a,.advlink{color:var(--accent-ink)}

/* the homage, and what is real today */
.homage{margin:10px 0 0; font-size:var(--type-note); color:var(--muted); max-width:60em}
.today{padding-top:36px; padding-bottom:8px}
.grid3{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card--today{border-left-color:var(--ok)}
.card--sample{border-left-color:var(--accent)}
.card--planned{border-left-color:var(--line); border-left-style:dashed}
.card--today .eyebrow{color:var(--ok)}
.card--planned .eyebrow{color:var(--meta)}
.advisor{border:1px solid var(--ok-border); border-left:2px solid var(--ok); background:var(--ok-tint); padding:14px 16px; margin:14px 0 22px}
.advisor .eyebrow{color:var(--ok)}
.advisor h3{font-size:20px; margin:6px 0 6px; font-weight:600}
.advisor p{margin:0 0 6px; font-size:var(--type-card); line-height:var(--leading-card); max-width:52em}
.advlink{font-weight:600}
.planned{margin-bottom:0}

/* The sample desk is always dark, the page around it always light (owner
   ruling 2026-09-23). The html element carries data-theme=light, so the
   design system's OS-driven dark block never fires and the page ignores the
   visitor's theme. The desk redefines the tokens on its own container: values
   are the design system's dark variant (tokens/tokens.css, the
   :root[data-theme=dark] block), verbatim, so nothing leaks outside .desk. */
.desk{
  color-scheme:dark;
  --bg:oklch(0.21 0.008 60);
  --panel:oklch(0.245 0.008 60);
  --rail-bg:oklch(0.23 0.008 60);
  --text:oklch(0.93 0.004 60);
  --meta:oklch(0.78 0.008 60);
  --muted:oklch(0.71 0.008 60);
  --faint:oklch(0.66 0.008 60);
  --line:oklch(0.36 0.008 60);
  --line-soft:oklch(0.33 0.008 60);
  --line-faint:oklch(0.31 0.008 60);
  --accent:oklch(0.50 0.14 32);
  --accent-ink:oklch(0.74 0.11 32);
  --ok-ink:oklch(0.74 0.08 250);
  --accent-hov:oklch(0.56 0.14 32);
  --accent-border:oklch(0.5 0.1 32);
  --accent-tint:oklch(0.3 0.035 32);
  --warn:oklch(0.7 0.12 32);
  --ok:oklch(0.72 0.08 250);
  --ok-border:oklch(0.46 0.05 250);
  --ok-tint:oklch(0.29 0.025 250);
  --client-b:oklch(0.28 0.016 60);
  --team-b:oklch(0.27 0.006 60);
  --sel-tint:oklch(0.29 0.014 45);
  --dim:oklch(0.27 0.008 60);
  --on-accent:oklch(0.96 0.006 60);
  color:var(--text);
}
/* the design system's dark view toggle: translate, never invert */
.desk .dds-viewtoggle-btn--active,
.desk .dds-viewtoggle-btn--active:hover{
  background:oklch(0.31 0.012 55); color:var(--text);
  box-shadow:inset 0 -2px 0 var(--accent-ink);
}
/* Two measured departures from the verbatim dark values, both inside .desk:
   the fill vermilion (--accent) reads at 2.5:1 as a thin edge on the dark
   panel, so every vermilion edge and ring uses the edge token (--accent-ink,
   "text + thin edges" in the design system), which clears 3:1; and the
   design system's dark hover lightens the fill, which drops the button label
   below 4.5:1, so the desk's hover darkens it instead. */
.desk{--accent-hov:oklch(0.45 0.14 32)}
.desk :focus-visible{outline-color:var(--accent-ink)}
.desk .dds-caserow--selected{box-shadow:inset 2px 0 0 var(--accent-ink)}
.desk .blk-gap,.desk .cmp--without.cmp--on{border-left-color:var(--accent-ink)}
.desk .choice:hover,.desk .editbox:focus{border-color:var(--accent-ink)}
/* the dark desk sits on a light page: a darker edge frames it */
.desk{border-color:oklch(0.21 0.008 60)}

/* below the side-by-side width the list scrolls on its own, so the open item stays near */
@media (max-width:899px){
  .list{max-height:52vh; overflow-y:auto; border-bottom:1px solid var(--line)}
}

@media (max-width:600px){
  .detail{padding:18px 16px 24px}
  .role,.viewnote,.keys{padding-left:16px; padding-right:16px}
  .role{padding-left:16px}
  .tally,.views,.viewnote,.upbringing,.streams{margin-left:16px; margin-right:16px}
  .cmp-arrow{display:none}
  .cmp-n{font-size:24px}
  .playbook{padding-left:16px; padding-right:16px}
  .modes{width:auto}
  .mode{flex:1 1 50%; padding:10px 8px; font-size:var(--type-note)}
  .upline{font-size:18px}
  .dds-viewtoggle-btn{font-size:var(--type-eyebrow); padding:8px 2px}
  .keys{display:none}
}