/* =============================================================================
   Personal OS Console — v5 design system

   v4 was rounded glass panels on a radial wash, four type families, and a
   one-column stack of differently-sized cards. v5 changes all three axes the
   brief called out:

   GEOMETRY   squared off. 0px radius, 1px hairlines, a 2px accent tick on
              every panel header. Panels live in rows of equal cells that
              stretch to a common height, so no tile stands alone.
   TYPE       two families instead of four. Space Grotesk carries UI text,
              JetBrains Mono carries every number, label, and timestamp.
              Orbitron and Rajdhani are gone.
   LAYOUT     a 12-column grid with named row bands, not a vertical stack.

   Everything is custom properties so a future theme is a variable swap.
   ========================================================================== */

:root {
  /* ---- surface ramp: near-black through to panel fill ---------------- */
  --bg:            #04070b;
  --bg-elev:       #070d14;
  --panel:         #090f17;
  --panel-hi:      #0d1621;
  --line:          #16222f;
  --line-hi:       #1e3244;

  /* ---- ink ramp ------------------------------------------------------ */
  --ink:           #e6eef7;
  --ink-2:         #9fb2c4;
  --ink-3:         #64788b;
  --ink-4:         #3d4d5d;

  /* ---- accents ------------------------------------------------------- */
  --accent:        #22d3ee;   /* primary, carried over from v4 */
  --accent-dim:    rgba(34, 211, 238, 0.14);
  --accent-line:   rgba(34, 211, 238, 0.30);
  --warn:          #f5a524;
  --pos:           #34d399;
  --neg:           #f87171;
  --idle:          #4a5b6d;

  /* ---- priority ------------------------------------------------------ */
  --p0:            #f87171;
  --p1:            #f5a524;
  --p2:            #64788b;

  /* ---- spacing scale: everything is a multiple of 4 ------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* ---- type ---------------------------------------------------------- */
  --ui:   'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: var(--s4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute is display:none in the UA sheet, which any author
   display rule outranks. .row-list sets display:flex, so folds marked hidden
   rendered open. Make the attribute win everywhere. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
svg, img { max-width: 100%; }

body {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.45;
  /* a single hairline grid, barely visible, so the squared geometry reads
     as deliberate rather than plain */
  background-image:
    linear-gradient(var(--bg-elev) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-elev) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-hi); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-line); }

/* =============================================================================
   Layout shell
   ========================================================================== */

.shell {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--s5) var(--gutter) var(--s8);
}

/* A band is one horizontal row of equal-width, equal-height cells.
   Cells stretch, which is what keeps the rows symmetrical. */
.band {
  display: grid;
  gap: var(--gutter);
  align-items: stretch;
  margin-bottom: var(--gutter);
}
.band--1 { grid-template-columns: 1fr; }
.band--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.band--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* =============================================================================
   Panel — the single repeated unit. Squared, hairlined, accent-ticked.
   ========================================================================== */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
.panel::before {
  /* the 2px tick: v5's replacement for v4's glow */
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 40px; height: 2px;
  background: var(--accent);
}
.panel--quiet::before { background: var(--line-hi); }
.panel--pending::before { background: var(--idle); }

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--line);
}
.panel__title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.panel__body {
  padding: var(--s4);
  flex: 1;
  min-width: 0;
}
.panel__body--flush { padding: 0; }

/* =============================================================================
   Command band — greeting, clock, weather
   ========================================================================== */

.command {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  padding: var(--s5) var(--s4);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s6);
  align-items: center;
  margin-bottom: var(--gutter);
}
.command__greeting {
  font-size: clamp(20px, 3.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.command__date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s2);
}
.command__stat { text-align: right; }
.command__stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.command__stat-value {
  font-family: var(--mono);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.command__stat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* =============================================================================
   Empty states — every unlanded endpoint says exactly what it waits on.
   Never placeholder data. This class is the contract with the reader.
   ========================================================================== */

.awaiting {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5) var(--s4);
  border: 1px dashed var(--line-hi);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 7px,
    rgba(255, 255, 255, 0.012) 7px, rgba(255, 255, 255, 0.012) 14px
  );
}
.awaiting__tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--idle);
}
.awaiting__what { font-size: 13px; color: var(--ink-2); }
.awaiting__dep {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
}

/* =============================================================================
   Lists: tasks, commitments, plan items
   ========================================================================== */

.row-list { display: flex; flex-direction: column; }
.row-list > * + * { border-top: 1px solid var(--line); }

.item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s3);
  align-items: start;
  padding: var(--s3) var(--s4);
  min-width: 0;
}
.item:hover { background: var(--panel-hi); }
.item__text { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.item__sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  margin-top: var(--s1);
  letter-spacing: 0.06em;
}
.item--done .item__text { color: var(--ink-4); text-decoration: line-through; }

.tick {
  width: 18px; height: 18px;
  border: 1px solid var(--line-hi);
  background: transparent;
  cursor: pointer;
  flex: none;
  margin-top: 1px;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 11px;
  padding: 0;
}
.tick:hover { border-color: var(--accent-line); }
.tick[aria-pressed="true"] {
  background: var(--accent-dim);
  border-color: var(--accent-line);
  color: var(--accent);
}

.rank {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  width: 18px;
  flex: none;
  padding-top: 2px;
}

.pill {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border: 1px solid currentColor;
  white-space: nowrap;
  flex: none;
}
.pill--p0 { color: var(--p0); }
.pill--p1 { color: var(--p1); }
.pill--p2 { color: var(--p2); }

/* =============================================================================
   Habits band
   ========================================================================== */

.habit {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  height: 100%;
}
.habit__name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.habit__desc { font-size: 12px; color: var(--ink-4); line-height: 1.35; flex: 1; }
.habit__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.habit__streak { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.habit__jump {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; text-align: center; padding: var(--s1) 0;
}
.habit__jump:hover { color: var(--accent); }
.habit__note { padding: var(--s2); font-size: 12px; }
.habit__tap {
  width: 100%;
  border: 1px solid var(--line-hi);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--s2);
  cursor: pointer;
}
.habit__tap:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent); }
.habit__tap:disabled { cursor: not-allowed; opacity: 0.45; }
.habit__tap[aria-pressed="true"] {
  background: var(--accent-dim);
  border-color: var(--accent-line);
  color: var(--accent);
}
.habit__strip { display: flex; gap: 2px; }
.habit__cell { flex: 1; height: 4px; background: var(--line); }
.habit__cell--on { background: var(--accent); }

/* =============================================================================
   Numbers, money, net worth
   ========================================================================== */

.figure { font-family: var(--mono); font-weight: 500; letter-spacing: -0.01em; }
.figure--xl { font-size: clamp(24px, 3.4vw, 34px); }
.figure--lg { font-size: 18px; }
.figure--pos { color: var(--pos); }
.figure--neg { color: var(--neg); }

.blur-guard { filter: blur(9px); transition: filter 0.18s ease; user-select: none; }
.revealed .blur-guard { filter: none; }

.nw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  align-items: end;
}

/* =============================================================================
   Service status
   ========================================================================== */

.svc {
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr auto;
  gap: var(--s2);
  align-items: center;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  min-width: 0;
}
.svc__dot { width: 6px; height: 6px; flex: none; }
.svc__dot--online { background: var(--pos); }
.svc__dot--offline { background: var(--neg); }
.svc__dot--degraded { background: var(--warn); }
.svc__dot--unknown { background: var(--idle); }
.svc__name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc__detail { font-family: var(--mono); font-size: 9px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }

/* =============================================================================
   Calendar
   ========================================================================== */

.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cal-day { background: var(--panel); padding: var(--s2); min-height: 74px; cursor: pointer; }
.cal-day:hover { background: var(--panel-hi); }
.cal-day--today { background: var(--panel-hi); box-shadow: inset 0 2px 0 var(--accent); }
.evt-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.evt-join { padding: var(--s1) var(--s2); font-size: 9px; color: var(--accent); border-color: var(--accent-line); text-decoration: none; }
.evt-att__toggle {
  margin-top: var(--s2);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-decoration: underline dotted;
}
.evt-att__toggle:hover { color: var(--accent); }
.evt-att { margin-top: var(--s2); border-left: 1px solid var(--line-hi); padding-left: var(--s3); }
.evt-att__row { display: flex; justify-content: space-between; gap: var(--s3); font-size: 12px; padding: 2px 0; color: var(--ink-2); }
.evt-att__resp { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-4); }
.evt-att__resp--accepted { color: var(--pos); }
.evt-att__resp--declined { color: var(--neg); }
.evt-att__resp--tentative { color: var(--warn); }

.cal-day--sel { background: var(--panel-hi); box-shadow: inset 0 0 0 1px var(--accent-line); }
.cal-day:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.cal-day__num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.cal-day__dow { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-4); text-transform: uppercase; }
.cal-day__count { font-family: var(--mono); font-size: 10px; color: var(--accent); margin-top: var(--s1); }

/* =============================================================================
   Charts — tiny inline SVG sparklines, no chart library
   ========================================================================== */

.kpi { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); height: 100%; }
.kpi__value { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.kpi__delta { font-family: var(--mono); font-size: 11px; }
.kpi__chart { width: 100%; height: 56px; display: block; }
.kpi__chart path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.kpi__chart .kpi__area { fill: var(--accent-dim); stroke: none; }

/* =============================================================================
   PIFR records: citations, append-only trail, record actions
   ========================================================================== */

.rec__act { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); align-items: center; }
.rec__sel { padding: var(--s1) var(--s2); font-size: 11px; max-width: 240px; }

.cite-list { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.cite { display: flex; gap: var(--s2); align-items: baseline; font-size: 11px; min-width: 0; }
.cite__type {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-line); padding: 0 4px; flex: none;
}
.cite__label { color: var(--ink-2); overflow-wrap: anywhere; }
.cite__at { font-family: var(--mono); font-size: 9px; color: var(--ink-4); margin-left: auto; white-space: nowrap; flex: none; }

.trail__toggle {
  margin-top: var(--s2); background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-3);
  text-decoration: underline dotted;
}
.trail__toggle:hover { color: var(--accent); }
.trail { margin-top: var(--s2); border-left: 1px solid var(--line-hi); padding-left: var(--s3); }
.trail__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); font-size: 11px; padding: 2px 0; color: var(--ink-2); }
.trail__at, .trail__actor { font-family: var(--mono); font-size: 9px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ev-prompt { margin-top: var(--s3); border: 1px dashed var(--line-hi); padding: var(--s3); }

.draft {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s2); padding: var(--s1) var(--s2);
  border: 1px solid currentColor; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-decoration: none; max-width: 100%;
}
.draft__dot { width: 5px; height: 5px; background: currentColor; flex: none; }
.draft--ready { color: var(--accent); }
a.draft--ready:hover { background: var(--accent-dim); }
.draft--error { color: var(--neg); }
.draft--pending { color: var(--ink-3); }

.task-form {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s2);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); align-items: stretch;
}
.task-form .field { padding: var(--s2); font-size: 13px; }

.rec-form {
  display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--s2);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line); align-items: stretch;
}
.rec-form .field { padding: var(--s2); font-size: 13px; }
.rec a { color: var(--accent); }
.rec--flash { box-shadow: inset 0 0 0 1px var(--accent); }

@media (max-width: 760px) {
  .draft {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s2); padding: var(--s1) var(--s2);
  border: 1px solid currentColor; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-decoration: none; max-width: 100%;
}
.draft__dot { width: 5px; height: 5px; background: currentColor; flex: none; }
.draft--ready { color: var(--accent); }
a.draft--ready:hover { background: var(--accent-dim); }
.draft--error { color: var(--neg); }
.draft--pending { color: var(--ink-3); }

.task-form {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s2);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); align-items: stretch;
}
.task-form .field { padding: var(--s2); font-size: 13px; }

.rec-form { grid-template-columns: 1fr 1fr; }
  .rec__sel { max-width: 100%; }
  .rec-form .field:first-child, .rec-form .btn { grid-column: 1 / -1; }
  .trail__row { grid-template-columns: 1fr; }
}

/* =============================================================================
   Forms
   ========================================================================== */

.field {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 14px;
  padding: var(--s3);
  resize: vertical;
}
.field:focus { outline: none; border-color: var(--accent-line); }
.field::placeholder { color: var(--ink-4); }

.btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line-hi);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent-line); color: var(--accent); }
.btn--ghost { border-color: var(--line); color: var(--ink-3); }

.evt-form {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr auto;
  gap: var(--s2);
  align-items: stretch;
}
.evt-form .field { padding: var(--s2); font-size: 13px; }
.evt-form__submit { white-space: nowrap; }

.evt-pending {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2);
  align-items: center;
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--line-hi);
}
.evt-pending__label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warn); }

.links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.link {
  display: block;
  padding: var(--s3);
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
}
.link:hover { border-color: var(--accent-line); color: var(--accent); }

/* =============================================================================
   Utility
   ========================================================================== */

.stack { display: flex; flex-direction: column; gap: var(--s3); }
.stack--tight { gap: var(--s2); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.tiny { font-size: 11px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =============================================================================
   Responsive: bands collapse, order is preserved so the first viewport on a
   phone is still Command Plan, then tasks, then today.
   ========================================================================== */

@media (max-width: 1100px) {
  .band--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --gutter: 10px; }
  .shell { padding: var(--s3) var(--gutter) var(--s7); }
  .band--2, .band--3, .band--5 { grid-template-columns: 1fr; }
  .command {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "greet greet" "clock wx";
    gap: var(--s4);
  }
  .command__block--greet { grid-area: greet; }
  .command__block--clock { grid-area: clock; text-align: left; }
  .command__block--wx { grid-area: wx; text-align: right; }
  .nw-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .evt-form { grid-template-columns: 1fr 1fr; }
  .evt-form__title { grid-column: 1 / -1; }
  .evt-form__submit { grid-column: 1 / -1; }
  .svc-grid { grid-template-columns: 1fr; }
  body { background-size: 44px 44px; }
}

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