/* Matrix skin (phylobot.skins): a green-phosphor terminal. Builds on Clean's layout and
   Dark's remapping of figure and table colours (clean.css and dark.css both apply to it);
   loaded after them, so these tokens win. Text is monospaced; headings use VT323, a
   VT320 terminal face (static/phylobot/fonts). The top bar's falling residues are
   matrix-rain.js. Data colours (probability tiles, plot lines, result tints) stay as
   they are: they carry meaning. */
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/vt323-latin-400-normal.woff2") format("woff2"); }

:root[data-skin="matrix"] {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --terminal: "VT323", var(--mono);
  --page: #070907;
  --bg: #0b100c;
  --bar: #020402;
  --fg: #a9efb9;            /* soft phosphor for reading */
  --fg-2: #c9ffd5;
  --muted: #62a874;         /* 6:1 on the cards */
  --line: #15251a;
  --edge: #1f3e28;
  --accent: #3dff73;        /* bright phosphor: links, prompts, actions */
  --accent-soft: rgba(61, 255, 115, .1);
  --accent-ring: rgba(61, 255, 115, .3);
  --accent-hover: #86ffab;
  --on-accent: #021a07;
  --link-line: rgba(61, 255, 115, .45);
  --subtle: #0e1610;
  --shadow: 0 0 22px rgba(61, 255, 115, .035);
  --hover: #102016;
  --hover-edge: #2f7042;
  --row-hover: #0e1a11;
  --glass: rgba(61, 255, 115, .07);
  --track: #13261a;
  --radius: 4px;
  --radius-control: 3px;
  --danger: #ff6b6b; --danger-edge: #6a2626; --danger-soft: rgba(255, 107, 107, .08); --danger-fill: #c43c3c;
  --neutral-bg: transparent; --neutral-fg: var(--muted);
  --running-bg: transparent; --running-fg: #e8ff5a;
  --ok-bg: transparent; --ok-fg: var(--accent);
  --bad-bg: transparent; --bad-fg: #ff6b6b;
  --warn-fg: #ffc857;
  --glow: 0 0 6px rgba(61, 255, 115, .55);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2362a874' stroke-width='1.5'/%3E%3C/svg%3E");

  & body { font-family: var(--mono); font-size: 14px; line-height: 1.6; caret-color: var(--accent); }
  & ::selection { background: var(--accent); color: var(--on-accent); }
  & :is(input, select, textarea, button, .head-action, a.button)::placeholder { color: #3f7350; }
  & :is(input, select, textarea, button, .head-action, a.button, code, pre) { font-family: var(--mono); }

  /* Faint scanlines over everything (no pointer events, so nothing is blocked). */
  & body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
    background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .16) 2px 3px); }

  /* Top bar: a prompt with a blinking cursor; the current page in brackets. */
  /* No overflow: hidden here: it would clip the bar's menus. The rain canvas is sized to
     the header (inset: 0), so there is nothing else to clip. */
  & header { border-bottom-color: var(--edge); position: relative; }
  & header > :not(canvas) { position: relative; z-index: 1; }
  & header .brand { color: var(--accent); font-family: var(--terminal); font-size: 1.7rem; font-weight: 400;
    line-height: 1; text-shadow: var(--glow); letter-spacing: .02em; }
  & header .brand::before { content: "> "; color: var(--muted); text-shadow: none; }
  & header .brand::after { content: "\2588"; margin-left: .1em; font-size: .8em; vertical-align: .08em; animation: matrix-blink 1.1s steps(1) infinite; }
  & header nav :is(a, summary) { color: var(--fg); font-weight: 400; border-radius: var(--radius-control); background: rgba(2, 4, 2, .7); }
  & header nav :is(a, summary):hover { background: var(--glass); color: var(--accent); }
  & header nav :is(a[aria-current="page"], summary.current) { background: rgba(2, 4, 2, .7); box-shadow: none; color: var(--accent); text-shadow: var(--glow); }
  & header nav a[aria-current="page"]::before { content: "["; }
  & header nav a[aria-current="page"]::after { content: "]"; }
  & header .user, & .skin-picker select { background-color: rgba(2, 4, 2, .75); }
  & header .user { border: 1px solid var(--edge); border-radius: var(--radius-control); }
  & header canvas.matrix-rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .5; pointer-events: none; }

  /* Headings: terminal face, prompts. */
  & :is(h1, h2, .title-edit input) { font-family: var(--terminal); font-weight: 400; letter-spacing: .02em; }
  & h1 { font-size: 2.6rem; color: var(--accent); text-shadow: var(--glow); line-height: 1.1; }
  & h1::before { content: "$ "; color: var(--muted); text-shadow: none; }
  & .title-page h1 { font-size: 6.8rem; }
  & .title-page .slogan { font-size: 3.4rem; }
  /* The "2": a phosphor glow over two receding green layers. */
  & .title-page h1 .two { color: var(--accent); text-shadow: 0 0 .08em rgba(61, 255, 115, .7),
      .05em .05em 0 #1a7a35, .1em .1em 0 #0d4a1f, .1em .1em .2em rgba(61, 255, 115, .35); }
  @media (max-width: 600px) { & .title-page h1 { font-size: 4.2rem; } & .title-page .slogan { font-size: 2.1rem; } }
  & h2, & section.step h2, & details.files summary h2, & details.libraries summary h2 { font-size: 1.65rem; color: var(--fg-2); line-height: 1.2; }
  & h2:not(:has(.step-number))::before { content: "# "; color: var(--muted); }
  & h3 { color: var(--fg-2); font-weight: 600; }
  & h3::before { content: "## "; color: var(--muted); font-weight: 400; }
  & .step-number { display: inline; background: none; width: auto; height: auto; font-family: var(--terminal); font-size: 1.65rem;
    font-weight: 400; color: var(--accent); text-shadow: var(--glow); }
  & .step-number::before { content: "["; color: var(--muted); text-shadow: none; }
  & .step-number::after { content: "]"; color: var(--muted); text-shadow: none; }
  & .title-page .logo { filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(4) brightness(.85) drop-shadow(0 0 12px rgba(61, 255, 115, .35)); }

  /* Cards: a thin phosphor frame. */
  & section.step, & section.results, & details.inputs, & details.stages, & details.files, & details.libraries, & .snippet, & .viewer {
    border-color: var(--edge); }
  & a { color: var(--accent); }
  & a:hover { text-shadow: var(--glow); }

  /* Buttons: outlined; the main action filled. */
  & button:not(.link, .toggle, .icon-button, .chip-remove, .job-panel-close, .job-panel-tab, .sort, .help-dot, .picker-row, .fold-toggle),
  & a.button, & .head-action, & input[type=file]::file-selector-button {
    background: transparent; border-color: var(--hover-edge); color: var(--fg); box-shadow: none; }
  & button:not(.link, .toggle, .icon-button, .chip-remove, .job-panel-close, .job-panel-tab, .sort, .help-dot, .picker-row, .fold-toggle):hover,
  & .head-action:hover, & input[type=file]::file-selector-button:hover {
    background: var(--glass); border-color: var(--accent); color: var(--accent); }
  & .head-action { color: var(--accent); }
  & button.primary, & a.button, & dialog .actions button.primary, & .path-section button.trace:not(.secondary) {
    background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 12px rgba(61, 255, 115, .35); }
  & button.primary:hover, & a.button:hover, & .path-section button.trace:not(.secondary):hover { background: var(--accent-hover); color: var(--on-accent); }
  & button.danger-outline { background: transparent; color: var(--danger); border-color: var(--danger-edge); }
  & button.danger-outline:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
  & input:is([type=text], [type=number], [type=email], [type=password], [type=search], :not([type])), & select, & textarea {
    background-color: #050805; color: var(--accent); }
  & textarea { font-size: 13px; }

  /* Status as terminal output: [ succeeded ]. */
  & .status { font-weight: 600; padding: 0; text-transform: uppercase; letter-spacing: .04em; }
  & .status::before { content: "[ "; color: var(--muted); }
  & .status::after { content: " ]"; color: var(--muted); }
  & .status.running { animation: matrix-blink 1.4s steps(1) infinite; }
  & .chip { background: transparent; border: 1px solid var(--edge); }

  /* Tables and wells. */
  & :is(table.jobs, table.hits) thead th { color: var(--muted); letter-spacing: .08em; }
  & pre { color: var(--fg); background: #050805; }
  & .job-panel { background: var(--bg); }
}
@keyframes matrix-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="matrix"] header .brand::after { animation: none; }
  :root[data-skin="matrix"] .status.running { animation: none; }
}