/* The desk's windows as the Matrix, while the yacht's Matrix switch is on (matrix-mode.js sets <html data-mx="on">). Black glass, phosphor green,
   the project's own neon on its cards, square clipped corners, a monospace face, a slow scan line (opacity and background position only, still under
   reduced motion). It is its own file because style.css is past its ceiling. The same look as the tags over heads (3d/world/tags-cool.css). */
:root[data-mx='on'] {
  color-scheme: dark;
  --mx: #36ff8a;
  --mx-dim: #1f9d57;
  --bg: #010a05; --panel: #031209; --panel-2: #05190d; --line: rgba(54, 255, 138, 0.28);
  --text: #c8ffe0; --muted: #7fd6a4; --faint: #4aa874;
  --gold: #36ff8a; --gold-soft: rgba(54, 255, 138, 0.14); --on-gold: #021008;
  --ok: #36ff8a; --warn: #f0d58a; --stop: #ff4d3a;
  --font: var(--mono); --pot-ink: #c8ffe0; --pot-edge: rgba(54, 255, 138, 0.7); --pot-gold: #36ff8a; --pot-papyrus: #c8ffe0; --pot-line: #36ff8a;
  --pot-clay: linear-gradient(180deg, #05190d, #021008); --pot-glaze: linear-gradient(180deg, #031209, #010a05);
  --symposio: #e5a53a; --argo: #6fa3ee; --sympan: #b48cff; --engino: #35d6b8; --factories: #f0d58a; --studio: #c9c2b6; --band: #9be34f;
}
:root[data-mx='on'] body, :root[data-mx='on'] .detail, :root[data-mx='on'] .ag-panel { font-family: var(--mono); letter-spacing: 0.02em; }
:root[data-mx='on'] .detail { border-radius: 0; border: 0; box-shadow: inset 0 0 0 1px var(--line), 0 0 28px rgba(54, 255, 138, 0.18);
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
:root[data-mx='on'] .detail.fill { clip-path: none; box-shadow: none; }
:root[data-mx='on'] .detail::backdrop { background: rgba(0, 8, 3, 0.78); }

/* Cards and rows: terminal blocks with the project's neon edge (--tc), a scan line crossing slowly. */
:root[data-mx='on'] .mine-item, :root[data-mx='on'] .mine-row, :root[data-mx='on'] .work-ask, :root[data-mx='on'] .ag-card, :root[data-mx='on'] .item {
  --tc: var(--mx); border-radius: 0; background: var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); border-color: transparent; position: relative; }
:root[data-mx='on'] .p-symposio { --tc: var(--symposio); } :root[data-mx='on'] .p-argo { --tc: var(--argo); } :root[data-mx='on'] .p-sympan { --tc: var(--sympan); }
:root[data-mx='on'] .p-engino { --tc: var(--engino); } :root[data-mx='on'] .p-factories { --tc: var(--factories); } :root[data-mx='on'] .p-band { --tc: var(--band); }
:root[data-mx='on'] .ag-card::before, :root[data-mx='on'] .work-ask::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tc) 14%, transparent), transparent) 0 -100% / 100% 40% repeat-x; animation: mxd-scan 5s linear infinite; }
:root[data-mx='on'] .ag-card > *, :root[data-mx='on'] .work-ask > * { position: relative; }
/* The plan's floating comment button and box stay floating, (Chris, 29 Oct). */
:root[data-mx='on'] .work-ask > .work-plan-pick, :root[data-mx='on'] .work-ask > .work-plan-composer { position: absolute; }
:root[data-mx='on'] .ag-sheet { background: rgba(0, 8, 3, 0.82); }
:root[data-mx='on'] .ag-panel { border-radius: 0; border: 0; box-shadow: inset 0 0 0 1px var(--line), 0 0 30px rgba(54, 255, 138, 0.2); }
:root[data-mx='on'] .ag-top { border-bottom-color: var(--line); }
:root[data-mx='on'] .ag-title::before, :root[data-mx='on'] .work-ask-head::before { content: '> '; opacity: 0.7; }
:root[data-mx='on'] .ag-text, :root[data-mx='on'] .ag-close { border-radius: 0; }
/* Claude's own creature keeps its orange: it is Claude's mark, not the desk's. */
:root[data-mx='on'] .ag-dot, :root[data-mx='on'] .ag-chip::before { background: #d97757; }

/* Buttons, inputs and chips: square, a hairline in neon, the label in capitals. */
:root[data-mx='on'] .detail button:not(.panel-tab):not([role='tab']), :root[data-mx='on'] .ag-sheet button { border-radius: 0; background: transparent; color: var(--mx); border: 1px solid var(--line); box-shadow: none; text-shadow: 0 0 6px rgba(54, 255, 138, 0.5); }
:root[data-mx='on'] .detail button:not(.panel-tab):not([role='tab']):hover, :root[data-mx='on'] .ag-sheet button:hover { background: rgba(54, 255, 138, 0.16); }
:root[data-mx='on'] .detail input, :root[data-mx='on'] .detail textarea, :root[data-mx='on'] .detail select { border-radius: 0; background: var(--panel-2); color: var(--text); border-color: var(--line); }
:root[data-mx='on'] .ag-chip { border-radius: 0; }
:root[data-mx='on'] .work-plan-text code, :root[data-mx='on'] .ag-text { background: var(--panel-2); }

@keyframes mxd-scan { to { background-position: 0 200%; } }
@media (prefers-reduced-motion: reduce) { :root[data-mx='on'] .ag-card::before, :root[data-mx='on'] .work-ask::before { animation: none; display: none; } }

/* The route chart as a Matrix chart (Chris, 29 Oct): the parchment becomes black, the ink and roads phosphor green, the red trail stays the brightest. A filter
   on the drawing, so it needs no second drawing and follows every change of the chart. The helm's chart is a light display aboard now (holo-rooms.js). */
:root[data-mx='on'] .route-chart { background: #010a05; }
:root[data-mx='on'] .route-chart svg { filter: grayscale(1) invert(1) sepia(1) hue-rotate(75deg) saturate(4) brightness(0.95) contrast(1.1); }
:root[data-mx='on'] .route-chart .route-dot { background: #36ff8a; color: #021008; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
:root[data-mx='on'] .panel-tabs [role='tab'], :root[data-mx='on'] .panel-tabs button { color: var(--mx); text-shadow: 0 0 6px rgba(54, 255, 138, 0.5); }

/* What floats over a session's thread needs a glass it can be read on (Chris, 29 Oct: "I can't read them through the chat content"): the buttons
   over the text box and the lane of session cards at the top get dark green glass with a real blur and a bright rim; the thread stays visible
   only as a shade behind. The clear glass of the plain desk would show the code through the letters here. */
:root[data-mx='on'] .detail .work-bar .work-pill, :root[data-mx='on'] .detail .work-bar .work-pill.go, :root[data-mx='on'] .detail .work-bar .work-chip select,
:root[data-mx='on'] .detail .work-bar .work-status, :root[data-mx='on'] .detail .work-bar .work-context, :root[data-mx='on'] .detail .work-bar button,
:root[data-mx='on'] .detail .work-sum-chip, :root[data-mx='on'] .detail .work-strip-item, :root[data-mx='on'] .detail .work-bar .work-follow {
  background-color: rgba(1, 14, 7, 0.88) !important; color: var(--text); border: 1px solid rgba(54, 255, 138, 0.5); border-radius: 0;
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(54, 255, 138, 0.3), 0 4px 14px rgba(0, 0, 0, 0.6);
}
:root[data-mx='on'] .detail .work-bar .work-pill:hover, :root[data-mx='on'] .detail .work-bar button:hover, :root[data-mx='on'] .detail .work-strip-item:hover { border-color: var(--mx); background-color: rgba(4, 30, 15, 0.92) !important; }
:root[data-mx='on'] .detail .work-strip-item.on, :root[data-mx='on'] .detail .work-strip-item[aria-current], :root[data-mx='on'] .detail .work-strip-item.current { border-color: var(--mx); box-shadow: inset 0 0 0 1px var(--mx), 0 4px 14px rgba(0, 0, 0, 0.6); }
:root[data-mx='on'] .detail .work-bar .work-chip select { background-color: rgba(1, 14, 7, 0.88) !important; }
@media (pointer: coarse) {
  :root[data-mx='on'] .detail .work-bar .work-pill, :root[data-mx='on'] .detail .work-bar .work-pill.go, :root[data-mx='on'] .detail .work-bar .work-chip select,
  :root[data-mx='on'] .detail .work-bar .work-status, :root[data-mx='on'] .detail .work-bar .work-context { background-color: rgba(1, 14, 7, 0.92) !important; }
}
/* The model's mark beside "More" is a drawn icon (its background colour is the icon), so it cannot take a glass of its own: a dark halo keeps it readable over the thread. */
:root[data-mx='on'] .detail .work-bar .work-model-mark { filter: drop-shadow(0 0 2px #010e07) drop-shadow(0 0 4px #010e07) drop-shadow(0 0 6px #010e07); }
/* The Desk / Yacht switch as clear glass: the page shows through, the rim and the open side are phosphor green (no brown or cream tint). */
:root[data-mx='on'] .tabs, :root[data-mx='on'].yacht3d body.in-room .tabs {
  background: rgba(2, 20, 10, 0.18) !important; border: 1px solid color-mix(in srgb, var(--mx) 55%, transparent) !important;
  box-shadow: 0 0 14px rgba(54, 255, 138, 0.16), inset 0 0 0 1px rgba(54, 255, 138, 0.06) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.3); backdrop-filter: blur(3px) saturate(1.3);
}
:root[data-mx='on'] .tab, :root[data-mx='on'] body.in-room .tab { color: var(--mx-dim) !important; background: transparent !important; text-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
:root[data-mx='on'] .tab[aria-pressed="true"], :root[data-mx='on'] body.in-room .tab[aria-pressed="true"] {
  color: var(--mx) !important; background: rgba(54, 255, 138, 0.14) !important; border-color: color-mix(in srgb, var(--mx) 70%, transparent) !important;
  box-shadow: 0 0 10px rgba(54, 255, 138, 0.25) !important; text-shadow: 0 0 8px rgba(54, 255, 138, 0.55);
}