/* =========================================================================
   MATT DAILY // OS — Stark HUD skin
   =========================================================================
   TOKEN SWAP LAYER — the only block you touch to re-skin.
   Mirrors the Zeus runtime-color pattern (see zeus/assets/scss/initializers/
   _theme-colors.scss): every component below consumes semantic tokens only.
   When The Friendly Dev palette lands, either paste hex here or point tokens
   at the Zeus custom properties, e.g.  --md-accent: var(--primary);  (needs
   the Zeus stylesheet on this page, or just copy the values). Nothing else
   moves.
   ========================================================================= */
.md-hud {
	/* brand */
	--md-bg:        #05080D;
	--md-bg-raise:  #0A1118;
	--md-accent:    #52E5F2;  /* the cyan — swap target #1 */
	--md-accent-2:  #FFB454;  /* amber secondary — swap target #2 */
	--md-ink:       #D9F8FC;
	--md-ink-mid:   #9FD9E2;
	--md-ink-dim:   #5E99A4;
	--md-line:      #1B4954;
	--md-line-dim:  #143540;
	/* status (kept separate from brand, never reused as series colors) */
	--md-good:      #5CD98A;
	--md-warn:      #F5A94B;
	--md-crit:      #F26D6D;
	/* derived — glow + tints read from the brand tokens automatically */
	--md-glow:      color-mix(in srgb, var(--md-accent) 38%, transparent);
	--md-accent-15: color-mix(in srgb, var(--md-accent) 15%, transparent);
	--md-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	/* type scale — TV-readable; nothing on the glass below 12px */
	--md-fs-base:   17px;
	--md-fs-row:    17px;
	--md-fs-label:  12.5px;
	--md-fs-small:  13.5px;
}

/* ------------------------------------------------------------- base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.md-hud {
	background: var(--md-bg);
	color: var(--md-ink-mid);
	font-family: var(--md-font-mono);
	font-size: var(--md-fs-base);
	line-height: 1.55;
	min-height: 100vh;
	/* relative = the anchor for the document-pinned frame (corners,
	   attribution); the bottom padding is THEIR reserved lane — content ends
	   above it, so nothing ever slides underneath on a scrolling day */
	position: relative;
	padding: 22px 34px 48px;
	overflow-x: hidden;
}
body.md-hud.has-attr { padding-bottom: 64px; }
.num { font-variant-numeric: tabular-nums; }
/* every free-text surface breaks long words rather than spilling its box —
   config copy is operator-authored, so no string may ever escape a cell */
.mission-text, .goal-chip, .todo-title, .habit-name, .recap-win, .ticker,
.plan-state, .tile-s { overflow-wrap: anywhere; }
button { font-family: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible {
	outline: 2px solid var(--md-accent); outline-offset: 2px;
}

/* corner brackets — pinned to the DOCUMENT (absolute in the relative body),
   never the viewport: fixed frames hover over content the moment a page is
   taller than the screen. The body's bottom padding reserves their lane. */
.corner { position: absolute; width: 30px; height: 30px; border: 2px solid var(--md-line); z-index: 5; pointer-events: none; }
.c-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.c-tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.c-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.c-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.scanlines {
	position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .04;
	background: repeating-linear-gradient(0deg, transparent 0 2px, var(--md-ink) 2px 3px);
}

/* ------------------------------------------------------------- boot ---- */
.boot {
	position: fixed; inset: 0; z-index: 100; background: var(--md-bg);
	display: flex; align-items: center; justify-content: center;
	transition: opacity .45s ease;
}
.boot.done { opacity: 0; pointer-events: none; }
.boot-line { font-size: 32px; letter-spacing: .3em; color: var(--md-ink); }
.boot-line span { color: var(--md-accent); }
.boot-sub { margin-top: 16px; font-size: 13px; letter-spacing: .4em; color: var(--md-ink-dim); text-align: center; }
@media (prefers-reduced-motion: reduce) { .boot { display: none; } }

/* ------------------------------------------------------------ header --- */
.bar {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	flex-wrap: wrap; row-gap: 6px; /* phone widths: brand/back/clock stack, never spill */
	padding: 4px 2px 14px; border-bottom: 1px solid var(--md-line-dim);
	font-size: var(--md-fs-small); letter-spacing: .14em;
}
.brand { color: var(--md-ink); font-size: 15px; letter-spacing: .24em; white-space: nowrap; }
.brand span { color: var(--md-accent); }
.bar-mid { display: flex; gap: 22px; }
.flag { color: var(--md-ink-dim); }
.flag.good  { color: var(--md-good); }
.flag.warn  { color: var(--md-warn); }
.flag.crit  { color: var(--md-crit); }
.bar-right { display: flex; align-items: baseline; gap: 16px; color: var(--md-ink-dim); flex-wrap: wrap; min-width: 0; }
.clock { font-size: 21px; color: var(--md-ink); letter-spacing: .08em; }
.gear { color: var(--md-ink-dim); text-decoration: none; font-size: 13px; letter-spacing: .12em; }
.gear:hover { color: var(--md-accent); }
.signin { color: var(--md-warn); text-decoration: none; border: 1px solid var(--md-warn); padding: 3px 10px; }

/* ----------------------------------------------------------- mission --- */
.mission {
	margin: 16px 0 20px; padding: 15px 20px;
	border: 1px solid var(--md-line-dim); background: var(--md-accent-15);
	display: flex; flex-direction: column; gap: 9px;
}
.mission-k { color: var(--md-ink-dim); font-size: var(--md-fs-label); letter-spacing: .26em; margin-right: 14px; }
.mission-line, .mission-goals { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 0; }
.mission-text { color: var(--md-ink); font-size: 19px; letter-spacing: .02em; }
.goal-chip {
	display: inline-block; margin-right: 10px; padding: 4px 14px;
	border: 1px solid var(--md-line); color: var(--md-ink-mid); font-size: 14.5px;
}
.review-btn {
	margin-left: auto; background: none; border: 1px solid var(--md-line);
	color: var(--md-ink-mid); font-size: var(--md-fs-label); letter-spacing: .16em; padding: 6px 13px;
	display: inline-flex; align-items: center; gap: 10px;
}
.review-btn:hover { border-color: var(--md-accent); color: var(--md-ink); }
.review-minus {
	background: none; border: 1px solid var(--md-line); color: var(--md-ink-dim);
	font-size: 15px; line-height: 1; padding: 4px 10px; margin-left: 6px;
}
.review-minus:hover { border-color: var(--md-warn); color: var(--md-warn); }
.is-readonly .review-minus { display: none; }
.review-dots { display: inline-flex; gap: 5px; }
.review-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--md-line); }
.review-dots i.on { background: var(--md-accent); box-shadow: 0 0 7px var(--md-glow); }

/* -------------------------------------------------------------- deck --- */
.deck {
	display: grid; grid-template-columns: 340px 1fr 330px; gap: 24px;
	align-items: start; margin-bottom: 20px;
}
@media (max-width: 1180px) { .deck { grid-template-columns: 1fr; } }

.panel { border: 1px solid var(--md-line-dim); background: var(--md-bg-raise); padding: 17px 20px; }
.panel-k { margin: 0 0 14px; font-size: var(--md-fs-label); font-weight: 400; letter-spacing: .24em; color: var(--md-ink-dim); }
.panel-k.gap-top { margin-top: 22px; }
.panel-note { color: var(--md-ink-dim); letter-spacing: .08em; }
.empty { color: var(--md-ink-dim); font-size: 14.5px; letter-spacing: .1em; padding: 8px 0; }

/* plan blocks */
.plan-item { padding: 9px 0 10px; border-bottom: 1px dashed var(--md-line-dim); }
.plan-item:last-child { border-bottom: 0; }
.plan-time { font-size: 13px; color: var(--md-ink-dim); letter-spacing: .12em; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plan-name { font-size: 16.5px; color: var(--md-ink); margin: 3px 0 7px; letter-spacing: .03em; overflow-wrap: anywhere; }
.plan-bar { height: 4px; background: var(--md-line-dim); overflow: hidden; }
.plan-bar i { display: block; height: 100%; width: 0; background: var(--md-accent); }
/* past blocks compact to one readable line — history, not dead UI */
.plan-item.past { display: flex; align-items: baseline; gap: 12px; opacity: .82; padding: 6px 0; }
.plan-item.past .plan-time { display: contents; }
.plan-item.past .plan-time > span:first-child { order: 1; font-size: 12.5px; color: var(--md-ink-dim); }
.plan-item.past .plan-name { order: 2; flex: 1; font-size: 14px; margin: 0; color: var(--md-ink-mid); letter-spacing: .04em; }
.plan-item.past .plan-state { order: 3; }
.plan-item.past .plan-bar { display: none; }
.plan-item.live { border-left: 3px solid var(--md-accent); padding-left: 12px; margin-left: -15px; }
.plan-item.live .plan-name { color: var(--md-accent); }
.plan-item.live .plan-bar i { box-shadow: 0 0 8px var(--md-glow); }
.plan-state { font-size: 12.5px; letter-spacing: .1em; white-space: nowrap; }
.plan-state.armed { color: var(--md-good); }
.plan-state.done { color: var(--md-ink-dim); }
.plan-state.unarmed { color: var(--md-warn); animation: pulse 2s ease-in-out infinite; }
.plan-state.missed { color: var(--md-crit); }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .plan-state.unarmed { animation: none; } }

/* week recap (day-off view) */
.recap { border: 1px solid var(--md-line-dim); background: var(--md-accent-15); padding: 12px 14px; margin-bottom: 12px; }
.recap-row { font-size: 14.5px; color: var(--md-ink-mid); padding: 3px 0; }
.recap-row b { color: var(--md-ink); font-weight: 400; }
.recap-k { font-size: var(--md-fs-label); letter-spacing: .22em; color: var(--md-ink-dim); margin: 10px 0 4px; }
.recap-win { font-size: 14.5px; color: var(--md-ink); padding: 2.5px 0; }

/* session log — fixed column grid so every row's label starts at the same x
   (time | label fills | outcome pinned right), no matter the outcome width */
.session-item { display: grid; grid-template-columns: 3.4em 1fr auto; gap: 12px; padding: 6px 0; font-size: 14.5px; align-items: baseline; }
/* labels WRAP, never ellipsize (Matt, 2026-07-21: no truncated text anywhere) */
.session-item > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.session-item .t { color: var(--md-ink-dim); }
.session-item .s-completed { color: var(--md-good); }
.session-item .s-abandoned { color: var(--md-crit); }
.session-item .s-running { color: var(--md-accent); }

/* ring */
.col-ring { text-align: center; }
.ringwrap { position: relative; display: inline-block; max-width: 100%; }
/* the SVG scales down on phones (viewBox keeps it crisp); the absolute
   .ring-center overlay scales with it since the wrapper shrinks too */
.ringwrap svg.ring { max-width: 100%; height: auto; }
.ring-deco  { fill: none; stroke: var(--md-line); stroke-width: 1; stroke-dasharray: 2 7; opacity: .6; }
.ring-track { fill: none; stroke: var(--md-line-dim); stroke-width: 12; }
.ring-fill  {
	fill: none; stroke: var(--md-accent); stroke-width: 12; stroke-linecap: round;
	transition: stroke-dasharray .6s ease;
}
.ringwrap svg { filter: drop-shadow(0 0 16px var(--md-glow)); }
.ringwrap.flash svg { animation: ringflash .9s ease 2; }
@keyframes ringflash { 50% { filter: drop-shadow(0 0 34px var(--md-accent)); } }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ring-value { font-size: 64px; color: var(--md-ink); letter-spacing: -.02em; line-height: 1; }
.ring-label { margin-top: 9px; font-size: 13px; letter-spacing: .34em; color: var(--md-ink-dim); min-height: 16px; }

.arm-row { display: flex; justify-content: center; gap: 12px; }
.btn { background: none; border: 1px solid var(--md-line); letter-spacing: .14em; font-size: 15px; padding: 11px 22px; }
.btn-arm { border-color: var(--md-accent); color: var(--md-accent); }
.btn-arm:hover { background: var(--md-accent-15); box-shadow: 0 0 14px var(--md-glow); }
.btn-ghost { color: var(--md-ink-mid); }
.btn-ghost:hover { border-color: var(--md-accent-2); color: var(--md-accent-2); }
.btn-abandon { border-color: var(--md-line); color: var(--md-ink-dim); font-size: 12.5px; margin-top: 12px; }
.btn-abandon:hover { border-color: var(--md-crit); color: var(--md-crit); }
.run-controls { margin-bottom: 4px; }
.timer-run, .timer-idle { min-height: 88px; margin-top: 18px; }
.ringwrap.paused svg { filter: none; opacity: .6; }
.ringwrap.paused .ring-value { color: var(--md-ink-mid); }

/* completion alarm — a soft chime repeats until you silence it. No blinking:
   the SILENCE button simply appears while the chime is running, then clears. */
.timer-alarm:not([hidden]) { margin-top: 16px; display: flex; justify-content: center; }
.timer-alarm .btn { border-color: var(--md-accent-2); color: var(--md-accent-2); font-size: 12.5px; letter-spacing: .16em; }
.timer-alarm .btn:hover { background: color-mix(in srgb, var(--md-accent-2) 15%, transparent); }

/* mini edit links */
.mini-edit { color: var(--md-ink-dim); text-decoration: none; font-size: 12.5px; letter-spacing: .12em; margin-left: 10px; }
.mini-edit:hover { color: var(--md-accent); }

/* daily review — CTA opens the modal (Zeus videos.js pattern, local file) */
.video-cta {
	width: 100%; background: none; border: 1px solid var(--md-accent); color: var(--md-accent);
	font-size: 15.5px; letter-spacing: .18em; padding: 14px 18px; cursor: pointer;
}
.video-cta:hover { background: var(--md-accent-15); box-shadow: 0 0 16px var(--md-glow); }
.video-done { color: var(--md-good); }

.md-videoModal {
	background: var(--md-bg); border: 1px solid var(--md-line); padding: 0;
	width: min(1100px, 92vw); max-height: 90vh;
}
.md-videoModal::backdrop { background: rgba(3, 6, 10, .84); }
.md-videoModal-frame video { display: block; width: 100%; max-height: 82vh; background: #000; }
.md-videoModal-close {
	position: absolute; top: 0; right: 0; z-index: 2; width: 46px; height: 46px;
	background: var(--md-bg); border: 0; border-left: 1px solid var(--md-line); border-bottom: 1px solid var(--md-line);
	color: var(--md-ink-mid); font-size: 22px; line-height: 1;
}
.md-videoModal-close:hover { color: var(--md-crit); }

/* tiles */
.col-tiles { display: flex; flex-direction: column; gap: 16px; }
.tile { border: 1px solid var(--md-line); background: var(--md-bg-raise); padding: 16px 18px; position: relative; }
.tile::before {
	content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px;
	border-top: 2px solid var(--md-accent); border-left: 2px solid var(--md-accent);
}
/* Uniform tile anatomy: title row (arrow pinned right, never reflowed by a
   long title), then the value row on one shared baseline, then sub-lines.
   The value + its "/ target" wrap as units, so no mid-figure line breaks. */
.tile-k { font-size: var(--md-fs-label); letter-spacing: .22em; color: var(--md-ink-dim); display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.tile-v { font-size: 31px; color: var(--md-ink); margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.tile-vs { font-size: 15px; color: var(--md-ink-dim); margin-left: 5px; white-space: nowrap; }
.tile-v .tile-vs { margin-left: 0; }
.tile-s { font-size: var(--md-fs-small); color: var(--md-ink-dim); margin-top: 4px; letter-spacing: .06em; }
.tile-s .up { color: var(--md-good); }
/* the two tiles that open a detail page */
a.tile-link { text-decoration: none; display: block; transition: border-color .15s ease, box-shadow .15s ease; }
a.tile-link:hover { border-color: var(--md-accent); box-shadow: 0 0 16px var(--md-glow); }
.tile-go { color: var(--md-line); font-size: 13px; margin-left: 4px; transition: color .15s ease; }
a.tile-link:hover .tile-go { color: var(--md-accent); }

/* -------------------------------------------------------------- lower -- */
.lower { display: grid; grid-template-columns: 1fr 440px; gap: 24px; margin-bottom: 18px; }
@media (max-width: 1180px) { .lower { grid-template-columns: 1fr; } }

/* ---- dense command grid (everything below the mission on one screen) ---- */
.deck-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.dcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ops plan folds into two dense columns to halve its height */
.deck-grid .plan-list { columns: 2; column-gap: 28px; }
.deck-grid .plan-item { break-inside: avoid; -webkit-column-break-inside: avoid; }
.deck-grid .plan-item.live { margin-left: 0; padding-left: 11px; }

/* the stat tiles sit in a row wherever they're placed — and the row wraps,
   so 2, 4, or 6 configured tiles lay out as cleanly as the original 3 */
.dcol .col-tiles, .deck-rail .col-tiles { flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.dcol .col-tiles .tile, .deck-rail .col-tiles .tile { flex: 1 1 118px; min-width: 108px; padding: 13px 14px; }
.dcol .col-tiles .tile-v, .deck-rail .col-tiles .tile-v { font-size: 25px; }
/* narrow in-row tiles: titles may need two lines ("PROSPECTING") — reserve the
   two lines in EVERY tile so each value row starts at the same y. min-height
   must equal exactly 2 × line-height or a wrapped title still pushes its value. */
.dcol .col-tiles .tile-k, .deck-rail .col-tiles .tile-k { line-height: 1.4; min-height: 2.8em; }

@media (max-width: 1180px) { .deck-grid { grid-template-columns: 1fr; } }

/* ---- timeline rail (ops plan band up top, then Directives · Ring · Habits,
       then Sessions and the stat tiles across the bottom) ---- */
.deck-rail {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.05fr);
	grid-template-areas:
		"plan plan plan"
		"dir  ring habits"
		"sess .    tiles";
	align-items: stretch;
}
.deck-rail .rail-plan      { grid-area: plan; }
.deck-rail .panel-todos    { grid-area: dir; }
.deck-rail .col-ring       { grid-area: ring; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.deck-rail .panel-habits   { grid-area: habits; }
.deck-rail .panel-sessions { grid-area: sess; }
.deck-rail .col-tiles      { grid-area: tiles; align-self: start; }

/* the day reads left-to-right: each block a slim vertical cell */
.deck-rail .plan-list { display: flex; align-items: stretch; gap: 0; }
.deck-rail .plan-item {
	flex: 1 1 0; min-width: 0; padding: 2px 11px 7px; gap: 3px;
	display: flex; flex-direction: column;
	border-bottom: 0; border-left: 1px solid var(--md-line-dim);
}
.deck-rail .plan-item:first-child { border-left: 0; }
.deck-rail .plan-time { justify-content: flex-start; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.deck-rail .plan-name { font-size: 12px; margin: 0; text-wrap: balance; }
/* long states ("UNARMED — START THE TIMER") wrap INSIDE their own cell —
   the global nowrap would shove them across the neighbouring block */
.deck-rail .plan-state { white-space: normal; min-width: 0; }
.deck-rail .plan-bar { margin-top: auto; }
/* the live block gets extra width + the accent so "now" reads instantly */
.deck-rail .plan-item.live {
	flex: 1.7 1 0; margin-left: 0; padding-left: 11px;
	border-left: 2px solid var(--md-accent); background: var(--md-accent-15);
}
/* undo the vertical-list "past" compaction so past blocks are cells too */
.deck-rail .plan-item.past { flex-direction: column; align-items: stretch; gap: 3px; opacity: .66; padding: 2px 11px 7px; }
.deck-rail .plan-item.past .plan-time { display: flex; }
.deck-rail .plan-item.past .plan-time > span:first-child { order: 0; font-size: 12px; }
.deck-rail .plan-item.past .plan-name { order: 0; flex: none; font-size: 12px; margin: 0; color: var(--md-ink-mid); }
.deck-rail .plan-item.past .plan-bar { display: block; }

@media (max-width: 1180px) {
	.deck-rail {
		grid-template-columns: 1fr;
		grid-template-areas: "plan" "dir" "ring" "habits" "sess" "tiles";
	}
	/* cells must claim real width or flex-wrap never fires (min-width: 0 lets
	   all 13 crush into one unreadable line) — 96px each wraps into clean rows */
	.deck-rail .plan-list { flex-wrap: wrap; row-gap: 10px; }
	.deck-rail .plan-item { flex: 1 1 96px; min-width: 96px; }
	.deck-rail .plan-item.live { flex: 1.7 1 120px; }
}

.todo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.todo-tab {
	background: none; border: 1px solid var(--md-line-dim); color: var(--md-ink-dim);
	font-size: 13.5px; letter-spacing: .1em; padding: 5px 14px;
}
.todo-tab .n { color: var(--md-ink-dim); margin-left: 7px; font-size: 12px; }
.todo-tab.on { border-color: var(--md-accent); color: var(--md-accent); background: var(--md-accent-15); }
.todo-tab:hover { border-color: var(--md-accent); }

.todo-form { margin-bottom: 12px; }
#todoInput {
	width: 100%; background: var(--md-bg); border: 1px solid var(--md-line-dim);
	color: var(--md-ink); font-family: inherit; font-size: 16.5px; padding: 11px 14px; letter-spacing: .03em;
}
#todoInput::placeholder { color: var(--md-ink-dim); }
#todoInput:focus { border-color: var(--md-accent); outline: none; box-shadow: 0 0 10px var(--md-glow); }
.todo-group { border-bottom: 1px dashed var(--md-line-dim); }
.todo-group:last-child { border-bottom: 0; }
.todo-group.dragging { opacity: .4; }
.todo-item { display: flex; align-items: center; gap: 12px; padding: 9px 2px; }
.todo-check {
	width: 21px; height: 21px; border: 1px solid var(--md-line); background: none; flex: 0 0 21px;
	display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 14px;
}
.todo-check:hover { border-color: var(--md-good); color: var(--md-good); }
.todo-item.done .todo-check { border-color: var(--md-good); color: var(--md-good); }
.todo-title { flex: 1; color: var(--md-ink); font-size: var(--md-fs-row); letter-spacing: .02em; cursor: text; }
.todo-title:hover { text-decoration: underline dotted var(--md-line-dim); text-underline-offset: 4px; }
.todo-item.done .todo-title { text-decoration: line-through; color: var(--md-ink-dim); }
/* inline rename field — replaces the title span in place */
.todo-edit {
	flex: 1; min-width: 0; background: var(--md-bg); border: 1px solid var(--md-accent);
	color: var(--md-ink); font-family: inherit; font-size: var(--md-fs-row);
	padding: 4px 9px; letter-spacing: .02em; outline: none; box-shadow: 0 0 10px var(--md-glow);
}
.subtask-item .todo-edit { font-size: calc(var(--md-fs-row) - 1px); }
.todo-prio { background: none; border: 1px solid var(--md-line-dim); color: var(--md-ink-dim); font-size: 12px; padding: 2px 9px; letter-spacing: .08em; }
.todo-pin { background: none; border: 0; color: var(--md-line); font-size: 17px; padding: 0 3px; }
.todo-pin.on { color: var(--md-accent); text-shadow: 0 0 8px var(--md-glow); }
.todo-pin:hover { color: var(--md-accent); }
.todo-del { background: none; border: 0; color: var(--md-line); font-size: 15px; }
.todo-del:hover { color: var(--md-crit); }
.todo-item.pinned .todo-title { color: var(--md-accent); }
.todo-item.pinned .todo-title::after { content: "  · ONE THING"; font-size: 11px; letter-spacing: .18em; color: var(--md-ink-dim); }
.todo-sub { background: none; border: 0; color: var(--md-line); font-size: 16px; padding: 0 3px; line-height: 1; }
.todo-sub:hover { color: var(--md-accent); }
.drag-handle { color: var(--md-line); font-size: 13px; cursor: grab; flex: 0 0 auto; user-select: none; letter-spacing: -2px; }
.drag-handle:hover { color: var(--md-ink-dim); }
[draggable="true"] { cursor: grab; }
.dragging { cursor: grabbing; }

/* subtasks — one level under a directive, lighter and indented */
.subtask-list { margin-left: 33px; }
.subtask-item { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.subtask-item.dragging { opacity: .4; }
.subtask-item .todo-check { width: 17px; height: 17px; flex-basis: 17px; font-size: 12px; }
.subtask-item .todo-title { color: var(--md-ink); font-size: calc(var(--md-fs-row) - 1px); }
.subtask-item.done .todo-title { text-decoration: line-through; color: var(--md-ink-dim); }
.subadd { margin: 2px 0 8px 33px; }
.subadd input {
	width: 100%; background: var(--md-bg); border: 1px solid var(--md-line-dim);
	color: var(--md-ink); padding: 6px 9px; font: inherit; font-size: calc(var(--md-fs-row) - 1px); letter-spacing: .02em;
}
.subadd input::placeholder { color: var(--md-ink-dim); }
.subadd input:focus { border-color: var(--md-accent); outline: none; box-shadow: 0 0 8px var(--md-glow); }

/* habits — display only; your debrief fills them. Dot = done today. */
.habit-item { display: grid; grid-template-columns: 11px 1fr 96px 58px; gap: 13px; align-items: center; padding: 8px 0; }
.habit-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--md-line); }
.habit-item.done .habit-dot { background: var(--md-good); border-color: var(--md-good); box-shadow: 0 0 7px color-mix(in srgb, var(--md-good) 55%, transparent); }
.habit-item.done .habit-name { color: var(--md-ink); }
.habit-name { color: var(--md-ink); font-size: var(--md-fs-row); }
.habit-bar { height: 5px; background: var(--md-line-dim); overflow: hidden; }
.habit-bar i { display: block; height: 100%; background: var(--md-accent); }
.habit-pct { text-align: right; font-size: var(--md-fs-small); color: var(--md-ink-dim); }

/* ------------------------------------------------------------- footer -- */
/* One flex row above the frame lane: the ticker text owns the width and
   WRAPS (a good win is worth two lines — never ellipsized), the throw-away
   control sits quietly at the row's right end. */
.hud-foot {
	border-top: 1px solid var(--md-line-dim); padding: 12px 2px 0;
	display: flex; align-items: baseline; gap: 22px;
}
.ticker {
	flex: 1; min-width: 0;
	font-size: 14px; letter-spacing: .1em; color: var(--md-ink-dim);
	line-height: 1.7;
}
.ticker b { color: var(--md-ink); font-weight: 400; }
.ticker .good { color: var(--md-good); }
.ticker .warn { color: var(--md-warn); }
.ticker .crit { color: var(--md-crit); }

/* debrief button + modal — the no-Claude filing path (ACF toggle) */
.debrief-btn {
	background: none; border: 1px solid var(--md-accent); color: var(--md-accent);
	font-family: inherit; font-size: 13px; letter-spacing: .16em; padding: 5px 14px;
}
.debrief-btn:hover { background: var(--md-accent-15); box-shadow: 0 0 12px var(--md-glow); }

/* throw-away control — an escape hatch, not a feature: small and dim at the
   footer row's right end, it only speaks up while confirming a spend */
.throw-btn {
	flex: 0 0 auto; white-space: nowrap;
	background: none; border: 1px solid var(--md-line-dim); color: var(--md-ink-dim);
	font-family: inherit; font-size: 11px; letter-spacing: .14em; padding: 3px 10px;
	opacity: .55;
}
.throw-btn:hover:not(:disabled) { opacity: 1; border-color: var(--md-warn); color: var(--md-warn); }
.throw-btn.confirm { opacity: 1; border-color: var(--md-warn); color: var(--md-warn); background: color-mix(in srgb, var(--md-warn) 12%, transparent); animation: pulse 1.2s ease-in-out infinite; }
.throw-btn.thrown { border-color: var(--md-good); color: var(--md-good); }
.throw-btn:disabled { opacity: .45; cursor: default; }

/* ad-hoc session modal — same visual language as the debrief box */
.md-adhocModal {
	background: var(--md-bg); border: 1px solid var(--md-line); padding: 0;
	width: min(560px, 92vw); color: var(--md-ink-mid); font-family: var(--md-font-mono);
}
.md-adhocModal::backdrop { background: rgba(3, 6, 10, .84); }
.adhoc-sub { font-size: 14px; color: var(--md-ink-dim); letter-spacing: .05em; margin: -6px 0 14px; }
#adhocCustom {
	width: 130px; background: var(--md-bg-raise); border: 1px solid var(--md-line-dim);
	color: var(--md-ink); font-family: inherit; font-size: 13px; letter-spacing: .08em; padding: 6px 10px;
}
#adhocCustom:focus { border-color: var(--md-accent); outline: none; box-shadow: 0 0 10px var(--md-glow); }
.md-debriefModal {
	background: var(--md-bg); border: 1px solid var(--md-line); padding: 0;
	width: min(760px, 92vw); color: var(--md-ink-mid); font-family: var(--md-font-mono);
}
.md-debriefModal::backdrop { background: rgba(3, 6, 10, .84); }
.db-inner { padding: 24px 26px 22px; }
.db-k { font-size: var(--md-fs-label); letter-spacing: .26em; color: var(--md-ink-dim); margin-bottom: 14px; }
.db-days { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.db-chip {
	background: none; border: 1px solid var(--md-line-dim); color: var(--md-ink-dim);
	font-family: inherit; font-size: 13px; letter-spacing: .1em; padding: 6px 14px;
}
.db-chip.on { border-color: var(--md-accent); color: var(--md-accent); background: var(--md-accent-15); }
#dbText {
	width: 100%; background: var(--md-bg-raise); border: 1px solid var(--md-line-dim);
	color: var(--md-ink); font-family: inherit; font-size: 16.5px; line-height: 1.6;
	padding: 14px 16px; resize: vertical;
}
#dbText:focus { border-color: var(--md-accent); outline: none; box-shadow: 0 0 12px var(--md-glow); }
.db-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.db-hint { font-size: 13px; color: var(--md-ink-dim); letter-spacing: .08em; }
#dbFile[disabled] { opacity: .5; cursor: default; }

/* attribution — quiet credit in the bottom corner, ACF toggle to remove.
   Insets mirror the header brand exactly (corner 12px + 20px gap = 32px from
   the bottom edge, 36px from the right — same as the brand's top/left).
   Absolute (document-pinned), never fixed: it lives in the body's reserved
   bottom lane, so it can't hover over content on a scrolling day. */
.attribution {
	position: absolute; bottom: 32px; right: 36px; z-index: 60;
	font-size: 11px; letter-spacing: .18em; text-decoration: none;
	color: var(--md-ink-dim); opacity: .55;
}
.attribution:hover { opacity: 1; color: var(--md-ink); }

/* toast */
.toast {
	position: fixed; bottom: 28px; right: 32px; z-index: 90;
	border: 1px solid var(--md-warn); color: var(--md-warn); background: var(--md-bg);
	font-size: 14px; letter-spacing: .1em; padding: 10px 16px;
}

/* ---- laptop / short-viewport density (Matt, 2026-07-20) --------------------
   Fit the whole deck on a laptop screen with no scroll. Vertical spacing only —
   the multi-column grid and horizontal layout are untouched. Tall external
   monitors (viewport taller than 1000px) keep the roomier default. ---------- */
@media (min-width: 1181px) and (max-height: 1100px) {
	/* Center the whole deck vertically so leftover space splits evenly top and
	   bottom instead of pooling under the ticker. `safe` keeps it top-aligned
	   and scrollable if the window is ever shorter than the content. */
	body.md-hud {
		display: flex; flex-direction: column; justify-content: safe center;
		padding: 16px 34px 44px;
	}
	body.md-hud.has-attr { padding-bottom: 52px; }
	.bar { padding: 2px 2px 8px; }
	.mission { margin: 12px 0; padding: 9px 20px; gap: 6px; }
	.deck { gap: 13px; margin-bottom: 12px; }
	.panel { padding: 8px 16px; }
	.panel-k { margin-bottom: 6px; }
	.panel-k.gap-top { margin-top: 10px; }

	/* ops plan band — shorter cells */
	.deck-rail .plan-item { padding: 1px 9px 4px; }
	.deck-rail .plan-item.live { padding-bottom: 4px; }

	/* directives — tighter rows and controls */
	.todo-tabs { margin-bottom: 7px; gap: 6px; }
	.todo-tab { padding: 4px 12px; }
	.todo-form { margin-bottom: 7px; }
	#todoInput { padding: 8px 12px; }
	.todo-item { padding: 5px 2px; }
	.subtask-item { padding: 3px 2px; }
	.subadd { margin: 2px 0 6px 33px; }

	/* ring stays full-size; just trim the timer control gap a touch */
	.timer-idle, .timer-run { min-height: 72px; margin-top: 12px; }

	/* habits — tighter rows */
	.habit-item { padding: 3px 0; }
	.video-cta { padding: 10px 18px; }

	/* sessions + stat tiles */
	.session-item { padding: 3px 0; }
	.deck-rail .col-tiles .tile { padding: 10px 14px; }

	.ticker { padding-top: 12px; }
}

/* readonly mode — glass visible, controls inert */
.is-readonly .btn, .is-readonly .todo-check,
.is-readonly .review-btn, .is-readonly .todo-form, .is-readonly .todo-pin, .is-readonly .todo-prio,
.is-readonly .todo-del, .is-readonly .todo-tabs, .is-readonly .mini-edit,
.is-readonly .todo-sub, .is-readonly .drag-handle, .is-readonly .subadd { display: none; }