/* The one vocabulary — every surface, both apps. Rides on colors_and_type.css. */

/* ---------- Instrument register — worklists (the Desk, rosters, queues) ---------- */
.desk-date{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold);margin:0 0 var(--space-2)}
.count-line{font:400 1.05rem/1.5 var(--font-sans);color:var(--fg1);margin:0}
.worklist{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-raised);overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto 1em;align-items:baseline;gap:var(--space-5);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);text-decoration:none;color:var(--fg1);font:var(--text-small);transition:background var(--dur-fast) var(--ease)}
.row:last-child{border-bottom:0}
a.row:hover{background:var(--cream);color:var(--fg1)}
.row__title{font-weight:600;color:var(--warm-black)}
.row__detail{color:var(--fg3)}
.row__meta{font:var(--text-xs);color:var(--fg3);white-space:nowrap;justify-self:end}
.row__go{color:var(--charcoal-light);justify-self:end}
a.row:hover .row__go{color:var(--cinnabar)}
.row--safety{box-shadow:inset 3px 0 0 var(--cinnabar)}
.row__flag{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--cinnabar);font-weight:600;margin-right:var(--space-2)}
.row__sub{grid-column:1/-1;font:var(--text-xs);color:var(--fg2)}
.row__sub .sig-label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold);margin-right:var(--space-2)}
.row .dot{width:7px;height:7px;margin-right:var(--space-2);display:inline-block;position:relative;top:-1px}
.btn--row{flex-direction:row;align-items:baseline;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:0.85rem}

/* ---------- Studio shell: editorial left rail (the clinic's dress) ---------- */
.shell{display:flex;min-height:100vh;align-items:flex-start}
.rail{width:230px;flex:none;position:sticky;top:0;max-height:100vh;overflow-y:auto;box-sizing:border-box;padding:var(--space-6) var(--space-4) var(--space-6) var(--space-5);border-right:1px solid var(--parchment);background:var(--ivory)}
.rail__brand{display:flex;gap:0.7rem;align-items:center;text-decoration:none}
.rail__brand img{height:36px}
.rail__name{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;color:var(--warm-black);line-height:1.15}
.rail__sub{font-family:var(--font-serif);font-style:italic;font-size:0.85rem;color:var(--charcoal-light)}
.rail__label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--charcoal-light);margin:var(--space-7) 0 var(--space-3)}
.rail__nav{display:flex;flex-direction:column;gap:2px}
.rail__nav a{display:flex;gap:0.55rem;align-items:baseline;font:var(--text-small);color:var(--charcoal);text-decoration:none;padding:0.45rem 0.6rem;border-left:3px solid transparent;border-radius:0 var(--r-md) var(--r-md) 0;transition:color var(--dur-fast) var(--ease)}
.rail__nav a .rn{font-family:var(--font-serif);font-style:italic;color:var(--charcoal-light);min-width:1.5em}
.rail__nav a:hover{color:var(--cinnabar)}
.rail__nav a[aria-current="page"]{background:var(--warm-white);border-left-color:var(--cinnabar);color:var(--warm-black);font-weight:600}
.shell>.page{flex:1;min-width:0}
@media (max-width:760px){.shell{flex-direction:column}.rail{position:static;width:100%;max-height:none;border-right:0;border-bottom:1px solid var(--parchment)}}

/* ---------- Masthead: dark frame, never behind reading ---------- */
.masthead{background:var(--warm-black);color:var(--ivory);padding:0 var(--space-6)}
.masthead__inner{max-width:1080px;margin:0 auto;display:flex;align-items:baseline;gap:var(--space-6);padding:var(--space-4) 0}
.masthead__wordmark{font-family:var(--font-serif);font-size:1.25rem;font-weight:500;color:var(--ivory);text-decoration:none;letter-spacing:0.01em}
.masthead__wordmark .cn{color:var(--gold);font-size:1.05em;margin-right:var(--space-2)}
.masthead__nav{display:flex;gap:var(--space-5);margin-left:auto;flex-wrap:wrap}
.masthead__nav a{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold-soft);text-decoration:none;padding:var(--space-2) 0;border-bottom:2px solid transparent}
.masthead__nav a:hover{color:var(--ivory)}
.masthead__nav a[aria-current="page"]{color:var(--ivory);border-bottom-color:var(--cinnabar)}

/* ---------- Page shell: light reading always ---------- */
.page{max-width:1080px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-11)}
.page--reading{max-width:var(--max-width)}

/* ---------- The one button family ---------- */
.btn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;font:var(--text-small);font-weight:600;border-radius:var(--r-md);border:1px solid transparent;padding:var(--space-3) var(--space-5);cursor:pointer;text-decoration:none;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);text-align:left}
.btn--primary{background:var(--cinnabar);color:var(--warm-white);box-shadow:var(--letterpress)}
.btn--primary:hover{background:var(--cinnabar-glow);color:var(--warm-white)}
.btn--primary:active{background:var(--cinnabar-deep);box-shadow:var(--letterpress-press)}
.btn--quiet{background:transparent;color:var(--warm-black);border-color:var(--parchment)}
.btn--quiet:hover{border-color:var(--gold-soft);color:var(--cinnabar)}
.btn__consequence{font:var(--text-xs);font-weight:400;opacity:0.85;letter-spacing:0}
.btn--primary .btn__consequence{color:var(--ivory)}
.btn--quiet .btn__consequence{color:var(--fg3)}

/* ---------- The one card (a doorway when it is an <a>) ---------- */
.card{display:block;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:var(--space-5) var(--space-6);text-decoration:none;color:var(--fg1);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
a.card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-md);color:var(--fg1)}
.card__eyebrow{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.card__title{font:var(--text-display-sm);color:var(--warm-black);margin:0 0 var(--space-1);padding-right:11em}
.card__line{font:var(--text-small);color:var(--fg2);margin:0}
.card__meta{font:var(--text-xs);color:var(--fg3);margin-top:var(--space-2)}
.card__go{float:right;font:var(--text-small);color:var(--charcoal-light);margin-left:var(--space-4);transition:color var(--dur) var(--ease)}
a.card:hover .card__go{color:var(--cinnabar)}
/* SAFETY — the one card allowed to interrupt calm */
.card--safety{border-top:3px solid var(--cinnabar)}
.card--safety .card__eyebrow{color:var(--cinnabar);font-weight:600}

/* ---------- Unread: a soft gold dot. Nothing more. ---------- */
.dot{display:inline-block;width:8px;height:8px;border-radius:var(--r-round);background:var(--gold);flex:none}

/* ---------- The spend signature — a labelled line, never a button ---------- */
.signature{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--gold-soft)}
.signature__label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold)}
.signature__line{font-family:var(--font-serif);font-style:italic;font-size:1.1rem;color:var(--warm-black);margin-top:2px}

/* ---------- Desk sections ---------- */
.desk-section{margin-top:var(--space-7)}
.desk-section__head{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--charcoal-light);margin-bottom:var(--space-3)}
.desk-section__list{display:flex;flex-direction:column;gap:var(--space-3)}
.quiet-line{font:var(--text-small);font-style:italic;color:var(--fg3);margin:var(--space-4) 0 0}
.state-line{font:var(--text-small);color:var(--fg2);margin:var(--space-4) 0 0}
.state-line--failed{color:var(--cinnabar-deep)}

/* For reading — its own quiet ground, never counted */
.desk-reading{margin-top:var(--space-9)}
.desk-reading::before{content:"";display:block;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);margin-bottom:var(--space-7)}
.desk-reading .desk-section__head{border-bottom:0;color:var(--gold)}

/* ---------- The one pill (library / prescribed pieces) ---------- */
.pill{display:inline-flex;align-items:baseline;gap:0.4em;font:var(--text-small);color:var(--cinnabar);border:1px solid var(--gold-soft);border-radius:var(--r-xl);padding:var(--space-2) var(--space-4);text-decoration:none;background:var(--bg-raised);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.pill:hover{background:var(--cinnabar);color:var(--warm-white);border-color:var(--cinnabar)}
.pill em{font-family:var(--font-serif);font-style:italic;font-weight:500}

/* ---------- The one thread (letters, anywhere correspondence renders) ---------- */
.thread{display:flex;flex-direction:column;gap:var(--space-4)}
.letter{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-5) var(--space-6)}
.letter--hers{background:var(--cream);border-color:var(--gold-soft)}
.letter__head{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-3)}
.letter__from{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold)}
.letter--hers .letter__from{color:var(--cinnabar)}
.letter__date{font:var(--text-xs);color:var(--fg3);margin-left:auto}
.letter__body{font-family:var(--font-serif);font-size:1.15rem;line-height:1.65;color:var(--fg1)}
.letter__body p{font:inherit;color:inherit}

/* ---------- The one disclosure ---------- */
details.fold{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-raised)}
details.fold summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-4) var(--space-5);font:var(--text-small);font-weight:600;color:var(--warm-black)}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"›";font-family:var(--font-serif);color:var(--gold);transition:transform var(--dur) var(--ease);display:inline-block}
details.fold[open] summary::before{transform:rotate(90deg)}
details.fold .fold__body{padding:0 var(--space-5) var(--space-5);border-top:1px solid var(--border);padding-top:var(--space-4)}

/* ---------- Vocabulary sheet scaffolding ---------- */
.spec{margin-top:var(--space-9)}
.spec>h2{padding-bottom:var(--space-3);border-bottom:1px solid var(--gold-soft)}
.spec__law{font:var(--text-small);font-style:italic;color:var(--fg3);max-width:var(--max-reading)}
.spec__row{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-start;margin-top:var(--space-5)}
.spec__row>*{flex:none}
.spec__row .card,.spec__row details.fold{flex:1 1 420px}

@media (max-width:720px){.masthead__inner{flex-direction:column;gap:var(--space-2);align-items:flex-start}.masthead__nav{margin-left:0;gap:var(--space-4)}.page{padding:var(--space-6) var(--space-4) var(--space-9)}}

/* ---------- Night toggle: a quiet lamp switch in the rail ---------- */
.night-toggle{margin-top:var(--space-7);font:var(--text-small);font-weight:600;color:var(--charcoal);background:transparent;border:1px solid var(--parchment);border-radius:var(--r-md);padding:var(--space-2) var(--space-4);cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.night-toggle:hover{border-color:var(--gold-soft);color:var(--cinnabar)}