/* TimothyOS 1.0
   Layout: LCARS-inspired elbow frame. Chrome (mauve, sand, violet) frames the app;
   area colors carry meaning. Deliberately one dark theme. */
@font-face { font-family: "Antonio"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/antonio-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Antonio"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/antonio-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Antonio"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/antonio-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  --bg: #07080b;
  --panel: #13141b;
  --panel-2: #1a1c25;
  --line: #2a2c38;
  --fg: #efe8dc;
  --dim: #9d978c;
  --ink: #0a0a0d;
  --chrome-a: #c99bc4;
  --chrome-b: #dcc6a0;
  --chrome-c: #9a86b5;
  --chrome-d: #e8a27a;   /* apricot (2.8): the fourth LCARS color */
  --hero: #f6c66b;       /* Command Gold (2.8): only the BRIDGE corner and the top bar */
  --hero-bar: linear-gradient(90deg, #f6c66b 0%, #f0b46f 45%, #e8a27a 100%);
  --work: #9db0ff;
  --farm: #f3a83b;
  --hobby: #ff8b70;
  --personal: #56c7b8;
  --ok: #7bd88f;
  --warn: #f3c44b;
  --bad: #ff7a7a;
  --display: "Antonio", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --hh: 54px;          /* day view: one focus hour (07-21); other hours are half */
  --wh: 72px;          /* week view: one focus hour (07-21), so 30 minutes fits a line of title; other hours are half */
  --hatch: repeating-linear-gradient(135deg, transparent 0 9px, rgba(0, 0, 0, .28) 9px 18px);
  --quiet: rgba(255, 255, 255, .025);
  /* Bridge type scale: one size per role */
  --t-hero: 40px;      /* the one big number in a panel */
  --t-count: 28px;     /* key date countdowns */
  --t-title: 19px;     /* section titles, day numbers */
  --t-body: 17px;      /* what you read */
  --t-sub: 15px;       /* second line, dim */
  --t-label: 13px; --t-money: 64px;     /* uppercase labels and readouts */
  --ls-label: .14em;
  --top-gap: 30px;     /* clearance below the iPad status bar (fixed since 2.7.3; Timothy's choice) */
  --safe-top: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overscroll-behavior: none; }
/* The screen never zooms: a quick double tap is two taps (a PIN with a repeated digit), not a zoom. */
html, body, button, a, input, textarea, select, label { touch-action: manipulation; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.35;
  padding-block: calc(var(--safe-top) + var(--top-gap)) max(12px, env(safe-area-inset-bottom, 0px));
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
/* A solid strip behind the status bar, so nothing shows through it when a screen scrolls. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-top);
  background: var(--bg); z-index: 40; pointer-events: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Frame ---------- */
/* The elbow, its inner curve and the top bar are one arm: they always share a color.
   On the Bridge the whole arm lights up, like a selected nav button. */
/* The arm (BRIDGE corner + top bar) wears Command Gold on every screen: the corner and the bar's left end
   are the same gold, and the bar warms into apricot to the right, so they read as one piece. Nothing is
   applied to one part alone. On the Bridge both carry the same faint halo. */
.app { --arm: var(--hero); --arm-bar: var(--hero-bar); --arm-glow: none; }
.app.on-bridge { --arm-glow: 0 0 14px rgba(246, 198, 107, .22); }
.app {
  height: 100%;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 6px;
}
.elbow {
  grid-area: 1 / 1;
  background: var(--arm);
  box-shadow: var(--arm-glow);
  transition: box-shadow 400ms ease;
  border-top-left-radius: 72px 56px;
  min-height: 108px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 14px 10px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .1em;
  text-align: right;
  line-height: 1.05;
}
button.elbow { border: 0; flex-direction: column; }
/* no :active tint on the corner alone: a press lights the whole arm (.flash + .top.armflash) */
.navbridge { display: none !important; }
.top { grid-area: 1 / 2; position: relative; display: flex; flex-direction: column; min-width: 0; }
.top::before {
  content: "";
  position: absolute;
  left: 0; top: 26px;
  width: 32px; height: 32px;
  background: radial-gradient(circle at 100% 100%, transparent 31.5px, var(--arm) 32px);
}
.topbar {
  height: 26px;
  background: var(--arm-bar);
  box-shadow: var(--arm-glow);
  transition: box-shadow 400ms ease;
  border-radius: 0 13px 13px 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 6px;
  padding-right: 26px;
}
.topbar .topbtn {
  border: 0; background: var(--bg); color: var(--arm); font-family: var(--display); font-size: 14px; letter-spacing: .14em;
  padding: 0 10px; display: flex; align-items: center; white-space: nowrap; cursor: pointer;
}
.topbar .topbtn:focus-visible { outline-offset: -3px; }
.topbar span {
  background: var(--bg);
  color: var(--arm);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .14em;
  padding: 0 10px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 12px 0 4px 44px;
}
.titlegroup { display: flex; align-items: flex-end; gap: 12px 18px; flex-wrap: wrap; }
.pager { display: flex; gap: 6px; padding-bottom: 2px; }
.pager .chip { min-width: 52px; padding: 0 14px; }
.tri { display: inline-block; width: 0; height: 0; border-block: 9px solid transparent; vertical-align: middle; }
.tri.l { border-right: 13px solid currentColor; }
.tri.r { border-left: 13px solid currentColor; }
.tri.u, .tri.d { border-block: 0; border-inline: 8px solid transparent; }
.tri.u { border-bottom: 11px solid currentColor; }
.tri.d { border-top: 11px solid currentColor; }
.eyebrow { font-family: var(--display); color: var(--chrome-b); letter-spacing: .18em; font-size: 15px; }
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 28px;
  background: var(--chrome-b);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .12em;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.btn small { font-size: 11px; letter-spacing: .2em; font-weight: 400; }
/* REFRESH NOW at work: a ring turns beside the word; when done it reads SYNCED ✓ for a moment */
@keyframes spin { to { transform: rotate(360deg); } }
.btn .spin { display: inline-block; width: 18px; height: 18px; margin-right: 12px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; }
.btn.busy:disabled { opacity: 1; background-image: none; }
.btn.done { background: var(--ok); }
.btn.capture { background: var(--fg); padding: 0 32px; font-size: 22px; }
.btn.ask { background: var(--chrome-a); }
.btn.plan { background: var(--chrome-c); }
.btn.ghost { background: transparent; color: var(--fg); border: 2px solid var(--line); }
.btn.warn { background: var(--bad); }
.actions .btn { min-height: 46px; padding: 0 16px; font-size: 15px; border-radius: 23px; }
.actions .btn small { font-size: 10px; }
.btn:disabled, .nav:disabled { opacity: .36; background-image: var(--hatch); }
.btn:not(:disabled):active { filter: brightness(1.15); }

.side { grid-area: 2 / 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.nav {
  border: 0;
  height: 62px;
  flex: 0 1 auto;      /* if the header ever needs two lines, the buttons give a little height evenly */
  min-height: 50px;
  padding: 0 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  background: var(--c, var(--chrome-b));
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .14em;
  line-height: 1.1;
}
.nav small { font-size: 11px; letter-spacing: .2em; font-weight: 400; }
.nav[aria-current="page"] { background: var(--fg); }
.fill { flex: 0 1 auto; height: 62px; min-height: 40px; background: var(--chrome-c); }   /* the same size as a screen button; SYSTEMS takes what's left */
.status {
  border: 0;
  flex: 1 0 auto;
  min-height: 70px;
  background: var(--chrome-a);
  border-bottom-left-radius: 72px 56px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 14px 14px;
  font-family: var(--display);
  letter-spacing: .1em;
  font-size: 14px;
  text-align: right;
}
.status[aria-current="page"] { background: var(--fg); }
.status b { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #1d6b34; box-shadow: 0 0 0 2px var(--ink); flex: none; }
.status.syncing .dot { background: var(--chrome-c); animation: pulse 1s infinite alternate; }
.status.offline .dot { background: var(--warn); }
.status.error .dot, .status.unlinked .dot { background: #b3261e; }
@keyframes pulse { to { opacity: .3; } }

.content { grid-area: 2 / 2; min-height: 0; min-width: 0; overflow: auto; padding: 16px 0 6px 28px; }

/* ---------- Shared pieces ---------- */
.phead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.phead .cap { width: 24px; height: 24px; border-radius: 12px 0 0 12px; background: var(--c, var(--chrome-b)); flex: none; }
.phead h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .14em;
  color: var(--c, var(--chrome-b));
  white-space: nowrap;
}
.phead .rule { flex: 1; height: 8px; background: var(--line); border-radius: 0 4px 4px 0; min-width: 16px; }
.phead .meta { font-family: var(--display); color: var(--dim); font-size: var(--t-label); letter-spacing: var(--ls-label); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.muted { color: var(--dim); }
.chip {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 24px;
  border: 2px solid var(--line);
  background: transparent;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .1em;
}
.chip:not(:disabled):active { background: var(--panel-2); }
.chip[aria-pressed="true"] { background: var(--c, var(--chrome-b)); border-color: var(--c, var(--chrome-b)); color: var(--ink); }
.chip:disabled { opacity: .35; background-image: var(--hatch); display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.05; }
.chip small { font-size: 10px; letter-spacing: .2em; }
.chip.on { pointer-events: none; }
.a-work { --c: var(--work); }
.a-farm { --c: var(--farm); }
.a-hobby { --c: var(--hobby); }
.a-personal { --c: var(--personal); }
.pill {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .14em;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--dim);
  white-space: nowrap;
}
.pill.ok { color: var(--ok); }
.pill.bad { color: var(--bad); }
.stubbox {
  border: 2px dashed var(--line);
  border-radius: 0 18px 18px 0;
  padding: 14px 16px;
  color: var(--dim);
  background-image: var(--hatch);
  display: flex;
  gap: 12px;
  align-items: center;
}
.stubbox .pill { flex: none; }
.empty { color: var(--dim); padding: 10px 0; }

/* ---------- Day (Bridge) ---------- */
.bridge { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; height: 100%; min-height: 0; }
.tlpanel { display: flex; flex-direction: column; min-height: 0; }
.allday { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px 58px; }
.adchip {
  border: 0;
  border-left: 6px solid var(--c);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--c) 20%, var(--panel));
  padding: 6px 12px;
  font-size: 15px;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tlwrap { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.tl { position: relative; }
.hour {
  position: absolute;
  left: 0; right: 0;
  height: var(--hh);
  border-top: 1px solid var(--line);
}
.hour span { position: absolute; left: 0; top: 4px; font-family: var(--display); font-size: 15px; color: var(--dim); }
.quietband { position: absolute; left: 52px; right: 0; background: var(--quiet); }
.hour.quiet span { font-size: 13px; top: 2px; opacity: .75; }
.ev {
  position: absolute;
  border: 0;
  border-left: 8px solid var(--c);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--c) 20%, var(--panel));
  padding: 3px 10px;
  text-align: left;
  overflow: hidden;
  overflow: clip;
  z-index: 2;
  min-height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.ev .lbl { position: sticky; top: 4px; display: flex; align-items: baseline; gap: 2px 10px; min-width: 0; }
.ev.tall { padding-top: 6px; }
.ev.tall .lbl, .ev.narrow .lbl { flex-direction: column; gap: 0; }
.ev .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ev .tm { font-family: var(--display); color: var(--c); font-size: 15px; letter-spacing: .06em; white-space: nowrap; }
.ev.busy { background-image: var(--hatch); }
.now { position: absolute; left: 50px; right: 0; border-top: 2px solid var(--fg); z-index: 3; pointer-events: none; }
.now span {
  position: absolute; left: -50px; top: -12px;
  background: var(--fg); color: var(--ink);
  font-family: var(--display); font-weight: 600; font-size: 14px;
  padding: 2px 6px; border-radius: 10px;
}
.rcol { display: flex; flex-direction: column; gap: 26px; min-height: 0; overflow: auto; padding-right: 2px; }
.arows { display: flex; flex-direction: column; gap: 6px; }
.arow {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
  min-height: 60px;
  border-radius: 0 30px 30px 0;
  background: var(--panel);
  padding: 0 20px 0 0;
}
.arow .sw { background: var(--c); }
.arow .nm { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-block: 6px; }
.arow .nm b { font-family: var(--display); font-weight: 600; letter-spacing: .12em; color: var(--c); font-size: 17px; }
.arow .nm small { color: var(--dim); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow .ct { align-self: center; font-family: var(--display); font-size: 15px; letter-spacing: .1em; color: var(--dim); text-align: right; }
.arow .ct b { display: block; font-size: 28px; color: var(--fg); line-height: 1; }
button.arow { border: 0; width: 100%; text-align: left; color: inherit; }
button.arow:active { filter: brightness(1.2); }
.arow.off { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.arow.off .sw { background: transparent; box-shadow: inset 4px 0 0 var(--c); opacity: .6; }
.arow.off .nm b { color: var(--dim); }
.arow.off .ct, .arow.off .ct b { color: var(--dim); }
.arow.stub { opacity: .45; background-image: var(--hatch); }
.arow.stub .ct { font-size: 13px; letter-spacing: .2em; }

/* ---------- Week ---------- */
.wkscroll { overflow-x: auto; }
.wk { display: grid; grid-template-columns: 48px repeat(7, minmax(92px, 1fr)); min-width: 720px; }
.wkh {
  border: 0; background: var(--panel); margin: 0 3px; padding: 8px 6px 6px;
  border-radius: 14px 14px 0 0; text-align: center; font-family: var(--display); letter-spacing: .1em;
}
.wkh b { display: block; font-size: 26px; line-height: 1.05; }
.wkh.today { background: var(--fg); color: var(--ink); }
.wkad { margin: 0 3px; background: var(--panel); padding: 2px 4px 6px; display: flex; flex-direction: column; gap: 3px; min-height: 8px; }
.wkad span { font-size: 12px; line-height: 1.2; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 26%, var(--panel)); padding: 1px 4px; border-radius: 0 6px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkcol { position: relative; margin: 0 3px; background: var(--panel); border-radius: 0 0 14px 14px; border-top: 1px solid var(--line); }
.wkgut { position: relative; }
.wkgut span { position: absolute; right: 6px; font-family: var(--display); font-size: 13px; color: var(--dim); }
.wkpanel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.wkpanel > .phead { flex: none; }
.wkscroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-x: auto; }
.wkhead { flex: none; }
.wkbody { flex: 1; min-height: 0; min-width: 720px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wkband { position: absolute; left: 0; right: 0; background: var(--quiet); }
.wkline { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.wkgut span.quiet { opacity: .7; font-size: 12px; }
.wkb {
  position: absolute;
  border: 0;
  border-radius: 0 8px 8px 0; border-left: 5px solid var(--c);
  background: color-mix(in srgb, var(--c) 30%, var(--panel));
  font-size: 13px; line-height: 1.15; padding: 2px 6px; overflow: hidden; overflow: clip; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; z-index: 2;
}
.wkb .lbl { position: sticky; top: 2px; display: block; font-size: 14px; line-height: 1.2; }
.wkb.one { justify-content: center; padding-block: 0; }
.wkb.one .lbl { position: static; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkb.tall { padding-top: 4px; }
.wkb .tm { display: block; font-family: var(--display); font-size: var(--t-label); letter-spacing: .06em; color: var(--c); }
.wkb.busy { background-image: var(--hatch); }
.wknow { position: absolute; left: 0; right: 0; border-top: 2px solid var(--fg); z-index: 3; pointer-events: none; }

/* ---------- Month ---------- */
.mo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.moh { font-family: var(--display); letter-spacing: .14em; color: var(--chrome-b); text-align: center; font-size: 15px; padding-bottom: 2px; }
.moc {
  min-height: 108px; border: 0; background: var(--panel); border-radius: 4px; padding: 6px 8px;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; min-width: 0;
}
.moc .top1 { display: flex; align-items: center; gap: 8px; }
.moc .n { font-family: var(--display); font-size: 20px; line-height: 1; }
.moc.out { opacity: .35; }
.moc.today { box-shadow: inset 0 0 0 3px var(--fg); }
.dots { display: flex; gap: 4px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.moc .li { font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--c); padding-left: 4px; }
.moc .more { font-size: 12px; color: var(--dim); font-family: var(--display); letter-spacing: .1em; }

/* ---------- Systems + connect ---------- */
.sys { max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.kv { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 16px; align-items: center; }
.kv dt { font-family: var(--display); letter-spacing: .14em; color: var(--dim); font-size: 15px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.calrow { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 58px; border-bottom: 1px solid var(--line); }
.calrow .st { align-self: stretch; background: var(--c); border-radius: 5px; margin-block: 10px; }
.calrow small { display: block; color: var(--dim); }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.stublist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.connect { max-width: 680px; display: grid; gap: 18px; }
.connect ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--dim); }
.connect label { font-family: var(--display); letter-spacing: .14em; color: var(--chrome-b); font-size: 15px; display: block; margin-bottom: 6px; }
input[type="text"], input[type="url"], input[type="password"], input[type="search"], .lb-dates input[type="date"], .eng-sheet input[type="number"], .eng-sheet input[type="date"] {
  width: 100%;
  min-height: 54px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 17px;
}
input:focus { border-color: var(--chrome-b); outline: none; }
.err { color: var(--bad); min-height: 1.3em; }
.okmsg { color: var(--ok); min-height: 1.3em; }

/* ---------- Priorities + Plan Day ---------- */
.prio {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; padding: 6px 0;
}
.prio .box, .cand .box { width: 30px; height: 30px; flex: none; border: 3px solid var(--c); border-radius: 7px; display: grid; place-items: center; color: var(--ink); font-weight: 700; }
.prio .pt { display: flex; flex-direction: column; min-width: 0; }
.prio .pt b { font-weight: 600; }
.prio .pt small, .cand small { color: var(--dim); font-size: var(--t-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prio.done .box { background: var(--c); }
.prio.done .pt b { text-decoration: line-through; color: var(--dim); }
.prio.busy { opacity: .55; }
.plansheet { width: min(760px, 100%); }
.dayline { font-family: var(--display); letter-spacing: .1em; color: var(--chrome-b); font-size: 15px; }
.pgroup { font-family: var(--display); letter-spacing: .16em; color: var(--dim); font-size: 14px; margin-top: 6px; }
.cands { display: grid; gap: 6px; }
.cand {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) 34px; gap: 14px; align-items: center;
  width: 100%; min-height: 58px; border: 0; background: var(--panel-2); border-radius: 0 14px 14px 0; padding: 0 14px 0 0; text-align: left;
}
.cand .st { align-self: stretch; background: var(--c); }
.cand .ct { display: flex; flex-direction: column; min-width: 0; }
.cand .ct b { font-weight: 600; }
.cand[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 22%, var(--panel-2)); }
.cand[aria-pressed="true"] .box { background: var(--c); }
.cand.isdone .ct b { text-decoration: line-through; color: var(--dim); }
.newtask { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.newtask select { min-height: 48px; background: var(--panel-2); border: 2px solid var(--line); border-radius: 24px; padding: 6px 12px; color: var(--fg); font-size: 15px; max-width: 190px; }
.newtask .btn { min-height: 48px; }

/* ---------- Time Loom ---------- */
.lm { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; height: 100%; min-height: 0; }
.lm-stage { position: relative; min-height: 420px; border-radius: 18px; overflow: hidden; touch-action: pan-y; cursor: grab;
  background: radial-gradient(120% 90% at 50% 55%, #10111a 0%, var(--bg) 70%); }
.lm-stage.drag { cursor: grabbing; }
.lm-stage:focus-visible { outline: 3px solid var(--chrome-b); outline-offset: 2px; }
.lm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lm-side { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 26px; padding-bottom: 12px; }
.lm-side .kd .dt { font-size: 15px; }
@media (max-width: 860px) {
  .lm { grid-template-columns: minmax(0, 1fr); height: auto; }
  .lm-stage { height: 460px; min-height: 0; }
}

/* ---------- Stations: pinned bar + ALL STATIONS ---------- */
.pins { display: contents; }
.st-all { height: 62px; flex: 0 1 auto; min-height: 50px; background: var(--chrome-c); flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 8px; padding-left: 12px; }
.st-all .st-grid { display: grid; grid-template-columns: repeat(3, 6px); gap: 3px; margin-bottom: 4px; }
.st-all .st-grid i { width: 6px; height: 6px; background: var(--ink); border-radius: 1px; }
.st-all .st-lbl { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; letter-spacing: .12em; text-align: right; }
.st-all .st-lbl small { font-size: 11px; letter-spacing: .18em; font-weight: 400; }
.st-all[aria-expanded="true"] { background: var(--chrome-b); }
.nav.st-all[aria-current="page"] { background: var(--fg); }
.launch { grid-area: 2 / 2; min-height: 0; min-width: 0; overflow: auto; padding: 16px 0 16px 28px; }
.launch.enter { animation: stIn 260ms var(--ease-out, ease-out) both; }
@keyframes stIn { from { opacity: 0; transform: translateX(-16px); } }
.st-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.st-head .phead { flex: 1; min-width: 260px; margin: 0; }
.btn.sm { min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 22px; }
.st-note { border-left: 4px solid var(--chrome-b); background: var(--panel); border-radius: 0 14px 14px 0; padding: 10px 14px; margin-bottom: 18px; font-size: 15px; }
.st-note b { font-family: var(--display); font-weight: 600; letter-spacing: .14em; font-size: 13px; color: var(--chrome-b); margin-right: 6px; }
.st-group { margin-bottom: 22px; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.st-tile { position: relative; border: 0; min-height: 92px; padding: 10px 14px 10px 22px; border-radius: 0 26px 26px 0; background: var(--panel); text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; overflow: hidden; }
.st-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--c); }
.st-tile .st-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.st-tile b { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: .12em; }
.st-tile small { color: var(--dim); font-size: 14px; line-height: 1.25; }
.st-tile .pill, .st-pin { flex: none; margin-top: 3px; }
.st-tile[aria-current="page"] { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--fg); }
.st-tile.st-off { background-image: var(--hatch); opacity: .5; }
.st-pin { font-family: var(--display); font-size: 12px; letter-spacing: .16em; padding: 3px 10px; border-radius: 11px; border: 1.5px solid var(--line); color: var(--dim); }
.st-pin.on { background: var(--c); border-color: var(--c); color: var(--ink); }

/* ---------- Habits ---------- */
.hb { max-width: 1180px; display: flex; flex-direction: column; gap: 30px; }
.hb-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.hb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hb-tile { border: 0; min-height: 132px; border-radius: 0 28px 28px 0; padding: 14px 16px 14px 24px; background: var(--panel); position: relative; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; overflow: hidden; transition: background 220ms ease; }
.hb-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--c); }
.hb-nm { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .12em; }
.hb-big { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.05; color: var(--dim); }
.hb-big small { font-size: 13px; letter-spacing: .14em; font-weight: 400; color: var(--dim); }
.hb-st { font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--dim); }
.hb-tile.done { background: color-mix(in srgb, var(--c) 26%, var(--panel)); }
.hb-tile.done .hb-big { color: var(--c); }
.hb-tile.pop { animation: hbPop 380ms ease; }
@keyframes hbPop { 40% { transform: scale(1.025); } }
.hb-bottles { display: flex; gap: 8px; flex-wrap: wrap; }
.hb-bottle { width: 30px; height: 52px; padding: 0; border: 2px solid var(--c, var(--work)); border-radius: 9px 9px 7px 7px; background: transparent; position: relative; overflow: hidden; }
.hb-bottle::before { content: ""; position: absolute; left: 50%; top: -2px; width: 12px; height: 7px; transform: translateX(-50%); border: 2px solid var(--c, var(--work)); border-top: 0; border-radius: 0 0 3px 3px; background: var(--panel); }
.hb-bottle i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--c, var(--work)); transition: height 220ms ease; }
.hb-bottle.half i { height: 50%; }
.hb-bottle.full i { height: 100%; }
.hb-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.hb-seg .chip { min-height: 42px; font-size: 14px; padding: 0 14px; }
.hb-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.hb-goal > span { font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--dim); margin-right: 6px; }
.hb-goal .chip { min-height: 38px; font-size: 14px; padding: 0 12px; }
.hb-note { font-size: 15px; margin: 12px 0 0; }
.hb-srow { display: grid; grid-template-columns: 12px minmax(0, 1fr) 70px 70px 70px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hb-srow .sw { width: 10px; height: 26px; border-radius: 4px; background: var(--c); }
.hb-srow .n { font-family: var(--display); font-size: 24px; font-weight: 600; text-align: right; }
.hb-srow .n small { display: block; font-size: 11px; letter-spacing: .16em; color: var(--dim); font-weight: 400; }
.hb-srow.head { padding: 0 0 6px; border-bottom: 0; }
.hb-srow.head span { font-family: var(--display); font-size: 11px; letter-spacing: .18em; color: var(--dim); text-align: right; }
.hb-grids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hb-g h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .14em; color: var(--c); }
.hb-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 2px; }
.hb-cell { aspect-ratio: 1; border: 0; padding: 0; border-radius: 3px; background: var(--panel-2); min-width: 0; }
.hb-cell.win { background: var(--c); }
.hb-cell.none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.hb-cell.future { background: transparent; }
.hb-cell.today { outline: 2px solid var(--fg); outline-offset: 1px; }
.hb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--dim); align-items: center; }
.hb-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.hb-legend i.none { box-shadow: inset 0 0 0 1px var(--line); }
.hb-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-chip { display: inline-flex; align-items: center; gap: 8px; }
.hb-chip .tick { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.hb-chip[aria-pressed="true"] .tick { background: var(--ink); border-color: var(--ink); }
.hb-wk { display: grid; grid-template-columns: 170px repeat(7, minmax(28px, 1fr)) 96px 110px; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hb-wk.head { border-bottom: 0; padding: 0 0 2px; }
.hb-wk.head span { font-family: var(--display); font-size: 12px; letter-spacing: .18em; color: var(--dim); text-align: center; }
.hb-wk.head span:nth-last-child(-n+2) { text-align: right; }
.hb-wk .nm { font-family: var(--display); font-weight: 600; letter-spacing: .1em; color: var(--c); }
.hb-wk .d { height: 30px; border-radius: 6px; background: var(--panel-2); display: grid; place-items: center; font-family: var(--display); font-size: 15px; color: var(--ink); }
.hb-wk .d.win { background: var(--c); }
.hb-wk .d.part { background: color-mix(in srgb, var(--c) 45%, var(--panel-2)); color: var(--fg); }
.hb-wk .d.none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.hb-wk .d.future { background: transparent; }
.hb-wk .tot { font-family: var(--display); font-size: 20px; font-weight: 600; text-align: right; }
.hb-wk .vs { font-family: var(--display); font-size: 14px; letter-spacing: .08em; text-align: right; color: var(--dim); }
.hb-wk .vs.up { color: var(--ok); }
.hb-wk .vs.down { color: var(--warn); }
.hb-trend { display: grid; gap: 4px; align-items: center; margin-top: 10px; }
.hb-trend .nm { font-family: var(--display); font-size: 13px; letter-spacing: .1em; font-weight: 600; }
.hb-trend .c { height: 26px; border-radius: 5px; display: grid; place-items: center; font-family: var(--display); font-size: 13px; color: var(--fg);
  background: color-mix(in srgb, var(--c) var(--f), var(--panel-2)); }
.hb-trend .c[data-none] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.hb-trend .wkn { font-family: var(--display); font-size: 11px; letter-spacing: .1em; color: var(--dim); text-align: center; }

/* ---------- Library ---------- */
.lb { max-width: 1180px; display: flex; flex-direction: column; gap: 26px; }
.lb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lb-stat { background: var(--panel); border-radius: 0 22px 22px 0; border-left: 8px solid var(--c); padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.lb-stat .k { font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--dim); }
.lb-stat .v { font-family: var(--display); font-size: 36px; font-weight: 600; line-height: 1.05; }
.lb-stat .v small { font-size: 15px; color: var(--dim); font-weight: 400; letter-spacing: .08em; margin-left: 6px; }
.lb-stat .v.name { font-size: 24px; padding-top: 6px; }
.lb-tools { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: space-between; }
.lb-tools .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-cover { --cc: var(--chrome-b); position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 2 / 3; width: 100%; border-radius: 4px 10px 10px 4px; background: var(--cc); color: var(--ink); overflow: hidden; padding: 12% 10% 10% 16%;
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, .22), 0 6px 14px rgba(0, 0, 0, .35); font-family: var(--display); }
.lb-cover::before { content: ""; position: absolute; left: 16%; right: 0; top: 6%; height: 4px; background: rgba(10, 10, 13, .55); }
.lb-cover .ct { font-weight: 700; font-size: var(--fs, 15px); line-height: 1.04; letter-spacing: .04em; text-transform: uppercase; hyphens: auto; -webkit-hyphens: auto; }
.lb-cover .ca { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.lb-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-cover.mini { padding: 8% 8% 8% 14%; border-radius: 2px 5px 5px 2px; }
.lb-cover.mini .ct { font-size: 6px; }
.lb-cover.mini .ca { display: none; }
.lb-reading { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.lb-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; background: var(--panel); border-radius: 0 26px 26px 0; padding: 14px 16px 14px 14px; }
.lb-card .t { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: .06em; line-height: 1.1; }
.lb-card .meta { font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--dim); margin: 8px 0 12px; }
.lb-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 14px; }
.lb-book { border: 0; background: none; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lb-book .bt { font-weight: 600; font-size: 15px; line-height: 1.2; }
.lb-book .ba { color: var(--dim); font-size: 13px; }
.lb-read { display: flex; flex-direction: column; }
.lb-row { display: grid; grid-template-columns: 44px 80px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; border: 0; background: none; text-align: left; border-bottom: 1px solid var(--line); padding: 8px 0; }
.lb-row .dt { font-family: var(--display); font-size: 16px; letter-spacing: .04em; }
.lb-row .tt b { display: block; font-weight: 600; }
.lb-row .tt small { color: var(--dim); font-size: 14px; }
.lb-stars { color: var(--chrome-b); letter-spacing: .12em; font-size: 15px; white-space: nowrap; }
.lb-stars .off { color: var(--line); }
.lb-sheet .sbody { display: flex; flex-direction: column; gap: 12px; }
.lb-sheet input[type="search"], .lb-sheet input[type="date"], .lb-sheet textarea { width: 100%; }
.lb-result { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lb-result b { font-weight: 600; }
.lb-result small { display: block; color: var(--dim); font-size: 14px; margin-bottom: 6px; }
.lb-manual { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.lb-detail { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; }
.lb-detail h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: .05em; line-height: 1.05; }
.lb-dbody { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lb-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lb-dates label { font-family: var(--display); font-size: 12px; letter-spacing: .16em; color: var(--dim); display: flex; flex-direction: column; gap: 4px; }
.lb-starpick { display: flex; gap: 2px; }
.lb-starpick button { border: 0; background: none; font-size: 30px; color: var(--line); padding: 0 3px; line-height: 1; min-height: 44px; }
.lb-starpick button.on { color: var(--chrome-b); }

.lg-sortrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 4px 0 10px; }

.aimeter i { position: absolute; top: -3px; bottom: -3px; left: var(--mark, 80%); width: 2px; background: var(--fg); opacity: .7; }   /* the reminder */
.ai-match { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-match input { flex: 1; min-width: 160px; max-width: 280px; }
.ai-log { display: flex; flex-direction: column; }
.ai-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto 60px; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; align-items: baseline; }
.ai-row > span:last-child { text-align: right; }
@media (max-width: 520px) { .ai-row { grid-template-columns: 70px minmax(0, 1fr) 54px; } .ai-row > span:nth-child(3) { display: none; } }

/* ---------- NEEDS YOU (Systems): Condition items fixed here, with their steps ---------- */
.fix-card { --lc: var(--warn); border: 2px solid var(--lc); border-left-width: 12px; border-radius: 0 24px 24px 0; padding: 14px 18px 16px; background: var(--panel); }
.fix-card + .fix-card { margin-top: 12px; }
.fix-card.bad { --lc: var(--bad); }
.fix-card.ok { --lc: var(--ok); }
.fix-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fix-head .ic { color: var(--lc); font-size: 20px; }
.fix-head b { font-size: 20px; font-weight: 600; flex: 1; min-width: 0; }
.fix-why { margin: 6px 0 0; color: var(--dim); font-size: 16px; line-height: 1.4; }
.fix-card .ov-sub { margin: 14px 0 6px; color: var(--lc); }
.fix-steps { margin: 0 0 14px; padding-left: 24px; font-size: 17px; line-height: 1.5; }
.fix-steps li + li { margin-top: 4px; }
.fix-steps li::marker { color: var(--lc); font-family: var(--display); }
.fix-card.ok .btnrow { margin-top: 12px; }
.flash { animation: fixFlash 1.5s ease-out 1; }
@keyframes fixFlash { 0%, 30% { box-shadow: 0 0 0 3px var(--lc, var(--warn)); } 100% { box-shadow: 0 0 0 14px transparent; } }
/* right-edge tab back to NEEDS YOU while it's scrolled away */
.fix-jump { --lc: var(--warn); position: fixed; right: 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 15;
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 calc(20px + env(safe-area-inset-right, 0px)) 0 20px;
  border: 0; border-radius: 26px 0 0 26px; background: var(--lc); color: var(--ink);
  font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .14em; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); animation: fixIn .3s ease-out; }
@keyframes fixIn { from { opacity: 0; transform: translateX(24px); } }
.fix-jump.bad { --lc: var(--bad); }
.fix-jump[hidden] { display: none; }
.fix-jump:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .flash, .fix-jump { animation: none; } }

/* ---------- Key Dates ---------- */
.kd {
  display: grid; grid-template-columns: 8px 86px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; padding: 4px 0;
}
.kd .st { align-self: stretch; background: var(--c); border-radius: 4px; margin-block: 8px; }
.kd .dt { font-family: var(--display); font-size: 16px; letter-spacing: .04em; line-height: 1.1; }
.kd .tt { display: flex; flex-direction: column; min-width: 0; }
.kd .tt b { font-weight: 600; }
.kd .tt small { color: var(--dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill.soon { background: color-mix(in srgb, var(--c, var(--warn)) 30%, var(--panel)); color: var(--fg); }
.kdscreen { max-width: 900px; }
.kdtools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dgroup { margin-top: 22px; }
.kdchip { border-left-style: solid; background: color-mix(in srgb, var(--c) 30%, var(--panel)); font-weight: 600; }
.kdspan { border: 0; display: block; width: 100%; text-align: left; font-size: 12px; line-height: 1.2; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 40%, var(--panel)); padding: 1px 4px; border-radius: 0 6px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.moc .li.kdli { font-weight: 600; border-left-width: 3px; background: color-mix(in srgb, var(--c) 22%, transparent); border-radius: 0 4px 4px 0; }
.kdline { color: var(--chrome-a); }

/* ---------- Captured items still on this iPad ---------- */
.ev.pending, .wkb.pending, .adchip.pending { border-left-style: dashed; background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, .07) 8px 16px); }
.moc .li.pending { border-left-style: dashed; }
.ev.failed, .wkb.failed, .adchip.failed { box-shadow: inset 0 0 0 2px var(--bad); }
.errtxt { color: var(--bad); }
.warntxt { color: var(--warn); }
.stale { color: var(--dim); font-size: 14px; margin-top: 8px; }
.netlog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 16px; font-family: var(--display); letter-spacing: .08em; font-size: 15px; margin-bottom: 8px; }
.netlog span:nth-child(4n+2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Overlays ---------- */
.scrim { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100%); background: rgba(4, 4, 8, .72); z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-top) + var(--top-gap)) 16px 16px; }   /* never under the status bar; above the keyboard while typing */
.sheet { width: min(560px, 100%); max-height: 100%; overflow: auto; background: var(--panel); border-radius: 0 0 24px 24px; padding: 0 0 20px; }
.sheet .sbar { height: 30px; background: var(--c, var(--fg)); border-radius: 15px 15px 0 0; display: flex; align-items: center; padding: 0 18px; justify-content: space-between; }
.sheet .sbar span { font-family: var(--display); color: var(--ink); letter-spacing: .16em; font-weight: 600; font-size: 15px; }
.sheet .sbody { padding: 18px 22px 0; display: grid; gap: 14px; }
.sheet h3 { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.15; }
.sheet .sfoot { display: flex; justify-content: flex-end; padding: 16px 22px 0; }
.capscrim { align-items: flex-start; padding-top: max(calc(var(--safe-top) + var(--top-gap) + 10px), 6vh); }
.capscrim .sheet { width: min(720px, 100%); }
.capnote { border: 2px dashed var(--warn); border-radius: 12px; padding: 10px 14px; color: var(--warn); }
.frow { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: center; }
.frow > span { font-family: var(--display); letter-spacing: .14em; color: var(--dim); font-size: 15px; }
#capText { font-size: 20px; min-height: 58px; }
#capDate, #capUntil { max-width: 100%; min-width: 0; }   /* iPadOS gives date fields a wide minimum; keep them inside the sheet */
#capDate, #capTime, #capUntil, #capLifeArea, #capKdType {
  min-height: 48px; background: var(--panel-2); border: 2px solid var(--line); border-radius: 24px;
  padding: 6px 14px; font-family: var(--display); font-size: 16px; letter-spacing: .08em; color: var(--fg);
}
.capfoot { justify-content: space-between !important; align-items: center; gap: 12px; flex-wrap: wrap; }
.capfoot .muted { font-size: 15px; }
.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--fg); color: var(--ink); z-index: 30;
  font-family: var(--display); letter-spacing: .1em; font-size: 17px;
  padding: 12px 22px; border-radius: 26px; max-width: calc(100% - 32px); text-align: center;
}

.update {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 25;
  top: calc(var(--safe-top) + var(--top-gap) + 34px);
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 24px;
  background: var(--chrome-c); color: var(--ink);
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .14em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5); white-space: nowrap;
}

/* ---------- Bridge overview ---------- */
.ov-cond { display: grid; grid-template-columns: auto minmax(0, 1fr); margin-bottom: 64px; }
.ov-cond.green { --lc: var(--ok); }
.ov-cond.yellow { --lc: var(--warn); }
.ov-cond.red { --lc: var(--bad); }
.ov-cond .lvl {
  background: var(--lc); color: var(--ink); border-radius: 32px 0 0 32px; padding: 12px 24px; min-width: 210px;
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: .08em; line-height: 1.05;
}
.ov-cond .lvl small { font-size: 12px; font-weight: 600; letter-spacing: .22em; }
.ov-cond.red .lvl { animation: redalert 1.2s ease-in-out infinite alternate; }
@keyframes redalert { to { filter: brightness(.72); } }
.ov-cond .list { border: 3px solid var(--lc); border-left: 0; border-radius: 0 24px 24px 0; padding: 6px; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.ov-alert {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 52px; width: 100%; border: 0; background: transparent; text-align: left; padding: 4px 12px; border-radius: 0 16px 16px 0;
}
.ov-alert:active { background: var(--panel-2); }
.ov-alert .ic { font-size: 20px; text-align: center; color: var(--warn); }
.ov-alert.bad .ic { color: var(--bad); }
.ov-alert .tx, .ov-next .tx, .ov-due .tx, .ov-kd .tx, .ov-env .tx, .ov-envrow .tx { display: flex; flex-direction: column; min-width: 0; }
.ov-alert b, .ov-next b, .ov-due b, .ov-kd b, .ov-envrow b { font-weight: 600; }
.ov-alert small, .ov-next small, .ov-due small, .ov-kd .tx small, .ov-env small, .ov-envrow small { color: var(--dim); font-size: var(--t-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go { font-family: var(--display); color: var(--dim); letter-spacing: var(--ls-label); font-size: var(--t-label); white-space: nowrap; }
.ov-nominal { padding: 8px 14px; display: flex; flex-direction: column; }
.ov-nominal b { font-family: var(--display); font-weight: 600; letter-spacing: .1em; font-size: 20px; color: var(--ok); }
.ov-nominal small { color: var(--dim); font-size: 15px; }
/* One full-width column, top to bottom: Now/Next, Environment, Priorities, Horizon, Key Dates, Balance, Log. */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; }
.ov-pnl > .phead { margin-bottom: 18px; }
.ov-pnl:not(.open) .ov-extra { display: none !important; }
.ov-pnl.open .ov-hint { display: none; }
.ov-more {
  width: 44px; height: 44px; flex: none; margin: -10px 0; border-radius: 22px; border: 2px solid var(--line);
  background: transparent; color: var(--c, var(--chrome-b)); position: relative; padding: 0;
}
.ov-more::before, .ov-more::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 3px; margin: -1.5px 0 0 -8px; background: currentColor; border-radius: 2px; }
.ov-more::after { transform: rotate(90deg); }
.ov-more[aria-expanded="true"]::after { transform: rotate(0deg); }   /* lies on the − bar */
.ov-more[aria-expanded="true"] { background: var(--c, var(--chrome-b)); border-color: var(--c, var(--chrome-b)); color: var(--ink); }
.ov-pnl .btn { min-height: 46px; padding: 0 20px; font-size: var(--t-sub); }
.ov-pnl { min-width: 0; }
.ov-sub { display: block; font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); margin: 18px 0 8px; }
.ov-morenote { font-size: 14px; margin-top: 6px; }
.ov-foot { margin-top: 12px; font-size: var(--t-sub); color: var(--dim); max-width: 62ch; }

.ov-now { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ov-state { align-self: center; }
.pill.a-work, .pill.a-personal { color: var(--c); }
.ov-cd { font-family: var(--display); font-weight: 600; font-size: var(--t-hero); line-height: 1; letter-spacing: .03em; }
.ov-next {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; min-height: 56px; margin: 12px 0 0; padding: 6px 12px 6px 0;
  border: 0; border-radius: 0 16px 16px 0; text-align: left; background: color-mix(in srgb, var(--c) 16%, var(--panel));
}
.ov-next .st, .ov-due .st { align-self: stretch; background: var(--c); }
.ov-allday { margin-top: 12px; font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-strip { position: relative; height: 46px; margin-top: 34px; background: var(--panel); border-radius: 0 12px 12px 0; }
.ov-blk {
  position: absolute; border: 0; padding: 0; min-width: 4px;
  background: color-mix(in srgb, var(--c) 55%, var(--panel)); border-left: 3px solid var(--c); border-radius: 0 6px 6px 0;
}
.ov-blk.busy { background-image: var(--hatch); }
.ov-blk.clash { box-shadow: inset 0 0 0 2px var(--bad); }
.ov-blk.pending { border-left-style: dashed; }
.ov-nowln { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--fg); pointer-events: none; z-index: 2; }
.ov-nowln i {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-family: var(--display); font-size: 12px; font-weight: 600;
  background: var(--fg); color: var(--ink); padding: 0 5px; border-radius: 8px;
}
.ov-ticks { position: relative; height: 20px; margin-top: 4px; }
.ov-ticks span { position: absolute; transform: translateX(-50%); font-family: var(--display); font-size: var(--t-label); letter-spacing: .06em; color: var(--dim); }
.ov-ticks span:first-child { transform: none; }
.ov-ticks span:last-child { transform: translateX(-100%); }
.ov-load, .ov-facts { display: flex; gap: 6px 22px; flex-wrap: wrap; margin-top: 12px; font-family: var(--display); letter-spacing: var(--ls-label); font-size: var(--t-label); color: var(--dim); }
.ov-load b, .ov-facts b { color: var(--fg); font-weight: 600; }

.ov-due {
  display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; min-height: 54px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; padding: 4px 0;
}
.ov-due .st { border-radius: 3px; margin-block: 8px; }

.ov-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ov-day { border: 0; background: transparent; padding: 4px 0 0; border-radius: 10px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.ov-day:active { background: var(--panel); }
.ov-day .bars { height: 152px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 6px; }
.ov-day .mk { color: var(--chrome-b); font-size: 15px; text-align: center; min-height: 20px; }
.ov-day .hrs { font-family: var(--display); font-size: var(--t-label); letter-spacing: .06em; text-align: center; color: var(--dim); margin-bottom: 4px; }
.ov-day .seg { display: block; background: var(--c); flex: none; width: 100%; max-width: 72px; align-self: center; }
.ov-day .seg:nth-child(3) { border-radius: 6px 6px 0 0; }
.ov-day.heavy .hrs { color: var(--warn); }
.ov-day .dl { display: flex; flex-direction: column; align-items: center; font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); padding-bottom: 6px; }
.ov-day .dl b { font-size: var(--t-title); color: var(--fg); font-weight: 600; letter-spacing: .04em; }
.ov-day.today .dl b { background: var(--fg); color: var(--ink); border-radius: 12px; padding: 0 8px; }
.ov-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 12px; font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); }
.ov-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); font-style: normal; }
.ov-legend i.dia { width: auto; height: auto; background: none; color: var(--chrome-b); }
.ov-heavy { margin-top: 12px; color: var(--warn); font-family: var(--display); letter-spacing: var(--ls-label); font-size: var(--t-label); }

.ov-kd {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: center;
  width: 100%; min-height: 64px; border: 0; border-left: 6px solid var(--c); background: transparent; text-align: left;
  padding: 4px 8px 4px 0; border-radius: 0 16px 16px 0;
}
.ov-kd + .ov-kd { margin-top: 6px; }
.ov-kd:active { background: var(--panel); }
.ov-kd .kn { font-family: var(--display); font-weight: 600; font-size: var(--t-count); line-height: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ov-kd .kn small { font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); font-weight: 400; }
.ov-kd.soon .kn { color: var(--warn); }

.ov-env { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ov-env b { font-family: var(--display); font-size: var(--t-title); letter-spacing: var(--ls-label); font-weight: 600; }
.ov-temp { font-family: var(--display); font-weight: 600; font-size: var(--t-hero); line-height: 1; letter-spacing: .03em; }
.ov-envrow { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; border-top: 1px solid var(--line); padding: 6px 0; }
.ov-env + .ov-envrow, .ov-facts + .ov-envrow { margin-top: 14px; }
.ov-envrow .k { font-family: var(--display); letter-spacing: var(--ls-label); font-size: var(--t-label); color: var(--farm); }

.ov-bal { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 46px; }
.ov-bal .bn { font-family: var(--display); letter-spacing: var(--ls-label); font-size: var(--t-label); color: var(--c); white-space: nowrap; }
.ov-bal .track { height: 12px; background: var(--panel); border-radius: 0 6px 6px 0; overflow: hidden; }
.ov-bal .track span { display: block; height: 100%; background: var(--c); border-radius: 0 6px 6px 0; }
.ov-bal .bv { font-family: var(--display); font-size: var(--t-label); letter-spacing: .06em; white-space: nowrap; }
.ov-bal .track.over span { background: var(--warn); }
.bal-dots { display: flex; gap: 6px; align-items: center; }
.bal-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c); opacity: .45; flex: none; }
.bal-dots i.on { background: var(--c); opacity: 1; }
.bal-dots i.today { outline: 2px solid var(--line); outline-offset: 2px; }
.bal-in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bal-in input { width: 96px; }

.ov-log { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.ov-log .ov-sub { margin-top: 0; }
.ov-bearing {
  min-height: 56px; padding: 6px 24px; border: 0; border-radius: 28px; background: var(--chrome-c); color: var(--ink);
  font-family: var(--display); letter-spacing: .16em; font-size: 11px; line-height: 1.15;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 100%;
}
.ov-bearing b { font-size: 19px; letter-spacing: .1em; font-weight: 600; }
.ov-bearing:active { filter: brightness(1.15); }
.ov-place { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.ov-place input { flex: 1 1 280px; min-width: 0; }
.ov-place .btn, .kv .chips .chip { min-height: 48px; }
.kv .chips { display: flex; gap: 8px; flex-wrap: wrap; }
textarea {
  width: 100%; background: var(--panel); border: 2px solid var(--line); border-radius: 12px;
  padding: 10px 14px; font: inherit; font-size: 17px; color: var(--fg); resize: vertical;
}
textarea:focus { border-color: var(--chrome-b); outline: none; }


/* ---------- Weekly Review ---------- */
.rv { display: grid; gap: 36px; max-width: 980px; }
.rv-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px 56px; gap: 14px; align-items: center; min-height: 44px; }
.rv-row .bn { font-family: var(--display); letter-spacing: .12em; font-size: 15px; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.rv-row .track { height: 14px; background: var(--panel); border-radius: 0 7px 7px 0; overflow: hidden; }
.rv-row .track span { display: block; height: 100%; background: var(--c); border-radius: 0 7px 7px 0; }
.rv-row .bv { font-family: var(--display); font-size: 18px; text-align: right; }
.rv-row .dl { font-family: var(--display); font-size: 15px; color: var(--dim); text-align: right; }
.rv-row.off { opacity: .45; }
.rv-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rv-list span { font-size: 15px; border-left: 4px solid var(--c, var(--line)); background: color-mix(in srgb, var(--c, var(--line)) 18%, var(--panel)); padding: 3px 10px; border-radius: 0 10px 10px 0; }
.rv-list span.muted { border: 0; background: none; }
.rv-kept { display: flex; gap: 36px; flex-wrap: wrap; }
.rv-kept .kn { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1; display: flex; flex-direction: column; }
.rv-kept .kn small { font-size: 12px; letter-spacing: .2em; color: var(--dim); font-weight: 400; }
.rv-kept .kn:first-child { color: var(--ok); }
.rv-log { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 6px 14px; margin-bottom: 8px; }
.rv-log .dt { font-family: var(--display); letter-spacing: .1em; color: var(--chrome-b); }

/* Review log (landing page) */
.chip.back { border-color: var(--chrome-b); color: var(--chrome-b); }
.pill.warn { color: var(--warn); }
.pill.inprog { color: var(--chrome-b); }
.rl-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rl-card { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 92px; padding: 10px 18px 10px 0; border: 0;
  background: var(--panel); border-radius: 0 22px 22px 0; text-align: left; color: var(--fg); }
.rl-card .st { align-self: stretch; background: var(--c); }
.rl-card .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-card .tx b { font-family: var(--display); font-weight: 600; font-size: var(--t-title); letter-spacing: .08em; }
.rl-card .tx small { color: var(--dim); font-size: var(--t-sub); }
.rl-card.due { --c: var(--warn); } .rl-card.cur { --c: var(--chrome-b); } .rl-card.saved { --c: var(--chrome-c); }
.rl-card:active, .rl-row:active { background: var(--panel-2); }
.rl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.rl-stat { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 4px solid var(--line); min-width: 0; }
.rl-stat b { font-family: var(--display); font-weight: 600; font-size: var(--t-count); line-height: 1; letter-spacing: .03em; white-space: nowrap; }
.rl-stat span, .rl-legend { font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); }
.rl-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; }
.rl-chart { min-width: 0; position: relative; }
.rl-chart.wide { grid-column: 1 / -1; }
.rl-chart h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--ls-label); }
.rl-chart .sub { font-size: var(--t-sub); color: var(--dim); margin-bottom: 10px; }
.rl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rl-svg text { fill: var(--dim); font-family: var(--display); font-size: var(--t-label); }
.rl-svg text.v { fill: var(--fg); }
.rl-svg .g { stroke: var(--line); stroke-width: 1; }
.rl-svg .gap { fill: var(--panel); stroke: var(--line); stroke-dasharray: 3 4; }
.rl-svg .b-work { fill: var(--work); }
.rl-svg .b-personal { fill: var(--personal); }
.rl-svg .b-farm { fill: var(--farm); }
.rl-svg .b-done { fill: var(--chrome-c); }
.rl-svg .ln { fill: none; stroke: var(--chrome-b); stroke-width: 2; }
.rl-svg .dot { fill: var(--chrome-b); stroke: var(--bg); stroke-width: 2; }
.rl-svg .hit { fill: transparent; cursor: pointer; }
.rl-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 8px; }
.rl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rl-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); display: inline-block; }
.rl-legend i.gap { background: var(--panel); border: 1px dashed var(--dim); }
.rl-tip { position: absolute; pointer-events: none; background: var(--fg); color: var(--ink); border-radius: 10px; padding: 6px 10px; font-size: var(--t-sub); line-height: 1.3; white-space: nowrap; transform: translate(-50%, -100%); z-index: 5; }
.rl-tip b { font-family: var(--display); letter-spacing: .08em; }
.rl-areas { display: grid; gap: 8px; }
.rl-arow { display: grid; grid-template-columns: 170px minmax(0, 1fr) 34px; gap: 12px; align-items: center; }
.rl-arow .bn { font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-arow .track { height: 12px; background: var(--panel); border-radius: 0 6px 6px 0; overflow: hidden; }
.rl-arow .track span { display: block; height: 100%; background: var(--chrome-c); border-radius: 0 6px 6px 0; }
.rl-arow .v { font-family: var(--display); font-size: var(--t-label); text-align: right; }
.rl-pat { margin-top: 30px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--panel); border-radius: 0 22px 22px 0; padding: 12px 16px 12px 0; }
.rl-pat .st { align-self: stretch; background: var(--chrome-a); }
.rl-pat .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-pat .tx b { font-family: var(--display); font-weight: 600; letter-spacing: .08em; }
.rl-pat .tx small { color: var(--dim); font-size: var(--t-sub); }
.rl-patout { border-left: 4px solid var(--chrome-a); padding: 4px 0 4px 14px; margin-top: 14px; }
.rl-patout ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; }
.rl-month { margin-top: 26px; }
.rl-month:first-of-type { margin-top: 0; }
.rl-mlabel { font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--chrome-b); margin-bottom: 8px; }
.rl-row { display: grid; grid-template-columns: 8px 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; min-height: 72px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--fg); text-align: left; padding: 8px 6px 8px 0; }
.rl-row .st { align-self: stretch; border-radius: 4px; margin-block: 6px; background: var(--c, var(--line)); }
.rl-row.saved { --c: var(--chrome-c); } .rl-row.due { --c: var(--warn); } .rl-row.cur { --c: var(--chrome-b); } .rl-row.missed { --c: var(--line); }
.rl-row .rlw { display: flex; flex-direction: column; }
.rl-row .rlw b { font-family: var(--display); font-weight: 600; font-size: var(--t-title); letter-spacing: .06em; }
.rl-row .rlw small { white-space: nowrap; font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); }
.rl-row .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-row .nums { font-family: var(--display); font-size: var(--t-label); letter-spacing: .1em; color: var(--dim); }
.rl-row .nums b { color: var(--fg); font-weight: 600; }
.rl-row .snip { font-size: var(--t-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-row .snip em { font-style: normal; color: var(--dim); font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); margin-right: 2px; }
.rl-row .end { display: flex; align-items: center; gap: 12px; }
.rl-row .tri { color: var(--dim); }
@media (hover: hover) { .rl-card:hover, .rl-row:hover { background: var(--panel-2); } }

/* Ledger (YNAB, read-only) + Replicator Queue */
.lg { display: grid; gap: 64px; max-width: 1000px; }
.lg > * { min-width: 0; }
.lg-note { font-size: var(--t-sub); }
.lg-open { margin-left: 4px; min-height: 40px; font-size: 14px; text-decoration: none; color: var(--fg); display: inline-flex; align-items: center; flex: none; }
.lg-money { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.lg-hero { display: grid; grid-template-columns: 10px minmax(0, 1fr); background: var(--panel); border-radius: 0 28px 28px 0; min-height: 150px; }
.lg-hero .st { background: var(--chrome-b); }
.lg-hero .in { padding: 18px 24px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.lg-big { font-family: var(--display); font-weight: 600; font-size: var(--t-money); line-height: 1; letter-spacing: .02em; }
.lg-big .c { font-size: var(--t-count); color: var(--dim); }
.lg-aom { background: var(--panel); border-radius: 0 28px 28px 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-aom .n { font-family: var(--display); font-weight: 600; font-size: var(--t-hero); line-height: 1; }
.lg-aom .n small { font-size: var(--t-sub); color: var(--dim); letter-spacing: var(--ls-label); margin-left: 6px; }
.lg-spark { display: block; width: 100%; height: auto; }
.lg-spark .l { fill: none; stroke: var(--chrome-b); stroke-width: 2; }
.lg-spark .a { fill: var(--chrome-b); opacity: .12; }
.lg-spark .d { fill: var(--chrome-b); stroke: var(--panel); stroke-width: 2; }
.lg-spark .g { stroke: var(--line); stroke-width: 1; }
.lg-spark text { fill: var(--dim); font-family: var(--display); font-size: 11px; }
.lg-accts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 36px; margin-top: 30px; }
.lg-agroup h3 { margin: 0 0 8px; }
.lg-arow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lg-arow .nm { font-size: var(--t-sub); min-width: 0; overflow-wrap: anywhere; }
.lg-arow .v { font-family: var(--display); font-size: var(--t-title); letter-spacing: .04em; }
.lg-arow .bar { grid-column: 1 / -1; height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.lg-arow .bar span { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.lg-arow .sub { grid-column: 1 / -1; font-size: 14px; color: var(--dim); }
.lg-tools { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lg-seg { display: flex; gap: 6px; }
.lg-seg .chip { min-height: 40px; padding: 0 14px; font-size: 14px; }
.lg-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); }
.lg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-legend i.b { width: 18px; height: 10px; border-radius: 0 5px 5px 0; background: var(--chrome-c); display: inline-block; }
.lg-legend i.t { width: 3px; height: 14px; background: var(--fg); display: inline-block; border-radius: 1px; }
.lg-cats { display: grid; }
.lg-crow { display: grid; grid-template-columns: 170px minmax(0, 1fr) 76px; gap: 12px; align-items: center; min-height: 44px; width: 100%; border: 0; background: transparent; color: var(--fg); text-align: left; padding: 4px 0; }
.lg-crow .nm { display: flex; flex-direction: column; min-width: 0; }
.lg-crow .nm b { font-family: var(--display); font-weight: 400; font-size: var(--t-sub); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-crow .nm small { font-family: var(--display); font-size: 11px; letter-spacing: var(--ls-label); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-crow .track { position: relative; height: 14px; background: var(--panel); border-radius: 0 7px 7px 0; }
.lg-crow .track .b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chrome-c); border-radius: 0 7px 7px 0; }
.lg-crow .track .t { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--fg); border-radius: 1px; box-shadow: 0 0 0 2px var(--bg); }
.lg-crow .v { font-family: var(--display); font-size: var(--t-title); text-align: right; }
.lg-cdetail { margin: -2px 0 8px 182px; font-size: var(--t-sub); color: var(--dim); }
.lg-total { display: grid; grid-template-columns: 170px minmax(0, 1fr) 76px; gap: 12px; align-items: center; border-top: 2px solid var(--line); margin-top: 8px; padding-top: 12px; }
.lg-total .v { font-family: var(--display); font-size: var(--t-title); text-align: right; }
.lg-fund { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--panel); border-radius: 0 22px 22px 0; padding: 12px 18px 12px 0; margin-bottom: 18px; }
.lg-fund .st { align-self: stretch; background: var(--ok); }
.lg-fund b { font-family: var(--display); font-weight: 600; font-size: var(--t-count); letter-spacing: .03em; }
.lg-fundhint { text-align: right; }
.lg-queue { display: grid; gap: 8px; }
.lg-witem { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lg-witem .rank { font-family: var(--display); font-size: var(--t-count); color: var(--dim); text-align: right; }
.lg-witem .tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lg-witem .tx b { font-family: var(--display); font-weight: 600; font-size: var(--t-title); letter-spacing: .06em; overflow-wrap: anywhere; }
.lg-witem .tx small { font-size: var(--t-sub); color: var(--dim); overflow-wrap: anywhere; }
.lg-witem .tx a { color: var(--chrome-b); }
.lg-witem .fb { height: 8px; background: var(--panel-2); border-radius: 0 4px 4px 0; overflow: hidden; max-width: 360px; }
.lg-witem .fb span { display: block; height: 100%; background: var(--ok); border-radius: 0 4px 4px 0; }
.lg-witem .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lg-witem .cost { font-family: var(--display); font-size: var(--t-title); }
.lg-witem .acts { display: flex; gap: 6px; align-items: center; }
.lg-witem .btn, .lg-brow .btn { min-height: 44px; padding: 0 16px; font-size: var(--t-sub); }
.lg-icon { width: 44px; height: 44px; border-radius: 22px; border: 2px solid var(--line); background: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--fg); }
.lg-icon:disabled { opacity: .3; }
.lg-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px; margin-top: 18px; align-items: end; }
.lg-add label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lg-add input { min-height: 46px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--fg); padding: 0 12px; font: inherit; width: 100%; }
.lg-add input:focus { border-color: var(--chrome-b); outline: none; }
.lg-add .btn { min-height: 46px; font-size: var(--t-sub); padding: 0 24px; }
.lg-bought { margin-top: 22px; display: grid; gap: 4px; }
.lg-brow { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--dim); font-size: var(--t-sub); }

/* ---------- Ask ---------- */
.asksheet { width: min(860px, 100%); }
.asklog { display: flex; flex-direction: column; gap: 12px; max-height: min(56vh, 560px); overflow-y: auto; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.askhint { color: var(--fg); line-height: 1.5; }
.askhint .muted { font-size: 15px; }
.amsg { max-width: 92%; line-height: 1.45; }
.amsg.user { align-self: flex-end; background: var(--panel-2); border-radius: 18px 18px 4px 18px; padding: 10px 16px; white-space: pre-wrap; }
.amsg.bot { align-self: flex-start; border-left: 4px solid var(--chrome-a); padding: 2px 0 2px 14px; }
.amsg.thinking .atext { color: var(--dim); animation: pulse 1s infinite alternate; }
.ameta { font-family: var(--display); font-size: 12px; letter-spacing: .14em; color: var(--dim); margin-top: 4px; }
.prop { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 10px; padding: 8px 10px 8px 0; background: var(--panel-2); border-radius: 0 16px 16px 0; }
.prop .st { align-self: stretch; background: var(--chrome-b); }
.prop.done .st { background: var(--ok); }
.prop.failed .st { background: var(--bad); }
.prop.cancelled { opacity: .55; }
.prop .tx { display: flex; flex-direction: column; min-width: 0; }
.prop .tx b { font-weight: 600; }
.prop .tx small { color: var(--dim); font-size: 14px; }
.prop .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
#askText { width: 100%; min-height: 64px; background: var(--panel-2); border: 2px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 18px; resize: none; }
#askText:focus { border-color: var(--chrome-a); outline: none; }
.chip[aria-pressed="true"]#askDeep { background: var(--chrome-a); border-color: var(--chrome-a); color: var(--ink); }
.aimeter { position: relative; height: 12px; background: var(--panel-2); border-radius: 0 6px 6px 0; margin-bottom: 6px; max-width: 360px; }   /* no overflow clip: the reminder mark sits proud of the bar */
.aimeter span { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--ok); }
.aimeter span.warm { background: var(--warn); }
.aimeter span.hot { background: var(--bad); }

/* ---------- Narrow screens (iPad portrait split view, phones) ---------- */
@media (max-width: 860px) {
  .lg-money, .lg-accts { grid-template-columns: minmax(0, 1fr); }
  .rl-up, .rl-charts { grid-template-columns: minmax(0, 1fr); }
  .rl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  html, body { height: auto; }
  .app { display: flex; flex-direction: column; height: auto; gap: 10px; }
  .elbow, .top::before { display: none; }
  .topbar { border-radius: 13px; padding-right: 13px; }
  .topbar span:first-child { display: none; }
  .headrow { padding-left: 0; }
  h1 { font-size: 34px; }
  .btn { min-height: 48px; padding: 0 16px; font-size: 16px; }
  .btn.capture { padding: 0 20px; font-size: 18px; }
  .side { flex-direction: row; overflow-x: auto; gap: 5px; padding-bottom: 2px; }
  .nav { height: 52px; min-width: 88px; padding: 0 12px 6px; font-size: 16px; flex: none; }
  .nav:first-child { border-radius: 26px 0 0 26px; }
  .fill { display: none; }
  .st-all { height: 52px; min-width: 150px; flex: none; }
  .launch { padding: 8px 0; overflow: visible; }
  .hb-top { grid-template-columns: minmax(0, 1fr); }
  .hb-tiles { grid-template-columns: minmax(0, 1fr); }
  .hb-grids { grid-template-columns: minmax(0, 1fr); }
  .hb-srow { grid-template-columns: 12px minmax(0, 1fr) 54px 54px 54px; }
  .hb-wk { grid-template-columns: 96px repeat(7, minmax(0, 1fr)) 60px; }
  .hb-wk .vs, .hb-wk.head span:last-child { display: none; }
  .hb-trend { grid-template-columns: 90px repeat(12, minmax(0, 1fr)) !important; }
  .lb-stats { grid-template-columns: minmax(0, 1fr); }
  .lb-reading { grid-template-columns: minmax(0, 1fr); }
  .lb-card { grid-template-columns: 76px minmax(0, 1fr); }
  .lb-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .lb-row .dt, .lb-row .pill { display: none; }
  .lb-detail { grid-template-columns: 96px minmax(0, 1fr); }
  .navbridge { display: flex !important; }
  .ov-cond { grid-template-columns: minmax(0, 1fr); }
  .ov-cond .lvl { border-radius: 24px 24px 0 0; min-width: 0; font-size: 28px; padding: 10px 20px; }
  .rv-row { grid-template-columns: 110px minmax(0, 1fr) 52px 44px; gap: 10px; }
  .prop { grid-template-columns: 6px minmax(0, 1fr); }
  .prop .btnrow, .prop .pill { grid-column: 2; justify-self: start; }
  .amsg { max-width: 100%; }
  .asksheet .sbar .long { display: none; }
  .asksheet .sbar span { white-space: nowrap; font-size: 13px; }
  .ov-cond .list { border-left: 3px solid var(--lc); border-top: 0; border-radius: 0 0 24px 24px; }
  .status { min-height: 52px; min-width: 120px; border-radius: 0 26px 26px 0; padding: 4px 16px 6px; font-size: 12px; }
  .status b { font-size: 14px; }
  .content { overflow: visible; padding: 8px 0; }
  .bridge { grid-template-columns: minmax(0, 1fr); height: auto; }
  .tlwrap { max-height: 70vh; }
  .wkpanel { height: auto; }
  .wkscroll { display: block; }
  .wkhead { min-width: 720px; }
  .wkbody { max-height: 70vh; }
  .rcol { overflow: visible; }
  .moc { min-height: 64px; padding: 4px; }
  .moc .li, .moc .more { display: none; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .frow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .newtask { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .newtask input { grid-column: 1 / -1; }
  .kv dd { margin-bottom: 10px; }
}
/* ---- Captain's Log: PIN pad, calendar of days, the page ---- */
.cl { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1120px; }
.cl > * { min-width: 0; }
.cl-lock { grid-column: 1 / -1; max-width: 420px; }
.cl-dots { display: flex; gap: 16px; margin: 28px 0 14px; }
.cl-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--chrome-c); }
.cl-dots i.on { background: var(--chrome-c); }
.cl-dots i.w { width: 40px; border-radius: 9px; margin-right: 10px; }   /* the code word's slot */
.cl-words { display: grid; grid-template-columns: repeat(3, 88px); gap: 12px; margin: 10px 0 18px; }
.cl-word { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 64px; border: 2px solid var(--chrome-c); border-radius: 0 22px 22px 0; background: transparent; color: var(--fg); cursor: pointer; }
.cl-word:nth-child(3n + 1) { border-radius: 22px 0 0 22px; }
.cl-word:nth-child(3n + 2) { border-radius: 4px; }
.cl-word b { font-family: var(--body); font-size: 24px; font-weight: 600; line-height: 1; }
.cl-word span { font-family: var(--display); font-size: 11px; letter-spacing: .2em; color: var(--chrome-c); }
.cl-word:not(:disabled):active { background: var(--chrome-c); color: var(--ink); }
.cl-word:not(:disabled):active span { color: var(--ink); }
.cl-word:disabled { opacity: .35; }
.cl-msg { font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); min-height: 2.6em; max-width: 46ch; }
.cl-pad { display: grid; grid-template-columns: repeat(3, 88px); gap: 12px; margin-top: 10px; }
.cl-key { height: 64px; border: 0; border-radius: 32px; background: var(--panel-2); font-family: var(--display); font-size: 28px; font-weight: 600; cursor: pointer; }
.cl-key.del { background: transparent; border: 2px solid var(--line); font-size: 22px; }
.cl-key:not(:disabled):active { background: var(--chrome-c); color: var(--ink); }
.cl-key:disabled { opacity: .4; }
.cl-mon { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.cl-mon b { font-family: var(--display); font-size: var(--t-title); letter-spacing: var(--ls-label); font-weight: 600; }
.cl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cl-dow { text-align: center; font-family: var(--display); font-size: var(--t-label); letter-spacing: .1em; color: var(--dim); padding-bottom: 4px; }
.cl-day { position: relative; aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 8px; background: transparent; font-family: var(--display); font-size: var(--t-sub); cursor: pointer; color: var(--fg); }
.cl-day.out { color: var(--dim); opacity: .55; }
.cl-day:disabled { opacity: .25; cursor: default; }
.cl-day.has::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--chrome-c); }
.cl-day.today { color: var(--chrome-c); font-weight: 700; }
.cl-day[aria-current="date"] { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--chrome-c); }
.cl-row { margin-top: 14px; }
.cl-title { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 24px; background: transparent; font-family: var(--display); font-size: var(--t-title); letter-spacing: var(--ls-label); font-weight: 600; cursor: pointer; }
.cl-title .tri { color: var(--chrome-c); }
.cl-title:active, .cl-title[aria-expanded="true"] { background: var(--panel-2); }
.cl-pick { display: grid; gap: 14px; }
.cl-years { display: flex; gap: 8px; flex-wrap: wrap; --c: var(--chrome-c); }
.cl-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cl-mo { position: relative; min-height: 56px; border: 2px solid var(--line); border-radius: 28px; background: transparent; font-family: var(--display); font-size: var(--t-sub); letter-spacing: var(--ls-label); cursor: pointer; }
.cl-mo:disabled { opacity: .25; cursor: default; }
.cl-mo.has::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--chrome-c); }
.cl-mo[aria-current="date"] { border-color: var(--chrome-c); color: var(--chrome-c); }
.cl-mo:not(:disabled):active { background: var(--chrome-c); color: var(--ink); }
/* a save landing: the bar fills left to right and fades; the status flashes; SAVE reads SAVED ✓ */
.cl-page .phead .rule { position: relative; overflow: hidden; }
@keyframes clFill { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.cl-page .phead .rule.swept::after { content: ""; position: absolute; inset: 0; background: var(--chrome-c); border-radius: inherit; transform-origin: left; animation: clFill 900ms var(--ease-out) both; }
@keyframes clOk { from { color: var(--chrome-c); } }
#clStatus.ok { animation: clOk 1200ms var(--ease-out); }
.btn.saved { background: var(--chrome-c); animation: pop 300ms var(--ease-out); }
.cl-intent { display: flex; gap: 12px; align-items: baseline; color: var(--dim); margin: 2px 0 12px; font-size: var(--t-sub); }
.cl-intent span { font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--chrome-c); }
.cl-text { display: block; width: 100%; min-height: 320px; resize: none; overflow: hidden; font-size: var(--t-body); line-height: 1.6; padding: 16px 18px; }
.cl-err:empty { display: none; }
.cl-err, .cl-note { margin-top: 10px; font-size: var(--t-sub); }
.cl-notes { margin: 12px 0 0; padding-left: 20px; color: var(--dim); font-size: var(--t-sub); }
.cl-bar { display: block; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--chrome-c); border-radius: 4px; transition: width .3s ease; }
/* LOG search (2.11): the box under the calendar, results in the page column */
.cl-find { margin-top: 26px; }
.cl-find .ov-sub { margin-top: 0; }
.cl-findrow { display: flex; gap: 8px; }
.cl-findrow input { flex: 1; min-width: 0; }
.cl-idx { margin-top: 12px; }
.cl-idx small { display: block; font-size: var(--t-sub); line-height: 1.4; }
.cl-idxbar { height: 8px; border-radius: 0 4px 4px 0; background: var(--panel-2); margin-bottom: 6px; overflow: hidden; }
.cl-idxbar span { display: block; height: 100%; background: var(--chrome-c); transition: width .6s ease; }
.cl-fq { color: var(--dim); font-size: var(--t-sub); margin: 0 0 6px; }
.cl-fq b { color: var(--fg); font-weight: 600; }
.cl-hy { margin: 20px 0 6px; color: var(--chrome-c); }
.cl-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 12px 4px; min-height: 56px; cursor: pointer; color: var(--fg); }
.cl-hit.cur { background: var(--panel-2); border-radius: 0 14px 14px 0; }
.cl-hitd { font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--chrome-c); }
.cl-hitn { font-family: var(--display); font-size: var(--t-label); letter-spacing: .1em; color: var(--dim); }
.cl-hits-t, .cl-fbs { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sub); line-height: 1.45; color: var(--dim); }
.cl-hit mark, .cl-fbs mark { background: none; color: var(--fg); font-weight: 600; box-shadow: inset 0 -2px 0 var(--chrome-c); }
.cl-findbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 10px 12px; background: var(--panel); border-left: 6px solid var(--chrome-c); border-radius: 0 18px 18px 0; }
.cl-findbar .tri { margin-right: 8px; }
.cl-fbt { font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); margin-right: auto; }
.cl-fbs { margin-top: 2px; }
@media (max-width: 860px) { .cl { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 520px) { .cl-pad, .cl-words { grid-template-columns: repeat(3, 76px); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 520px) {
  .lg-big { font-size: 48px; }
  .lg-crow, .lg-total { grid-template-columns: 112px minmax(0, 1fr) 64px; }
  .lg-cdetail { margin-left: 0; }
  .lg-witem { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .lg-witem .right { grid-column: 2 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .lg-witem .acts { grid-column: 2 / -1; }
  .lg-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lg-add .wide { grid-column: 1 / -1; }
  .lg-fund { grid-template-columns: 10px minmax(0, 1fr); }
  .lg-fundhint { display: none; }
  .rl-row { grid-template-columns: 8px minmax(0, 1fr) auto; row-gap: 4px; }
  .rl-row .tx { grid-column: 2 / -1; grid-row: 2; }
  .rl-arow { grid-template-columns: 110px minmax(0, 1fr) 30px; }
  .rl-pat { grid-template-columns: 8px minmax(0, 1fr); }
  .rl-pat .btn { grid-column: 2; justify-self: start; }
  .ov-alert .go { display: none; }
  .ov-wk { gap: 3px; }
  .ov-day .bars { padding: 0 2px; }
  .ov-bal { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bn pill" "viz bv"; row-gap: 6px; padding-block: 4px; }
  .ov-bal .bn { grid-area: bn; } .ov-bal > .pill, .ov-bal > span:last-child { grid-area: pill; justify-self: end; }
  .ov-bal .track, .ov-bal .bal-dots { grid-area: viz; } .ov-bal .bv { grid-area: bv; }
  .ov-envrow { grid-template-columns: minmax(0, 1fr) auto; }
  .ov-envrow .k { grid-column: 1 / -1; }
  .ov-grid { gap: 56px; }
  .ov-log { grid-template-columns: minmax(0, 1fr); }
  .ov-cd { font-size: 38px; }
}


/* ---------- Motion ---------- */
/* Quick, small, and only when you do something. Reduce Motion (above) turns all of it off. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); --night: #d08a2e; }
@keyframes lcarsFlash { from { filter: brightness(1.45); } to { filter: none; } }
.flash { animation: lcarsFlash 260ms var(--ease-out); }
.top.armflash::before { animation: lcarsFlash 260ms var(--ease-out); }
.btn, .chip, .nav { transition: transform 160ms var(--ease-out); }
.btn:not(:disabled):active, .chip:not(:disabled):active, .nav:not(:disabled):active { transform: scale(.97); }

/* changing screens: content rises in */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
#content.enter > * { animation: rise 200ms var(--ease-out) both; }

/* bars grow from their baseline when a screen opens (never on a background sync) */
@keyframes growY { from { transform: scaleY(0); } }
@keyframes growX { from { transform: scaleX(0); } }
#content.grow-in .ov-day .seg { transform-origin: bottom; animation: growY 420ms var(--ease-out) both; }
#content.grow-in .ov-day:nth-child(2) .seg { animation-delay: 25ms; } #content.grow-in .ov-day:nth-child(3) .seg { animation-delay: 50ms; }
#content.grow-in .ov-day:nth-child(4) .seg { animation-delay: 75ms; } #content.grow-in .ov-day:nth-child(5) .seg { animation-delay: 100ms; }
#content.grow-in .ov-day:nth-child(6) .seg { animation-delay: 125ms; } #content.grow-in .ov-day:nth-child(7) .seg { animation-delay: 150ms; }
#content.grow-in .ov-bal .track span, #content.grow-in .rv-row .track span, #content.grow-in .rl-arow .track span,
#content.grow-in .lg-crow .track .b, #content.grow-in .lg-arow .bar span, #content.grow-in .lg-witem .fb span { transform-origin: left; animation: growX 420ms var(--ease-out) both; }
#content.grow-in .rl-svg .b-work, #content.grow-in .rl-svg .b-personal, #content.grow-in .rl-svg .b-farm, #content.grow-in .rl-svg .b-done { transform-box: fill-box; transform-origin: bottom; animation: growY 420ms var(--ease-out) both; }

/* sheets slide up over a fading backdrop, and back down when closed */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
.scrim:not([hidden]) { animation: fadeIn 240ms var(--ease-out); }
.scrim:not([hidden]) > .sheet { animation: sheetUp 260ms var(--ease-out); }
.scrim.closing { opacity: 0; transition: opacity 200ms var(--ease-out); pointer-events: none; }
.scrim.closing > .sheet { transform: translateY(40px); transition: transform 200ms var(--ease-out); }

/* + details: the panel eases open (script) and its new lines fade in; + turns into − */
.ov-pnl.opening .ov-extra { animation: fadeIn 240ms var(--ease-out) both; }
@keyframes toMinus { from { transform: rotate(90deg); } }
@keyframes toPlus { from { transform: rotate(0deg); } }
.ov-more.turn[aria-expanded="true"]::after { animation: toMinus 240ms var(--ease-out); }
.ov-more.turn[aria-expanded="false"]::after { animation: toPlus 240ms var(--ease-out); }

/* marking a priority done: the box pops, a line sweeps through the title */
@keyframes pop { 50% { transform: scale(1.18); } }
@keyframes sweep { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
.prio.justdone .box { animation: pop 260ms var(--ease-out); }
.prio.justdone .pt b { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 55%; background-size: 100% 2px; animation: sweep 320ms var(--ease-out) 80ms both; }

/* condition change: the color crossfades from the old one; the items rise in */
@keyframes condFrom { from { background-color: var(--prev); border-color: var(--prev); } }
.ov-cond.changed .lvl, .ov-cond.changed .list { animation: condFrom 600ms var(--ease-out); }
.ov-cond.changed .list > * { animation: rise 260ms var(--ease-out) both; }

/* ---------- Standby ---------- */
/* One centered column, one typeface, three sizes: the clock, the event title, small spaced capitals. */
.standby { position: fixed; inset: 0; z-index: 100; background: #000; color: var(--sfg); opacity: 0; transition: opacity 1.6s ease; cursor: pointer;
  --sfg: #d9d2c6; --sdim: #6f6a62; --sacc: var(--chrome-b); display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 6vw calc(env(safe-area-inset-bottom, 0px) + 48px); }
.standby.on { opacity: 1; }
.standby.waking { transition: opacity 900ms cubic-bezier(.25, .6, .35, 1); pointer-events: none; }   /* wake: a touch quicker than falling asleep, easing out to the end */
.standby.night { --sfg: var(--night); --sdim: #6a4718; --sacc: var(--night); }
.standby.night .sb-body, .standby.night .sb-hint { opacity: .8; }   /* dim the text, never the black: nothing shows through */
.sb-body { width: 100%; max-width: 1100px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 2s ease;
  font-family: var(--display); font-weight: 400; --sb-line: clamp(22px, 2.6vw, 34px); --sb-small: clamp(13px, 1.25vw, 17px); }
.sb-tm { font-size: clamp(110px, 18vw, 250px); line-height: .9; letter-spacing: .01em; }
.sb-lbl { font-size: var(--sb-small); letter-spacing: .22em; line-height: 1.5; max-width: 100%; }
.sb-acc { color: var(--sacc); margin-top: 3.4vh; }
.sb-dim { color: var(--sdim); }
.sb-sep { display: inline-block; margin: 0 .9em; opacity: .6; }
.sb-sep.wide { margin: 0 1.6em; }
.sb-rule { width: 64px; height: 2px; background: var(--sdim); opacity: .6; margin: 5.5vh 0 4.5vh; }
.sb-title { font-size: var(--sb-line); letter-spacing: .03em; line-height: 1.25; margin: .5vh 0 .9vh; max-width: min(900px, 86vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-foot { margin-top: 6vh; }
.sb-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .8em; vertical-align: .02em; background: var(--c, var(--sdim)); opacity: .85; }
.sb-dot.green { background: var(--ok); } .sb-dot.yellow { background: var(--warn); } .sb-dot.red { background: var(--bad); }
.standby.night .sb-dot { background: var(--night); }
.sb-hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%); font-family: var(--display); font-size: 12px; letter-spacing: .22em; color: var(--sdim); white-space: nowrap; }
@media (max-width: 760px) {
  .sb-title { white-space: normal; }
  .topbar .topbtn { padding: 0 8px; }
}

/* ---------- Easter eggs (2.13): see the note in app.js ---------- */
.status, .ov-cond .lvl { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }   /* they can be held */
.egg { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; cursor: pointer; animation: eggIn .25s ease-out; }
.egg[hidden] { display: none; }
@keyframes eggIn { from { opacity: 0; } }
@keyframes eggShow { from { opacity: 0; } to { opacity: 1; } }
.egg-ra { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-family: var(--display); letter-spacing: .22em; color: var(--fg); padding: 0 16px; }
.egg-ra b { font-size: clamp(64px, 12vw, 150px); font-weight: 700; letter-spacing: .12em; line-height: 1; }
.egg-ra span { font-size: clamp(16px, 2vw, 24px); }
.egg-ra.small span { font-size: clamp(18px, 2.4vw, 28px); background: rgba(0, 0, 0, .55); padding: 8px 18px; border-radius: 22px; }
/* red alert: the whole frame pulses red */
.egg.red { background: rgba(60, 0, 0, .55); box-shadow: inset 0 0 0 14px #d0312d, inset 0 0 120px 40px rgba(208, 49, 45, .55); animation: eggIn .2s ease-out, eggRed .95s ease-in-out infinite; }
.egg.red .egg-ra b { color: #ff5a4f; text-shadow: 0 0 28px rgba(255, 70, 60, .6); }
@keyframes eggRed { 50% { box-shadow: inset 0 0 0 14px #5a0f0d, inset 0 0 60px 10px rgba(208, 49, 45, .2); background: rgba(20, 0, 0, .35); } }
.egg.stand { background: rgba(0, 0, 0, .55); }
/* warp: streaks from the middle outwards */
.egg.warp { background: radial-gradient(circle at center, rgba(160, 190, 255, .15), rgba(0, 0, 0, .75) 70%); }
.egg-warp { position: absolute; inset: 0; overflow: hidden; }
.egg-warp i { position: absolute; left: 50%; top: 50%; width: 46vmax; height: 2px; transform-origin: 0 50%; transform: rotate(var(--a)) translateX(4vmax) scaleX(0); opacity: 0;
  background: linear-gradient(90deg, transparent, #cfe0ff 60%, #fff); animation: eggWarp 1.1s cubic-bezier(.5, 0, .9, .4) var(--d) 2 both; }
@keyframes eggWarp { 15% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(60vmax) scaleX(1); opacity: 0; } }
/* holodeck: the grid draws itself in */
.egg.holo { background: #000; }
.egg-grid { position: absolute; inset: 0; background-image: linear-gradient(#f6c641 2px, transparent 2px), linear-gradient(90deg, #f6c641 2px, transparent 2px); background-size: 9vmin 9vmin; background-position: center;
  animation: eggGrid 1.8s ease-out both; }
@keyframes eggGrid { from { opacity: 0; transform: scale(1.6); filter: blur(6px); } 60% { opacity: 1; } to { opacity: .9; transform: none; filter: none; } }
/* Q */
.egg.q { background: rgba(0, 0, 0, .35); }
.egg-flash { position: absolute; inset: 0; background: #fff; animation: eggFlash .8s ease-out both; pointer-events: none; }
@keyframes eggFlash { from { opacity: .95; } to { opacity: 0; } }
.egg-q { position: relative; max-width: min(560px, calc(100% - 32px)); background: var(--panel); border-left: 10px solid var(--chrome-a); border-radius: 0 26px 26px 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; font-size: 22px; line-height: 1.35; box-shadow: 0 14px 50px rgba(0, 0, 0, .6); }
.egg-q b { align-self: flex-end; font-family: var(--display); font-size: 30px; letter-spacing: .1em; color: var(--chrome-a); }
/* the replicator */
.egg.rep { background: rgba(7, 8, 11, .8); }
.egg-rep { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 120px; }
.egg-rep b { font-family: var(--display); letter-spacing: .22em; font-size: 26px; color: var(--chrome-d); opacity: 0; animation: eggShow .6s ease-out 1.5s forwards; }
.egg-beam { position: absolute; left: 50%; top: 0; height: 260px; width: 120px; margin-left: -60px; border-radius: 60px;
  background: repeating-linear-gradient(0deg, rgba(180, 210, 255, 0) 0 6px, rgba(200, 225, 255, .55) 6px 8px); filter: blur(1px); animation: eggBeam 1.8s ease-in-out both; }
@keyframes eggBeam { 0% { opacity: 0; background-position: 0 0; } 25% { opacity: 1; } 80% { opacity: .9; background-position: 0 -60px; } 100% { opacity: 0; background-position: 0 -80px; } }
.egg-cup { width: 120px; height: 120px; opacity: 0; animation: eggShow .8s ease-out 1.1s forwards; }
.egg-cup .cup { fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.egg-cup .steam { fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; animation: eggSteam 2.2s ease-in-out 1.6s infinite; }
@keyframes eggSteam { 50% { transform: translateY(-3px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .egg-cup, .egg-rep b { opacity: 1; } .egg-beam, .egg-warp, .egg-flash { display: none; } }   /* eggs as plain fades */
/* ---------- Bulleted lists (2.14) ---------- */
.rv-lab { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.rv-lab .ov-sub { flex: 1; min-width: 0; }
.rv-lab .bulchip { margin: 0 0 6px; }

/* ---------- Log Ask (2.15): Claude on the entries you pick ---------- */
.la-scope { margin: 2px 0 6px; }
.la-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#laQ, #laF { width: 100%; }
.la-pv { margin-top: 14px; padding: 14px 16px; border-left: 8px solid var(--chrome-c); border-radius: 0 20px 20px 0; background: var(--panel); display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sub); line-height: 1.45; }
.la-pv b { font-family: var(--display); font-weight: 600; letter-spacing: var(--ls-label); font-size: var(--t-label); }
.la-pv.big { border-left-color: var(--warn); }
.la-pv .btnrow { margin-top: 6px; }
.la-chat { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 4px; }
.la-msg { line-height: 1.55; }
.la-msg.q { align-self: flex-end; max-width: 85%; background: var(--panel-2); border-radius: 18px 18px 4px 18px; padding: 10px 16px; white-space: pre-wrap; }
.la-msg.a { background: var(--panel); border-left: 6px solid var(--chrome-c); border-radius: 0 18px 18px 0; padding: 12px 16px; }
.la-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); }
.la-date { border: 0; background: none; padding: 0 2px; color: var(--chrome-c); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.la-ins-h { margin-top: 24px; }
.la-ins { display: flex; flex-direction: column; }
.la-in { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); text-align: left; cursor: pointer; }
.la-in small { color: var(--dim); font-size: var(--t-sub); }
.la-saved { display: flex; flex-direction: column; gap: 10px; line-height: 1.55; }
.lsum-p { margin: 0 0 6px; font-size: var(--t-sub); line-height: 1.45; }
.lsum-sheet .cl-lock { max-width: none; }
.lsum-sheet .cl-dots { margin: 10px 0 8px; }
.lsum-sheet .cl-msg { min-height: 2em; }
.lsum-sheet .cl-words { margin: 6px 0 10px; }
.lsum-sheet .cl-word, .lsum-sheet .cl-key { height: 52px; }
.lsum-sheet .cl-pad { gap: 10px; }
/* ---------- LEDGER pull to refresh (2.15.1) ---------- */
.ptr { height: 0; opacity: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--dim); transition: opacity .15s; }
.ptr.ready { color: var(--chrome-b); }
.ptr.busy { color: var(--chrome-b); transition: height .2s, opacity .15s; }
/* ---------- LOG controls, tidied (2.15.2): one size per job ---------- */
/* small (40px) for tools and toggles, the standard chip for screen actions, the big button for SAVE and FIND */
.chip.sm { min-height: 40px; padding: 0 14px; font-size: 13px; letter-spacing: .14em; border-radius: 20px; display: inline-flex; align-items: center; text-decoration: none; }
.cl-cal .phead .meta .cl-lockbtn { margin-left: 4px; color: var(--fg); }
.cl-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cl-acts.one { grid-template-columns: 1fr; }
.cl-acts .chip { width: 100%; justify-content: center; }
.cl-link { display: block; margin: 26px 0 0; padding: 8px 0; border: 0; background: none; color: var(--dim); font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.cl-tools-gap { flex: 1; }
.rv-lab .bulchip { margin: 0 0 6px; }
/* LOG, 2.15.3: search as one bar across the top; SAVE lines up with the right edge of the page */
.cl-find { grid-column: 1 / -1; margin: 0; }
.cl-findrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-findlab { font-family: var(--display); font-size: var(--t-label); letter-spacing: var(--ls-label); color: var(--chrome-c); margin-right: 4px; }
.cl-findrow input { flex: 1; min-width: 200px; min-height: 56px; }
.cl-find .cl-idx { max-width: 640px; }
.cl-saverow { justify-content: flex-end; }
@media (max-width: 860px) { .cl-findlab { width: 100%; } }
.cl { row-gap: 24px; }

/* ---------- Storage (the NAS) ---------- */
.nas { max-width: 1180px; display: flex; flex-direction: column; gap: 26px; padding-bottom: 8px; }
.nas-card { display: flex; align-items: center; gap: 14px; background: var(--panel); border-radius: 0 22px 22px 0; border-left: 8px solid var(--ok); padding: 12px 16px; }
.nas-card.bad { border-left-color: var(--bad); }
.nas-host b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: .1em; font-weight: 600; }
.nas-host small { color: var(--dim); font-size: 15px; overflow-wrap: anywhere; }
.nas-status .err { margin-top: 8px; }
.nas-shares { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.nas-share { border: 0; text-align: left; min-height: 76px; background: var(--panel); border-left: 8px solid var(--chrome-c); border-radius: 0 24px 24px 0; padding: 10px 16px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.nas-share b { font-family: var(--display); font-size: 20px; letter-spacing: .1em; font-weight: 600; overflow-wrap: anywhere; }
.nas-share small { color: var(--dim); font-size: 14px; }
.nas-cont { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.nas-ep { border: 0; text-align: left; background: var(--panel); border-radius: 0 24px 24px 0; padding: 10px 14px 12px 10px; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: center; }
.nas-ep b { display: block; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.nas-ep small { display: block; color: var(--dim); font-size: 14px; }
.nas-prog { display: block; height: 5px; border-radius: 3px; background: var(--panel-2); margin-top: 6px; overflow: hidden; }
.nas-prog i { display: block; height: 100%; background: var(--personal); }
.nas-art, .nas-ic.aud { width: 60px; height: 60px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--personal), var(--chrome-d)); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .04em; flex: none; }
.nas-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nas-crumbs .chip[aria-pressed="true"] { background: var(--personal); border-color: var(--personal); color: var(--ink); }
.nas-sep { color: var(--dim); font-family: var(--display); }
.nas-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.nas-tools input[type="search"] { flex: 1 1 240px; min-width: 0; min-height: 48px; }
.nas-tools .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.nas-list { display: grid; }
.nas-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 96px auto; gap: 14px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; padding: 8px 4px 8px 0; min-height: 68px; width: 100%; }
.nas-row .nas-ic { width: 52px; height: 52px; border-radius: 8px; font-size: 16px; }
.nas-ic.dir { background: var(--chrome-c); border-radius: 4px 14px 14px 4px; }
.nas-ic.doc { background: var(--panel-2); }
.nas-nm { min-width: 0; font-size: 17px; overflow-wrap: anywhere; }
.nas-nm small { display: block; color: var(--dim); font-size: 13px; }
.nas-m { font-family: var(--display); font-size: 14px; letter-spacing: .08em; color: var(--dim); white-space: nowrap; text-align: right; }
.nas-row.cur { background: color-mix(in srgb, var(--personal) 12%, transparent); }
.nas-row.played .nas-nm { color: var(--dim); }
.nas-row.other { opacity: .55; cursor: default; }
.nas-new { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--personal); margin-right: 8px; vertical-align: 1px; }
.pill.nas-on { background: var(--personal); color: var(--ink); }
.nas-scrub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-family: var(--display); font-size: 14px; color: var(--dim); }
.nas-scrub input[type="range"] { width: 100%; accent-color: var(--personal); min-height: 32px; }
.nas-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nas-ctl .chip { min-width: 56px; padding: 0 12px; }
.nas-play { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--personal); color: var(--ink); font-size: 22px; display: grid; place-items: center; flex: none; }
.nas-play.sm { width: 48px; height: 48px; font-size: 18px; }
.nas-ctl.big .nas-play { width: 76px; height: 76px; font-size: 28px; }
.nas-bar { position: sticky; bottom: 0; z-index: 4; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--panel-2); border-left: 10px solid var(--personal); border-radius: 0 34px 34px 0; padding: 10px 16px 10px 12px; box-shadow: 0 -10px 24px rgba(0, 0, 0, .45); }
.nas-bt { min-width: 0; display: grid; gap: 2px; }
.nas-bt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nas-bt small { color: var(--dim); font-family: var(--display); font-size: 13px; letter-spacing: .12em; }
.nas-now { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 30px; align-items: start; }
.nas-now > div:last-child { display: grid; gap: 16px; min-width: 0; justify-items: start; }
.nas-now > div:last-child > .nas-scrub { justify-self: stretch; }
.nas-bigart { width: 100%; aspect-ratio: 1; border-radius: 0 40px 40px 0; background: linear-gradient(135deg, var(--personal), var(--chrome-d)); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 72px; color: var(--ink); }
.nas-now h3 { margin: 0; font-size: 28px; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.nas-opts { justify-self: stretch; grid-template-columns: 130px minmax(0, 1fr); }
.nas-opts .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.nas-mini { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 18; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px)); background: var(--panel-2); border-left: 8px solid var(--personal); border-radius: 0 30px 30px 0; padding: 6px 16px 6px 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.nas-mt { border: 0; background: none; text-align: left; min-width: 0; min-height: 48px; display: grid; align-content: center; }
.nas-mt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.nas-mt small { color: var(--dim); font-family: var(--display); font-size: 12px; letter-spacing: .14em; }
@media (max-width: 860px) {
  .nas-now { grid-template-columns: minmax(0, 1fr); }
  .nas-bigart { max-width: 220px; }
  .nas-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .nas-row .nas-ic { width: 44px; height: 44px; }
  .nas-row .nas-m.tnum, .nas-row > .nas-m:nth-child(3) { display: none; }
  .nas-bar { grid-template-columns: 48px minmax(0, 1fr); }
  .nas-bar .nas-art { width: 48px; height: 48px; font-size: 16px; }
  .nas-bar .nas-ctl { grid-column: 1 / -1; justify-content: center; }
  .nas-opts { grid-template-columns: minmax(0, 1fr); }
}
.nas-tools .nas-hide { margin-left: auto; }
.nas-hidlist { display: grid; gap: 6px; }
.nas-hid { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.nas-art, .nas-ic.aud, .nas-bigart { position: relative; overflow: hidden; }
.nas-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--panel-2); }
.nas-share.has-art { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding-left: 10px; }
.nas-share.has-art .nas-art { width: 56px; height: 56px; }
.nas-share > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nas-by { color: var(--dim); font-family: var(--display); letter-spacing: .12em; font-size: 15px; margin-top: -8px; }
.nas-x { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--line); background: transparent; color: var(--dim); font-family: var(--display); font-size: 20px; line-height: 1; display: grid; place-items: center; }
.nas-mini.min { padding: 6px; gap: 6px; border-left-width: 6px; }
body.nas-pad .content { padding-bottom: 96px; }
body.nas-pad-min .content { padding-bottom: 72px; }
.nas-tn { font-family: var(--display); color: var(--dim); letter-spacing: .06em; margin-right: 10px; font-variant-numeric: tabular-nums; }
.nas-scan { font-family: var(--display); font-size: 13px; letter-spacing: .16em; color: var(--personal); }

.a-holiday { --c: var(--chrome-c); }

/* Finished events (2.22): everything that ended before the now line, dimmed with a check */
.ev, .wkb, .ov-blk { transition: background-color .6s ease, border-color .6s ease, color .6s ease; }
.ev.past { background: color-mix(in srgb, var(--c) 7%, var(--panel)); border-left-color: color-mix(in srgb, var(--c) 45%, var(--panel)); color: var(--dim); }
.wkb.past { background: color-mix(in srgb, var(--c) 9%, var(--panel)); border-left-color: color-mix(in srgb, var(--c) 45%, var(--panel)); color: var(--dim); }
.ev.past .t::before, .wkb.past.one .lbl::before, .wkb.past.tall .tm::before { content: "✓ "; color: var(--c); font-weight: 700; }
.ov-blk.past { background: color-mix(in srgb, var(--c) 16%, var(--panel)); border-left-color: color-mix(in srgb, var(--c) 50%, var(--panel)); }

/* Breaks (2.23): protected time like lunch, shown but never counted as work */
.a-break { --c: var(--chrome-b); }
.ev.a-break, .wkb.a-break, .ov-blk.a-break { background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--c) 14%, transparent) 7px 14px); }

/* Engineering (2.24): Home Assistant controls and upkeep */
.eng { display: grid; gap: 16px; align-content: start; --c: var(--chrome-d); }
.eng-tabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.eng-tabs .chips, .up-every .chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* 2.25: groups, card styles, list rows, the light panel */
.eng-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hseg { display: inline-flex; border: 2px solid var(--line); border-radius: 22px; padding: 2px; gap: 2px; }
.hseg button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 18px; background: transparent; font-family: var(--display); font-size: 14px; letter-spacing: .12em; color: var(--dim); }
.hseg button[aria-pressed="true"] { background: var(--chrome-b); color: var(--ink); }
.hg { display: grid; gap: 12px; }
.hg-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hg-tog { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 0; text-align: left; color: var(--fg); }
.hg-tog .cap { width: 26px; height: 26px; border-radius: 13px 0 0 13px; background: var(--c); flex: none; display: grid; place-items: center; color: var(--ink); font-size: 14px; }
.hg.closed .hg-tog .cap { border-radius: 13px; }
.hg-tog h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .14em; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hg-tog .rule { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--c); opacity: .35; min-width: 20px; }
.hg-tog .meta { font-family: var(--display); font-size: 14px; letter-spacing: .14em; color: var(--dim); white-space: nowrap; }
.hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.hc { position: relative; border-radius: 0 28px 28px 0; border-left: 10px solid var(--line); background: var(--panel); overflow: hidden; min-height: 136px; display: grid; }
.hc-main { display: grid; align-content: start; gap: 4px; width: 100%; text-align: left; padding: 14px 56px 14px 18px; border: 0; background: none; color: inherit; font: inherit; }
.hc-main .nm { font-family: var(--display); font-size: 19px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; }
.hc-main .val { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: .05em; color: var(--dim); }
.hc-main .val small { font-size: 20px; letter-spacing: .1em; }
.hc-main .sub { font-size: 13px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.hc-more { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 22px; border: 2px solid var(--line); background: var(--panel-2); color: var(--fg); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.hc.on { background: var(--chrome-d); border-left-color: var(--fg); color: var(--ink); }
.hc.on .hc-main .val, .hc.on .hc-main .sub { color: var(--ink); }
.hc.on .hc-more { background: rgba(0, 0, 0, .14); border-color: rgba(0, 0, 0, .25); color: var(--ink); }
.hc.dead { background-image: var(--hatch); opacity: .6; }
.hc-main:not(.ro):not(:disabled):active { transform: scale(.985); }
.hc-reading .hc-main .val { color: var(--fg); font-size: 48px; }
.hc-dimmer .hc-main { padding-bottom: 44px; }
.hc-lvl { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: rgba(0, 0, 0, .3); touch-action: none; cursor: ew-resize; }
.hc-lvl i { position: absolute; inset: 0 auto 0 0; background: var(--fg); opacity: .9; }
.hc:not(.on) .hc-lvl i { background: var(--dim); opacity: .35; }
.hc-lvl span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--ink); }
.hc:not(.on) .hc-lvl span { color: var(--dim); }
.hc-color.on { background: linear-gradient(120deg, var(--lc) 0%, color-mix(in srgb, var(--lc) 55%, var(--panel)) 100%); border-left-color: var(--lc); }
.hc-color .bulb { width: 46px; height: 46px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 3px rgba(0, 0, 0, .3), 0 0 26px 4px var(--lc); margin: 2px 0 4px; }
.hc-color:not(.on) .bulb { background: var(--panel-2); box-shadow: 0 0 0 3px var(--line); }
.hc-color .hc-main { padding-bottom: 56px; }
.hc-pwr { position: absolute; right: 8px; bottom: 8px; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 2px solid rgba(0, 0, 0, .25); background: rgba(0, 0, 0, .14); font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--ink); }
.hc-color:not(.on) .hc-pwr { border-color: var(--line); background: var(--panel-2); color: var(--fg); }
.hm-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hm { display: inline-flex; align-items: center; gap: 4px; min-height: 54px; padding-right: 6px; border: 2px solid var(--line); border-radius: 27px; background: var(--panel); max-width: 100%; }
.hm-main { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 8px 0 16px; border: 0; background: none; color: inherit; font-family: var(--display); font-size: 16px; letter-spacing: .1em; text-transform: uppercase; min-width: 0; }
.hm-main .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm .lamp, .hr .lamp { width: 14px; height: 14px; border-radius: 50%; background: var(--panel-2); box-shadow: 0 0 0 2px var(--line); flex: none; }
.hm .st { font-size: 13px; color: var(--dim); }
.hm.on { background: var(--chrome-d); border-color: var(--chrome-d); color: var(--ink); }
.hm.on .lamp { background: var(--lc); box-shadow: 0 0 0 2px var(--ink); }
.hm.on .st { color: var(--ink); }
.hm .hc-more { position: static; width: 38px; height: 38px; border: 0; background: rgba(127, 127, 127, .18); color: inherit; }
.hr-rows { display: grid; gap: 6px; }
.hr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; padding-right: 8px; background: var(--panel); border-radius: 0 30px 30px 0; border-left: 6px solid var(--line); }
.hr.on { border-left-color: var(--lc); }
.hr-main { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 58px; padding: 0 8px 0 16px; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
.hr .lamp { width: 18px; height: 18px; }
.hr.on .lamp { background: var(--lc); box-shadow: 0 0 0 2px var(--ink), 0 0 12px 2px var(--lc); }
.hr-main .nm { font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-main .st { font-family: var(--display); font-size: 15px; letter-spacing: .12em; color: var(--dim); white-space: nowrap; }
.hr.on .hr-main .st { color: var(--fg); }
.hsw { width: 70px; height: 42px; border-radius: 21px; border: 2px solid var(--line); background: var(--panel-2); position: relative; flex: none; }
.hsw::after { content: ""; position: absolute; top: 5px; left: 5px; width: 28px; height: 28px; border-radius: 50%; background: var(--dim); transition: transform .18s ease; }
.hsw[aria-pressed="true"] { background: var(--chrome-d); border-color: var(--chrome-d); }
.hsw[aria-pressed="true"]::after { transform: translateX(28px); background: var(--ink); }
.hsw:disabled { opacity: .35; }
.hsw-ph { width: 70px; }
.hp-steps { display: flex; gap: 6px; font-family: var(--display); letter-spacing: .14em; font-size: 13px; color: var(--dim); flex-wrap: wrap; }
.hp-steps b { color: var(--ink); background: var(--chrome-d); border-radius: 10px; padding: 1px 8px; font-weight: 600; }
.hp-steps em { font-style: normal; border: 2px solid var(--line); border-radius: 10px; padding: 0 8px; }
.hp-sec { display: grid; gap: 8px; }
.hp-split { border: 0; border-top: 2px dashed var(--line); margin: 4px 0 0; width: 100%; }
.hp-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.hp-pwr { width: 92px; height: 92px; border-radius: 50%; border: 0; background: var(--panel-2); box-shadow: 0 0 0 3px var(--line); font-family: var(--display); font-size: 20px; letter-spacing: .12em; color: var(--fg); }
.hp-pwr[aria-pressed="true"] { background: var(--lc); color: var(--ink); box-shadow: 0 0 0 3px var(--fg), 0 0 34px 6px var(--lc); }
.hp-read { display: grid; gap: 2px; min-width: 0; }
.hp-read b { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 4.5vw, 36px); line-height: 1.05; letter-spacing: .04em; }
.hp-read small { color: var(--dim); font-size: 15px; overflow-wrap: anywhere; }
.hp-color { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 18px; align-items: center; }
.hp-wheel { position: relative; width: 100%; max-width: 250px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, #fff 0%, rgba(255, 255, 255, 0) 100%), conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); touch-action: none; cursor: crosshair; box-shadow: 0 0 0 3px var(--line); }
.hp-wheel .knob { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 4px solid var(--ink); box-shadow: 0 0 0 3px #fff; pointer-events: none; }
.hp-wheel.off { filter: grayscale(.85) brightness(.55); }
.hp-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hp-swatch { min-height: 48px; border-radius: 24px; border: 2px solid var(--line); background: var(--panel-2); display: flex; align-items: center; gap: 10px; padding: 0 12px; font-family: var(--display); font-size: 14px; letter-spacing: .12em; text-align: left; color: var(--fg); }
.hp-swatch i { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--ink); }
.hp-srow { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; align-items: center; }
.hp-srow output { font-family: var(--display); font-size: 22px; letter-spacing: .06em; text-align: right; }
.hp-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; border-radius: 24px; background: var(--track, var(--panel-2)); box-shadow: inset 0 0 0 2px var(--line); margin: 0; }
.hp-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 48px; border-radius: 50%; background: var(--fg); border: 5px solid var(--ink); box-shadow: 0 0 0 2px var(--fg); }
.hp-slider::-moz-range-thumb { width: 38px; height: 38px; border-radius: 50%; background: var(--fg); border: 5px solid var(--ink); }
.hp-slider:focus-visible { outline: 3px solid var(--chrome-b); outline-offset: 2px; }
.hp-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.hp-style { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 16px; border: 2px solid var(--line); background: var(--panel-2); text-align: left; color: var(--fg); }
.hp-style[aria-pressed="true"] { border-color: var(--chrome-d); box-shadow: 0 0 0 2px var(--chrome-d); }
.hp-style:disabled { opacity: .35; background-image: var(--hatch); }
.hp-style b { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .14em; }
.hp-style small { color: var(--dim); font-size: 13px; line-height: 1.2; }
.pv { height: 46px; border-radius: 0 12px 12px 0; border-left: 5px solid var(--fg); background: var(--chrome-d); position: relative; overflow: hidden; display: block; }
.pv-dimmer::after { content: ""; position: absolute; left: 0; bottom: 0; height: 9px; width: 64%; background: var(--fg); }
.pv-color { background: linear-gradient(120deg, #6cc4ff, #2f6c8f); border-left-color: #6cc4ff; }
.pv-color::after { content: ""; position: absolute; left: 10px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: #b9e6ff; box-shadow: 0 0 10px 3px #b9e6ff; }
.pv-mini { height: 26px; margin: 10px 0; border-radius: 13px; border: 0; }
.pv-reading { background: var(--panel); border-left-color: var(--line); color: var(--fg); font-family: var(--display); font-size: 22px; padding-left: 8px; line-height: 46px; }
.hp-newg { display: flex; gap: 8px; }
.hp-newg input { flex: 1; min-width: 0; }
.hg-edit { display: grid; gap: 8px; }
.hg-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.hg-row i { width: 14px; height: 32px; border-radius: 7px 0 0 7px; background: var(--c); }
.hg-row .btn.sm { min-width: 44px; padding: 0 10px; }
@media (max-width: 640px) {
  .hg-tog .rule { display: none; }
  .hp-color { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hp-swatches { width: 100%; }
  .hr-main { grid-template-columns: 18px minmax(0, 1fr); }
  .hr-main .st { grid-column: 2; font-size: 13px; }
  .hg-row { grid-template-columns: 14px minmax(0, 1fr) auto auto; }
  .hg-row .hg-del { grid-column: 2 / -1; justify-self: start; }
}
.eng-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.eng-up { display: grid; gap: 10px; }
.up-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; background: var(--panel); border-radius: 0 22px 22px 0; border-left: 8px solid var(--ok); padding: 8px 12px 8px 0; }
.up-row.warn { border-left-color: var(--warn); }
.up-row.bad { border-left-color: var(--bad); }
.up-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; text-align: left; background: none; border: 0; color: var(--fg); font: inherit; padding: 6px 0 6px 14px; min-height: 52px; }
.up-main .nm { font-size: 19px; min-width: 0; overflow-wrap: anywhere; }
.up-main .nm small, .up-main .meter small { display: block; color: var(--dim); font-size: 14px; }
.up-main .tr { display: block; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.up-main .tr i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.up-row.warn .tr i { background: var(--warn); }
.up-row.bad .tr i { background: var(--bad); }
.up-main .due { font-family: var(--display); font-size: 17px; letter-spacing: .1em; white-space: nowrap; }
.up-row.bad .due { color: var(--bad); }
.up-row.warn .due { color: var(--warn); }
.up-every { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; }
.eng-sheet .sbody input[type="text"], .eng-sheet .sbody input[type="number"], .eng-sheet .sbody input[type="date"], .eng-sheet .sbody input[type="search"] { width: 100%; }
#upTimeRow, #upReadRow { display: grid; gap: 8px; }
#upTimeRow[hidden], #upReadRow[hidden] { display: none; }
.ha-hit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ha-hit span { min-width: 0; overflow-wrap: anywhere; }
.ha-hit small { display: block; color: var(--dim); font-size: 13px; }
#haList { display: grid; gap: 4px; max-height: 52vh; overflow: auto; }
@media (max-width: 640px) {
  .up-main { grid-template-columns: minmax(0, 1fr) auto; }
  .up-main .meter { grid-column: 1 / -1; grid-row: 2; }
  .up-row { grid-template-columns: minmax(0, 1fr); padding-right: 12px; }
  .up-row > .chip { justify-self: start; margin-left: 14px; }
  .up-every { grid-template-columns: minmax(0, 1fr); }
}

/* Tarot (2.26): every class starts tr- */
:root { --tr-major: #dcc6a0; --tr-wands: #e8a27a; --tr-cups: #9db0ff; --tr-swords: #b9a6e0; --tr-pent: #56c7b8; --tr-face: #191a22; --tr-edge: #34364a; }
.tr { display: grid; gap: 18px; align-content: start; }
.tr-major { --s: var(--tr-major); } .tr-wands { --s: var(--tr-wands); } .tr-cups { --s: var(--tr-cups); } .tr-swords { --s: var(--tr-swords); } .tr-pent { --s: var(--tr-pent); }
.tr-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.tr-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.tr-col { display: grid; gap: 16px; min-width: 0; align-content: start; }
.tr-card { --s: var(--tr-major); container-type: inline-size; position: relative; aspect-ratio: 3 / 5; width: 100%; border-radius: 10px; background: var(--tr-face); box-shadow: inset 0 0 0 2px var(--tr-edge); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 8% 8% 9%; color: var(--fg); text-align: center; }
.tr-card.tr-major { --s: var(--tr-major); } .tr-card.tr-wands { --s: var(--tr-wands); } .tr-card.tr-cups { --s: var(--tr-cups); } .tr-card.tr-swords { --s: var(--tr-swords); } .tr-card.tr-pent { --s: var(--tr-pent); }
.tr-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 7%; background: var(--s); }
.tr-card .num { font-family: var(--display); font-weight: 600; font-size: 14cqw; letter-spacing: .1em; color: var(--s); padding-top: 8%; }
.tr-card .art { display: grid; place-items: center; min-height: 0; }
.tr-card .art svg { width: 62%; height: auto; color: var(--s); }
.tr-card .nm { font-family: var(--display); font-size: 10cqw; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; }
.tr-card.rev .art, .tr-card.rev .num { transform: rotate(180deg); }
.tr-card .rv { position: absolute; top: 9%; right: 6%; font-family: var(--display); font-size: 9cqw; letter-spacing: .1em; background: var(--s); color: var(--ink); border-radius: 6px; padding: 0 5px; }
.tr-card.back { background: repeating-linear-gradient(45deg, var(--panel-2) 0 6px, var(--panel) 6px 12px); box-shadow: inset 0 0 0 2px var(--line); }
.tr-card.back::before, .tr-card.empty::before { display: none; }
.tr-card.empty { background: transparent; box-shadow: none; border: 2px dashed var(--line); grid-template-rows: 1fr; place-items: center; color: var(--dim); font-family: var(--display); letter-spacing: .1em; font-size: 10cqw; padding: 8%; }
.tr-card.empty.next { border-color: var(--chrome-a); color: var(--chrome-a); }
.tr-card.flip { animation: trflip 420ms var(--ease-out, ease-out) both; }
@keyframes trflip { from { transform: rotateY(90deg); opacity: .2; } }
.tr-week { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); gap: 22px; align-items: start; background: var(--panel); border-radius: 0 28px 28px 0; border-left: 10px solid var(--chrome-a); padding: 18px 22px 18px 18px; }
.tr-week.none .tr-card { max-width: 200px; }
.tr-big { border: 0; background: none; padding: 0; }
.tr-week .tx { display: grid; gap: 8px; min-width: 0; }
.tr-week h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.7vw, 34px); letter-spacing: .05em; line-height: 1.05; overflow-wrap: anywhere; }
.tr-week .kw { color: var(--chrome-b); font-family: var(--display); letter-spacing: .12em; font-size: 15px; text-transform: uppercase; }
.tr-week p { margin: 0; }
.tr-list { display: grid; gap: 10px; }
.tr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; background: var(--panel); border: 0; border-left: 8px solid var(--chrome-c); border-radius: 0 22px 22px 0; padding: 10px 14px 10px 16px; text-align: left; color: var(--fg); width: 100%; font: inherit; }
.tr-row .t { display: grid; gap: 2px; min-width: 0; }
.tr-row b { font-weight: 500; font-size: 18px; overflow-wrap: anywhere; }
.tr-row small { color: var(--dim); font-family: var(--display); letter-spacing: .12em; font-size: 13px; }
.tr-row .th { display: flex; gap: 4px; align-items: center; }
.tr-row .th .tr-card { width: 30px; border-radius: 4px; padding: 0; grid-template-rows: 1fr; }
.tr-row .th .tr-card .num, .tr-row .th .tr-card .nm, .tr-row .th .tr-card .rv { display: none; }
.tr-row .th .tr-card .art svg { width: 70%; }
.tr-row .more { font-family: var(--display); color: var(--dim); font-size: 13px; letter-spacing: .1em; }
.tr-older summary { cursor: pointer; font-family: var(--display); letter-spacing: .14em; color: var(--dim); font-size: 14px; padding: 6px 0; }
.tr-older .tr-list { margin-top: 10px; }
.tr-pat { background: var(--panel); border-radius: 0 22px 22px 0; padding: 14px 18px; display: grid; gap: 14px; }
.tr-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-bars { display: grid; gap: 8px; }
.tr-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-family: var(--display); font-size: 14px; letter-spacing: .12em; }
.tr-bar .tk { height: 12px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.tr-bar .tk i { display: block; height: 100%; border-radius: 6px; background: var(--s); }
.tr-bar .n { text-align: right; }
.tr-rep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tr-rep button { border: 0; background: none; padding: 0; display: grid; gap: 6px; color: var(--fg); justify-items: center; font-family: var(--display); letter-spacing: .1em; font-size: 13px; }
.tr-rep .tr-card { max-width: 92px; }
.tr-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.tr-strip > button, .tr-strip > .gap { border: 0; background: none; padding: 0; display: grid; gap: 4px; color: var(--dim); font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-align: center; }
.tr-strip .tr-card .nm { display: none; }
.tr-board { position: relative; width: 100%; margin: 0 auto; }
.tr-slot { position: absolute; border: 0; background: none; padding: 0; color: inherit; }
.tr-slot .tr-card { width: 100%; height: 100%; aspect-ratio: auto; }
.tr-slot.cross { transform: rotate(90deg) scale(.84); z-index: 2; }
.tr-slot .pos { position: absolute; left: 4px; top: 4px; z-index: 3; min-width: 22px; height: 22px; border-radius: 11px; background: var(--ink); color: var(--fg); font-family: var(--display); font-size: 12px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--line); padding: 0 5px; }
.tr-slot.cross .pos { transform: rotate(-90deg); }
.tr-spreads { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tr-sp { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 16px; border: 2px solid var(--line); background: var(--panel); text-align: left; color: var(--fg); font: inherit; }
.tr-sp[aria-pressed="true"] { border-color: var(--chrome-a); box-shadow: 0 0 0 2px var(--chrome-a); }
.tr-sp b { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .12em; }
.tr-sp small { color: var(--dim); font-size: 13px; line-height: 1.2; }
.tr-sp.mine { border-style: dashed; }
.tr-sp .chip { justify-self: start; }
.tr-mini { position: relative; height: 54px; display: block; }
.tr-mini i { position: absolute; background: var(--chrome-a); border-radius: 2px; opacity: .8; }
.tr-mini i.x { background: var(--chrome-b); }
.tr-step { display: flex; align-items: center; gap: 10px; }
.tr-step b { font-family: var(--display); font-size: 22px; min-width: 2ch; text-align: center; }
.tr-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--display); letter-spacing: .12em; font-size: 15px; }
.tr-check input { width: 22px; height: 22px; accent-color: var(--chrome-a); }
.tr-q { margin: 0; font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: .04em; overflow-wrap: anywhere; }
.tr-pos { display: grid; gap: 10px; }
.tr-pr { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; background: var(--panel); border-radius: 0 20px 20px 0; padding: 10px 14px 10px 10px; border-left: 6px solid var(--s); }
.tr-pr .who { display: grid; gap: 4px; min-width: 0; }
.tr-pr .who .ov-sub { color: var(--s); }
.tr-pr .who b { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .06em; }
.tr-pr .who em { font-style: normal; color: var(--chrome-b); font-size: 15px; }
.tr-link { justify-self: start; border: 0; background: none; color: var(--dim); font-family: var(--display); letter-spacing: .12em; font-size: 12px; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.tr-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.tr-cell { aspect-ratio: 3 / 4; border-radius: 10px; border: 2px dashed var(--line); background: transparent; color: var(--dim); font-family: var(--display); font-size: 18px; }
.tr-cell.on { border-style: solid; border-color: var(--chrome-a); background: color-mix(in srgb, var(--chrome-a) 22%, var(--panel)); color: var(--fg); }
.tr-cell.x { box-shadow: inset 0 0 0 4px var(--chrome-b); }
.tr-plist { display: grid; gap: 8px; }
.tr-pl { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.tr-pl b { font-family: var(--display); font-size: 18px; text-align: center; }
.tr-sheet { width: min(720px, 100%); }
.tr-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.tr-pick button { border: 0; background: none; padding: 0; }
.tr-pick button[disabled] { opacity: .3; }
.tr-hist { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
.tr-hist .tx { display: grid; gap: 8px; min-width: 0; align-content: start; }
.tr-hist h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: .05em; }
.tr-hrows { display: grid; }
.tr-hrow { display: grid; gap: 2px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--fg); font: inherit; }
.tr-hrow small { color: var(--dim); font-family: var(--display); letter-spacing: .12em; font-size: 12px; }
.tr-tile { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; background: var(--panel-2); border: 0; border-left: 6px solid var(--chrome-a); border-radius: 0 18px 18px 0; padding: 10px 14px 10px 10px; text-align: left; color: var(--fg); font: inherit; }
.tr-tile > span:not(.tr-card) { display: grid; gap: 2px; min-width: 0; }
.tr-tile b { font-family: var(--display); font-size: 18px; letter-spacing: .08em; font-weight: 600; }
.tr-tile small { color: var(--dim); font-size: 14px; overflow-wrap: anywhere; }
.tr-tile .tr-card .nm { display: none; }
.tr-review { display: grid; gap: 12px; }
@media (max-width: 1060px) { .tr-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .tr-week { grid-template-columns: 104px minmax(0, 1fr); padding: 14px; gap: 14px; }
  .tr-row .th .tr-card:nth-child(n+4) { display: none; }
  .tr-hist { grid-template-columns: minmax(0, 1fr); }
  .tr-hist > .tr-card { width: 120px; }
  .tr-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}