/* The Mainmind design system — Crimson.
 *
 * The brand is a maroon-leaning red. Because red is now the brand, red can no
 * longer also mean danger: a destructive control is drawn as a hatched outline
 * and confirmed by holding, never by wearing the accent. --amber keeps its job
 * ("this is waiting on a person") but moves to an ember that sits 25deg off the
 * brand so the two still read apart.
 *
 * Every surface used to carry its own copy of all of this, which is how they
 * drifted apart: the same decision looked like two different products
 * depending on which page you were standing on. The repo already keeps the
 * tool surface in one place for exactly this reason. Same rule here. A card,
 * a byline, a ruling and a button are declared once, and a page links this
 * file rather than re-describing it.
 *
 * Page-specific chrome stays on the page: /app keeps its shell and views.
 * Anything a person can recognise as "a thing in Mainmind" lives here.
 *
 * Every surface now links this file: the landing, /app, /preview, /live, /404
 * and the generated docs. None of them declare colour any more. The old
 * per-page names (--accent, --raise, --ink-2, --ink-3, --bg, --line) are gone
 * rather than aliased, so there is no second vocabulary to drift back into.
 */

/* ---------------------------------------------------------------- tokens */
:root{
  --paper:#F7F6F5; --card:#FFFFFF; --sunk:#F0EEED; --edge:#E4E0DF; --edge-soft:#EEEBEA;
  --ink:#1A1717; --soft:#5C5252; --faint:#6B6060;
  --brand:#B23A3A; --brand-deep:#8E2A2A; --brand-soft:#F6D4D4; --brand-ink:#FFFFFF;
  /* Text sitting ON --brand-soft cannot be --brand: 4.29:1, under AA. Lightening
     the wash instead would fix the text and cost the wash its own edge against
     paper (1.27:1 -> 1.13:1), so it stops reading as a surface. The deep shade
     is the only value that satisfies both. */
  --brand-on-soft:#8E2A2A;
  --amber:#B23A17; --amber-soft:#FBE8DF;
  --pill-ink:#FFFFFF;
  --r:16px; --r-sm:10px; --r-lg:22px;
  --measure:1080px; --gutter:28px;
  --serif:"Literata",ui-serif,"Iowan Old Style",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Structural furniture — eyebrows, card titles, nav, captions. Uppercase with
     NEGATIVE tracking, which is the opposite of the usual airy-label reflex and
     is what stops the labels reading as generic chrome. */
  --label:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --shadow:0 1px 2px rgba(26,18,20,.05), 0 14px 34px -22px rgba(26,18,20,.40);
  --shadow-up:0 1px 2px rgba(26,18,20,.06), 0 26px 54px -30px rgba(26,18,20,.55);
  --shadow-lg:0 2px 4px rgba(26,18,20,.06), 0 46px 90px -40px rgba(26,18,20,.55);
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Three states, not two: an explicit choice stamps the root, and the default
   "system" setting stamps nothing at all. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#141212; --card:#1C1919; --sunk:#191616; --edge:#332E2E; --edge-soft:#262222;
  --ink:#F0ECEC; --soft:#B0A5A5; --faint:#968A8A;
  --brand:#E05252; --brand-deep:#F07070; --brand-soft:#422424; --brand-ink:#1A1010;
  --brand-on-soft:#F07070;
  --amber:#FF8A5C; --amber-soft:#2E1A12;
  --pill-ink:#2A1408;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -22px rgba(0,0,0,.85);
  --shadow-up:0 1px 2px rgba(0,0,0,.5), 0 26px 54px -30px rgba(0,0,0,.95);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 46px 90px -40px rgba(0,0,0,.9);
}}
:root[data-theme="dark"]{
  --paper:#141212; --card:#1C1919; --sunk:#191616; --edge:#332E2E; --edge-soft:#262222;
  --ink:#F0ECEC; --soft:#B0A5A5; --faint:#968A8A;
  --brand:#E05252; --brand-deep:#F07070; --brand-soft:#422424; --brand-ink:#1A1010;
  --brand-on-soft:#F07070;
  --amber:#FF8A5C; --amber-soft:#2E1A12;
  --pill-ink:#2A1408;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -22px rgba(0,0,0,.85);
  --shadow-up:0 1px 2px rgba(0,0,0,.5), 0 26px 54px -30px rgba(0,0,0,.95);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 46px 90px -40px rgba(0,0,0,.9);
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.017em;margin:0;line-height:1.14}
p{margin:0}
a{color:var(--brand);text-underline-offset:3px}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

/* One measure. Every surface hangs off the same left edge; blocks differ in
   how far right they run, never in where they start. */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}

/* --------------------------------------------------------------- people */
.avatar{
  width:34px;height:34px;border-radius:50%;flex:none;display:inline-flex;
  align-items:center;justify-content:center;font-size:13.5px;font-weight:680;
  background:var(--brand);color:var(--brand-ink);
}
/* An agent is drawn dashed and a person solid, so you can tell at a glance
   who did a thing without reading the label. */
.avatar.aria{background:transparent;color:var(--brand);border:1.5px dashed var(--brand)}
.avatar.me,.avatar.me2{background:var(--brand);color:var(--brand-ink)}
/* Somebody else on the team is a person, but not you. Neutral rather than a
   second accent, so the page still spends its colour in one place. */
.avatar.ren,.avatar.me3,.avatar.neutral{background:var(--edge);color:var(--soft)}

/* -------------------------------------------------------------- labels */
.section-label{
  display:flex;align-items:center;gap:9px;
  font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--faint);margin:0 0 16px;
}
.section-label .count{
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--amber);color:var(--pill-ink);
  font-size:11.5px;font-weight:700;letter-spacing:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.section-label .quiet-count{background:var(--edge);color:var(--soft)}

/* ---------------------------------------------------------------- card */
.card{
  background:var(--card);border:1px solid var(--edge);border-radius:var(--r);
  padding:24px 26px;margin-bottom:18px;box-shadow:var(--shadow);
}
.card h3{font-size:1.24rem;margin:0 0 10px;letter-spacing:-.014em}
.card p{color:var(--soft);font-size:16px}
.card p b,.card p strong{color:var(--ink);font-weight:640}

/* Who is speaking, above what they said. */
.who{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--faint);margin-bottom:14px}
.who .avatar{width:26px;height:26px;font-size:11px}

.foot-link{
  display:inline-block;margin-top:14px;color:var(--brand);font-weight:600;
  font-size:14.5px;text-decoration:none;border-bottom:1px solid transparent;cursor:pointer;
}
.foot-link:hover{border-bottom-color:currentColor}

/* ------------------------------------------------------------- buttons */
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
button.primary,button.quiet,button.mini{
  border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;font-weight:620;
  transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease);
}
button.primary{background:var(--brand);color:var(--brand-ink);font-size:15px;padding:12px 20px}
button.primary:hover{background:var(--brand-deep);transform:translateY(-1px)}
button.primary:active{transform:scale(.985)}
button.quiet{background:var(--brand-soft);color:var(--brand-on-soft);font-size:15px;padding:12px 20px}
button.quiet:hover{transform:translateY(-1px)}
button.mini{background:none;border-color:var(--edge);color:var(--soft);font-size:13px;padding:6px 12px}
button.mini:hover{border-color:var(--faint);color:var(--ink)}
/* Declining is a real choice, so the button that declines gets a real
   identity rather than a browser default. */
.btn-row button:not(.primary):not(.mini){
  background:var(--brand-soft);color:var(--brand-on-soft);font-size:15px;padding:12px 20px;
  border-radius:var(--r-sm);border:1px solid transparent;font-weight:620;cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.btn-row button:not(.primary):not(.mini):hover{transform:translateY(-1px)}
.btn-row button:not(.primary):not(.mini):active{transform:scale(.985)}

/* ------------------------------------------------------ the ruling field */
.in-words{margin-top:18px}
.in-words label{
  display:block;font-size:11.5px;font-weight:660;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px;
}
.field{
  width:100%;font-family:inherit;font-size:16px;padding:12px 14px;line-height:1.5;
  border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--card);color:var(--ink);
}
.field:focus{border-color:var(--brand);outline:none}
.field-note{color:var(--faint);font-size:13px;margin-top:8px}

/* ------------------------------------------------------------- reveals */
details{margin-top:14px}
details summary{
  list-style:none;cursor:pointer;color:var(--brand);font-weight:600;font-size:14.5px;
  display:inline-flex;align-items:center;gap:7px;
}
details summary::-webkit-details-marker{display:none}
details summary::before{
  content:"";width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .25s var(--ease);
}
details[open] summary::before{transform:rotate(90deg)}
details summary:hover{color:var(--brand-deep)}
.detail-body{
  background:var(--sunk);border-radius:var(--r-sm);padding:16px 18px;
  font-size:14.5px;color:var(--soft);margin-top:14px;
}
.detail-body b{color:var(--ink)}
.detail-body p + p{margin-top:10px}

/* --------------------------------------------------------- settled work */
.ok-strip{
  background:var(--brand-soft);border:1px solid transparent;border-radius:var(--r);
  padding:18px 20px;display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;
}
.ok-strip .tick,.ok-strip .ico{flex:none;color:var(--brand-on-soft);font-weight:700;margin-top:1px}
.ok-strip b{display:block;font-weight:640;margin-bottom:3px}
.ok-strip p,.ok-strip span{display:block;color:var(--soft);font-size:14.5px}

.approved{
  background:var(--brand-soft);border:1px solid transparent;border-radius:var(--r);
  padding:20px 22px;margin-bottom:18px;display:flex;gap:13px;align-items:flex-start;
}
.approved .tick{flex:none;color:var(--brand-on-soft);font-weight:700;margin-top:1px}
/* Declining is recorded the same way approving is, but it is not a success,
   so it does not get to wear the success colour. */
.approved.held{background:var(--sunk);border-color:var(--edge-soft)}
.approved.held .tick{color:var(--faint)}
.approved.held .ruling{border-left-color:var(--faint)}
.approved.held .ruling .cap{color:var(--faint)}
.approved b{display:block;font-weight:640}
.approved p,.approved small{display:block;color:var(--soft);font-size:15px;margin-top:5px}

/* The one thing the whole product is for: what the owner said, kept as they
   said it. Serif, italic, and never paraphrased into a checkbox. */
.ruling{margin-top:16px;padding-left:14px;border-left:2px solid var(--brand)}
.ruling .cap{
  font-size:11px;font-weight:680;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-on-soft);margin-bottom:8px;
}
.ruling blockquote{
  margin:0;font-family:var(--serif);font-style:italic;font-size:1.16rem;
  line-height:1.42;color:var(--ink);
}
.ruling .by{color:var(--soft);font-size:13.5px;margin-top:10px}

/* ---------------------------------------------------------------- feed */
.feed{list-style:none;margin:0;padding:0}
.feed li{
  display:flex;gap:13px;align-items:flex-start;padding:15px 0;
  border-bottom:1px solid var(--edge-soft);font-size:15px;color:var(--soft);
}
.feed li:last-child{border-bottom:0;padding-bottom:0}
.feed li:first-child{padding-top:0}
.feed b{color:var(--ink);font-weight:620}
.feed .avatar{width:26px;height:26px;font-size:11px}
.feed time,.feed .when{display:block;color:var(--faint);font-size:12.5px;margin-top:4px}
/* Why a thing did not need you, tucked under the thing itself. */
.under,.did .rule{
  display:block;color:var(--faint);font-size:13px;margin-top:4px;
  padding-left:11px;border-left:2px solid var(--brand-soft);
}
.settled-note{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--edge-soft);
  color:var(--faint);font-size:14px;font-style:italic;font-family:var(--serif);
}

/* Amber is the colour of "this is waiting on a person". A cadence label is
   not waiting on anybody, so it does not get to wear the alert colour. */
.chip{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:660;
  background:var(--amber-soft);color:var(--amber);letter-spacing:.02em;
}
.chip.neutral{background:var(--sunk);color:var(--faint)}
.chip.done{background:var(--brand-soft);color:var(--brand-on-soft)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 4px}
.chip-btn{
  padding:9px 15px;border-radius:999px;border:1px solid var(--edge);background:var(--card);
  color:var(--soft);font-size:14.5px;font-weight:560;cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.chip-btn:hover{border-color:var(--faint);color:var(--ink)}
.chip-btn[aria-pressed="true"],.chip-btn.sel{
  background:var(--brand-soft);border-color:transparent;color:var(--brand-on-soft);font-weight:640;
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}