/* Green Swamp Tools: a night-observing console.
   The moon photo (GreenSwamp1.jpg) is the signature: composed as the hero on Home, and a faint glow
   behind the tool pages. Working surfaces are solid panels so logs, tables and numbers stay readable.
   Type: Barlow for text, Barlow Condensed for titles and big numbers. The UI is dark-only (night use). */

:root {
    color-scheme: dark;

    /* Palette */
    --sky: #070b0e;          /* page */
    --panel: #10181c;        /* cards */
    --panel-raised: #172226; /* hover, tiles inside cards */
    --well: #0a1114;         /* inputs, drop area, chart tracks */
    --line: #22313a;
    --line-strong: #34474f;
    --moon: #e8e6df;         /* text */
    --mare: #9aa4a6;         /* secondary text */
    --green: #52b788;        /* actions, OK */
    --green-ink: #06130d;    /* text on green */
    --yellow: #f2c84b;       /* page titles, key answers */
    --amber: #e3a33b;        /* warnings */
    --red: #ef6461;          /* errors */
    --blue: #5aa9e6;         /* info */

    /* Names used by the pages (kept so markup and inline logic keep working). */
    --bg: var(--well);
    --card: var(--panel);
    --text: var(--moon);
    --muted: var(--mare);
    --border: var(--line);
    --accent: var(--green);
    --accent-text: var(--green-ink);
    --error: var(--red);
    --warning: var(--amber);
    --ok-bg: rgba(82, 183, 136, .13);
    --err-bg: rgba(239, 100, 97, .13);
    --heading: var(--yellow);

    --font: "Barlow", "Segoe UI", system-ui, sans-serif;
    --font-display: "Barlow Condensed", "Barlow", "Segoe UI", system-ui, sans-serif;
    --font-code: "Cascadia Mono", Consolas, ui-monospace, monospace;
    --radius: 10px;
    --radius-sm: 6px;
}

* { box-sizing: border-box; }

html { background: var(--sky); }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--moon);
    background: var(--sky);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; color: var(--moon); }
h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 700; color: var(--yellow); letter-spacing: -.005em; }
h2 { margin: 0 0 .85rem; font-size: 1.4rem; font-weight: 600; }
h3 { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 .75rem; }

a { color: var(--green); text-underline-offset: .15em; }
a:hover { color: #7fd1a8; }
code { font-family: var(--font-code); font-size: .85em; background: var(--well); border: 1px solid var(--line); padding: .05em .35em; border-radius: 4px; }
strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* Blazor moves focus to the page title after navigation (for screen readers); no ring needed there. */
h1:focus, h1:focus-visible { outline: none; }

.skip-link {
    position: absolute; left: 1rem; top: -3rem; z-index: 100; padding: .5rem .9rem;
    background: var(--yellow); color: #111; font-weight: 600; border-radius: var(--radius-sm);
}
.skip-link:focus { top: .5rem; }

/* ---------- Shell ---------- */

.app-shell { position: relative; display: flex; flex-direction: column; min-height: 100vh; }

/* Tool pages: the moon as a faint glow in the top right, fading out before the content gets busy. */
.app-shell::before {
    content: ""; position: fixed; z-index: -1; top: -6rem; right: 0;
    width: min(640px, 75vw); aspect-ratio: 500 / 508;
    background: url("images/GreenSwamp1.jpg") 75% center / contain no-repeat;
    opacity: .16;
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    pointer-events: none;
}
.app-shell:has(.home)::before { display: none; }

.app-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 1.5rem; min-height: 3.75rem;
    background: rgba(7, 11, 14, .86); border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.app-header a { text-decoration: none; }
.app-header .brand {
    display: flex; align-items: center; gap: .65rem; color: var(--moon); white-space: nowrap;
    font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: .01em;
}
.app-header .brand:hover { color: #fff; }
.brand-version { margin-left: -.35rem; color: var(--yellow); font-family: var(--font); font-size: .8rem; font-weight: 400; letter-spacing: 0; }
/* A crescent drawn in CSS: the lit limb of the moon. */
.brand-mark {
    width: 1.35rem; height: 1.35rem; border-radius: 50%; flex: none;
    box-shadow: inset -.42rem .08rem 0 0 var(--yellow);
    transform: rotate(-20deg);
}

.nav-links { display: flex; align-items: stretch; gap: .25rem; align-self: stretch; }
.nav-link {
    position: relative; display: flex; align-items: center; gap: .45rem; padding: 0 .85rem;
    color: var(--mare); font-weight: 500; white-space: nowrap; transition: color .15s;
}
.nav-link:hover { color: var(--moon); }
.nav-link.active { color: var(--moon); }
.nav-link.active::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: -1px; height: 2px;
    background: var(--green); border-radius: 2px 2px 0 0;
}
.nav-icon { display: none; font-size: 1rem; }

.nav-toggle {
    display: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); background: transparent; color: var(--moon); cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 1.1rem; height: 2px; margin: 0 auto; background: currentColor; border-radius: 1px;
    transition: transform .2s, background .2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
    .app-header { flex-wrap: wrap; padding: .6rem 1rem; }
    .nav-toggle { display: block; }
    .nav-links { display: none; flex-basis: 100%; flex-direction: column; gap: 0; padding: .25rem 0 .5rem; }
    .nav-links.open { display: flex; }
    .nav-link { padding: .7rem .5rem; border-radius: var(--radius-sm); }
    .nav-link:hover { background: var(--panel-raised); }
    .nav-icon { display: inline; }
    .nav-link.active::after { left: 0; right: auto; top: .6rem; bottom: .6rem; width: 3px; height: auto; border-radius: 0 2px 2px 0; }
}

.app-main { flex: 1 0 auto; width: 100%; max-width: 1120px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

.app-footer {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
    width: calc(100% - 3rem); max-width: calc(1120px - 3rem); margin: 0 auto; padding: 1.25rem 0 2rem;
    border-top: 1px solid var(--line); color: var(--mare); font-size: .9rem;
}
.app-footer a { color: var(--mare); }
.app-footer a:hover { color: var(--moon); }

@media (max-width: 600px) {
    .app-main { padding: 1.25rem 1rem 2.5rem; }
    .app-footer { width: calc(100% - 2rem); padding: 1rem 0 1.5rem; }
}

/* Text placed directly on the page (outside cards). */
.app-main > p { color: var(--mare); }

/* ---------- Page header ---------- */

.crumb { margin: 0 0 .35rem; font-size: .95rem; }
.crumb a { color: var(--mare); text-decoration: none; }
.crumb a:hover { color: var(--moon); }
.crumb a span { display: inline-block; margin-right: .15rem; color: var(--green); font-weight: 700; }

/* Icon beside the title; the lead sits under the title. Left aligned, like a tool's nameplate. */
.page-hero {
    display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center;
    margin: 0 0 2rem; max-width: 46rem;
}
.page-hero h1 { margin: 0; line-height: 1.05; }
.page-usage {
    display: inline-block; margin-left: .35rem; padding: .05rem .55rem; vertical-align: middle;
    border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel);
    color: var(--mare); font-family: var(--font); font-size: .85rem; font-weight: 600; letter-spacing: 0; line-height: 1.5;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.page-hero-icon {
    grid-row: span 2; align-self: start; display: grid; place-items: center;
    width: 3.5rem; height: 3.5rem; border-radius: 12px; font-size: 1.75rem;
    background: var(--panel); border: 1px solid var(--line);
}
.page-hero-lead { grid-column: 2; margin: .4rem 0 0; color: var(--mare); font-size: 1.1rem; line-height: 1.5; }
@media (max-width: 600px) {
    .page-hero { grid-template-columns: 1fr; row-gap: .75rem; }
    .page-hero-icon { grid-row: auto; width: 3rem; height: 3rem; font-size: 1.5rem; }
    .page-hero-lead { grid-column: 1; margin-top: 0; }
}

.lead { color: var(--mare); margin-top: 0; }
.hint { color: var(--mare); font-size: .92rem; }

/* ---------- Home ---------- */

.app-main:has(> .home) { padding-top: 0; }
.home { display: flex; flex-direction: column; gap: 1.75rem; }

.home-hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 1.5rem;
    padding-top: 1.5rem;
}
.home-intro { container-type: inline-size; display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0; }
.home-title {
    margin: 0; color: var(--yellow);
    font-family: var(--font-display); font-weight: 700; line-height: .92; letter-spacing: -.015em;
    /* 13cqi: small enough for the default title and its version to share one line in the column. */
    font-size: min(clamp(2.75rem, 6.5vw, 4.75rem), 13cqi);
}
.home-tagline { margin: 0; max-width: 32rem; color: var(--moon); font-size: clamp(1.05rem, 1.6vw, 1.15rem); line-height: 1.5; }

/* The moon: edges dissolve into the sky; it rises once when the page opens. */
.home-moon {
    justify-self: center; display: block; width: 100%; max-width: 360px; height: auto;
    -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
    mix-blend-mode: lighten; /* the photo's pure black melts into the sky */
    animation: moonrise 1.4s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes moonrise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* "How it works": a real sequence, so the steps are numbered. */
.home-steps, .quick-steps {
    display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; padding: 0; list-style: none; counter-reset: step;
    color: var(--moon);
}
.home-steps li, .quick-steps li { counter-increment: step; display: flex; align-items: center; gap: .55rem; }
.home-steps li::before, .quick-steps li::before {
    content: counter(step); display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem;
    border-radius: 50%; border: 1.5px solid var(--green); color: var(--green);
    font-family: var(--font-display); font-size: .95rem; font-weight: 700;
}
.home-steps { flex-direction: column; gap: .55rem; color: var(--mare); }

/* Tool entries: one strip divided into columns, not separate floating cards. */
.home-features {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden;
}
.home-feature {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.4rem 1.15rem;
    color: var(--moon); text-decoration: none; transition: background .15s;
}
.home-feature + .home-feature { border-left: 1px solid var(--line); }
.home-feature:hover { background: var(--panel-raised); color: var(--moon); }
.home-feature:focus-visible { outline-offset: -3px; }
.home-feature-icon { font-size: 1.35rem; line-height: 1; margin-bottom: .2rem; }
.home-feature-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.home-feature-desc { flex: 1; color: var(--mare); }
.home-feature-cta { margin-top: .25rem; color: var(--green); font-weight: 600; }
.home-feature:hover .home-feature-cta { text-decoration: underline; }
.home-version { margin-left: .1em; color: var(--yellow); font-family: var(--font); font-size: .3em; font-weight: 400; letter-spacing: 0; white-space: nowrap; }

/* Usage list: the counts from Settings, most used first. Each tool is one line, with its share as a thin bar under it. */
.card.home-usage { margin-bottom: 0; padding: .85rem 1.1rem; }
.home-usage-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; margin-bottom: .45rem; }
.home-usage-head h2 { margin: 0; font-size: 1.15rem; }
.home-usage .hint { margin: 0; }
.home-usage-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    margin: 0 -.5rem; padding: 0; list-style: none; overflow: hidden;
}
/* Column lines: every entry has a left border, pulled 1px left so the list clips the first column's. Works for any column count. */
.home-usage-list > li { margin-left: -1px; padding: .1rem .5rem; border-left: 1px solid var(--line-strong); }
.home-usage-item {
    position: relative; display: flex; align-items: baseline; gap: .4rem; padding: .25rem .4rem .35rem;
    border-radius: var(--radius-sm); color: var(--moon); font-size: .93rem; font-variant-numeric: tabular-nums; text-decoration: none; overflow: hidden;
}
.home-usage-item:hover { background: var(--panel-raised); color: var(--moon); }
.home-usage-tool { flex: 1; min-width: 0; }
.home-usage-count { color: var(--yellow); font-weight: 700; }
.home-usage-percent { width: 2.5rem; text-align: right; color: var(--mare); font-size: .85rem; }
.home-usage-meter-fill { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--green); }
.home-usage-top .home-usage-tool { font-weight: 700; }
.home-usage-unused .home-usage-item { color: var(--mare); }
.home-usage-unused .home-usage-count { color: var(--mare); font-weight: 400; }

@media (max-width: 860px) {
    .home-hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
    .home-moon { grid-row: 1; max-width: 220px; margin-top: .5rem; }
    .home-intro { padding: 1rem 0 0; }
    .home-features { grid-template-columns: minmax(0, 1fr); }
    .home-feature + .home-feature { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Cards ---------- */

.card {
    background: var(--panel); color: var(--moon); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.35rem 1.5rem; margin-bottom: 1.25rem;
}
.card > h2:first-child { margin-top: -.1rem; }
@media (max-width: 600px) { .card { padding: 1.1rem 1rem; } }

/* Menu pages (Log Analysis, More..., Test Cases): titled groups of tools. */
/* Sections sit side by side when each holds one tool; a section with several tools takes the full row. */
.menu-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 2.25rem 1.25rem; margin-bottom: 2.25rem; }
.menu-section { display: flex; flex-direction: column; min-width: 0; }
.menu-section:has(.menu-tile + .menu-tile) { grid-column: 1 / -1; }
.menu-section > .menu-grid { flex: 1; }
.menu-section-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .85rem; margin-bottom: .85rem; }
.menu-section-header h2 { margin: 0; font-size: 1.5rem; }
.menu-section-hint { color: var(--mare); font-family: var(--font-code); font-size: .85rem; }
/* A hint that is a sentence rather than a file name pattern. */
.menu-section-hint.menu-section-note { font-family: inherit; font-size: .95rem; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.menu-tile {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: .9rem; row-gap: .3rem;
    text-align: left; cursor: pointer; padding: 1.25rem 1.35rem;
    border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
    color: var(--moon); font: inherit; transition: background .15s, border-color .15s;
}
.menu-tile:hover { background: var(--panel-raised); border-color: var(--line-strong); }
.menu-icon {
    grid-row: span 3; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
    border-radius: 9px; background: var(--well); border: 1px solid var(--line); font-size: 1.3rem;
}
.menu-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.15; }
.menu-desc { color: var(--mare); }
.menu-cta { margin-top: .4rem; font-weight: 600; color: var(--green); }
.menu-tile:hover .menu-cta { text-decoration: underline; }

/* ---------- Buttons ---------- */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1.1rem; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem 1.05rem; border-radius: var(--radius-sm); cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--panel-raised); color: var(--moon);
    font: inherit; font-weight: 500; line-height: 1.3; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--mare); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--green); border-color: var(--green); color: var(--green-ink); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: #6cc89b; border-color: #6cc89b; color: var(--green-ink); }
.btn-lg { padding: .65rem 1.75rem; font-size: 1.05rem; font-weight: 600; }

/* ---------- Upload ---------- */

/* Drag & drop area: a transparent <input type=file> covers the whole zone, so the browser's own
   drag-and-drop file handling works without any JavaScript. */
.dropzone {
    position: relative; min-height: 130px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--well); color: var(--moon);
    transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--green); background: rgba(82, 183, 136, .07); }
.dropzone:focus-within { border-color: var(--yellow); }
.dropzone.has-file { border-style: solid; border-color: rgba(82, 183, 136, .55); }
.dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone-content { display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none; padding: 1.25rem; }
.dropzone-content strong { font-size: 1.1rem; }
.dropzone-content span { color: var(--mare); }
.upload-progress { width: min(320px, 70vw); height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.upload-progress-bar { height: 100%; background: var(--green); transition: width .15s; }

.quick-steps { margin: 0 0 1.1rem; }
.quick-steps .btn { padding: .2rem .7rem; font-size: .88rem; }

.dropzone-lg { min-height: 200px; }
.dropzone-icon { font-size: 2.25rem; line-height: 1.2; }

.help-details { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.help-details ul { margin: .6rem 0 0; padding-left: 1.25rem; color: var(--mare); }
.help-details li { margin-bottom: .4rem; }
.help-details code { overflow-wrap: anywhere; }

/* ---------- Tracking Analysis instructions popup ---------- */

.modal-wide { max-width: 48rem; }
.btn-instructions { background: rgba(242, 200, 75, .12); border-color: rgba(242, 200, 75, .45); color: #f6dd8f; font-weight: 600; }
.btn-instructions:hover:not(:disabled) { background: rgba(242, 200, 75, .22); border-color: rgba(242, 200, 75, .75); color: #fff1c4; }
.btn-attention { animation: btn-glow 2s ease-in-out infinite; }
@keyframes btn-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 200, 75, .35); } 50% { box-shadow: 0 0 0 7px rgba(242, 200, 75, 0); } }
.instructions-title { color: #ff3b3b; font-size: 1.5rem; font-weight: 700; }
.instructions { padding: 1.5rem; }
.instructions code { overflow-wrap: anywhere; }
.instructions-lead { margin: .25rem 0 1.25rem; color: var(--mare); }
.modal-close {
    flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line-strong);
    background: var(--panel-raised); color: var(--moon); font-size: 1rem; cursor: pointer;
}
.modal-close:hover { border-color: var(--mare); }
.instr-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .85rem; }
.instr-step {
    display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; padding: 1rem 1.1rem;
    border-radius: var(--radius); background: var(--well); border: 1px solid var(--line);
}
.instr-num {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--green); color: var(--green); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
}
.instr-body h3 { margin: .3rem 0 .4rem; font-size: 1.2rem; color: var(--moon); }
.instr-body p { margin: 0 0 .5rem; }
.instr-chips, .instr-rules { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0 .5rem; }
.instr-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px;
    background: rgba(82, 183, 136, .12); border: 1px solid rgba(82, 183, 136, .5); font-weight: 600;
}
.instr-chip::before { content: "✓"; color: var(--green); font-weight: 700; }
.instr-chip small { color: var(--mare); font-weight: 400; }
.instr-rules span { padding: .25rem .7rem; border-radius: var(--radius-sm); background: var(--panel-raised); border: 1px solid var(--line); }
.instr-file { padding: .5rem .75rem; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); font-size: 1.05rem; }
.instr-more { margin-top: 1rem; }
.instr-more summary { color: var(--mare); }
.instr-actions { justify-content: flex-end; margin-top: 1rem; }
@media (max-width: 600px) {
    .instructions { padding: 1rem; }
    .instr-step { grid-template-columns: 1fr; gap: .5rem; padding: .85rem; }
    .instr-actions .btn { width: 100%; }
}

/* ---------- Results ---------- */

/* Verdict: one banner that says at a glance whether the log is clean. */
.verdict { display: flex; align-items: center; gap: 1.25rem; border-left: 4px solid var(--green); }
.verdict-warning { border-left-color: var(--amber); }
.verdict-error { border-left-color: var(--red); }
.verdict-icon { font-size: 2.5rem; line-height: 1; }
.verdict-body h2 { margin: 0 0 .2rem; font-size: 1.75rem; color: var(--moon); }
.verdict-body p { margin: 0; }
.verdict-body .hint { margin-top: .35rem; }
.verdict-body .verdict-command { margin-top: .35rem; font-weight: 700; color: #ff2a2a; }

/* Session Log Serial: retry bands as chips, and a bar per retry row sized by its count. */
.retry-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.retry-chip { padding: .15rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #fff; }
.retry-green, .retry-bar-green { background: #2f9a5f; }
.retry-yellow, .retry-bar-yellow { background: #b98a12; }
.retry-red, .retry-bar-red { background: #c8443c; }
.retry-bar-col { width: 40%; min-width: 120px; vertical-align: middle; }

/* Session Log Diagnostics: numbered recommendations and key/value tiles for the mount details. */
.rec-list { margin: 0; padding: 0; list-style: none; counter-reset: rec; display: flex; flex-direction: column; gap: .6rem; }
.rec-list li {
    counter-increment: rec; display: flex; gap: .85rem; align-items: flex-start;
    padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--well); border: 1px solid var(--line);
}
.rec-list li::before {
    content: counter(rec); flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
    border-radius: 50%; border: 1.5px solid var(--green); color: var(--green);
    font-family: var(--font-display); font-size: .95rem; font-weight: 700;
}
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .65rem; margin-bottom: 1rem; }
.info { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--well); border: 1px solid var(--line); }
.info-label { color: var(--mare); font-size: .85rem; }
.info-value { font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* A table row that had detections (e.g. a PHD2 guiding session), tinted amber. */
tr.row-flag td { background: rgba(227, 163, 59, .14); }

/* Pulse Guide: one bar split into OK / warning / error / rejected shares. */
.split-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--well); gap: 2px; }
.split-bar span { flex-basis: 0; }
.split-ok { background: var(--green); }
.split-warning { background: var(--amber); }
.split-error { background: var(--red); }
.split-rejected { background: var(--mare); }
.tolerance-row { margin-top: 1.1rem; }
.tolerance-row .hint { flex-basis: 100%; max-width: 40rem; margin: 0; }

/* PHD2 Debug Log: labelled horizontal bars (guide directions, move finish times). */
.dir-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .75rem; }
.dir-row { display: grid; grid-template-columns: 7rem 1fr 5.5rem; gap: .65rem; align-items: center; font-size: .92rem; }
.dir-label { font-weight: 600; }
.dir-count { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Calculators (More...) ---------- */

.calc-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 1.25rem; align-items: start; }
.answer { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.25rem 0 1.5rem; text-align: center; }
.answer-label { color: var(--mare); font-size: .95rem; }
.answer-value {
    font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 4rem); font-weight: 700; line-height: 1;
    color: var(--yellow); overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.answer-value small, .answer-tile-value small { font-size: .42em; font-weight: 500; color: var(--mare); margin-left: .15em; }
.answer-sub { color: var(--mare); font-size: .95rem; }
.answer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: .65rem; margin-bottom: .75rem; }
.answer-tile {
    display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem .6rem;
    border-radius: var(--radius); background: var(--well); border: 1px solid var(--line); text-align: center;
}
.answer-tile-label { color: var(--moon); font-size: .9rem; }
.answer-tile-icon { font-size: 1.3rem; line-height: 1; }
.answer-tile-note { color: var(--mare); font-size: .82rem; line-height: 1.35; }
.answer-tile-value { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1.1; color: var(--yellow); font-variant-numeric: tabular-nums; }
.answer-tile-ok { border-bottom: 3px solid var(--green); }
.answer-tile-warn { border-bottom: 3px solid var(--amber); }
.card > .answer-grid:only-child { margin-bottom: 0; }

.calc-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.5rem 1rem; text-align: center;
    color: var(--mare); border: 1.5px dashed var(--line); border-radius: var(--radius);
}
.calc-placeholder > span { font-size: 2.25rem; opacity: .8; }
.calc-placeholder p { margin: 0; max-width: 24rem; }
.input-code { font-family: var(--font-code); }
.page-back { margin-bottom: 1rem; }

/* ---------- Settings ---------- */

.lock-card { max-width: 26rem; margin: 3rem auto; text-align: center; }
.lock-card form { text-align: left; }
.lock-card .actions { justify-content: center; }
.lock-icon { display: block; font-size: 2.75rem; margin-bottom: .5rem; }
.seg-tabs {
    display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 0 0 1.5rem; padding: .25rem; gap: .25rem;
    border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
}
.seg-tab {
    padding: .45rem 1.15rem; border: 0; border-radius: var(--radius-sm); background: transparent;
    color: var(--mare); font: inherit; font-weight: 600; cursor: pointer;
}
.seg-tab:hover { color: var(--moon); background: var(--panel-raised); }
.seg-tab.active { background: var(--panel-raised); color: var(--moon); box-shadow: inset 0 -2px 0 var(--green); }
.usage-group { margin: 1.4rem 0 .6rem; font-size: 1.2rem; }
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: .65rem; }
.usage-tile {
    display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .9rem .5rem;
    border-radius: var(--radius); background: var(--well); border: 1px solid var(--line); text-align: center;
}
.usage-icon { font-size: 1.3rem; }
.usage-count { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--yellow); line-height: 1.15; font-variant-numeric: tabular-nums; }
.usage-label { color: var(--mare); font-size: .88rem; }
.usage-tile .link-btn { margin-top: .35rem; font-size: .85rem; }
.settings-intro { color: var(--mare); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0 1.25rem; align-items: start; }
.save-bar {
    position: sticky; bottom: 0; z-index: 10; margin: 0 -.5rem; padding: .25rem 1rem .85rem;
    border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--line); border-bottom: 0;
    background: rgba(16, 24, 28, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.save-bar .actions { margin-top: .75rem; }
.save-bar .alert { margin: .75rem 0 0; }

/* Smaller result tables side by side on wide screens. */
.result-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 0 1.25rem; align-items: start; }
@media (max-width: 420px) { .result-columns { grid-template-columns: 1fr; } }

/* Let grid columns shrink below their content, so wide tables scroll inside .table-wrap instead of widening the page. */
.result-columns > *, .calc-layout > *, .settings-grid > *, .menu-grid > *, .info-grid > *, .answer-grid > * { min-width: 0; }

.steps { margin: 0; padding-left: 1.25rem; }
.steps li { margin-bottom: .4rem; }

/* ---------- Alerts ---------- */

.alert { padding: .7rem 1rem; border-radius: var(--radius-sm); margin: 1rem 0; border-left: 3px solid currentColor; }
.alert-error { background: var(--err-bg); color: #ff9c98; }
.alert-ok { background: var(--ok-bg); color: #8fdcb5; }
ul.alert { padding-left: 2rem; }
.alert-warning {
    display: flex; gap: .75rem; align-items: flex-start;
    background: rgba(227, 163, 59, .11); color: #f3cf8c; border-left-color: var(--amber);
}
.alert-icon { font-size: 1.3rem; line-height: 1.2; color: var(--amber); }
.alert-warning p, .alert-warning ul { margin: 0; }
.alert-warning ul { padding-left: 1.1rem; }

/* ---------- Stats ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: .65rem; margin: 1rem 0; }
.card > .stat-grid:first-child { margin-top: 0; }
.stat {
    display: flex; flex-direction: column; padding: .8rem 1rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--well);
}
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--mare); font-size: .9rem; }
.stat-desc { color: var(--mare); font-size: .8rem; margin-top: .4rem; }
.stat-error .stat-value { color: var(--red); }
.stat-warning .stat-value { color: var(--amber); }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; margin: 0 -.25rem; padding: 0 .25rem; }
.activity-time { min-width: 13.5rem; white-space: nowrap; }

/* Activity list: Action takes the remaining width and wraps, so Source and the state columns always stay visible. */
table.activity-table { table-layout: fixed; }
.activity-table th, .activity-table td { padding: .5rem .5rem; }
.activity-table .activity-time { width: 12.5rem; min-width: 0; }
.activity-table .activity-action { overflow-wrap: anywhere; word-break: break-word; }
.activity-table .activity-source { width: 5.5rem; white-space: nowrap; }
.activity-table .activity-state { width: 5rem; white-space: nowrap; }
@media (max-width: 760px) {
    .activity-table .activity-time { width: 8.5rem; white-space: normal; }
    .activity-table .activity-source { width: 4.5rem; }
    .activity-table .activity-state { width: 3.75rem; }
}
table { width: 100%; border-collapse: collapse; font-size: .93rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
    color: var(--mare); font-weight: 600; font-size: .85rem; white-space: nowrap;
    border-bottom: 1px solid var(--line-strong); vertical-align: bottom;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .025); }
th.num, td.num { text-align: right; white-space: nowrap; }

/* PHD2 "Pulse Finish Times Grouped" row colors (thresholds in Rules/Phd2Rules.cs). */
tr.band-green td  { background: rgba(82, 183, 136, .16); }
tr.band-yellow td { background: rgba(227, 190, 59, .2); }
tr.band-red td    { background: rgba(239, 100, 97, .2); }
.sig { font-weight: 600; }
pre.detail { margin: .3rem 0 0; font-family: var(--font-code); font-size: .8rem; color: var(--mare); white-space: pre-wrap; }

/* Severity badges: tinted, with the color carried by the text and edge. */
.badge {
    --c: var(--mare);
    display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
    white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.badge-Critical, .badge-High { --c: #ff7a6e; background: rgba(200, 50, 40, .35); color: #ffd2cd; }
.badge-Error { --c: var(--red); }
.badge-Warning, .badge-Medium { --c: var(--amber); }
.badge-Info, .badge-Low { --c: var(--blue); }
.badge-Ok { --c: var(--green); }
.badge-Rejected { --c: var(--mare); }

/* ---------- Filters & forms ---------- */

.filters { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-bottom: 1rem; }
.filters label { display: inline-flex; align-items: center; gap: .45rem; color: var(--mare); font-size: .95rem; }
.filters select, .filters input[type=number] { padding: .35rem .5rem; }
.filters input[type=number] { width: 7rem; }

.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.field > span { font-size: .92rem; color: var(--mare); }
.field input[type=text], .field input[type=number], .field input[type=password], .field textarea, .field select,
.filters select, .filters input[type=number] {
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--well); color: var(--moon); font: inherit;
    transition: border-color .15s;
}
.field input[type=text], .field input[type=number], .field input[type=password], .field textarea, .field select { padding: .5rem .65rem; }
.field input:hover, .field textarea:hover, .field select:hover, .filters select:hover, .filters input:hover { border-color: var(--mare); }
.field input:focus, .field textarea:focus, .field select:focus, .filters select:focus, .filters input:focus {
    border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(82, 183, 136, .2);
}
.field input[readonly] { color: var(--mare); border-style: dashed; }
.field input[readonly]:focus { box-shadow: none; border-color: var(--line-strong); }
.filters select option, .field select option { background: var(--panel); color: var(--moon); }
.field textarea { font-family: var(--font-code); font-size: .85rem; }
.field-inline { flex-direction: row; align-items: center; gap: .5rem; }
.field-inline input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--green); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: .75rem; }
.field-reset { display: flex; gap: .5rem; }
.field-reset input { flex: 1; min-width: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }

/* Disclosure: a chevron that turns when open. */
details > summary {
    cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: .5rem;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: ""; flex: none; width: .45rem; height: .45rem; margin: 0 .2rem 0 .1rem;
    border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
    transform: rotate(-45deg); transition: transform .15s;
}
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { color: #fff; }
details[open] > summary { margin-bottom: .75rem; }

/* ---------- Timelines ---------- */

.tl-row { display: grid; grid-template-columns: 110px 1fr 110px; gap: .65rem; align-items: center; font-size: .88rem; margin: .2rem 0; }
.tl-track { display: flex; height: 12px; background: var(--well); border-radius: 3px; overflow: hidden; }
.tl-bar { display: block; height: 100%; }
.tl-error { background: var(--red); }
.tl-warning { background: var(--amber); }
.tl-ok { background: var(--green); }
.tl-count { display: flex; flex-direction: column; align-items: flex-end; color: var(--mare); text-align: right; font-variant-numeric: tabular-nums; }
.tl-label { display: flex; flex-direction: column; align-items: flex-start; font-variant-numeric: tabular-nums; }
.tl-disabled, .tl-suppressed { color: var(--amber); font-size: .75rem; }
@media (max-width: 600px) { .tl-row { grid-template-columns: 80px 1fr 80px; font-size: .8rem; } }

.legend { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; vertical-align: -.05em; margin: 0 .25rem 0 .6rem; }
.legend:first-child { margin-left: 0; }
.legend-error { background: var(--red); }
.legend-warning { background: var(--amber); }
.legend-rejected { background: var(--mare); }
.legend-ok { background: var(--green); }

/* Serial Issues: connection state over the log. Colors are not the only cue: each stretch has a title and the table lists it. */
.conn-strip { position: relative; display: flex; height: 18px; margin-top: 1rem; background: var(--well); border-radius: 3px; overflow: hidden; }
.conn-segment { display: block; height: 100%; min-width: 2px; }
.conn-marker { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--red); }
.conn-connected { background: var(--green); }
.conn-incident { background: var(--red); }
.conn-disconnected { background: var(--line-strong); }
.conn-scale { display: flex; justify-content: space-between; gap: 1rem; margin: .25rem 0 .5rem; color: var(--mare); font-size: .8rem; font-variant-numeric: tabular-nums; }
.conn-text { overflow-wrap: anywhere; min-width: 14rem; }
.conn-first td { background: var(--panel-raised); font-weight: 600; }
.conn-method ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* ---------- Tracking Analysis ---------- */

.check-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: .6rem; }
.check {
    display: grid; grid-template-columns: 1.75rem 1fr; gap: .75rem; align-items: start; padding: .8rem .95rem;
    border-radius: var(--radius-sm); background: var(--well); border: 1px solid var(--line);
}
.check > div { display: flex; flex-direction: column; gap: .15rem; }
.check-icon { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: var(--green-ink); }
.check-title { font-weight: 600; }
.check-detail { color: var(--mare); font-size: .9rem; }
.check-pass .check-icon { background: var(--green); }
.check-warn { border-color: rgba(227, 163, 59, .5); }
.check-warn .check-icon { background: var(--amber); }
.check-skip .check-icon { background: var(--line-strong); color: var(--moon); }

.help-figure { margin: .6rem 0 .4rem; max-width: 640px; }
.help-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.help-figure figcaption { margin-top: .35rem; color: var(--mare); font-size: .85rem; }
.formulas { margin-top: 1.5rem; }
.formulas summary h2 { display: inline; margin: 0; }
.formulas h3 { margin: 1.1rem 0 .4rem; color: var(--moon); font-size: 1.1rem; }
.formulas td:first-child { white-space: nowrap; font-weight: 600; }
.formulas td.num { font-family: var(--font-code); font-size: .85rem; white-space: nowrap; }

.spr-chip {
    align-self: center; padding: .2rem .7rem; border-radius: 999px; font-size: .88rem; white-space: nowrap;
    background: rgba(82, 183, 136, .12); border: 1px solid rgba(82, 183, 136, .55); color: var(--moon);
}
.spr-chip-none { background: transparent; border-color: var(--line-strong); color: var(--mare); }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.preview-card {
    display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: var(--radius);
    background: var(--panel); color: var(--moon); border: 1px solid var(--line);
}
.preview-card strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.preview-card span:last-child { color: var(--mare); font-size: .92rem; }
.preview-icon { font-size: 1.5rem; line-height: 1; }

.gauge { margin: 2.2rem .5rem 1.25rem; }
.gauge-track {
    position: relative; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, var(--amber), rgba(227, 163, 59, .2) 25%, transparent 25%, transparent 75%, rgba(227, 163, 59, .2) 75%, var(--amber));
}
.gauge-band { position: absolute; left: 25%; right: 25%; top: 0; bottom: 0; background: rgba(82, 183, 136, .45); }
.gauge-center { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--yellow); }
.gauge-marker { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--moon); box-shadow: 0 0 0 3px var(--panel); }
.gauge-marker-ok { background: var(--green); }
.gauge-marker-warn { background: var(--amber); }
.gauge-bubble {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); padding: .1rem .45rem;
    border-radius: var(--radius-sm); background: var(--panel-raised); border: 1px solid var(--line-strong);
    font-size: .82rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.gauge-bubble-start { left: -4px; transform: none; }
.gauge-bubble-end { left: auto; right: -4px; transform: none; }
.gauge-scale { display: flex; justify-content: space-between; margin-top: .45rem; color: var(--mare); font-size: .8rem; }

.sidereal-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: .75rem; margin-bottom: .75rem; }
.sidereal-number { font-family: var(--font-code); font-size: 1.1rem; }
.sidereal-close { border-left: 3px solid var(--green); }
.sidereal-off { border-left: 3px solid var(--amber); }

.drift-chart { display: grid; grid-template-columns: auto 1fr; gap: .35rem .6rem; margin: .5rem 0 1rem; }
.drift-y { display: flex; flex-direction: column; justify-content: space-between; color: var(--mare); font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }
.drift-svg { display: block; width: 100%; height: 220px; background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.drift-x { grid-column: 2; display: flex; justify-content: space-between; gap: .5rem; color: var(--mare); font-size: .78rem; font-variant-numeric: tabular-nums; }
.drift-grid { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.drift-zero { stroke: var(--mare); stroke-width: 1; stroke-dasharray: 4 4; }
.drift-area { fill: var(--green); opacity: .2; }
.drift-line { fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linejoin: round; }
.drift-caption { margin-top: -.5rem; }
@media (max-width: 600px) { .drift-svg { height: 160px; } .drift-x span:nth-child(2) { display: none; } }

/* Tracking drift: bars grow left (behind) or right (ahead) of a centre line. */
.dev-track { position: relative; height: 12px; background: var(--well); border-radius: 3px; overflow: hidden; }
.dev-track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--mare); }
.dev-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.dev-ahead { background: var(--green); }
.dev-behind { background: var(--amber); }

/* ---------- Help popups ---------- */

/* A small round "?" button next to a field label, opening a popup (.modal) over the page. */
.help-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
    margin-left: .4rem; padding: 0; border-radius: 50%; border: 1px solid var(--green);
    background: transparent; color: var(--green); font: inherit; font-size: .78rem; font-weight: 700;
    line-height: 1; cursor: pointer; vertical-align: .05em;
}
.help-icon:hover { background: var(--green); color: var(--green-ink); }
.modal-backdrop {
    position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(2, 5, 7, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal-backdrop:focus { outline: none; }
.modal {
    width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto; margin: 0;
    border-color: var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    animation: modal-in .18s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.modal-header h2 { margin: 0; }
/* Clickable table rows (e.g. picking a mount in the SPR help popup). */
tr.row-pick { cursor: pointer; }
tr.row-pick:hover td { background: rgba(82, 183, 136, .14); }
/* Key result row or column (e.g. Duration in Milliseconds, Minimal Pulse) in bright red. */
tr.row-alert td, th.col-alert, td.col-alert { color: #ff4d45; }
.link-btn { padding: 0; border: 0; background: none; color: var(--green); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
.link-btn:disabled { opacity: .5; cursor: not-allowed; }

#blazor-error-ui {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    background: #3a2a0c; color: #f6dd8f; padding: .7rem 3rem .7rem 1.25rem; border-top: 1px solid var(--amber);
}
#blazor-error-ui .reload { color: #fff1c4; margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .9rem; top: .6rem; }

/* ---- Connection lost (#components-reconnect-modal; Blazor sets the state classes) ------------- */
.reconnect { display: none; }
.reconnect.components-reconnect-show, .reconnect.components-reconnect-retrying, .reconnect.components-reconnect-failed,
.reconnect.components-reconnect-paused, .reconnect.components-reconnect-resume-failed, .reconnect.components-reconnect-rejected {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 1100; padding: 1rem;
    background: rgba(5, 8, 10, .72); backdrop-filter: blur(2px);
}
.reconnect-card {
    width: min(26rem, 100%); padding: 1.6rem 1.5rem 1.4rem; text-align: center;
    background: var(--panel); color: var(--moon); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.reconnect-card h2 { margin: .4rem 0 .5rem; font-size: 1.6rem; color: var(--yellow); }
.reconnect-card p { margin: 0; color: var(--mare); line-height: 1.5; }
.reconnect-card .actions { justify-content: center; margin-top: 1.1rem; }
.reconnect-gave-up { display: none; }
.reconnect.components-reconnect-failed .reconnect-trying, .reconnect.components-reconnect-paused .reconnect-trying,
.reconnect.components-reconnect-resume-failed .reconnect-trying { display: none; }
.reconnect.components-reconnect-failed .reconnect-gave-up, .reconnect.components-reconnect-paused .reconnect-gave-up,
.reconnect.components-reconnect-resume-failed .reconnect-gave-up { display: block; }
.reconnect-spinner {
    display: inline-block; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    border: 3px solid var(--line); border-top-color: var(--green); animation: reconnect-spin .9s linear infinite;
}
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reconnect-spinner { animation-duration: 3s; } }

/* ---- Analytics consent banner (wwwroot/js/consent.js) ------------------------------------------ */
.consent {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 900; margin: 0 auto; max-width: 46rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
    padding: .9rem 1.1rem; background: var(--panel); color: var(--moon);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 18rem; line-height: 1.45; }
.consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-link { margin-left: .75rem; color: var(--mare); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Session Log Analysis: rule set checkboxes and collapsible sections ---------- */

.ruleset-picker { margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.ruleset-picker legend { padding: 0; margin-bottom: .5rem; color: var(--mare); font-size: .92rem; }
.ruleset-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: .65rem; }
.ruleset-picker legend { grid-column: 1 / -1; }
.ruleset-option {
    display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: .65rem; cursor: pointer;
    padding: .8rem .95rem; border-radius: var(--radius-sm); background: var(--well); border: 1px solid var(--line-strong);
    transition: border-color .15s, background .15s;
}
.ruleset-option:hover { border-color: var(--mare); }
.ruleset-option:has(input:checked) { border-color: var(--green); background: rgba(82, 183, 136, .08); }
.ruleset-option:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ruleset-option:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.ruleset-option input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--green); }
.ruleset-option-icon { font-size: 1.2rem; line-height: 1.3; }
/* An image in place of the emoji: the height of one emoji (1em of the icon font size), centered on its line. */
.ruleset-option-img { display: block; height: 1em; width: auto; margin-top: .15em; border-radius: 2px; }
.ruleset-option-text { display: flex; flex-direction: column; gap: .1rem; }
.ruleset-option-text span { color: var(--mare); font-size: .88rem; line-height: 1.4; }
.ruleset-none { margin: -.5rem 0 1rem; color: var(--amber); }


/* Each rule set: a header bar that opens and closes; its result cards sit below, indented by a guide line. */
/* The drop area while an analysis runs: a new file has to wait. */
.dropzone.is-disabled { opacity: .55; }
.dropzone.is-disabled .dropzone-input { cursor: not-allowed; }
.ruleset-toolbar { display: flex; justify-content: flex-end; gap: .5rem; margin: 0 0 .75rem; }
.btn.btn-small { padding: .35rem .8rem; font-size: .88rem; }
.ruleset { margin: 0 0 1.25rem; scroll-margin-top: 4.5rem; }
.ruleset > summary.ruleset-header {
    display: flex; align-items: center; gap: .85rem; margin: 0; padding: .9rem 1.25rem;
    background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.ruleset > summary.ruleset-header::before { order: 3; margin-left: auto; width: .55rem; height: .55rem; transform: rotate(45deg); }
.ruleset:not([open]) > summary.ruleset-header::before { transform: rotate(-45deg); }
.ruleset > summary.ruleset-header:hover { border-color: var(--mare); }
.ruleset[open] > summary.ruleset-header { margin-bottom: 1rem; }
.ruleset-icon { font-size: 1.5rem; line-height: 1; }
.ruleset-icon-img { display: block; height: 1em; width: auto; border-radius: 3px; }
.ruleset-title { display: flex; flex-direction: column; min-width: 0; }
.ruleset-title h2 { margin: 0; font-size: 1.6rem; }
.ruleset-verdict { color: var(--mare); font-weight: 500; font-size: .95rem; }
.ruleset-body { padding-left: 1.1rem; border-left: 2px solid var(--line); margin-left: .6rem; }
@media (max-width: 600px) { .ruleset-body { padding-left: .6rem; margin-left: .25rem; } .ruleset > summary.ruleset-header { padding: .8rem 1rem; } }

/* ---------- Environment Log Analysis ---------- */

.env-tile-value { font-size: 1.65rem; overflow-wrap: anywhere; }
.env-all-clear { margin: .25rem 0 0; color: #8fdcb5; }

.env-findings { margin: .75rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.env-finding {
    padding: .85rem 1rem; border-radius: var(--radius-sm); background: var(--well);
    border: 1px solid var(--line); border-left: 4px solid var(--blue);
}
.env-finding-High { border-left-color: #ff7a6e; }
.env-finding-Medium { border-left-color: var(--amber); }
.env-finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: 1.05rem; }
.env-finding p { margin: .35rem 0 0; color: var(--mare); overflow-wrap: anywhere; }
.env-finding .env-finding-action { color: var(--moon); }
.env-finding-action > span { font-weight: 700; color: var(--green); }
.env-finding .link-btn { margin-top: .4rem; }

.env-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .5rem; margin-top: .6rem; }
.env-index-item {
    display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; min-width: 0;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--well);
    color: var(--moon); font: inherit; text-align: left; cursor: pointer;
}
.env-index-item:hover { border-color: var(--mare); background: var(--panel-raised); }
.env-index-item:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.env-index-title { flex: 1; min-width: 0; font-weight: 600; }

.env-section-badge { order: 2; margin-left: auto; }
.ruleset > summary.ruleset-header:has(.env-section-badge)::before { margin-left: 0; }

.env-about { margin: 0 0 .9rem; }
.env-heading { white-space: nowrap; opacity: .75; }
@media (max-width: 600px) { .env-heading { white-space: normal; } }
.env-checks { margin-bottom: 1rem; }
.env-check-action { display: block; margin-top: .3rem; color: var(--moon); }
.env-check-high { border-color: rgba(239, 100, 97, .6); }
.env-check-high .check-icon { background: var(--red); }
.env-check-low .check-icon, .env-check-note .check-icon { background: var(--blue); }
.env-check-note .check-icon { font-family: var(--font-code); }

.env-meter-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.env-meter-label { font-weight: 600; }
.env-meter-text { color: var(--mare); font-size: .9rem; white-space: nowrap; }
@media (max-width: 600px) {
    .env-meter-row { grid-template-columns: 1fr auto; }
    .env-meter-row .env-meter { grid-column: 1 / -1; grid-row: 2; }
}
.env-meter { display: block; height: .7rem; min-width: 5rem; border-radius: 999px; overflow: hidden; background: var(--well); border: 1px solid var(--line); }
.env-meter-fill { display: block; height: 100%; background: var(--mare); }
.env-level-ok { background: var(--green); }
.env-level-warn { background: var(--amber); }
.env-level-bad { background: var(--red); }

.env-drives { margin-bottom: 1rem; }
td.env-drive-bar, th.env-drive-bar { width: 22%; min-width: 7rem; }
td.env-drive-bar { vertical-align: middle; }

.env-items { margin-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.env-item-note { color: var(--mare); font-size: .8rem; line-height: 1.35; }

/* User Config Summary */
.config-value { overflow-wrap: anywhere; }
.config-new { margin-bottom: 1rem; }
.config-list { margin: .25rem 0 1rem; padding-left: 1.25rem; }

/* Minimum Specs section */
.env-spec-pick { margin: 0 0 .5rem; font-size: 1.05rem; }
.env-spec-pick strong { color: var(--yellow); }
.env-spec-list { margin: .5rem 0 0; padding-left: 1.25rem; }
.env-spec-list li { margin-bottom: .4rem; }
.env-spec-callout { border-left: 4px solid var(--amber); }
.env-spec-callout h3 { color: var(--amber); font-size: 1.35rem; }
.env-spec-callout .env-spec-list { margin-bottom: .9rem; }
.env-spec-callout .hint { margin: .75rem 0 0; }