/* ---------- dashboard ----------
   Same surface/line/radius grammar as .ar-card so the tab reads as part of the
   OS rather than a second design. Three cards, one dominant: Cowan puts working
   memory at ~4 chunks, and everything here has to fit one screen with the note
   still visible. */
.d-hero{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;margin-bottom:10px;color:inherit;cursor:pointer;
  transition:border-color .15s,transform .12s}
.d-hero:hover{border-color:var(--line-3);transform:translateY(-1px)}
.d-hero[data-quiet="1"]{cursor:default}
.d-hero[data-quiet="1"]:hover{border-color:var(--line);transform:none}
.d-lbl{font:600 11px var(--mono);letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.d-big{font-family:var(--serif);font-size:46px;line-height:1.05;margin:8px 0 2px}
.d-hero .d-big{font-size:58px}
.d-sub{font-size:12.5px;color:var(--muted)}
.d-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.d-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.d-card .d-big{font-size:34px}
/* The meter is the one place a number becomes a feeling. Lead with what's been
   done while under half — progress framed as remaining reads as a debt. */
.d-meter{height:4px;background:var(--line);border-radius:3px;overflow:hidden;margin:10px 0 7px}
.d-meter i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.d-goals{margin:0 0 20px}
.d-goal{display:flex;gap:11px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.d-goal:last-child{border-bottom:0}
.d-pip{width:7px;height:7px;border-radius:50%;flex:none;position:relative;top:-1px}
.d-pip[data-s="active"]{background:var(--ok)}
.d-pip[data-s="blocked"]{background:var(--stop)}
.d-pip[data-s="planned"]{background:var(--faint)}
.d-goal-t{flex:1;font-size:13.5px}
.d-goal-m{font-size:11.5px;color:var(--faint);white-space:nowrap}
.d-goal-why{font-size:11.5px;color:var(--muted);margin-top:3px}
/* A number a human typed must never look like a number Portal read. Different
   treatment, and always dated. */
.d-stated{border:1px dashed var(--line-2);border-radius:10px;padding:11px 14px;margin-top:12px;
  font-size:12.5px;color:var(--muted)}
.d-stated b{color:var(--text)}
.d-note textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;color:var(--text);font:inherit;font-size:14px;line-height:1.55;resize:vertical;min-height:74px}
.d-note textarea:focus{outline:none;border-color:var(--accent-dim)}
.d-note-bar{display:flex;align-items:center;gap:10px;margin-top:8px}
/* The fade was only ever scoped to `.kb`, so the Dashboard's "Saved" sat lit
   from first paint — a confirmation that is always on confirms nothing. */
.d-note-bar .ok{font-size:12.5px;color:var(--ok);opacity:0;transition:opacity .3s}
.d-note-bar .ok.on{opacity:1}
@media(max-width:640px){.d-pair{grid-template-columns:1fr}.d-hero .d-big{font-size:46px}}

/* ── THE BRIEF ───────────────────────────────────────────────────────────────
   A message, not a panel. It gets the serif and generous line height every
   other card is denied, because the one thing on this screen you are meant to
   READ should not look like the things you are meant to scan. */
.br{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:22px 26px 20px;margin:0 0 22px;overflow:hidden}
.br::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--h1,var(--accent)),var(--h3,var(--accent-dim)))}
.br-h{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.br-h .au{flex:none}
.br-lbl{font:600 11px var(--mono);letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.br-when{margin-left:auto;font:500 11px var(--mono);color:var(--faint)}
.br-body{font-family:var(--serif);font-size:16px;line-height:1.72;color:var(--text)}
.br-body p{margin:0 0 12px}
.br-body p:last-child{margin-bottom:0}
.br-body ul,.br-body ol{margin:0 0 12px;padding-left:20px}
.br-body li{margin-bottom:5px}
.br-body h1,.br-body h2,.br-body h3{font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.01em;margin:18px 0 8px;color:var(--text)}
.br-body blockquote{margin:0 0 12px;padding-left:14px;border-left:2px solid var(--line-2);color:var(--muted)}
.br-body code{font:400 13px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px}
.br-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* Being written. Never a spinner with no words — a client who sees a bare
   spinner cannot tell "working" from "broken". */
.br-writing{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}

/* ── TRACKED ─────────────────────────────────────────────────────────────────
   Four numbers about the BUSINESS. Every one carries where it came from, and
   the mark is not decoration: `stated` and `none` look different from `live`
   on purpose, because a number a person typed must never look like one Portal
   read. */
.tr{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 22px}
.tr-t{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 15px 12px}
.tr-l{font:600 10.5px var(--mono);letter-spacing:.13em;color:var(--faint);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-v{font-family:var(--serif);font-size:30px;line-height:1.1;margin:7px 0 5px}
.tr-t[data-src="none"] .tr-v{color:var(--faint)}
.tr-s{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--faint)}
.tr-dot{width:6px;height:6px;border-radius:50%;flex:none}
.tr-t[data-src="live"] .tr-dot{background:var(--ok)}
.tr-t[data-src="stated"] .tr-dot{background:transparent;border:1px solid var(--muted)}
.tr-t[data-src="none"] .tr-dot{background:transparent;border:1px dashed var(--line-3)}
@media(max-width:760px){.tr{grid-template-columns:1fr 1fr}}

/* ── GOAL LINES ──────────────────────────────────────────────────────────────
   The bar is what was asked for. The verdict under it is what stops the bar
   being decoration — a bar alone cannot report that nothing has moved, which
   is the state most goals are in most of the time. */
/* The goals board carries the most weight on this screen and used to read like
   a footnote — a small label over hairline rules. It is the answer to "is this
   working", so it gets the treatment of a thing you are meant to look at:
   surface, an accent edge, and a name you can read from arm's length. The
   status colours are unchanged, because the honesty lives in those. */
.ses-tag{margin-left:8px;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;vertical-align:middle}
.ses-tag.live{color:var(--accent);background:var(--accent-dim);opacity:.9}
.ses-tag.old{color:var(--faint);border:1px solid var(--line)}
.gl{margin:0 0 22px;background:var(--surface);border:1px solid var(--line);
    border-left:3px solid var(--accent);border-radius:11px;padding:15px 18px 6px}
.gl-hd{font:600 12px var(--sans);letter-spacing:.02em;color:var(--text);margin-bottom:2px}
.gl-sub{font-size:11.5px;color:var(--muted);margin:0 0 10px}
.gl-row{padding:13px 0;border-bottom:1px solid var(--line)}
.gl-row:last-child{border-bottom:0}
.gl-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gl-n{font:500 15px/1.35 var(--sans);color:var(--text);letter-spacing:-.01em}
.gl-t{font:500 11.5px var(--mono);color:var(--faint);white-space:nowrap;flex:none}
/* Active is where the eye should land first; the ones parked are dimmed rather
   than hidden, because a goal you decided to wait on is still a decision. */
.gl-row[data-s="active"] .gl-n{color:var(--text)}
.gl-row[data-s="planned"] .gl-n,.gl-row[data-s="blocked"] .gl-n{color:var(--muted)}
.gl-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:9px 0 6px}
.gl-bar i{display:block;height:100%;border-radius:3px;background:var(--accent);
  transition:width .7s cubic-bezier(.2,.8,.2,1)}
.gl-row[data-s="blocked"] .gl-bar i{background:var(--stop)}
.gl-row[data-done="1"] .gl-bar i{background:var(--ok)}
/* A line Portal cannot see the number for is drawn as an outline, not a fill.
   It must not read as progress nobody has made. */
.gl-row[data-blind="1"] .gl-bar{background:repeating-linear-gradient(90deg,
  var(--line) 0 4px,transparent 4px 8px)}
.gl-v{font-size:12px;color:var(--muted)}

/* ── TODAY, on the dashboard ─────────────────────────────────────────────── */
.td{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin:0 0 22px}
.td-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.td-row{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.td-row:last-child{border-bottom:0}
.td-when{font:500 11.5px var(--mono);color:var(--muted);white-space:nowrap;min-width:66px}
.td-what{flex:1;font-size:13.5px}
.td-k{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;flex:none}
.td-empty{font-size:13px;color:var(--muted)}
.td-more{font-size:12px;color:var(--faint);margin-top:8px}

/* ── THE CALENDAR TAB ────────────────────────────────────────────────────── */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cal-nav{display:flex;align-items:center;gap:4px}
.cal-nav button{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  width:30px;height:30px;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
.cal-nav button:hover{border-color:var(--line-3);color:var(--text)}
.cal-nav span{font:600 12.5px var(--mono);letter-spacing:.04em;min-width:118px;text-align:center}

/* ---- Today is a word, not a glyph ----------------------------------------
   Solomon, 2026-09-07: "today at the top of schedule needs to be moved, it
   overlaps the arrow."

   The cause, not the symptom: `.cal-nav button` sets a hard 30x30 box, which is
   right for the two chevrons and wrong for the only button in the row with a
   LABEL in it. "Today" is about 44px of text in a 30px box, so it spilled left
   out of its own border and landed on the ‹ ›. Every part of the row was
   drawn where it was told to be — the rule just did not distinguish a glyph
   button from a text button.

   So: its own width, real padding, and a gap that separates "move a month" from
   "go home", which are two different intentions and were sitting flush. */
.cal-nav #cal-today{width:auto;min-width:0;padding:0 13px;font:600 11.5px var(--mono);
  letter-spacing:.08em;text-transform:uppercase;margin-left:10px}
.cg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:6px 0 22px}
.cg-dow{font:600 10px var(--mono);letter-spacing:.12em;color:var(--faint);text-transform:uppercase;
  text-align:center;padding:6px 0}
.cg-d{min-height:88px;background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:6px 7px;overflow:hidden}
.cg-d[data-pad="1"]{background:transparent;border-color:transparent}
.cg-d[data-today="1"]{border-color:var(--accent-dim)}
.cg-d[data-day]{cursor:pointer}
/* ---- the picked day ------------------------------------------------------
   Solomon, 2026-09-07: "the schedule needs to highlight the edges of the boxes
   that pinkish purple colour when clicked on."

   There was no pinkish purple in the palette — --accent is pink (#FF2E8B) and
   --h4 is blue-violet (#5B6BFF) — so rather than inventing a flat colour that
   matches neither, the edge is a GRADIENT BETWEEN THE TWO. It reads as the
   pink-purple he means, and it cannot drift out of the palette later because it
   has no colour of its own to drift.

   Two stacked backgrounds do it: the surface fills the padding box, the
   gradient fills the border box, and the transparent border lets the gradient
   through as an edge. That is a real gradient border rather than a 1px
   approximation, and it needs no pseudo-element to stack over the day's
   contents. The outer glow is the same two colours at low alpha, so a picked
   day is findable at a glance on a 42-cell grid. */
.cg-d[data-sel="1"]{
  border-color:transparent;
  background-image:linear-gradient(var(--surface),var(--surface)),
                   linear-gradient(135deg,var(--h1),var(--h4));
  background-origin:border-box;
  background-clip:padding-box,border-box;
  box-shadow:0 0 0 1px rgb(184 74 224 / .30), 0 0 16px rgb(184 74 224 / .22);
}
.cg-n{font:500 11px var(--mono);color:var(--faint);margin-bottom:4px}
.cg-d[data-today="1"] .cg-n{color:var(--accent)}
.cg-e{display:block;width:100%;text-align:left;background:var(--surface-2);border:0;border-radius:5px;
  padding:3px 5px;margin-bottom:3px;font-size:10.5px;line-height:1.35;color:var(--text);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-e:hover{background:var(--line)}
.cg-e[data-k="job"]{box-shadow:inset 2px 0 0 var(--ok)}
.cg-e[data-k="money"]{box-shadow:inset 2px 0 0 var(--h2,var(--accent))}
.cg-e[data-k="deadline"]{box-shadow:inset 2px 0 0 var(--stop)}
.cg-e[data-k="meeting"]{box-shadow:inset 2px 0 0 var(--h4,var(--accent-dim))}
@media(max-width:700px){.cg-d{min-height:62px}.cg-e{font-size:9.5px}}
.cal-f{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:8px;align-items:end}
.cal-f label{display:block;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.cal-f input,.cal-f select{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;color:var(--text);font:400 13px var(--sans);outline:none}
.cal-f input:focus,.cal-f select:focus{border-color:var(--accent-dim)}
@media(max-width:640px){.cal-f{grid-template-columns:1fr 1fr}}
/* What the chat put on the calendar, said back in the chat. A change applied
   silently is one nobody can catch when it lands on the wrong day. */
.cal-said{margin-top:9px;border-left:2px solid var(--line-2);padding:2px 0 2px 11px;
  font-size:12.5px;color:var(--muted)}
.cal-said b{color:var(--text)}
.cal-said[data-bad="1"]{border-left-color:var(--stop)}

.ar-wrap{margin:0 0 18px}
.ar-h{font:600 11px var(--mono);letter-spacing:.16em;color:var(--faint);text-transform:uppercase;margin-bottom:9px}
.ar-card{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:8px;color:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.ar-card:hover{border-color:var(--line-3);transform:translateY(-1px)}
.ar-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px}
.ar-title{font:600 14px var(--sans);color:var(--text);letter-spacing:.005em}
.ar-when{font:500 11.5px var(--mono);color:var(--faint);white-space:nowrap;flex-shrink:0}
.ar-ask{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:8px}
.ar-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.ar-rm{background:transparent;color:var(--faint);border:1px solid var(--line-2);border-radius:8px;cursor:pointer;padding:5px 11px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:color .15s,border-color .15s}
.ar-rm:hover{color:var(--stop);border-color:rgba(229,72,77,.4)}
.ar-status{display:flex;align-items:center;gap:8px;font:500 11.5px var(--mono);color:var(--faint);letter-spacing:.03em}
.ar-pip{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.ar-pip[data-kind="ok"]{background:#7ed09b}
.ar-pip[data-kind="warn"]{background:var(--gold)}
.ar-pip[data-kind="err"]{background:#e5484d}
.ar-pip[data-kind="info"]{background:#8ca2e6}
.ar-detail{margin-bottom:22px}
.ar-d-in{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:20px 22px;position:relative}
.ar-close{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--faint);cursor:pointer;font-size:20px;line-height:1}
.ar-close:hover{color:var(--text)}
.ar-d-h{font:600 18px var(--sans);color:var(--text);margin-bottom:2px}
.ar-d-sub{font-size:12.5px;color:var(--faint);margin-bottom:16px}
.ar-d-section{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2)}
.ar-d-section:first-of-type{border-top:0;padding-top:0}
.ar-d-label{font:600 10px var(--mono);letter-spacing:.18em;color:var(--faint);text-transform:uppercase;margin-bottom:6px}
.ar-d-body{font-size:13.5px;color:var(--muted);line-height:1.6}
.ar-d-body b{color:var(--text)}
.ar-d-body.ar-warn{background:rgba(253,230,138,.08);border:1px solid rgba(253,230,138,.3);border-radius:9px;padding:10px 12px}
.ar-d-reason{font-size:12px;color:var(--faint);font-style:italic;margin-top:6px;line-height:1.55}
.ar-d-hint{font-size:11.5px;color:var(--faint);margin-top:6px}
.ar-d-tokens{font:500 11px var(--mono);letter-spacing:.06em;color:var(--faint);margin-top:14px;text-align:right}
.ar-draft{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:6px}
.ar-draft-agent{font:600 10px var(--mono);letter-spacing:.1em;color:var(--gold);text-transform:uppercase;margin-right:8px}
.ar-draft-status{font:500 10px var(--mono);letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.ar-draft-snippet{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.brain-md h1{font:600 17px var(--sans);color:var(--text);margin:2px 0 12px;letter-spacing:.01em}
.brain-md h2{font:600 11px var(--mono);letter-spacing:.16em;color:var(--gold);margin:22px 0 8px;text-transform:uppercase}
.brain-md h3{font:600 10.5px var(--mono);letter-spacing:.14em;color:var(--faint);margin:18px 0 6px;text-transform:uppercase}
.brain-md p{margin:6px 0}
.brain-md ul{margin:6px 0 6px 4px;padding-left:16px;list-style:none}
.brain-md ul ul{margin:2px 0 2px 10px}
.brain-md li{margin:3px 0;position:relative;padding-left:12px}
.brain-md li:before{content:"·";position:absolute;left:0;color:var(--faint)}
.brain-md strong{color:var(--text);font-weight:600}
.brain-md em{color:var(--faint);font-style:normal}
.brain-md blockquote{border-left:2px solid var(--line-2);padding:2px 12px;margin:10px 0;color:var(--faint);font-style:italic}
.brain-edit-h{font:600 12px var(--mono);letter-spacing:.18em;color:var(--faint);text-transform:uppercase;margin:8px 0 12px}
.brief-box{background:var(--surface);border-left:2px solid var(--accent-dim);border-radius:0 12px 12px 0;
  padding:15px 18px;margin:16px 0 20px}
.brief-box h4{font:500 11px var(--sans);color:var(--muted);margin:0 0 7px}
.brief-box textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;color:var(--text);font:400 13.5px/1.65 var(--sans);resize:vertical;min-height:66px;outline:none}
.brief-box textarea:focus{border-color:var(--accent-dim)}
.brief-box .hintline{font-size:11.5px;color:var(--faint);margin-top:8px;line-height:1.6}
.note{background:var(--surface);border-left:2px solid var(--accent-dim);border-radius:0 10px 10px 0;
  padding:14px 17px;font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:18px}
.note b{color:var(--text);font-weight:500}


/* ---- the day, opened -------------------------------------------------------
   The smooth part of "smoothly drops down the layout of that day".

   grid-template-rows animates from 0fr to 1fr, so the panel opens to exactly
   the height of what is in it and no one has to know that height in advance.
   A max-height transition was the alternative and is worse in both directions:
   a value large enough for a busy day makes an empty day take the full duration
   to open, and one sized for an empty day clips a busy one with no warning.
   min-height:0 on the child is what lets the 0fr row actually collapse. */
.cd-drop{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,margin .28s ease;
  opacity:0;margin:0}
.cd-drop[data-open="1"]{grid-template-rows:1fr;opacity:1;margin:0 0 18px}
.cd-inner{min-height:0;overflow:hidden}

.cd-h{display:flex;align-items:center;gap:12px;padding:0 2px 9px}
.cd-day{font:600 13px var(--mono);letter-spacing:.04em;color:var(--text)}
.cd-n{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cd-x{margin-left:auto;background:transparent;border:0;color:var(--faint);cursor:pointer;
  font-size:19px;line-height:1;padding:2px 6px;border-radius:6px}
.cd-x:hover{color:var(--text);background:var(--surface-2)}

.cd-list{display:flex;flex-direction:column;gap:6px}
.cd-row{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px 14px;
  transition:border-color .15s,background .15s}
.cd-row:hover{border-color:var(--line-3);background:var(--surface-2)}
/* Same left-edge colour code as the grid cells, so a job reads as a job in both
   places. One vocabulary, two sizes. */
.cd-row[data-k="job"]{box-shadow:inset 2px 0 0 var(--ok)}
.cd-row[data-k="money"]{box-shadow:inset 2px 0 0 var(--h2,var(--accent))}
.cd-row[data-k="deadline"]{box-shadow:inset 2px 0 0 var(--stop)}
.cd-row[data-k="meeting"]{box-shadow:inset 2px 0 0 var(--h4,var(--accent-dim))}
.cd-t{flex:none;font:600 11px var(--mono);color:var(--muted);min-width:104px}
.cd-ttl{color:var(--text);font-size:14.5px}
.cd-note{color:var(--faint);font-size:12.5px}
.cd-rep{margin-left:auto;flex:none;font:600 9px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);border:1px solid var(--line);
  border-radius:99px;padding:3px 8px}
.cd-empty{color:var(--faint);font-size:13.5px;padding:2px}

@media (prefers-reduced-motion:reduce){
  .cd-drop{transition:none}
}
@media(max-width:700px){
  .cd-t{min-width:0}
  .cd-row{flex-wrap:wrap;gap:4px 10px}
}