/* today.damingo.ai — design #4a
 *
 * Paper, ink, and rules. The visual ethic, from the design handoff:
 * NO cards, NO panel backgrounds, NO shadows, NO rounded corners. Anywhere.
 * Structure comes from 2px rules and 2px seams between filled blocks.
 * If you find yourself adding a border-radius or a box-shadow, stop.
 */

:root {
  --paper:    #f3f2f2;
  --paper-2:  #eae9e9;
  --ink:      #201e1d;
  --ink-60:   #444141;
  --ink-45:   #605d5d;
  --ink-35:   #7d7979;
  --ink-25:   #9b9797;
  --ink-15:   #bab6b6;
  --red:      #ec3013;
  --red-dark: #dd2b0f;
  --red-ink:  #ae1800;
  --red-pale: #ff9783;

  --rule:      2px solid rgba(32, 30, 29, .4);
  --rule-row:  1px solid rgba(32, 30, 29, .18);
  --rule-hour: 1px solid rgba(32, 30, 29, .14);
  --rule-ink:  2px solid rgba(243, 242, 242, .3);
  --wash-weekend: rgba(32, 30, 29, .05);
  --wash-past:    rgba(32, 30, 29, .04);
  --wash-filed:   rgba(236, 48, 19, .10);

  --gutter: 34px;
}

* { box-sizing: border-box; }

/* One screen. The page itself never scrolls: the task list and the rail scroll
   inside their own frames instead, so the header, the day grid and Aria are
   always where you left them. Below 1180px this is released and the page
   scrolls normally, because a phone cannot honour it. */
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 Archivo, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#shell { height: 100dvh; display: flex; flex-direction: column; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
[hidden] { display: none !important; }

/* Numerals never shift width: the clock ticks and counts change in place. */
.num { font-variant-numeric: tabular-nums; }

.up {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .12em;
}

/* ---------------------------------------------------------------- sign in */
.signin { min-height: 100dvh; display: grid; place-items: center; padding: 2rem; }
.signin form { width: min(22rem, 100%); display: grid; gap: 2px; }
.signin h1 { margin: 0 0 4px; font-weight: 800; font-size: 34px; letter-spacing: -.03em; }
.signin p { margin: 0 0 14px; color: var(--ink-45); font-size: 13px; }
.signin input {
  border: var(--rule); background: transparent; padding: 11px 12px;
  font-size: 14px; outline: none;
}
.signin input:focus { border-color: var(--red); }
.signin button {
  border: 0; background: var(--red); color: var(--paper);
  padding: 12px; font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em;
}
.signin button:hover { background: var(--red-dark); }
.signin .err { min-height: 1.3em; color: var(--red-ink); font-size: 12px; padding-top: 6px; }

/* ------------------------------------------------------------- ink header */
.ink {
  background: var(--ink);
  color: var(--paper);
  padding: 22px var(--gutter) 20px;
}
.ink-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ink-left { display: flex; align-items: flex-end; gap: 24px; }

.clock {
  font-weight: 800; font-size: 62px; line-height: .82; letter-spacing: -.045em;
}
.today-label { font-weight: 800; font-size: 20px; letter-spacing: -.01em; text-transform: uppercase; }
.date-line {
  font-weight: 600; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-15);
}

.stats { display: flex; align-items: flex-end; gap: 24px; }
.stat b { display: block; font-weight: 800; font-size: 26px; line-height: 1; }
.stat span {
  display: block; font-weight: 600; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-15);
}
.stat.warn b { color: var(--red-pale); }

.next-meet { background: var(--red); padding: 10px 14px; }
.next-meet .lede {
  font-weight: 800; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; opacity: .9;
}
.next-meet .row { display: flex; align-items: baseline; gap: 10px; }
.next-meet .at { font-weight: 800; font-size: 24px; }
.next-meet .what { font-weight: 800; font-size: 14px; letter-spacing: -.01em; }

.brief {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  align-items: baseline;
  border-top: var(--rule-ink); margin-top: 14px; padding-top: 10px;
}
.brief > .acts { justify-content: flex-start; }
.brief > .lbl {
  font-weight: 800; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-15);
}
.brief > .text { font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.brief > .acts { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.receipt {
  font-weight: 600; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-15);
}
.btn-ghost-ink {
  border: 2px solid rgba(243, 242, 242, .4); background: transparent; color: var(--paper);
  padding: 3px 10px; font-weight: 800; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
}
.btn-ghost-ink:hover { border-color: var(--red); background: var(--red); }
.btn-paper {
  border: 0; background: var(--paper); color: var(--ink);
  padding: 5px 12px; font-weight: 800; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
}
.btn-paper:hover { background: var(--red); color: var(--paper); }

/* ----------------------------------------------------------- control row */
.body {
  padding: 18px var(--gutter) 22px;
  flex: 1; min-height: 0;          /* min-height:0 lets the children shrink */
  display: flex; flex-direction: column;
}

.controls {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: var(--rule); padding-bottom: 8px; gap: 16px;
}
/* 2px gaps between filled blocks are the design's signature seam. */
.chips { display: flex; gap: 2px; flex-wrap: wrap; }

.chip {
  border: 0; background: var(--paper-2); color: var(--ink);
  padding: 8px 16px 8px 12px; font-weight: 800; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; text-align: left;
}
.chip:hover { background: var(--red-dark); color: var(--paper); }
.chip.on { background: var(--ink); color: var(--paper); }

.chip-org {
  border: 0; background: var(--paper-2); color: var(--ink);
  padding: 7px 11px; font-weight: 800; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; text-align: left;
}
.chip-org:hover { background: var(--ink); color: var(--paper); }
.chip-org.on { background: var(--red); color: var(--paper); }
/* With Aria is a MODE, not an alert, so it selects to ink rather than red. */
.chip-org.on.mode { background: var(--ink); }
.chip-org .n { font-weight: 600; opacity: .7; }

/* --------------------------------------------------------------- columns */
.cols {
  display: grid; grid-template-columns: 1fr 424px; gap: 32px;
  padding-top: 16px; align-items: stretch;
  flex: 1; min-height: 0;
}
.left { display: flex; flex-direction: column; min-height: 0; }

/* The list is a framed, internally scrolling column: it takes whatever height
   is left and never pushes the Waiting-on and Training strips off the screen. */
#stream {
  flex: 1; min-height: 0; overflow-y: auto;
  border-bottom: var(--rule);
  scrollbar-width: thin;
}
/* Thirty-seven rows in a frame that shows nine, behind a thin scrollbar, looks
   exactly like a nine-row list. The last visible row fades under the closing
   rule only while there is something below it, so the column admits its depth
   without adding a control. */
#stream.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
}
#stream::-webkit-scrollbar { width: 8px; }
#stream::-webkit-scrollbar-thumb { background: rgba(32, 30, 29, .3); }
#stream::-webkit-scrollbar-track { background: transparent; }

/* The rail scrolls on its own too, so a long thread cannot move the page. */
.rail { overflow-y: auto; min-height: 0; scrollbar-width: thin; }

/* ---------------------------------------------------------------- capture */
.capture { display: flex; gap: 0; }
.capture input[type=text] {
  flex: 1; min-width: 0; border: var(--rule); border-right: 0;
  background: transparent; padding: 11px 12px; font-size: 14px; outline: none;
}
.capture select {
  border: var(--rule); border-right: 0; background: transparent;
  padding: 0 10px; font-weight: 600; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; outline: none;
}
.capture input[type=date] {
  border: var(--rule); border-right: 0; background: transparent;
  padding: 0 10px; font-weight: 600; font-size: 12px; outline: none;
  font-variant-numeric: tabular-nums;
}
.capture button {
  border: 0; background: var(--red); color: var(--paper); padding: 0 18px;
  font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.capture button:hover { background: var(--red-dark); }

/* ----------------------------------------------------- search and history */
#search {
  flex: 1; max-width: 320px; min-width: 120px;
  border: 0; border-bottom: var(--rule); background: transparent;
  padding: 3px 2px 5px; font-size: 13px; outline: none;
}
#search::placeholder { color: var(--ink-25); }
#search:focus { border-bottom-color: var(--red); }

/* Day headings in the Done view and the count line above search results. Same
   rules-and-caps vocabulary as the Waiting and Training heads. */
.group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: var(--rule); padding: 16px 0 5px; margin-bottom: 2px;
}
.group-head:first-child { padding-top: 6px; }
.group-head .lbl {
  font-weight: 800; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.group-head .sub {
  font-weight: 600; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-25);
}

/* A finished task. Greyed rather than struck through: it is a record you may
   want to read, not a mistake. */
.task.is-done .line { grid-template-columns: 56px 3px 44px 1fr auto auto; cursor: default; }
.task.is-done .title { color: var(--ink-45); }
.task.is-done .at {
  align-self: start; font-weight: 800; font-size: 11px; color: var(--ink-25);
}

/* Why a search result matched, when the word was in a note and not the title. */
.why {
  font-size: 12px; line-height: 1.45; color: var(--ink-45);
  padding: 0 0 10px 71px; margin-top: -4px;
}

/* Density. 29 open tasks at full size run well past the fold, so the whole
   stream scales off one variable rather than growing a scrollbar. */
.density { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.density span {
  font-weight: 800; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-45);
}
.density input {
  -webkit-appearance: none; appearance: none;
  width: 92px; height: 2px; background: rgba(32, 30, 29, .4); outline: none;
}
.density input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 16px; background: var(--ink); border: 0; cursor: ew-resize;
}
.density input::-moz-range-thumb {
  width: 10px; height: 16px; background: var(--ink); border: 0; border-radius: 0; cursor: ew-resize;
}
.density input:hover::-webkit-slider-thumb { background: var(--red); }
.density input:hover::-moz-range-thumb { background: var(--red); }

.refresh {
  border: 0; background: transparent; padding: 0 0 4px 4px;
  font-weight: 800; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-45);
}
.refresh:hover { color: var(--red); }
.refresh span { font-weight: 600; letter-spacing: .06em; color: var(--ink-25); }
.refresh.busy { color: var(--red-ink); }

/* ------------------------------------------------------------------ tasks */
:root { --dens: 1; }

.task { border-bottom: var(--rule-row); }
.task.editing { background: var(--wash-past); }

/* The row you just filed. Capture scrolls to it and washes it for a few seconds,
   because the list sorts by what matters today and a new task otherwise lands
   invisibly mid-column. A wash and a rule, not a highlight box: same vocabulary
   as the rest of the screen. The priority bar keeps its own colour. */
.task.just-filed { background: var(--wash-filed); border-bottom-color: var(--red-ink); }
.task .line {
  display: grid;
  grid-template-columns: 56px 3px 20px 1fr auto auto;
  gap: 12px; align-items: stretch;
  padding: calc(11px * var(--dens)) 0;
  cursor: pointer;
}
/* Below ~0.8 the second line is the first thing to go: the title and its
   priority mark are what you scan, the meta is detail. */
.task .line .meta { font-size: calc(10px * var(--dens)); }
.code {
  align-self: start; color: var(--paper); padding: 2px 6px;
  font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.bar { display: block; }

.box {
  width: 20px; height: 20px; margin-top: 1px; padding: 0;
  border: 2px solid rgba(32, 30, 29, .4); background: transparent;
  color: var(--paper); font-weight: 800; font-size: 11px; line-height: 1;
}
.box:hover { border-color: var(--red); }
.box.due { border-color: var(--red); }
.box.done { background: var(--red); border-color: var(--red); }

.task .title {
  font-size: calc(15px * var(--dens)); line-height: 1.35;
  text-wrap: pretty; cursor: text;
}
.task .title:hover { color: var(--red-ink); }

/* ** urgent, * high. Fixed width so every title starts on the same edge. */
.pri-mark {
  display: inline-block; width: 1.5em; margin-left: -.15em;
  font-weight: 800; letter-spacing: -.05em;
}
.pri-mark.pri-urgent { color: var(--red); }
.pri-mark.pri-high { color: var(--red-pale); }
/* No strikethrough on finished work. It dated from when is-done was a flicker
   on the way off the list; now it is the History view, which exists to be read.
   The colour and the timestamp already say it is finished. */
.task.is-waiting .title { color: var(--ink-45); }
.meta {
  font-weight: 600; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-45);
}
.a-mark {
  align-self: start; background: var(--ink); color: var(--paper);
  width: 20px; text-align: center; font-weight: 800; font-size: 11px; line-height: 20px;
}
.flag {
  align-self: start; padding: 2px 8px; font-weight: 800; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  border: 2px solid rgba(32, 30, 29, .4); color: var(--ink-45); background: transparent;
}
.flag.today { background: var(--red); border-color: var(--red); color: var(--paper); }
/* Blocked is a different fact from the date, so it reads differently: an outline
   in ink rather than a filled red block. Both can sit in the slot at once. */
.flag.blocked { border-color: var(--ink); color: var(--ink); }
.flags { display: flex; gap: 2px; align-self: start; }
.edit-btn {
  align-self: start; border: 0; background: transparent; padding: 2px 0;
  font-weight: 800; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-45);
}
.edit-btn:hover { color: var(--red); }

/* --------------------------------------------------------- inline editor */
.editor { border-top: var(--rule); padding: 14px 0 16px 68px; }
.editor .name {
  width: 100%; border: 0; border-bottom: var(--rule); background: transparent;
  padding: 0 0 6px; font-weight: 600; font-size: 17px; outline: none;
}
.opt-row {
  display: grid; grid-template-columns: 74px 1fr; gap: 12px;
  align-items: center; padding-top: 12px;
}
.opt-row + .opt-row { padding-top: 8px; }
.opt-row > .lbl {
  font-weight: 800; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-45);
}
.opts { display: flex; gap: 2px; flex-wrap: wrap; }
.opt {
  border: 2px solid rgba(32, 30, 29, .4); background: transparent; color: var(--ink);
  padding: 4px 12px; font-weight: 800; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
}
.opt:hover { border-color: var(--red); }
.opt.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.opt.on.date { background: var(--red); border-color: var(--red); }

/* Any date, for the ones the presets cannot reach. Sits at the end of the same
   row and wears the same border, so it reads as the last option rather than a
   different kind of control. */
.date-pick {
  border: 2px solid rgba(32, 30, 29, .4); background: transparent; color: var(--ink);
  padding: 3px 8px; font-weight: 800; font-size: 10px; letter-spacing: .06em;
  outline: none; font-variant-numeric: tabular-nums; margin-left: 6px;
}
.date-pick:hover, .date-pick:focus { border-color: var(--red); }

.editor .acts { display: flex; gap: 2px; padding-top: 16px; align-items: center; }
.btn-ink {
  border: 0; background: var(--ink); color: var(--paper); padding: 7px 16px;
  font-weight: 800; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.btn-ink:hover { background: var(--red); }
.btn-ghost {
  border: 2px solid rgba(32, 30, 29, .4); background: transparent;
  padding: 5px 14px; font-weight: 800; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
}
.btn-ghost:hover { border-color: var(--red); color: var(--red-ink); }
.btn-del {
  border: 0; background: transparent; margin-left: auto; padding: 5px 0;
  font-weight: 800; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red-ink);
}
.btn-del:hover { text-decoration: underline; }

.wait-who {
  border: 0; border-bottom: var(--rule-row); background: transparent;
  padding: 2px 0; font-size: 12px; outline: none; width: 12rem;
}

/* Note thread inside the row editor. Detail lives here, never in the title. */
.notes { border-top: var(--rule-row); margin-top: 14px; padding-top: 10px; }
.note-list { max-height: 11rem; overflow-y: auto; }
.note { padding-bottom: 8px; }
.note .body { font-size: 13px; line-height: 1.4; white-space: pre-wrap; }
.notes .when {
  font-weight: 600; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-25);
}
.note-add { display: flex; gap: 0; padding-top: 4px; }
.note-add input {
  flex: 1; min-width: 0; border: 2px solid rgba(32, 30, 29, .4); border-right: 0;
  background: transparent; padding: 5px 9px; font-size: 13px; outline: none;
}
.note-add input:focus { border-color: var(--red); }
.note-add button { padding: 5px 12px; }

/* ------------------------------------------------- waiting-on + training */
.strip {
  display: grid; grid-template-columns: 1fr 300px; gap: 32px; padding-top: 18px;
  align-items: start; flex: none;
}
.head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: var(--rule); border-bottom: var(--rule); padding: 12px 0 6px;
  gap: 10px;
}
.head .lbl { margin-right: auto; }
.collapse {
  border: 0; background: transparent; color: var(--ink-45);
  padding: 0 2px; font-size: 11px; line-height: 1;
}
.collapse:hover { color: var(--red); }

/* Shut: the two headings stay, everything under them goes, and the task list
   takes the height back. The counts live in the headings, so a collapsed strip
   still says how many you are waiting on. */
.strip.shut { grid-template-columns: 1fr 300px; }
.strip.shut #waiting,
.strip.shut #training { display: none; }
.strip.shut .head { border-bottom: 0; }
.head .lbl {
  font-weight: 800; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-45);
}
.head .sub {
  font-weight: 600; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-25);
}
/* The strip is flex:none, so every row added here came straight out of the task
   list's height. Nine of them left the stream a slot tall. It is a band with a
   ceiling now: past about four rows it scrolls on its own, exactly like the
   stream and the rail, and the count beside the heading says how many there
   are in total so nothing is hidden by the scroll. */
#waiting { max-height: 168px; overflow-y: auto; scrollbar-width: thin; }
#waiting::-webkit-scrollbar { width: 8px; }
#waiting::-webkit-scrollbar-thumb { background: rgba(32, 30, 29, .3); }
#waiting::-webkit-scrollbar-track { background: transparent; }

.wait-row {
  display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px;
  align-items: baseline; padding: 9px 0; border-bottom: var(--rule-row);
}
.wait-row .age { font-weight: 800; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.wait-row .age.stale { color: var(--red-ink); }
.btn-sm {
  border: 2px solid rgba(32, 30, 29, .4); background: transparent; padding: 2px 9px;
  font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.btn-sm:hover { border-color: var(--red); color: var(--red-ink); }

/* Where the training block earns its space: the result, not the effort. */
.body-now {
  display: flex; gap: 18px; align-items: baseline;
  border-top: var(--rule-row); margin-top: 12px; padding-top: 10px;
}
.body-now b { font-weight: 800; font-size: 21px; line-height: 1; }
.body-now span {
  display: block; font-weight: 600; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-45); padding-top: 3px;
}
.spark { display: block; width: 100%; height: 26px; margin-top: 10px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark circle { fill: var(--red); }
.body-delta {
  font-weight: 800; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red-ink); padding-top: 8px;
}

.streak { display: flex; align-items: flex-end; gap: 12px; padding-top: 10px; }
.streak b { font-weight: 800; font-size: 34px; line-height: .85; color: var(--red); }
.streak span { font-size: 12px; color: var(--ink-45); padding-bottom: 3px; }
.sessions { display: flex; gap: 2px; padding-top: 12px; }
.sessions span {
  flex: 1; border: 2px solid rgba(32, 30, 29, .4); padding: 5px 0; text-align: center;
  font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.sessions .done { background: var(--red); color: var(--paper); }
.sessions .next { background: var(--paper); color: var(--ink); }
.sessions .todo { background: transparent; color: var(--ink-25); }

/* ------------------------------------------------------------- right rail */
.rail { border-left: var(--rule); padding-left: 26px; }
.rail-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: var(--rule); padding-bottom: 7px;
}
.rail-head h2 { margin: 0; font-weight: 800; font-size: 15px; text-transform: uppercase; }
.daynav { display: flex; gap: 2px; margin-right: auto; margin-left: 12px; }
.daynav button {
  border: 2px solid rgba(32, 30, 29, .4); background: transparent; color: var(--ink);
  padding: 1px 7px; font-weight: 800; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
}
.daynav button:hover { border-color: var(--red); color: var(--red-ink); }
.daynav button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rail-head .sub {
  font-weight: 600; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-45);
}

/* All-day and multi-day commitments sit above the grid, not on it. */
.all-days { margin-top: 10px; }
.all-day {
  display: grid; grid-template-columns: 34px 1fr; gap: 8px;
  align-items: baseline; padding: 5px 0; border-bottom: var(--rule-row);
}
.all-day .t { font-size: 13px; line-height: 1.3; }

/* Calendar: absolutely positioned against a fixed px-per-hour scale.
   overflow:hidden is load-bearing — without it a mis-measured block escapes the
   column and lands on top of the header. */
.cal { position: relative; margin-top: 10px; overflow: hidden; }
.cal .hour {
  position: absolute; left: 0; right: 0;
  display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start;
}
.cal .hour b {
  font-weight: 800; font-size: 11px; line-height: 1; color: var(--ink-25);
}
.cal .hour.now b { color: var(--red-ink); }
.cal .hour i { display: block; height: 1px; background: rgba(32, 30, 29, .14); margin-top: 4px; }

.cal .gap {
  position: absolute; left: 42px; right: 0;
  border: 2px dashed rgba(32, 30, 29, .3); background: transparent;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 10px; text-align: left;
}
.cal .gap:hover { border-color: var(--red); background: rgba(236, 48, 19, .06); }
.cal .gap b {
  font-weight: 800; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-45);
}
.cal .gap span {
  font-weight: 600; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-25);
}

.cal .block {
  position: absolute; left: 42px; right: 0;
  background: var(--paper-2); color: var(--ink);
  border-left: 4px solid var(--ink-45); padding: 3px 9px;
  overflow: hidden; line-height: 1.15;
}
.cal .block.next { background: var(--red); color: var(--paper); border-left-color: var(--ink); }
.cal .block .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cal .block .t b { font-weight: 800; font-size: 12px; letter-spacing: -.01em; line-height: 1.2; }
.cal .block .t i { font-style: normal; font-weight: 800; font-size: 11px; white-space: nowrap; }
.cal .block .m {
  font-weight: 600; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-45);
}
.cal .block.next .m { color: rgba(243, 242, 242, .85); }

/* now-line, NOT .now: the current-hour row already carries .now for its red
   label, and a bare `.cal .now` matched both, painting a second red bar across
   that whole hour. */
.cal .now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); }
.cal .now-line i { position: absolute; left: 0; top: -7px; width: 6px; height: 6px; background: var(--red); }

.tmrw {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: baseline;
  border-top: var(--rule); margin-top: 10px; padding-top: 8px;
}
.tmrw .lbl {
  font-weight: 800; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-45);
}
.tmrw .t { font-size: 13px; line-height: 1.3; }
.tmrw .at { font-weight: 800; font-size: 13px; }

/* ------------------------------------------------------------------- Aria */
/* Aria is a primary surface, not a footnote in the rail, so her block claims
   the accent outright: a filled orange band instead of a rule, and her voice
   carries a red edge so it reads as hers at a glance. Red elsewhere in the
   design still means urgency; here it means "this is the assistant". */
.rail-head.accent {
  background: var(--red); color: var(--paper);
  border-bottom: 0; margin-top: 18px;
  padding: 9px 12px; align-items: baseline;
}
.rail-head.accent h2 { font-size: 15px; letter-spacing: .02em; }
.rail-head.accent .sub { color: rgba(243, 242, 242, .85); }

.thread {
  padding: 12px 0 0; height: 296px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.msg { max-width: 88%; padding: 8px 11px; }
/* Her side gets the orange edge; his stays ink, so the two never blur. */
.msg.aria { border-left: 4px solid var(--red); }
.msg .t { font-size: 14px; line-height: 1.4; text-wrap: pretty; white-space: pre-wrap; }
.msg .who {
  font-weight: 600; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; padding-top: 2px;
}
.msg.aria { align-self: flex-start; background: var(--paper-2); color: var(--ink); }
.msg.aria .who { color: var(--ink-25); }
.msg.me { align-self: flex-end; background: var(--ink); color: var(--paper); }
.msg.me .who { color: var(--ink-15); }

.ask {
  align-self: flex-start; max-width: 96%;
  background: var(--paper); border-left: 4px solid var(--red); padding: 9px 11px;
}
.ask .lbl {
  font-weight: 800; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red-ink);
}
.ask .q { font-size: 14px; line-height: 1.4; text-wrap: pretty; padding-top: 3px; }
.ask .acts { display: flex; gap: 2px; padding-top: 8px; flex-wrap: wrap; }

.typing {
  align-self: flex-start; font-weight: 600; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-25);
}

.composer { display: flex; gap: 0; margin-top: 12px; align-items: stretch; }
/* A textarea, not an input: an input cannot hold a newline at all, so
   shift+enter had nothing to insert. Enter sends, shift+enter breaks the line,
   and the box grows to a few lines before it scrolls. */
.composer textarea {
  flex: 1; min-width: 0; border: 2px solid var(--red); border-right: 0;
  background: transparent; padding: 10px 12px;
  font: 400 14px/1.4 Archivo, system-ui, sans-serif;
  outline: none; resize: none; overflow-y: auto;
  max-height: 7.5em;
}
.composer textarea::placeholder { color: var(--ink-25); }
.composer button {
  border: 0; background: var(--red); color: var(--paper); padding: 0 16px;
  font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.composer button:hover { background: var(--red-dark); }
.composer button:disabled { background: var(--ink-35); }

.block-head {
  border-top: var(--rule); margin-top: 20px; padding-top: 10px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.block-head .lbl {
  font-weight: 800; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-45);
}
.block-head .sub {
  font-weight: 600; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-25);
}
.plate-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 10px;
  align-items: baseline; padding: 7px 0; border-bottom: var(--rule-row);
}
.plate-row .t { font-size: 13px; line-height: 1.3; }
.btn-link {
  border: 0; background: transparent; padding: 0;
  font-weight: 800; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red-ink);
}
.btn-link:hover { text-decoration: underline; }
.empty { padding-top: 7px; font-size: 12px; color: var(--ink-25); line-height: 1.35; }

.pad textarea {
  width: 100%; height: 66px; border: 0; background: transparent;
  padding: 6px 0 0; font: 400 14px/1.5 Archivo, system-ui, sans-serif;
  outline: none; resize: none;
}

.links { border-top: var(--rule); margin-top: 6px; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 2px; }
.links a {
  border: 2px solid rgba(32, 30, 29, .4); padding: 4px 10px;
  font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.links a:hover { border-color: var(--red); color: var(--red-ink); text-decoration: none; }

/* The only motion in the design is the clock and the typing indicator.
   No entrance animations, no transitions: this screen is looked at, not
   navigated. Keep it still. */

/* Colony tab: the map takes the whole body below the controls. */
#colony, #flights { flex: 1; min-height: 0; margin-top: 16px; position: relative; }
#flights iframe { display: block; width: 100%; height: 100%; border: 0; background: #07090F; }

/* Narrow screens give up the single-screen rule and scroll normally. */
@media (max-width: 1180px) {
  body { overflow: auto; }
  #shell { height: auto; }
  .body { display: block; }
  .cols { grid-template-columns: 1fr; }
  .left { display: block; }
  #stream { max-height: none; overflow: visible; border-bottom: 0; }
  .rail {
    border-left: 0; padding-left: 0; border-top: var(--rule); padding-top: 18px;
    overflow: visible;
  }
  .strip { grid-template-columns: 1fr; }
  #colony, #flights { height: 75dvh; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .ink-top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .brief { grid-template-columns: 1fr; }
  .brief > .acts { flex-wrap: wrap; white-space: normal; }
  .clock { font-size: 46px; }
  /* Three selectors and a button will not sit beside the field on a phone.
     The title takes its own row and the controls share the one beneath it. */
  .capture { flex-wrap: wrap; }
  .capture input[type=text] { flex: 1 0 100%; border-right: var(--rule); }
  .capture select { flex: 1; border-top: 0; padding: 9px 4px; }
  .capture button { padding: 9px 14px; }
  .task .line { grid-template-columns: 48px 3px 20px 1fr auto auto; }
  .thread { height: auto; max-height: 60vh; }
}

/* Direct links (/#office, /#map): the colony fills the window on its own, with no header or
   tabs, behind the same sign-in. The way back is one pill beside the Office/Map switch. */
html.solo body { overflow: hidden; }
html.solo #colony:not([hidden]) { position: fixed; inset: 0; margin: 0; z-index: 40; }
.solo-exit { display: none; }
html.solo .solo-exit {
  display: inline-flex; align-items: center;
  position: fixed; top: 14px; left: calc(50% + 94px); z-index: 41;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); border: 1px solid #e2e6ec;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.1);
  color: #4a5362; text-decoration: none;
  font: 600 12.5px/1 'Instrument Sans', system-ui, -apple-system, sans-serif;
}
html.solo .solo-exit:hover { color: #121722; }
html.solo .solo-exit:focus-visible { outline: 2px solid #7d5bea; outline-offset: 2px; }