/* =========================================================
   ANALYSER — Swiss / International Typographic Style
   Black on white, hairline rules, 12-col grid, red accent.
   ========================================================= */

/* ---------- VIEW TRANSITIONS ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
  animation-timing-function: ease;
}

:root {
  --bg:        #ffffff;
  --fg:        #0a0a0a;
  --muted:     #6b6b6b;
  --hairline:  #0a0a0a;
  --rule:      #e6e6e6;
  --surface:   #f4f4f4;
  --accent:    #e60023;
  --accent-fg: #ffffff;

  --font-sans: "Geist", -apple-system, "Helvetica Neue", Helvetica, "Liberation Sans", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --gap:    24px;
  --pad-x:  clamp(20px, 4vw, 56px);
  --pad-y:  clamp(56px, 9vw, 120px);

  --t-mega:  clamp(64px, 13vw, 200px);
  --t-huge:  clamp(48px, 9vw, 112px);
  --t-h1:    clamp(28px, 4.2vw, 56px);
  --t-h2:    clamp(20px, 2.2vw, 28px);
  --t-h3:    16px;
  --t-body:  16px;
  --t-small: 13px;
  --t-tiny:  11px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html, body {
  margin: 0; padding: 0;
  color: var(--fg);
}
body {
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.45;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: '';
  position: fixed;
  inset: -72px;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cline x1='0' y1='24' x2='15' y2='24' stroke='%23000' stroke-opacity='0.07' stroke-width='0.75'/%3E%3Cline x1='33' y1='24' x2='48' y2='24' stroke='%23000' stroke-opacity='0.07' stroke-width='0.75'/%3E%3Cline x1='24' y1='0' x2='24' y2='15' stroke='%23000' stroke-opacity='0.07' stroke-width='0.75'/%3E%3Cline x1='24' y1='33' x2='24' y2='48' stroke='%23000' stroke-opacity='0.07' stroke-width='0.75'/%3E%3Cline x1='19' y1='24' x2='29' y2='24' stroke='%23000' stroke-opacity='0.07' stroke-width='0.75'/%3E%3Cline x1='24' y1='19' x2='24' y2='29' stroke='%23000' stroke-opacity='0.07' stroke-width='0.75'/%3E%3C/svg%3E");
  background-size: 72px 72px;
  animation: bg-drift 24s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes bg-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(72px, 72px, 0); }
}
:root[data-theme="dark"] body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cline x1='0' y1='24' x2='15' y2='24' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.75'/%3E%3Cline x1='33' y1='24' x2='48' y2='24' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.75'/%3E%3Cline x1='24' y1='0' x2='24' y2='15' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.75'/%3E%3Cline x1='24' y1='33' x2='24' y2='48' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.75'/%3E%3Cline x1='19' y1='24' x2='29' y2='24' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.75'/%3E%3Cline x1='24' y1='19' x2='24' y2='29' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.75'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, p, dl, dd, dt { margin: 0; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent); }

button { font-family: inherit; }

::selection { background: var(--accent); color: var(--accent-fg); }

/* ---------- GRID ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  padding: 0 var(--pad-x);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* On displays wider than the 1440px content column there's empty margin on
   either side, which makes the page edges read as "floating". These two fixed
   hairlines sit at the column's left/right edges and run the full height, from
   the (sticky) navbar down, marking where the site ends. Only rendered once the
   viewport is wider than the content, so narrower screens are unaffected. */
@media (min-width: 1441px) {
  html::before,
  html::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--hairline);
    z-index: 25;
    pointer-events: none;
  }
  html::before { left: calc(50% - 720px); }
  html::after { right: calc(50% - 720px); }
}

/* ---------- HEADER ---------- */
.site-header {
  padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--hairline);
  max-width: 1440px;
  margin: 0 auto;
}

.site-mark {
  grid-column: 1 / span 8;
  -webkit-user-select: none;
  user-select: none;
}
.site-meta {
  grid-column: 10 / span 3;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.site-meta dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
}
.site-meta dt { color: var(--muted); }
.site-meta dd { margin: 0; color: var(--fg); }
.site-meta .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}

.site-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 16px;
}

.site-title {
  font-size: var(--t-mega);
  line-height: 0.86;
  font-weight: 600;
  letter-spacing: -0.045em;
  margin: 0;
}

/* Byline directly under the title. Its size is a fixed fraction of the title
   size (--t-mega), so the two scale together and the byline's right edge stays
   anchored just left of the "y" at every viewport width. */
.site-byline {
  font-size: calc(var(--t-mega) * 0.29);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: -8px 0 0;
}
.site-byline-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.site-byline-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: currentColor;
  transition: width 0.3s ease;
}
.site-title:hover ~ .site-byline .site-byline-link::after,
.site-byline:hover .site-byline-link::after { width: 100%; }
.site-byline-link:hover::after { background: #e53e3e; }

.site-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--muted);
  margin: 20px 0 0;
  max-width: 50ch;
  line-height: 1.45;
}

@media (max-width: 800px) {
  .site-mark { grid-column: 1 / -1; }
  .site-byline { margin-top: -4px; }
  .site-meta { grid-column: 1 / -1; margin-top: 24px; }
  .site-meta dl { grid-template-columns: 100px 1fr; }
}

/* ---------- NAV ---------- */
.site-nav {
  position: -webkit-sticky;   /* older iOS Safari needs the prefix to pin */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 48px 1fr 1fr 1fr auto;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
body:has(.about-page) .site-nav { grid-template-columns: 48px repeat(4, 1fr) auto; }
.nav-link {
  min-width: 0;
  padding: 16px 4px;
  text-decoration: none;
  color: var(--fg);
  font-size: var(--t-small);
  font-weight: 500;
  border-right: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 10px;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-link:last-of-type { border-right: none; }
.nav-link:hover { background: var(--surface); color: var(--fg); }
.nav-link.is-active { background: var(--fg); color: var(--bg); }
.nav-link.is-active .nav-num { color: var(--bg); opacity: 0.5; }
.nav-link.has-data::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-left: auto;
}
.nav-link.is-active.has-data::after {
  background: var(--bg);
}
.nav-home {
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.nav-home-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  opacity: 0.5;
  height: 48px;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 48px;
  min-width: 48px;
}
.nav-home-btn:hover { opacity: 1; }

.nav-search {
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.nav-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  opacity: 0.5;
  height: 46px;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 46px;
}
.nav-search-btn:hover { opacity: 1; }
.nav-search.is-open .nav-search-btn { display: none; }
.nav-search-input {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--hairline);
  border-radius: 0;
  outline: none;
  display: none;
}
.nav-search.is-open .nav-search-input {
  display: block;
  width: 180px;
  padding: 6px 10px;
  opacity: 1;
}
.nav-search-input:focus { border-color: var(--fg); }
.nav-search-input::placeholder {
  color: var(--muted);
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.nav-search-arrow { display: none; }
.nav-search.is-open .nav-search-arrow {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.nav-search.is-open .nav-search-arrow:hover { opacity: 1; background: var(--surface); }
.nav-search.is-open .nav-search-arrow:active { opacity: 1; background: var(--fg); color: var(--bg); }
.nav-search-arrow:hover { opacity: 1; }
.search-overlay { display: none; }
@media (max-width: 700px) {
  .search-overlay {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    padding: 10px 16px;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .search-overlay.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
.search-overlay-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-overlay-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--hairline);
  border-radius: 0;
  outline: none;
}
.search-overlay-input:focus { border-color: var(--fg); }
.search-overlay-input::placeholder {
  color: var(--muted);
  opacity: 0.4;
  text-transform: uppercase;
}
.search-overlay-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  font-size: 24px;
  line-height: 1;
  padding: 6px;
  opacity: 0.5;
}
.search-overlay-close:hover { opacity: 1; }
.search-overlay-arrow {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  font-size: 28px;
  line-height: 1;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.search-overlay-arrow:hover { opacity: 1; background: var(--surface); }
.search-overlay-arrow:active { opacity: 1; background: var(--fg); color: var(--bg); }
.anr-search-highlight {
  background: rgba(230, 0, 35, 0.06);
}
.anr-search-current {
  background: rgba(230, 0, 35, 0.15);
}
.nav-num {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* ---------- SECTIONS ---------- */
.section {
  padding: var(--pad-y) 0;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 56px;
  max-width: 1440px;
  margin: 0 auto;
}
.section-meta {
  grid-column: 1 / span 3;
  align-self: start;
  padding-top: 4px;
  background: var(--bg);
  padding: 24px;
  border: 1px solid var(--hairline);
}
.section-num {
  font-family: var(--font-mono);
  font-size: var(--t-huge);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
  display: block;
}
.section-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
  display: block;
}
.section-content {
  grid-column: 5 / -1;
  background: var(--bg);
  padding: 32px;
  border: 1px solid var(--hairline);
}
.section-head {
  font-size: var(--t-h1);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 16px;
  max-width: 22ch;
}
.section-lede {
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 32px;
}

/* Heading mirrored into the numbered meta card (clone created in app.js). Hidden
   by default; on mobile, once the section has analysed a file (.is-analysed), it
   replaces the original head + lede so the results lead. Desktop keeps the full
   head + lede and never shows this clone. */
.section-meta-head { display: none; }
.section.is-tappable .section-head,
.section.is-tappable .section-lede,
.section.is-tappable .section-meta-head { cursor: pointer; }
@media (max-width: 700px) {
  .section.is-analysed .section-head,
  .section.is-analysed .section-lede { display: none; }
  .section.is-analysed .section-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0 10px;
  }
  .section.is-analysed .section-num { grid-column: 1; grid-row: 1; }
  .section.is-analysed .section-meta-head {
    display: block;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: var(--t-small);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--fg);
  }
  .section.is-analysed .section-kicker {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .section.is-analysed .section-meta-slot { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .section-meta { grid-column: 1 / -1; position: static; margin-bottom: 8px; }
  .section-content { grid-column: 1 / -1; }
  .section-num { font-size: clamp(40px, 14vw, 80px); }
}

/* ---------- DROPZONE ---------- */
.anr-dropzone {
  border: 1px solid var(--hairline);
  background: var(--bg);
  margin: 24px 0 32px;
  transition: background 0.12s ease, border-color 0.2s ease;
}
.anr-dropzone:hover {
  border-color: var(--accent);
}
.anr-dropzone-inner {
  transition: opacity 0.15s ease;
}
.anr-dropzone:hover .anr-dropzone-inner {
  opacity: 0.6;
}
/* Hovering the dropzone tints its whole outer border accent (above). The
   buttons inside draw their own inner borders (Info's top/left, the audio
   strip's top, the Record/Live divider), so tint those to match — otherwise the
   card edge goes red while the button edges stay dark. */
.anr-dropzone:hover .fmt-help-btn {
  border-top-color: var(--accent);
  border-left-color: var(--accent);
}
.anr-dropzone:hover .anr-audio-modes { border-top-color: var(--accent); }
.anr-dropzone:hover .anr-audio-modes .anr-btn { border-right-color: var(--accent); }
.anr-dropzone.is-dragover {
  background: var(--surface);
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
}
.anr-dropzone-inner {
  display: block;
  padding: clamp(40px, 8vw, 88px) 24px;
  text-align: center;
  cursor: pointer;
}
.anr-drop-icon {
  font-family: var(--font-mono);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 300;
  display: inline-block;
  margin-bottom: 10px;
}
.anr-dropzone-inner strong {
  display: block;
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
}
.anr-dropzone-inner p {
  margin: 6px 0;
  color: var(--muted);
}
.anr-pick-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.anr-hint {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  margin-top: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
/* The "analysis may be limited" caveat. Styled like a hint but kept on its own
   class so it survives the mobile rule that hides the format-list hints. */
.anr-drop-warn {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  opacity: 0.5;
  margin-top: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}
.quickdrop-zone .anr-drop-warn { margin-top: 10px !important; }

.anr-audio-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 24px 28px;
}

/* ---------- BUTTONS ---------- */
.anr-btn,
.anr-fs-btn {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.anr-btn:hover,
.anr-fs-btn:hover {
  background: var(--fg);
  color: var(--bg);
}
.anr-btn:disabled,
.anr-fs-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--bg);
  color: var(--fg);
}
.anr-btn.is-active,
.anr-btn.is-recording {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.anr-rec-dot { color: currentColor; font-size: 0.9em; vertical-align: middle; }
.anr-btn.is-recording .anr-rec-dot { animation: anr-blink 1s steps(2, end) infinite; }
@keyframes anr-blink { 50% { opacity: 0; } }

.anr-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.anr-frame-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.anr-frame-grid > .anr-btn { width: 100%; }

.anr-timecode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  cursor: pointer;
}
.anr-timecode-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  margin-bottom: 2px;
}
.anr-timecode-value {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.anr-timecode-input {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
  padding: 0;
}
.anr-frame-wrap { margin: 8px 0; }
.anr-frame-wrap .anr-frame-grid { margin: 0; }
.anr-timecode-hint {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1;
  text-align: center;
  display: block;
}
.anr-timecode:hover { border-color: var(--fg); }
:root[data-theme="dark"] .anr-timecode { background: #1a1a1a; }

/* ---------- RESULTS / CARDS ---------- */
.anr-results { margin: 0; scroll-margin-top: 60px; }

.anr-card {
  margin: 0 0 56px;
  padding: 0;
  background: transparent;
  border: none;
}
.anr-card h3 {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.anr-card-empty { color: var(--muted); font-style: italic; }

/* ---------- PREVIEW ---------- */
.anr-preview {
  background: var(--surface);
  padding: 16px;
  border: 1px solid var(--rule);
  text-align: center;
}
.anr-preview img {
  max-width: 100%;
  max-height: 480px;
  display: inline-block;
}
.anr-preview-meta {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

/* ---------- READOUT TABLE ---------- */
.anr-readout {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-feature-settings: "tnum";
}
.anr-readout th,
.anr-readout td {
  text-align: left;
  padding: 9px 12px 9px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  word-break: break-all;
  overflow-wrap: anywhere;
}
.anr-readout th {
  font-weight: 400;
  color: var(--muted);
  width: 38%;
  text-transform: none;
}
.anr-readout td { color: var(--fg); font-weight: 500; }
.anr-readout tr:last-child th,
.anr-readout tr:last-child td { border-bottom: none; }
.anr-readout tbody tr:hover th,
.anr-readout tbody tr:hover td { background: var(--surface); }
.anr-readout tr:hover th,
.anr-readout tr:hover td { background: var(--surface); }

.anr-readout-section {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 28px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.anr-readout-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

/* ---------- HISTOGRAM / WAVEFORM ---------- */
.anr-histogram,
.anr-waveform {
  width: 100%;
  display: block;
  background: #0a0a0a;
  border: 1px solid var(--hairline);
}
.anr-histogram { height: 200px; }
.anr-waveform { height: 96px; }

.anr-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: #fff;
  pointer-events: none;
  z-index: 3;
  will-change: left;
}

/* ---------- PALETTE ---------- */
.anr-palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.anr-swatch {
  aspect-ratio: 1 / 1;
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(8px, 1.1vw, 11px);
  color: var(--fg);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.anr-swatch {
  transition: transform 0.15s ease;
}
.anr-swatch:hover {
  transform: translateY(-3px);
  z-index: 2;
  box-shadow: 0 0 0 1px var(--hairline);
}
.anr-swatch span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 4px;
  background: var(--bg);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--hairline);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
/* On very narrow screens, two rows of four are friendlier than tiny squares */
@media (max-width: 480px) {
  .anr-palette { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- MAP ---------- */
.anr-map {
  width: 100%;
  height: 360px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  position: relative;
  z-index: 1;
}

/* ---------- SPECTROGRAM ---------- */
.anr-spec-card { position: relative; }

.anr-spec-wrap {
  display: flex;
  background: #0a0a0a;
  border: 1px solid var(--hairline);
  position: relative;
  min-height: 0;
}

.anr-spec-yaxis-wrap { flex: 0 0 48px; display: flex; flex-direction: column; }
.anr-spec-yaxis {
  flex: 1 1 auto;
  position: relative;
  background: #0a0a0a;
  border-right: 1px solid #222;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #999;
  overflow: hidden;
}
.anr-spec-yaxis span { position: absolute; right: 6px; transform: translateY(-50%); letter-spacing: 0.04em; }
.anr-spec-corner {
  height: 20px;
  background: #0a0a0a;
  border-right: 1px solid #222;
  border-top: 1px solid #222;
}

.anr-spec-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #444 #0a0a0a;
  scrollbar-width: thin;
}
/* Stylized spectrogram scrollbar — desktop/fine-pointer only. On iOS Safari and
   other touch devices the custom styling is skipped so the native overlay
   scrollbar is used (it can't be fully styled there anyway). */
.anr-spec-scroll { scrollbar-width: thin; scrollbar-color: #3a3a3a #0a0a0a; }
@media (hover: hover) and (pointer: fine) {
  .anr-spec-scroll::-webkit-scrollbar { height: 11px; }
  .anr-spec-scroll::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-top: 1px solid #222;
  }
  .anr-spec-scroll::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border: 2px solid #0a0a0a;       /* inset gap so the thumb reads as a bar */
    border-radius: 0;                /* sharp corners, matching the UI */
  }
  .anr-spec-scroll::-webkit-scrollbar-thumb:hover { background: #555; }
  .anr-spec-scroll::-webkit-scrollbar-thumb:active { background: var(--accent); }
}

.anr-spec-canvas-wrap { position: relative; flex: 0 0 auto; }
.anr-spec-canvas { display: block; image-rendering: pixelated; }
.anr-spec-xaxis {
  height: 20px; flex: 0 0 auto;
  background: #0a0a0a;
  border-top: 1px solid #222;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #999;
  position: relative;
  pointer-events: none;
}
.anr-spec-xaxis span { position: absolute; top: 4px; transform: translateX(-50%); letter-spacing: 0.04em; }

/* fullscreen */
.anr-spec-card:fullscreen,
.anr-spec-card:-webkit-full-screen {
  background: #0a0a0a;
  padding: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.anr-spec-card:fullscreen h3,
.anr-spec-card:-webkit-full-screen h3 {
  color: #fff;
  border-bottom-color: #333;
  flex: 0 0 auto;
}
.anr-spec-card:fullscreen .anr-controls,
.anr-spec-card:-webkit-full-screen .anr-controls {
  flex: 0 0 auto;
  background: #1a1a1a;
  border-color: #333;
}
.anr-spec-card:fullscreen .anr-controls label,
.anr-spec-card:-webkit-full-screen .anr-controls label { color: #999; }
.anr-spec-card:fullscreen .anr-controls select,
.anr-spec-card:-webkit-full-screen .anr-controls select {
  background: #1a1a1a;
  color: #fff;
  border-color: #444;
}
.anr-spec-card:fullscreen .anr-spec-wrap,
.anr-spec-card:-webkit-full-screen .anr-spec-wrap {
  flex: 1 1 auto;
  min-height: 0;
  border-color: #333;
}
.anr-spec-card:fullscreen .anr-spec-hint,
.anr-spec-card:-webkit-full-screen .anr-spec-hint { color: #999; }
.anr-spec-card:fullscreen .anr-fs-btn,
.anr-spec-card:-webkit-full-screen .anr-fs-btn {
  background: #1a1a1a; color: #fff; border-color: #444;
}
.anr-spec-card:fullscreen .anr-fs-btn:hover,
.anr-spec-card:-webkit-full-screen .anr-fs-btn:hover { background: #fff; color: #000; }
.anr-spec-card:fullscreen .anr-toggle,
.anr-spec-card:-webkit-full-screen .anr-toggle { border-color: #444; }
.anr-spec-card:fullscreen .anr-toggle button,
.anr-spec-card:-webkit-full-screen .anr-toggle button { color: #999; }
.anr-spec-card:fullscreen .anr-toggle button.is-active,
.anr-spec-card:-webkit-full-screen .anr-toggle button.is-active { background: #fff; color: #000; }

/* ---------- CONTROLS ROW ---------- */
.anr-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-bottom: none;
  font-family: var(--font-sans);
  font-size: var(--t-small);
}
.anr-control { display: flex; align-items: center; gap: 8px; }
.anr-control label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.anr-control select,
.anr-control input[type="number"],
.anr-control input[type="text"] {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  padding: 5px 8px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--fg);
  border-radius: 0;
}
.anr-control input[type="range"] {
  width: 120px;
  accent-color: var(--accent);
}
.anr-range-readout {
  display: inline-block; min-width: 38px; text-align: right;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--t-small);
}

.anr-toggle { display: inline-flex; border: 1px solid var(--hairline); }
.anr-toggle button {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  padding: 5px 10px;
  background: transparent;
  border: none;
  color: var(--fg);
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.anr-toggle button.is-active { background: var(--fg); color: var(--bg); }

.anr-spec-hint {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- INFO BUTTON / PANEL ---------- */
.anr-info-btn {
  float: right;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: inherit;
}
.anr-info-btn:hover { color: var(--accent); }

/* ---------- TIP POPUP (inline row help) ---------- */
.anr-readout th { position: relative; }
.anr-tip-btn {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: inherit;
  opacity: 0.4;
}
.anr-tip-btn:hover { color: var(--accent); opacity: 1; }
.anr-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 260px;
  max-width: 380px;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  line-height: 1.65;
  letter-spacing: 0.02em;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  white-space: normal;
  word-break: normal;
}
.anr-tip.is-active { display: block; }
.anr-info-panel {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  line-height: 1.7;
  letter-spacing: 0.02em;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 14px;
}
.anr-info-panel strong {
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- CUSTOM PLAYER ---------- */
.anr-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  margin-bottom: 14px;
}
.anr-player-play {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--fg);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-sans);
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.anr-player-play:hover {
  background: var(--fg);
  color: var(--bg);
}
.anr-player-track {
  flex: 1 1 auto;
  height: 32px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
.anr-player-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: var(--rule);
}
.anr-player-fill {
  height: 3px;
  background: var(--accent);
  width: 0%;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.anr-player-time {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 80px;
  text-align: right;
}

/* ---------- TRANSPORT ---------- */
.anr-transport { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.anr-transport audio { flex: 1; min-width: 0; }
audio { width: 100%; }

/* ---------- PROGRESS ---------- */
.anr-progress {
  margin: 18px 0 20px;
}
.anr-progress-bar {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 900;
  white-space: pre;
  line-height: 1.4;
  overflow: hidden;
  color: var(--fg);
}
.anr-progress-bar .anr-bar-fill {
  color: var(--accent);
}
.anr-progress-label {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  min-height: 1.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

/* ---------- DROP LOADER (bottom-of-window popup) ---------- */
@keyframes anr-sha-slide { from { transform: translateX(0); } to { transform: translateX(233%); } }
.anr-drop-loader {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(14px);
  z-index: 1200;
  width: min(360px, calc(100vw - 32px));
  background: var(--bg);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  padding: 12px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.anr-drop-loader.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.anr-drop-loader-label {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.anr-drop-loader-track {
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.anr-drop-loader-fill {
  height: 100%;
  width: 30%;
  background: var(--accent);
  animation: anr-sha-slide 1s ease-in-out infinite alternate;
}
/* Determinate variant (e.g. FFmpeg core download): fill reflects real % and
   doesn't slide. */
.anr-drop-loader-fill.is-determinate {
  animation: none;
  width: 0;
  transition: width 0.25s ease;
}

/* ---------- OCR ---------- */
.anr-ocr-text {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  background: var(--surface);
  color: var(--fg);
  padding: 16px;
  border: 1px solid var(--hairline);
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 28px 0 0;
  line-height: 1.5;
}
.anr-ocr-text:empty::before { content: "(no text detected)"; color: var(--muted); font-style: italic; }

/* ---------- BANNERS ---------- */
.anr-error {
  background: var(--accent);
  color: var(--accent-fg);
  padding: 14px 18px;
  margin: 16px 0;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
}
.anr-info {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--fg);
  padding: 14px 18px;
  margin: 16px 0;
  font-family: var(--font-mono);
  font-size: var(--t-small);
}

/* ---------- DEFINITION LIST (About) ---------- */
.anr-defs {
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 32px;
}
.anr-defs dt {
  border-top: 1px solid var(--hairline);
  padding: 18px 0 8px;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.anr-defs dd {
  border-top: 1px solid var(--hairline);
  padding: 18px 0 8px;
  margin: 0;
  font-size: var(--t-body);
}
@media (max-width: 700px) {
  .anr-defs { grid-template-columns: 1fr; gap: 0; }
  .anr-defs dt { padding-bottom: 0; }
  .anr-defs dd { border-top: none; padding-top: 4px; padding-bottom: 18px; }
}

/* ---------- DETAILS (raw dump) ---------- */
details {
  border-top: 1px solid var(--hairline);
  padding: 16px 0 4px;
  margin: 24px 0 0;
}
details summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary:hover { color: var(--accent); }
details summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--muted);
  transition: color 0.15s ease;
}
details summary:hover::after { color: var(--accent); }
details[open] summary::after { content: "\2212"; }

/* ---------- ABOUT / FOOTER ---------- */
.site-footer--about {
  background: var(--fg);
  color: var(--bg);
  border-top: none;
  padding: clamp(40px, 6vw, 64px) var(--pad-x);
  max-width: none;
  scroll-margin-top: 56px;
}
.site-footer--about a { color: var(--bg); }
.site-footer--about a:hover { color: var(--accent); }
.footer-about-heading {
  margin-bottom: 28px;
}
.footer-about-heading .footer-mark {
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.footer-about-heading .footer-meta {
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}
.about-defs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 var(--gap);
  margin: 0 0 32px;
  padding: 0;
}
.about-defs > div {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 12px 0;
}
.about-defs dt {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
  margin: 0 0 2px;
}
.about-defs dd {
  margin: 0;
  font-size: var(--t-small);
  color: rgba(255,255,255,0.8);
}
.about-details {
  border-top: none;
  padding: 0;
  margin: 0 0 32px;
}
.about-details summary {
  color: rgba(255,255,255,0.8);
  border-bottom: none;
  padding: 14px 0;
  justify-content: start;
  gap: 8px;
}
.about-details summary:hover { color: var(--accent); }
.about-details summary::after { color: rgba(255,255,255,0.3); }
.about-details .about-defs { margin: 0; }

.offline-section {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 24px;
  margin-bottom: 24px;
}
.offline-heading {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 12px;
}
.offline-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 600px) {
  .offline-options { grid-template-columns: 1fr; }
}
.offline-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.offline-btn:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
.offline-btn.is-done { border-color: #e60023; }
.offline-btn.is-done.is-fading { border-color: rgba(255,255,255,0.15); transition: border-color 1s ease; }
.offline-btn.is-active { border-color: rgba(255,255,255,0.6); }
.offline-tier {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.offline-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  line-height: 1.3;
}
.offline-size {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
.offline-bar {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 900;
  white-space: pre;
  overflow: hidden;
  color: rgba(255,255,255,0.3);
  margin-top: 6px;
  line-height: 1;
}
.offline-bar .offline-bar-fill {
  color: rgba(255,255,255,0.8);
}
.offline-btn.is-done .offline-bar .offline-bar-fill { color: #e60023; }
.offline-btn.is-done.is-fading .offline-bar .offline-bar-fill { color: rgba(255,255,255,0.8); transition: color 1s ease; }

.offline-bottom-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.offline-install {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.8);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 6px 14px;
  transition: border-color 0.2s ease;
}
.offline-install:hover { border-color: rgba(255,255,255,0.7); }
.offline-clear {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.offline-clear:hover { color: rgba(255,255,255,0.7); }

:root[data-theme="dark"] .offline-section { border-top-color: #333; }
:root[data-theme="dark"] .offline-btn { border-color: #333; }
:root[data-theme="dark"] .offline-btn:hover { border-color: #555; background: rgba(255,255,255,0.03); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 24px;
}
.footer-bottom .footer-meta { color: rgba(255,255,255,0.4); }
.footer-bottom .footer-meta a { color: rgba(255,255,255,0.5); }
:root[data-theme="dark"] .site-footer--about {
  background: #141414;
  color: #e8e8e8;
}
/* Footer is dark in both themes, but its text/links are coloured var(--bg) —
   which flips to near-black in dark mode. Force them light. */
:root[data-theme="dark"] .site-footer--about a,
:root[data-theme="dark"] .footer-bottom .footer-mark { color: #e8e8e8; }
:root[data-theme="dark"] .about-defs > div { border-top-color: #333; }
:root[data-theme="dark"] .footer-bottom { border-top-color: #333; }

/* ---------- ABOUT PAGE ---------- */
.about-page .section { border-bottom: 1px solid var(--hairline); }
.about-block { margin-top: 16px; }
.about-block p { color: var(--muted); max-width: 60ch; line-height: 1.6; margin: 0 0 12px; }
.about-block p:last-child { margin-bottom: 0; }
.about-caps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
}
.about-caps > div {
  border-top: 1px solid var(--rule);
  padding: 12px 0;
}
.about-caps dt {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-bottom: 2px;
}
.about-caps dd {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg);
  max-width: 60ch;
  line-height: 1.5;
}
.about-readout { margin-bottom: 0; }
.about-readout th { width: 120px; white-space: nowrap; }
.about-exts {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  word-spacing: 6px;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 2;
}
/* Per-format SEO description under the extension list. Offset anchor targets
   so #fmt-… / #ext-… deep-links don't hide behind the sticky nav. */
.about-fmt-desc {
  display: block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.about-readout tr { scroll-margin-top: 84px; }
.about-ext { scroll-margin-top: 84px; }
.about-formats {
  border-top: 1px solid var(--hairline);
  margin-top: 24px;
  padding-top: 0;
}
.about-formats summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-formats summary::-webkit-details-marker { display: none; }
.about-formats summary::after {
  content: '+';
  font-size: 14px;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.about-formats[open] summary::after {
  content: '\2212';
}
.about-formats summary:hover { color: var(--accent); }

/* Patch notes */
.patch-entry {
  border-top: 1px solid var(--hairline);
  padding: 16px 0;
}
.patch-entry:first-child { border-top: none; }
.patch-version {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.patch-date {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 2px 0 8px;
}
.patch-list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.6;
}
.patch-list li { padding: 1px 0; }
.patch-milestone {}
.patch-milestone .patch-version::after {
  content: 'RELEASE WOOOOOOOOOO';
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: middle;
}

/* ---------- FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 32px var(--pad-x);
  max-width: 1440px;
  margin: 0 auto;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-small);
}
.footer-mark {
  font-weight: 500;
}
.footer-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-meta a { color: inherit; }

/* ---------- QUICKDROP (fields lifted above section 01) ---------- */
.quickdrop {
  padding: 20px var(--pad-x) 24px;
  max-width: 1440px;
  margin: 0 auto;
  border-bottom: 1px solid var(--hairline);
}
.quickdrop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 600px) {
  .quickdrop-grid { grid-template-columns: 1fr 1fr; }
  .quickdrop-grid > :nth-child(2) { order: 2; grid-column: 1 / -1; }
  .quickdrop-grid > :nth-child(3) { order: 1; }
}
.quickdrop-zone { margin: 0 !important; display: flex; flex-direction: column; }
.quickdrop-zone .anr-dropzone-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-align so the icon + heading line up across all three zones regardless
     of how much content (hints/buttons) sits below them. */
  justify-content: flex-start;
  padding: clamp(24px, 4vw, 48px) 18px;
}
.quickdrop-zone .anr-dropzone-inner strong {
  font-size: clamp(16px, 1.8vw, 22px);
  margin: 2px 0 4px;
  color: var(--accent);
}
.quickdrop-zone .anr-drop-icon {
  font-size: clamp(22px, 3.5vw, 34px);
  margin-bottom: 6px;
}
.quickdrop-zone .anr-hint {
  margin-top: 10px !important;
  /* Keep the format list to a single row. If it would wrap to a second line
     (e.g. the photo zone lists both photo and video extensions), truncate the
     overflow with an ellipsis instead — a taller hint would push this zone out
     of line with the other two. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* Touch devices can't drag-drop a file, so the zones read "Pick …" instead of
   "Drop …", and the format lists are dropped for a cleaner tap target. The
   "Info" button still opens the full supported-formats list. */
.tap-word { display: none; }
@media (pointer: coarse) {
  .drop-word { display: none; }
  .tap-word { display: inline; }
  /* Photo/video and sound keep their format lists; only the "any file" zone
     hides its list (the Info button already opens the full catalogue). */
  #videoDrop .anr-hint { display: none; }
}

/* Format help button — matches .anr-audio-modes .anr-btn style */
.fmt-help-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--bg);
  border: none;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg);
  cursor: pointer;
  padding: 11px 8px;
  width: auto;
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.2s ease;
}
.fmt-help-btn:hover { background: var(--fg); color: var(--bg); border-top-color: var(--fg); border-left-color: var(--fg); }

/* Format overlay */
.fmt-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.fmt-overlay[hidden] { display: none; }
.fmt-overlay-inner {
  background: var(--bg);
  border: 1px solid var(--hairline);
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fmt-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}
.fmt-overlay-header h3 {
  margin: 0;
  font-size: var(--t-base);
}
.fmt-overlay-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.fmt-overlay-close:hover { color: var(--fg); }
.fmt-overlay-search {
  margin: 12px 20px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--fg);
  outline: none;
}
.fmt-overlay-search:focus { border-color: var(--accent); }
.fmt-overlay-body {
  padding: 0 20px 20px;
  overflow-y: auto;
}
.fmt-section-label {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
  margin: 26px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
/* First section ("Full analysis") needs no divider above it. */
.fmt-section-label:first-child {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}
.fmt-table td {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  word-spacing: 6px;
  text-transform: uppercase;
  line-height: 1.8;
}
.fmt-table tr.is-hidden { display: none; }
.quickdrop-zone .anr-audio-modes {
  padding: 0;
  border-top: 1px solid var(--hairline);
  gap: 0;
  transition: border-color 0.2s ease;
}
.quickdrop-zone .anr-audio-modes .anr-btn {
  flex: 1 1 0;
  margin: 0;
  border: none;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  padding: 11px 8px;
  min-width: 0;
}
.quickdrop-zone .anr-audio-modes .anr-btn:hover { border-right-color: var(--fg); }
.quickdrop-zone .anr-audio-modes .anr-btn:last-child { border-right: none; }

@media (max-width: 420px) {
  .site-nav { padding-left: 14px; padding-right: 14px; }
  .quickdrop { padding-left: 14px; padding-right: 14px; }
  .quickdrop-grid { gap: 12px; }
  .quickdrop-zone .anr-dropzone-inner { padding: 18px 10px; }
  .quickdrop-zone .anr-dropzone-inner strong { font-size: 14px; }
  .quickdrop-zone .anr-drop-icon { font-size: 20px; margin-bottom: 4px; }
}

/* ---------- PAGE-WIDE DROP OVERLAY (until first file) ---------- */
.page-drop {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: anr-fade-in 0.12s ease;
}
.page-drop[hidden] { display: none; }
.page-drop::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 4px dashed var(--accent);
  pointer-events: none;
}
.page-drop-inner {
  text-align: center;
  padding: 24px;
  max-width: 90vw;
  position: relative;
}
.page-drop-icon {
  font-family: var(--font-mono);
  font-size: clamp(56px, 12vw, 140px);
  font-weight: 300;
  line-height: 1;
  display: block;
  color: var(--accent);
  margin-bottom: 4px;
}
.page-drop-inner strong {
  display: block;
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0;
  color: var(--fg);
}
.page-drop-inner p {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.6vw, 14px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 8px 0 0;
}
@keyframes anr-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- META-COLUMN SLOTS ---------- */
.section-meta-slot { margin-top: 18px; }
.section-meta-slot:empty { display: none; }
.section-meta-slot .anr-card { margin: 0; }
.section-meta-slot .anr-controls {
  padding: 10px 12px;
  gap: 6px;
  flex-direction: column;
  align-items: stretch;
  border-bottom: 1px solid var(--hairline);
}
.section-meta-slot .anr-control {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.section-meta-slot .anr-control select,
.section-meta-slot .anr-dropdown {
  width: 100%;
}
.section-meta-slot .anr-control .anr-btn {
  width: 100%;
}
.section-meta-slot .anr-ocr-text { font-size: 12px; max-height: 220px; margin-top: 14px; }
.section-meta-slot .anr-histogram { height: 160px; }

.section-meta-preview {
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: 6px;
}
.anr-preview-img-wrap {
  position: relative;
  overflow: hidden;
}
.anr-checkerboard {
  background: repeating-conic-gradient(#d0d0d0 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}
.section-meta-preview img {
  display: block;
  width: 100%;
  max-height: clamp(160px, 28vh, 260px);
  object-fit: contain;
  background: #0a0a0a;
  cursor: zoom-in;
}
.section-meta-preview-caption {
  margin: 8px 4px 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  word-break: break-word;
  line-height: 1.4;
}
.anr-raw-warning {
  margin: 6px 4px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent, #e60023);
  letter-spacing: 0.04em;
  line-height: 1.4;
  opacity: 0.8;
}

/* On smaller viewports, meta column already drops below section-content; reorder so
   the preview thumb stays compact and the OCR/histogram sit clearly below it */
@media (max-width: 900px) {
  .section-meta-slot { margin-top: 16px; }
  .section-meta-preview img { max-height: 280px; }
  #videoPreview { display: none; }
}
@media (max-width: 600px) {
  .section-meta { display: block; }
  .section-meta-slot { max-width: 100%; }
}

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  padding-bottom: 5vh;
  cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
}
.lightbox:not([hidden]) { display: flex; }
.lightbox img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-close {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 10;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 40px;
  min-width: 40px;
}
.lightbox-close:hover { background: #fff; color: #0a0a0a; }
.lightbox-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.lightbox-img-wrap {
  position: relative;
}
.lightbox-peaking {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.lightbox-peaking[hidden] { display: none; }
.lightbox-focus-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.lightbox-focus-map[hidden] { display: none; }
.lightbox-focus-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent, #e60023);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
}
.lightbox-focus-dot[hidden] { display: none; }
.lightbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.lightbox-toolbar:empty { display: none; }
.lightbox-tool-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.8);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.lightbox-tool-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.lightbox-tool-btn.is-active {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}
.lightbox-meta {
  position: fixed;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 12px;
  background: rgba(0,0,0,0.4);
}

/* ---------- UNKNOWN FILE RESULTS ---------- */
.anr-unknown-results:not([hidden]) {
  padding: 36px var(--pad-x) 40px;
  border-bottom: 1px solid var(--hairline);
  max-width: 1440px;
  margin: 0 auto;
  background: var(--bg);
  scroll-margin-top: 60px;
}
.anr-unknown-dump {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 14px;
  white-space: pre;
  overflow-x: auto;
  margin: 14px 0;
  line-height: 1.55;
}

/* ---------- NAV FLASH (E6) ---------- */
@keyframes anr-nav-flash {
  0%   { background: var(--accent); color: var(--accent-fg); }
  100% { background: transparent;   color: var(--fg); }
}
.nav-link.is-flash {
  animation: anr-nav-flash 0.6s ease-out;
}
.nav-link.is-active.is-flash {
  animation: none;
}

/* ---------- COLOR PICKER TOOLTIP (A7) ---------- */
.anr-picker-tooltip {
  position: absolute;
  z-index: 10;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.anr-picker-tooltip[hidden] { display: none; }
.anr-picker-tooltip.is-copied::after {
  content: " copied";
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.anr-picker-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}

/* ---------- FOCUS MAP OVERLAY ---------- */
.anr-focus-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.anr-focus-overlay[hidden] { display: none; }



/* ---------- DARK MODE (E1) ---------- */
:root[data-theme="dark"] {
  --bg:        #0a0a0a;
  --fg:        #e8e8e8;
  --muted:     #888;
  --hairline:  #333;
  --rule:      #262626;
  --surface:   #141414;
  --accent:    #ff3347;
  --accent-fg: #ffffff;
}
:root[data-theme="dark"] .page-drop {
  background: rgba(10, 10, 10, 0.95);
}
:root[data-theme="dark"] .anr-swatch span {
  background: var(--bg);
}

.dark-toggle {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
}
.dark-toggle:hover {
  background: var(--fg);
  color: var(--bg);
}

/* ---------- CUSTOM DROPDOWN ---------- */
.anr-dropdown {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  user-select: none;
}
.anr-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--hairline);
  cursor: pointer;
  white-space: nowrap;
  min-width: 160px;
}
.anr-dropdown-trigger::after {
  content: '\25BE';
  font-size: 0.75em;
  opacity: 0.5;
}
.anr-dropdown-trigger.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.anr-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-top: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.anr-dropdown.is-open .anr-dropdown-list { display: block; }
.anr-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.anr-dropdown-item:hover { background: var(--hairline); }
.anr-dropdown-item.is-selected { background: var(--fg); color: var(--bg); }
.anr-dropdown-item-size {
  margin-left: auto;
  color: rgba(128,128,128,0.7);
  font-size: 0.85em;
}
.anr-dropdown-item.is-selected .anr-dropdown-item-size {
  color: rgba(128,128,128,0.9);
}

/* ---------- MOBILE TOUCH-TARGET POLISH ---------- */
@media (max-width: 700px) {
  .anr-btn, .anr-fs-btn { min-height: 40px; padding: 10px 14px; }
  .anr-toggle button { min-height: 36px; padding: 8px 12px; }
  .anr-control select { min-height: 36px; padding: 6px 8px; }
  /* Tighten the nav so home + 3 links + search fit on narrow phones (~360px)
     without the search button overflowing off the right edge. */
  .site-nav { display: flex; padding-left: 14px; padding-right: 14px; }
  .nav-link { flex: 1 1 0; padding: 14px 4px; gap: 6px; min-width: 0; }
  .site-about-link { min-height: 36px; display: inline-flex; align-items: center; }
  .nav-search {}
  .nav-search.is-open .nav-search-btn { display: block; }
  .nav-search.is-open .nav-search-input,
  .nav-search.is-open .nav-search-arrow { display: none; }
  /* About page: drop the home + search controls on mobile so the four section
     links get the full nav width. (The nav is a sibling of main.about-page, so
     :has() on the body is used to detect the page.) */
  body:has(.about-page) .nav-home,
  body:has(.about-page) .nav-search { display: none; }
  /* Hiding home + search removes the 48px-tall buttons that otherwise set the
     bar's height, so the links alone would make the nav noticeably shorter.
     Pad the links to keep the about-page nav the same height as the main one. */
  body:has(.about-page) .nav-link { padding-top: 16px; padding-bottom: 16px; }
}

/* ---------- Confirmation modal (mobile upload guard) ---------- */
/* Built in app.js by anrConfirm(). Swiss styling: flat bg, single hard border,
   monospace kicker/buttons, accent on the primary action. */
.anr-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.anr-modal.is-open { opacity: 1; }
.anr-modal-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 24px;
  transform: translateY(8px);
  transition: transform 0.18s ease;
}
.anr-modal.is-open .anr-modal-card { transform: none; }
.anr-modal-kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.anr-modal-title {
  margin: 0 0 22px;
  font-size: var(--t-body);
  line-height: 1.35;
  color: var(--fg);
}
.anr-modal-actions { display: flex; gap: 10px; }
.anr-modal-btn {
  flex: 1;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--fg);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.anr-modal-cancel:hover { background: var(--surface); }
.anr-modal-ok { background: var(--fg); color: var(--bg); }
.anr-modal-ok:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Scene change detection (video) ---------- */
.anr-scene-timeline {
  position: relative;
  height: 24px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.anr-scene-marker {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: var(--accent);
  cursor: pointer;
}
.anr-scene-details { margin-top: 4px; }
.anr-scene-details summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 6px 0;
}
.anr-scene-details summary:hover { color: var(--fg); }
.anr-scene-details[open] summary { color: var(--fg); margin-bottom: 10px; }
.anr-scene-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.anr-scene-thumb { cursor: pointer; text-align: center; }
.anr-scene-thumb img {
  width: 160px;
  height: 90px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--hairline);
}
.anr-scene-thumb:hover img { border-color: var(--accent); }
.anr-scene-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* ---------- UTILITY / REFACTOR CLASSES ---------- */
.is-hidden { display: none !important; }

/* Scrollable <pre> blocks (formerly inline max-height/overflow) */
.anr-pre-scroll    { max-height: 500px; overflow: auto; }
.anr-pre-scroll-sm { max-height: 300px; overflow: auto; }

/* Collapsible file tree (folders + archives) */
.anr-tree {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--rule);
}
.anr-tree-dir > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--rule);
  user-select: none;
}
.anr-tree-dir > summary::-webkit-details-marker { display: none; }
.anr-tree-dir > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  transition: transform 0.12s ease;
}
.anr-tree-dir[open] > summary::before { transform: rotate(90deg); }
.anr-tree-summary:hover { background: var(--surface); }
.anr-tree-children { padding-left: 16px; border-left: 1px solid var(--rule); margin-left: 14px; }
.anr-tree-file {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--rule);
}
.anr-tree-file:hover { background: var(--surface); }
.anr-tree-name { word-break: break-all; }
.anr-tree-meta { color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* SVG inspector */
.anr-svg-preview {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 12px;
  overflow: auto;
  max-height: 500px;
  background: repeating-conic-gradient(var(--surface) 0% 25%, var(--bg) 0% 50%) 50% / 16px 16px;
}
.anr-svg-error { color: var(--accent); }
.anr-svg-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.anr-svg-swatch-item { text-align: center; }
.anr-svg-swatch {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  cursor: pointer;
}
.anr-svg-swatch-label {
  font-size: 10px;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

/* STL 3D viewer */
.anr-stl-viewport {
  width: 100%;
  height: 440px;
  border: 1px solid var(--hairline);
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
}
.anr-stl-viewport:fullscreen { height: 100vh; }
.anr-stl-canvas { display: block; touch-action: none; cursor: grab; }
.anr-stl-canvas:active { cursor: grabbing; }

/* XLSX spreadsheet viewer */
.anr-xlsx-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.anr-xlsx-tab {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 12px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  cursor: pointer;
  color: var(--fg);
}
.anr-xlsx-tab.is-active { background: var(--fg); color: var(--bg); }
.anr-xlsx-table-wrap { overflow: auto; max-height: 540px; border: 1px solid var(--hairline); }
.anr-xlsx-table { border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); }
.anr-xlsx-table th, .anr-xlsx-table td {
  border: 1px solid var(--rule);
  padding: 3px 8px;
  text-align: left;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anr-xlsx-table th { background: var(--surface); position: sticky; top: 0; font-weight: 600; }
.anr-xlsx-rownum, .anr-xlsx-corner { background: var(--surface); position: sticky; left: 0; color: var(--muted); }

/* EPUB reader */
.anr-epub-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.anr-epub-viewport {
  border: 1px solid var(--rule);
  padding: 24px;
  max-height: 600px;
  overflow: auto;
  line-height: 1.6;
}
.anr-epub-content img { max-width: 100%; height: auto; }
.anr-epub-content h1, .anr-epub-content h2, .anr-epub-content h3 { margin: 1em 0 0.4em; }
.anr-epub-content p { margin: 0 0 0.8em; }

/* PPTX slide viewer */
.anr-pptx-slide {
  position: relative;
  border: 1px solid var(--hairline);
  background: var(--bg);
  margin: 0 0 18px;
  padding: 32px 36px;
  overflow: hidden;
}
.anr-pptx-num {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.anr-pptx-title { font-size: clamp(20px, 3vw, 30px); font-weight: 600; margin-bottom: 14px; }
.anr-pptx-title p { margin: 0 0 4px; }
.anr-pptx-body { font-size: 15px; line-height: 1.5; }
.anr-pptx-body p { margin: 0 0 6px; }
.anr-pptx-img { max-width: 60%; height: auto; margin: 10px 0; border: 1px solid var(--rule); }
.anr-pptx-notes { margin-top: 14px; font-size: 13px; color: var(--muted); }
.anr-pptx-notes summary { cursor: pointer; }

/* CSV / TSV data table */
.anr-table-wrap {
  overflow: auto;
  max-height: 500px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.anr-table-data {
  width: auto;
  min-width: 100%;
  white-space: nowrap;
}
.anr-table-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

/* JSON / XML syntax highlighting */
.anr-syn-key     { font-weight: bold; }
.anr-syn-str     { color: #5a9e5a; }
.anr-syn-num     { color: #5b9fd6; }
.anr-syn-kw      { color: #e89a2e; font-weight: bold; }
.anr-syn-comment { color: #888; }
.anr-syn-tag     { color: #5b9fd6; font-weight: bold; }
.anr-syn-attr    { color: #e89a2e; }
.anr-syn-error   { color: #e55; margin: 4px 0; }
.anr-fmt-summary { cursor: pointer; font-weight: bold; margin: 8px 0; }
.anr-hash-out    { word-break: break-all; font-size: 12px; margin: 4px 0 0; }

/* Waveform selection overlay */
.anr-wave-wrap { position: relative; display: inline-block; width: 100%; }
.anr-wave-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: transparent;
}
.anr-sel-controls { gap: 8px; margin-top: 6px; }
.anr-sel-label { font-size: 0.85em; opacity: 0.8; }
.anr-btn-sm { font-size: 0.82em; padding: 3px 10px; }

/* Hidden video probe for off-screen frame capture. Kept renderable (NOT
   display:none) and in the DOM so the browser gives it a decode surface. iOS
   Safari often won't decode something this small/hidden; video.js handles that
   by falling back to a visible player. */
.anr-video-probe {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}

/* ---------- MOBILE LAYOUT TUNING ---------- */
@media (max-width: 700px) {
  /* Result content lines up with the dropzones (14px from the screen edge)
     instead of being pushed in by the section-content box. The cards are
     transparent, so the section-content frame is what we pull in. */
  .section .grid { padding-left: 14px; padding-right: 14px; }
  /* The frame sits 14px from the screen edge (via the grid padding); a small
     inner gutter keeps text from touching its border. */
  .section-content {
    padding-left: 14px;
    padding-right: 14px;
  }
  .anr-unknown-results:not([hidden]) { padding-left: 14px; padding-right: 14px; }

  /* Spectrogram settings: pack into a tidy 2-up grid so they take far less
     vertical space. Each control's select/toggle/button fills its cell. */
  .anr-spec-card .anr-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    align-items: center;
  }
  .anr-spec-card .anr-control { min-width: 0; }
  .anr-spec-card .anr-control > label { white-space: nowrap; flex: 0 0 auto; }
  /* select flexes into the space left after the label — no fixed width,
     so the label and select never overlap in a narrow cell. */
  .anr-spec-card .anr-control select { flex: 1 1 auto; min-width: 0; }
  .anr-spec-card .anr-control .anr-toggle { display: flex; flex: 1 1 auto; }
  .anr-spec-card .anr-control .anr-toggle button { flex: 1 1 auto; }
  /* Axis (LOG/LINEAR) is the widest control — give it its own full-width row
     and keep the toggle its natural size so it can't overflow into the FFT cell. */
  .anr-spec-card .anr-control:first-child { grid-column: 1 / -1; }
  .anr-spec-card .anr-control:first-child .anr-toggle { flex: 0 0 auto; }
  .anr-spec-card .anr-control .anr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
  }
  /* Play/pause spans the full width on mobile so it reads as part of the
     control block instead of a lone floating button. */
  .anr-spec-card .anr-spec-play { width: 100%; }
}

/* ---------- GRABBABLE PLAYHEAD + SPECTROGRAM TRANSPORT ---------- */
/* A wider invisible hit-area around the 1px line so it's easy to grab and drag;
   the visible line stays 1px via the ::before. */
.anr-playhead.is-grabbable {
  width: 13px;
  margin-left: -6px;
  background: transparent;
  pointer-events: auto;
  cursor: col-resize;
}
.anr-playhead.is-grabbable::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #fff;
}

.anr-spec-transport {
  margin-top: 10px;
}
.anr-spec-play { min-width: 120px; }

/* ---------- HISTOGRAM AXIS MARKINGS ---------- */
.anr-hist-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.anr-hist-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 6px 0 0;
}