/* The Jarvis layer: HUD rings, status readout, boot screen, scan lines, corner brackets, and the project and strategy screens.
   Everything decorative honours the Effects setting (html[data-fx] is full, light or off) and "reduce motion". */
:root { --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; }
html[data-fx="off"] .hud, html[data-fx="off"] .ambient .sweep, html[data-fx="off"] #boot, html[data-fx="off"] body::after { display: none !important; }

/* ---------- HUD rings around the orb ---------- */
.hud { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; pointer-events: none; overflow: visible; }
.hud circle, .hud path { fill: none; }
.hr1 circle { stroke: rgba(var(--glow), .5); stroke-width: 5; stroke-dasharray: .9 5.1; }
.hr2 circle { stroke: rgba(var(--glow), .72); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 64 26 18 26 8 26 30 26; }
.hr3 circle { stroke: rgba(var(--glow), .32); stroke-width: .8; }
.hr4 path { stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.hr1, .hr2 { transform-origin: 100px 100px; }
.hr1 { animation: spin 140s linear infinite; }
.hr2 { animation: spin 70s linear infinite reverse; }
.orbwrap:has(.orb[data-state="listening"]) .hr1 { animation-duration: 40s; }
.orbwrap:has(.orb[data-state="listening"]) .hr2 { animation-duration: 18s; }
.orbwrap:has(.orb[data-state="listening"]) .hr3 circle { stroke: rgba(var(--glow), .75); }
.orbwrap:has(.orb[data-state="thinking"]) .hr1 { animation-duration: 9s; }
.orbwrap:has(.orb[data-state="thinking"]) .hr2 { animation-duration: 4s; }
.orbwrap:has(.orb[data-state="speaking"]) .hr3 circle { stroke: rgba(var(--glow), calc(.35 + var(--lvl, .3) * .6)); stroke-width: calc(.8px + var(--lvl, .2) * 1.6px); }
html[data-fx="light"] .hr1, html[data-fx="light"] .hr2 { animation: none; }
.talk.active .hud { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .hr1, .hr2 { animation: none !important; } }
body.talking .hr1, body.talking .hr2 { animation-play-state: running; }

/* ---------- the background: a slow radar sweep, a faint grid of scan lines ---------- */
.ambient .sweep { left: 50%; top: -34vmax; width: 130vmax; height: 130vmax; margin-left: -65vmax; border-radius: 50%; opacity: .75;
  background: conic-gradient(from 0deg, rgba(var(--glow), 0) 0 82%, rgba(var(--glow), .09) 97%, rgba(var(--glow), 0) 100%); animation: spin 32s linear infinite; mix-blend-mode: screen; }
html[data-fx="light"] .ambient .sweep { animation: none; opacity: .4; }
html[data-fx="full"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px); }
@media (prefers-color-scheme: light) { html[data-fx="full"] body::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 3px); } }
body.talking .ambient .sweep { animation-play-state: paused; }

/* ---------- readouts in monospace, corner brackets on the key cards ---------- */
html:not([data-fx="off"]) :is(.eyebrow, .brand span, .mk span, .kpis span, .kpis3 span, .tile span, .ms span, .ringnum span, .day, .pill, .srclbl) { font-family: var(--mono); }
.telemetry { flex: none; display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: center; font: 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); max-width: 36ch; }
.telemetry span { display: inline-flex; align-items: center; gap: 5px; }
.led { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.led.warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.talk.active .telemetry { display: none; }
.mhero, .mission, .upnext, .pipe { position: relative; }
html:not([data-fx="off"]) :is(.mhero, .mission, .upnext, .pipe)::before, html:not([data-fx="off"]) :is(.mhero, .mission, .upnext, .pipe)::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(var(--glow), .75); pointer-events: none; }
html:not([data-fx="off"]) :is(.mhero, .mission, .upnext, .pipe)::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: inherit; }
html:not([data-fx="off"]) :is(.mhero, .mission, .upnext, .pipe)::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: inherit; }
.msg.david.typing { white-space: pre-wrap; }
.msg.david.typing::after { content: '\258D'; color: var(--teal2); margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.greet .eyebrow b { font-weight: 600; color: var(--teal2); font-variant-numeric: tabular-nums; }

/* ---------- the boot screen ---------- */
#boot { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 24px;
  background: radial-gradient(60% 50% at 50% 38%, rgba(var(--glow), .18), transparent 70%), #040606; color: #e8f3f0; animation: fade .25s both; cursor: pointer; }
#boot[hidden] { display: none; }
#boot .bootlogo { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 0 26px rgba(var(--glow), .55)); animation: bootpulse 1.8s ease-in-out infinite; }
@keyframes bootpulse { 50% { transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(var(--glow), .85)); } }
#boot .bootbox { width: min(360px, 88vw); font: 12px/1.95 var(--mono); letter-spacing: .06em; }
.bl { opacity: 0; animation: blin .22s forwards; white-space: nowrap; overflow: hidden; }
@keyframes blin { to { opacity: 1; } }
.bl.ok::before, .bl.warn::before { content: '\25B8  '; color: #5cf2c3; }
.bl.warn::before { color: #f2bb5c; }
.bl.head { color: #e8b84b; font-weight: 700; letter-spacing: .14em; margin: 4px 0; }
.bootbar { width: min(360px, 88vw); height: 2px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.bootbar i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #10e5a8, #5cf2c3); transition: width .22s; box-shadow: 0 0 10px #10e5a8; }
#boot .skip { font: 10px var(--mono); letter-spacing: .24em; color: rgba(232, 243, 240, .45); }

/* ---------- projects ---------- */
.proj { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.phead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.phead b { font-size: 16px; }
.wait { color: var(--warn); font-size: 13.5px; margin: 0; }
.late { color: var(--bad); }
.pjhead { display: flex; flex-direction: column; gap: 6px; }
.phase { font: 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--teal2); margin: 14px 0 0; }
.ptask { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ptask input { width: 21px; height: 21px; margin-top: 1px; flex: none; accent-color: var(--teal); }
.ptask .tl { flex: 1; }
.ptask.done .tl { color: var(--ink3); text-decoration: line-through; }
.owner { font: 9.5px var(--mono); letter-spacing: .1em; padding: 3px 7px; border-radius: 99px; border: 1px solid var(--line2); color: var(--ink3); flex: none; margin-top: 2px; }
.owner.client { color: var(--gold); border-color: rgba(232, 184, 75, .5); }
.chg { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
#projsheet .sheet, #playsheet .sheet { gap: 12px; }
#projsheet, #playsheet { width: min(560px, calc(100vw - 16px)); }

/* ---------- strategy ---------- */
.pbook { display: flex; flex-direction: column; gap: 12px; }
.pbook details { background: var(--surface); }
.pbook summary { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.pline { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.pline .k { font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); padding-top: 3px; }
.pline p { margin: 0; }
.pline .n { color: var(--ink3); font-size: 13px; margin-top: 5px; }
.psrc { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.psrc a, .comp a.srcl { font-size: 12px; color: var(--teal2); }
.comp { padding: 10px 12px; }
.comp summary { font-family: var(--font); font-size: 15px; font-weight: 600; flex-wrap: wrap; }
.comp .meta { font-weight: 400; }
.comp p { margin: 8px 0 0; font-size: 14px; }
.comp .how { border-left: 3px solid var(--teal); padding-left: 10px; color: var(--ink); }
.compkind { font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 6px 0 0; }
pre.copybox { white-space: pre-wrap; font: 13px/1.5 var(--font); background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0 0; user-select: text; -webkit-user-select: text; }

/* ---------- room for the rings: they reach past the orb, so the orb gets breathing space ---------- */
.orbwrap { width: min(46vw, 196px); margin: 26px 0 24px; }
.talk.active .orbwrap { margin: 8px 0 6px; }
.telemetry { font-size: 9.5px; gap: 4px 10px; max-width: 42ch; }
.comp summary { display: grid; grid-template-columns: 1fr auto; row-gap: 3px; align-items: center; }
.comp summary > b, .comp summary > .meta { grid-column: 1; }
.comp summary::after { grid-column: 2; grid-row: 1 / span 2; }