/* foundationalseo.com operator UI, in the Krabat design system.
   Contract: ../krabat.ai/DESIGN_SYSTEM.md (Swiss editorial monochrome).

   The rules this file obeys, in short:
     - one grayscale ramp plus exactly one chromatic accent (#2563eb), spent
       about three times per viewport: the primary button, the active tab or
       nav item, and the live segment of a progress bar. Green is only ever a
       verified check glyph.
     - radius 0 everywhere; depth is a 1px ink border plus a hard 3-4px solid
       offset, never a blur.
     - hierarchy by scale contrast: ink headings in Inter 600 against 9.5-10px
       JetBrains Mono uppercase microlabels tracked at .12-.15em.
     - no display serif at all. This is a dense internal tool, and per the
       spec's rollout section the mono-label plus hairline system carries it.
     - nothing decorative, nothing fixed, no grain overlay, no ornaments. */

:root {
  --bg:#ffffff;
  --card:#ffffff;
  --wash:#fafafa;
  --txt:#111111;
  --dim:#525252;
  --faint:#8a8a8a;
  --line:#e5e5e5;
  --line-soft:#f0f0f0;
  --rule:#d4d4d4;
  --accent:#2563eb;
  --accent-dark:#1d4ed8;
  --ok:#16a34a;

  --ui:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* aliases kept so any stray older declaration still resolves */
  --fg:var(--txt);
  --field:#ffffff;
  --hover:var(--wash);
  --warn:var(--txt);
  --bad:var(--txt);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
main.wrap { padding-bottom: 96px; }

/* ------------------------------------------------------------------ header */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--txt);
  position: sticky; top: 0; z-index: 20;
}
.navbar {
  display: flex; align-items: center; gap: 26px;
  min-height: 52px; padding-top: 8px; padding-bottom: 8px;
  flex-wrap: wrap;
}
.brandlink {
  font-family: var(--ui); font-weight: 600; font-size: 14px;
  color: var(--txt); letter-spacing: -.02em; text-decoration: none;
  border-bottom: 0;
}
.brandlink:hover { text-decoration: none; border-bottom: 0; }
.brandlink b { color: var(--dim); font-weight: 600; }

.mainnav { display: flex; gap: 22px; flex-wrap: wrap; }
.mainnav a, .signout {
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim); text-decoration: none;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.mainnav a:hover, .signout:hover {
  color: var(--txt); text-decoration: none; border-bottom-color: var(--txt);
}
.signout { margin-left: auto; }

.crumbline { padding-top: 14px; }
.crumbs {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .13em; color: var(--faint);
}
.crumbs a { color: var(--faint); text-decoration: none; }
.crumbs a:hover { color: var(--txt); text-decoration: none; }
.crumbs .sep { color: var(--rule); }
.crumbs .here { color: var(--txt); font-weight: 500; }

/* -------------------------------------------------------------- typography */
h1 {
  font-family: var(--ui); font-weight: 600; font-size: 26px; line-height: 1.15;
  letter-spacing: -.025em; margin: 30px 0 6px;
}
h2 {
  font-family: var(--ui); font-weight: 600; font-size: 16px; line-height: 1.3;
  letter-spacing: -.015em; margin: 0 0 3px;
}
h3, h4.cp-group, .microlabel {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim); margin: 26px 0 12px;
}
h3:first-child { margin-top: 0; }

a { color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { color: var(--txt); border-bottom-color: var(--txt); text-decoration: none; }

code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--wash); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 0;
}
.dim, .note { color: var(--dim); }
.sub {
  color: var(--dim); font-size: 13px; margin-bottom: 22px;
  max-width: 74ch; line-height: 1.6;
}
.sub a { border-bottom-color: var(--line); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: -.01em; }
footer {
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .13em;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------- cards
   A card is a printed plate: hairline box on white, squared. The step cards
   and anything that must read as raised get the hard ink offset instead. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 20px 22px;
  margin: 0 0 18px;
}
/* whole project card is one link */
a.card.proj { display: block; color: inherit; text-decoration: none; }
a.card.proj:hover { border-color: var(--txt); }
.strip { display: flex; gap: 34px; flex-wrap: wrap; align-items: baseline; }
.stat b {
  display: block; font-size: 26px; font-weight: 600; line-height: 1.15;
  letter-spacing: -.03em;
}
.stat span {
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .14em;
}
/* change since the previous snapshot, riding along with the number */
.stat b .delta {
  display: inline; margin-left: 6px; font-family: var(--mono);
  font-size: 11px; font-weight: 500; color: var(--dim);
  text-transform: none; letter-spacing: 0;
}
/* one metric over every snapshot, generated server-side in app.py */
svg.spark {
  display: block; margin-top: 7px; color: var(--dim); overflow: visible;
}

.flash, .error {
  background: #fff; border: 1px solid var(--txt); border-left-width: 4px;
  border-radius: 0; padding: 11px 15px; margin: 20px 0; font-size: 13px;
}
.flash { margin-bottom: 4px; }
/* gitsync could not push a save — the data only exists on this instance */
.syncalert {
  background: #fff5f5; border: 1px solid #c02626; border-left-width: 4px;
  color: #7a1414; padding: 12px 15px; margin: 20px 0 0; font-size: 13px;
  line-height: 1.55;
}
.syncalert b { color: #c02626; }
.syncalert ul { margin: 8px 0 0; padding-left: 18px; }
.syncalert li { margin-top: 3px; font-size: 12px; }
.syncalert code { font-family: var(--mono); font-size: 11.5px; }
.error pre {
  font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap;
  margin: 7px 0 0; color: var(--dim);
}
.warn, .warntext {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .11em; color: var(--txt);
}
.warn {
  display: block; border-left: 3px solid var(--txt); background: var(--wash);
  padding: 9px 13px; margin-top: 12px; line-height: 1.7;
  text-transform: none; letter-spacing: .01em; font-family: var(--ui);
  font-size: 12.5px;
}
.warn a { border-bottom-color: var(--rule); }
.ok { font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .11em; color: var(--txt); }
.hint.near { color: var(--txt); }
.hint.over { color: var(--txt); font-weight: 600; }

/* ------------------------------------------------------------ progress bar
   2px-feel track, ink to gray ramp fed from app.py STATUS_COLOR. A hairline
   of white keeps neighbouring segments legible without adding colour. */
.bar {
  display: flex; height: 8px; border-radius: 0; overflow: hidden;
  background: var(--line-soft); border: 1px solid var(--line);
  margin: 14px 0 10px;
}
.seg { height: 100%; }
.seg + .seg { box-shadow: inset 1px 0 0 #fff; }
.legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .12em;
}
.legend b { color: var(--txt); font-weight: 500; }
.lg i {
  display: inline-block; width: 8px; height: 8px; border-radius: 0;
  margin-right: 6px; outline: 1px solid var(--line); outline-offset: -1px;
}

/* ------------------------------------------------------------------ tables
   Solid ink header band, white mono uppercase th, hairline row rules. */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead tr { background: var(--txt); }
th {
  text-align: left; background: var(--txt); color: #fff;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  border: 0; padding: 9px 10px; white-space: nowrap;
}
td {
  padding: 8px 10px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
tbody tr:hover { background: var(--wash); }
tr.muted td { color: var(--faint); }
tr.muted td a { color: var(--faint); }
tr.dirty td { background: var(--wash); box-shadow: inset 3px 0 0 var(--accent); }
/* a field mid-save, before the server has confirmed it */
.ledger input.dirty { border-color: var(--accent); background: var(--wash); }
td.nw, th.nw { white-space: nowrap; }
/* the nowrap columns are the data columns (tier, minutes, DR/UR, dates,
   passwords), and data is set in mono per the spec */
td.nw { font-family: var(--mono); font-size: 11.5px; }
.cats { color: var(--dim); }
.scroll { overflow-x: auto; }
.cat-table { width: auto; min-width: 300px; }
.cat-table.front th {
  background: transparent; color: var(--dim); width: 160px;
  vertical-align: top; border-bottom: 1px solid var(--line-soft);
  font-size: 9.5px;
}
.cat-table.front thead tr, .cat-table.front tbody tr { background: transparent; }
.dates { font-family: var(--mono); font-size: 10.5px; line-height: 1.45; color: var(--faint); }
.src .ext { margin-left: 5px; font-size: 11px; border-bottom: 0; color: var(--faint); }
.src .ext:hover { color: var(--txt); }
.tri { margin-left: 5px; color: var(--txt); }

/* Disqualified source: the catalogue keeps it, the queue never offers it.
   Same squared hairline plate as .pill, and the name itself is struck
   through so a row reads as dead at a glance without any field of colour. */
.dq {
  display: inline-block; margin-left: 6px; padding: 0 4px;
  border: 1px solid var(--txt); color: var(--txt);
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .11em; vertical-align: 1px;
}
tr.dqrow td, table.dq td { color: var(--faint); }
tr.dqrow td a, table.dq td a { color: var(--faint); }
details.dqbox { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
details.dqbox > summary { cursor: pointer; font-size: 12px; }

/* IndexChex result under a profile_url field. Same green-as-a-verified-glyph
   rule as elsewhere: indexed is the only coloured state, "not indexed" is
   plain ink with a hairline under it so it still reads as a warning. */
.ix {
  display: inline-block; margin-top: 4px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .11em; color: var(--ok);
}
.ix.no { color: var(--txt); border-bottom: 1px solid var(--txt); }
/* Placed but never run through IndexChex: no claim either way, so it stays
   the faintest ink on the page and carries no rule under it. */
.ix.un { color: var(--faint); }

/* Status badge. app.py hands each pill an inline background from
   STATUS_COLOR; the design system allows no field of colour here, so the
   badge is forced back to a squared hairline plate and the status word does
   the work. !important is the only way to beat an inline style. */
.pill {
  display: inline-block; background: #fff !important; color: var(--txt);
  border: 1px solid var(--txt); border-radius: 0;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .11em;
  padding: 2px 7px; white-space: nowrap;
}
.tag {
  display: inline-block; background: var(--wash);
  border: 1px solid var(--line); border-radius: 0;
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .11em;
  padding: 2px 7px; margin-right: 6px; color: var(--dim);
}

ul.att { margin: 0; padding: 0; list-style: none; }
ul.att li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
ul.att li:first-child { padding-top: 0; }
ul.att li:last-child { border-bottom: 0; padding-bottom: 0; }
ul.att .attact { font-size: 12.5px; margin-top: 5px; }

ol.queue { margin: 0; padding-left: 26px; }
ol.queue li { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
ol.queue li:last-child { border-bottom: 0; }
ol.queue li::marker { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.qhead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.qmeta { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 4px; }

/* ------------------------------------------------------------------- forms */
input[type=text], input[type=url], input[type=search], input[type=date],
input[type=password], select, textarea {
  font-family: var(--ui); font-size: 13px; color: var(--txt);
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 6px 9px; max-width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--txt); box-shadow: 2px 2px 0 var(--txt);
}
td input[type=text], td input[type=url] { width: 100%; min-width: 160px; }
select.st { min-width: 138px; font-family: var(--mono); font-size: 11px; }
textarea { width: 100%; resize: vertical; line-height: 1.55; }
.rawedit, input.secret { font-family: var(--mono); font-size: 12px; }

button, .btn-link, .copybtn {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em;
  cursor: pointer; border-radius: 0;
  border: 1px solid var(--txt); background: #fff; color: var(--txt);
  padding: 7px 13px; line-height: 1.2; text-decoration: none;
}
button:hover, .btn-link:hover, .copybtn:hover { background: var(--txt); color: #fff; }
a.btn-link { border-bottom: 1px solid var(--txt); display: inline-block; }
button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  padding: 9px 18px; font-size: 10.5px; letter-spacing: .16em;
}
button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
button.primary:active { background: var(--txt); border-color: var(--txt); }
button.danger { padding: 5px 9px; letter-spacing: .06em; }

.filters { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.filters label {
  display: flex; gap: 7px; align-items: center;
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .13em;
}
/* auto-save feedback next to a status dropdown */
.savenote {
  display: block; margin-top: 3px; min-height: 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint);
}
.savenote.bad { color: var(--txt); font-weight: 600; text-transform: none;
  letter-spacing: .01em; font-family: var(--ui); font-size: 11px; }
.savebar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin: 16px 0 0; font-size: 12px; color: var(--dim);
}
form.inline { display: inline-flex; gap: 7px; align-items: center; margin-right: 6px; }
form.inline label {
  display: inline-flex; gap: 7px; align-items: center;
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .13em;
}

.field { margin: 0 0 18px; }
.field label, .checkline {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em; color: var(--dim);
}
.checkline { display: flex; gap: 8px; align-items: center; }
.field input[type=text], .field input[type=url], .field input[type=password] {
  width: 100%; max-width: 640px;
}
.field textarea { max-width: 760px; }
.hint {
  font-family: var(--mono); font-size: 9.5px; font-weight: 400;
  text-transform: none; letter-spacing: .04em; color: var(--faint);
  margin-left: 8px;
}

.tabs {
  display: flex; gap: 20px; align-items: center; margin-bottom: 18px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .13em;
}
.tabs a, .tabs span { color: var(--faint); border-bottom: 0; }
.tabs a:hover { color: var(--txt); }
.tabs .on { color: var(--accent); font-weight: 500; }
/* the trailing note in the tab row is prose, not a tab label */
.tabs .dim {
  font-family: var(--ui); font-size: 12px; text-transform: none;
  letter-spacing: -.006em; color: var(--faint);
}

/* -------------------------------------------------------------- playbook md */
.md { line-height: 1.7; font-size: 14px; color: var(--dim); }
.md > :first-child { margin-top: 0; }
.md h1, .md h2 {
  font-family: var(--ui); font-weight: 600; font-size: 16px;
  letter-spacing: -.015em; color: var(--txt); margin: 26px 0 10px;
}
.md h3, .md h4 {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--dim);
  margin: 22px 0 8px;
}
.md p { margin: 0 0 13px; }
.md b, .md strong { color: var(--txt); font-weight: 600; }
.md ul, .md ol { margin: 0 0 13px; padding-left: 22px; }
.md li { margin-bottom: 5px; }
.md pre {
  font-family: var(--mono); font-size: 12px; background: var(--wash);
  border: 1px solid var(--line); border-radius: 0;
  padding: 12px 14px; overflow-x: auto; color: var(--txt);
}
.md code { background: var(--wash); }
.md blockquote {
  margin: 0 0 13px; padding-left: 14px;
  border-left: 3px solid var(--txt); color: var(--dim);
}
.md table { margin-bottom: 13px; }
.md img { max-width: 100%; }

/* ------------------------------------------------ work mode (copy panel) */
/* Action plates. The accent is rationed, so the default plate is ink on white
   with a hard offset and only the two genuinely primary actions (start the
   work queue, finish an unfinished setup) are filled with the accent. On the
   projects index that keeps at most one or two blue marks in a viewport. */
.openbtn {
  display: inline-block; background: #fff; color: var(--txt);
  border: 1px solid var(--txt); border-radius: 0;
  box-shadow: 3px 3px 0 var(--txt);
  padding: 9px 17px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
}
.openbtn:hover { background: var(--txt); color: #fff; }
.openbtn.big, .openbtn.warnbtn {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: none;
}
.openbtn.big { font-size: 11px; padding: 12px 24px; }
.openbtn.big:hover, .openbtn.warnbtn:hover {
  background: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
}

.cp-group { margin: 24px 0 10px; }
.cp { display: flex; flex-direction: column; }
.cp-row {
  display: flex; gap: 14px; align-items: flex-start;
  border-top: 1px solid var(--line-soft); padding: 9px 0;
}
.cp-row:first-child { border-top: 0; }
.cp-row.copied { box-shadow: inset 3px 0 0 var(--ok); }
.cp-label {
  flex: 0 0 160px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--dim);
  padding-top: 3px;
}
.cp-value {
  flex: 1; font-size: 13.5px; cursor: pointer; word-break: break-word;
  white-space: pre-wrap; color: var(--txt);
}
.copybtn { flex: 0 0 auto; padding: 4px 9px; }

.acct-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 18px;
}
.acct-grid label {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em; color: var(--dim);
}
.acct-grid input { width: 100%; }
/* the "generate" button is a column child of its label; keep it a small plate
   under the field instead of a full-width bar */
.acct-grid label button { align-self: flex-start; }

/* login method: email+password vs the platform's "Sign in with Google" */
.loginpick { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.loginpick label {
  display: flex; gap: 6px; align-items: center; margin-bottom: 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  text-transform: none; letter-spacing: .04em; color: var(--txt);
}
/* the password field, dimmed out while Google sign-in is picked */
.off { opacity: .35; }

.statusbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.statusbtn input { position: absolute; opacity: 0; }
.statusbtn span {
  display: inline-block; padding: 7px 13px; border-radius: 0;
  border: 1px solid var(--line); cursor: pointer;
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--dim);
}
.statusbtn span:hover { border-color: var(--txt); color: var(--txt); }
/* The chosen status is the page's one active state: ink plate, hard offset.
   The per-status --c colour handed down from app.py is deliberately unused. */
.statusbtn input:checked + span {
  background: var(--txt); border-color: var(--txt); color: #fff;
  font-weight: 500;
}
.statusbtn input:focus-visible + span { box-shadow: 2px 2px 0 var(--txt); }

.mailbody {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  max-height: 480px; overflow-y: auto;
  background: var(--wash); border: 1px solid var(--line); padding: 14px 16px;
  margin: 0;
}
.pw { font-family: var(--mono); font-size: 12px; margin-right: 6px; }

/* ------------------------------------------------ guided path (steps 1-2-3)
   Each step card is a printed plate with a hard ink offset. */
.step { box-shadow: 3px 3px 0 var(--txt); border-color: var(--txt); }
.stepdone { box-shadow: none; border-color: var(--line); }
.stephead { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.stephead h2 { margin: 0 0 3px; }
.stephead > div { flex: 1; }
.stepnum {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 0;
  background: var(--txt); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Green is spec-reserved for verified check glyphs, so a completed step is a
   green check on white inside a hairline, not a green field. */
.stepnum.done { background: #fff; border: 1px solid var(--line); color: var(--ok); }
.stepcount {
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .13em;
  white-space: nowrap; padding-top: 6px;
}
.setupdone > summary {
  list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center;
}
.setupdone > summary::-webkit-details-marker { display: none; }
.setupdone > summary .dim {
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .13em;
}
.setupdone[open] > summary { margin-bottom: 16px; }

.startrow { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 4px 0 0; }

/* ---------------------------------------------------------- setup checklist */
.checklist { display: flex; flex-direction: column; }
.chk { display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--line-soft); }
.chk:first-child { border-top: 0; padding-top: 0; }
.chkmark {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 0;
  border: 1px solid var(--line); background: #fff; color: var(--ok);
  font-size: 11px; display: inline-flex; align-items: center;
  justify-content: center; margin-top: 2px;
}
.chkbody { flex: 1; min-width: 0; }
.chkbody b { font-weight: 600; }
.chkbody .dim { font-size: 12.5px; margin-top: 3px; }
.chk.done .chkbody b { color: var(--dim); font-weight: 500; }
.chkact {
  flex: 0 0 auto; display: flex; gap: 12px; align-items: center;
  white-space: nowrap;
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .12em;
}
.chkact a { border-bottom-color: var(--line); }

/* ------------------------------------------------------ project cards (home) */
.projhead {
  display: flex; gap: 18px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px;
}
.projmeta {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline;
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .12em;
}
.projmeta b { color: var(--txt); font-weight: 500; }
.projmeta a { border-bottom-color: var(--line); }
.setupnote { border-left: 4px solid var(--txt); }

/* ------------------------------------------------------ attention + details */
.detailrow {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .13em;
}
.detailrow a { color: var(--dim); border-bottom-color: var(--line); }
.detailrow a:hover { color: var(--txt); border-bottom-color: var(--txt); }
/* per-row action links inside the ledger's source cell */
.ledger td.src .rowact { margin-top: 4px; font-size: 11.5px; }
.ledger td.src .rowact a { margin-right: 10px; white-space: nowrap; }

/* -------------------------------------------------------- attached persona */
.personabar { padding: 14px 18px; }
.personarow {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px;
}
.personarow > .dim:first-child {
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .13em;
}
.personaform { display: flex; gap: 7px; align-items: center; margin-left: auto; }
.personaform select { max-width: 240px; }
/* the same picker on the persona library, sitting on its own line */
.attachform {
  margin-left: 0; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-soft); font-size: 13px; flex-wrap: wrap;
}
.attachform > .dim:first-child {
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .13em;
}

/* ------------------------------------------------------------------- login */
.loginwrap { max-width: 420px; margin: 14vh auto 0; }
.loginwrap h1 { font-size: 20px; margin: 0 0 18px; letter-spacing: -.02em; }
.loginwrap .card { border-color: var(--txt); box-shadow: 4px 4px 0 var(--txt); }

@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
  h1 { font-size: 22px; }
  .cp-row { flex-wrap: wrap; }
  .cp-label { flex-basis: 100%; }
  .signout { margin-left: 0; }
}

/* ---- persona page: the manual steps carry their own inputs inside the row */
.chkbody .field { margin: 12px 0 0; max-width: 640px; }
.chkbody .field:last-child { margin-bottom: 2px; }
.stephead form.inline { margin-right: 0; }

/* Live tick inside a manual-step checklist: the big box is a real checkbox. */
.chkmark.chklive { cursor: pointer; border-color: var(--dim, #888); }
.chkmark.chklive input[type=checkbox] {
  margin: 0; width: 12px; height: 12px; cursor: pointer; accent-color: var(--ok);
}

/* ------------------------------------------------------- persona photo
   A face is a photograph, so it gets the same squared hairline plate every
   other object on the page gets — no round crop, no shadow. */
.photocard { display: flex; gap: 18px; align-items: flex-start; }
.photo {
  width: 108px; height: 108px; flex: none; object-fit: cover;
  border: 1px solid var(--txt); background: var(--wash);
}
.photonone {
  display: flex; align-items: center; justify-content: center;
  border-color: var(--line); color: var(--faint);
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .12em;
}
.photobody { flex: 1; min-width: 0; }
.photobody .dim { font-size: 12.5px; margin: 3px 0 12px; max-width: 620px; }
.photoacts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.photoupload {
  display: inline-flex; gap: 8px; align-items: center; margin-bottom: 0;
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .13em;
}
.photoupload input[type=file] { font-family: var(--ui); font-size: 12px; }

/* the small face in the persona list */
.personahead { display: flex; gap: 12px; align-items: flex-start; }
.avatar {
  width: 34px; height: 34px; flex: none; object-fit: cover;
  border: 1px solid var(--line); background: var(--wash);
}
.avatarnone { display: inline-block; }

/* -------------------------------------------------------- brand assets
   One plate per file, the whole plate a download link — the teammate on
   Render has no git checkout to copy a logo out of. */
.assets { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 0; }
.asset {
  display: flex; flex-direction: column; gap: 4px; width: 132px;
  border: 1px solid var(--line); padding: 10px; color: var(--txt);
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.asset:hover { border-color: var(--txt); text-decoration: none; }
.assetthumb {
  display: flex; align-items: center; justify-content: center;
  height: 74px; background: var(--wash); border: 1px solid var(--line-soft);
}
.assetthumb img { max-width: 100%; max-height: 68px; }
.asset b {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  word-break: break-all;
}
.asset .dim { font-size: 11.5px; line-height: 1.35; }