:root {
  --bg: #f3f1ec; --paper: #fffdf9; --panel: #ffffff; --ink: #1b1d22; --ink-2: #3a3e46; --muted: #6b7079;
  --line: #e4e0d8; --line-2: #d6d1c6;
  --navy: #17325c; --navy-2: #24467a; --navy-soft: #e8eef8;
  --ok: #24724a; --ok-soft: #e4f2ea; --warn: #8f5600; --warn-soft: #fcefd6; --bad: #a23838; --bad-soft: #f8e3e3;
  --sugg: #fff1c2; --sugg-line: #e0b520; --chg: #dff1e6; --chg-line: #4c9f70; --flag: #f9dede; --flag-line: #c45252;
  --radius: 12px; --shadow: 0 1px 2px rgba(20, 24, 31, .05), 0 4px 16px rgba(20, 24, 31, .04);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--navy-2); text-decoration: none; }
button, select, input, textarea { font: inherit; color: inherit; }
kbd { font: 11px var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: #fff; color: var(--ink-2); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--line-2); background: var(--panel);
       padding: 7px 14px; border-radius: 9px; font-weight: 500; line-height: 1.2; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: #f8f6f1; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-2); }
.btn.primary:disabled { opacity: .45; cursor: default; }
.btn.sm { padding: 4px 10px; font-size: 13px; border-radius: 7px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: rgba(0, 0, 0, .05); }
.btn.ok { color: var(--ok); } .btn.bad { color: var(--bad); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }

/* top bar */
.top { display: flex; align-items: center; gap: 28px; padding: 0 28px; height: 56px; background: var(--navy); color: #fff;
       position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: .01em; color: #fff; white-space: nowrap; }
.brand .wordmark { height: 28px; width: auto; display: block; }
.brand .tile { display: none; height: 34px; width: 34px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.brand { font: 650 18px var(--serif); letter-spacing: .01em; }
.brand .tag { font: 400 12px var(--sans); color: rgba(255, 255, 255, .6); margin-left: 4px; padding-left: 12px;
              border-left: 1px solid rgba(255, 255, 255, .25); }
@media (max-width: 1100px) { .brand .tag { display: none; } }
.top nav { display: flex; gap: 4px; }
.top nav a { color: rgba(255, 255, 255, .72); padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
.top nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.top nav a.on { color: #fff; background: rgba(255, 255, 255, .14); }
.plan { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: rgba(242, 194, 48, .18);
        color: #f2c230; white-space: nowrap; }
.plan.paid { background: rgba(255, 255, 255, .12); color: #fff; }
.card.warn { background: #fff8e1; border-color: #f2c230; color: #5c4a00; margin: 0 0 14px; padding: 12px 16px; font-size: 14px; }
.edithint { font: 12px var(--sans); color: var(--muted); margin: 6px 0 0 36px; }
/* Hidden means hidden: a class that sets display (flex, block…) must never bring back an element
   the page has hidden (the "Paused" cover and the waiting bar showed while recording because of this). */
[hidden] { display: none !important; }
.exports .row { display: flex; gap: 8px; justify-content: flex-end; }
.exportnote { font-size: 12px; color: var(--muted); text-align: right; margin-top: 4px; }
.local { margin-left: auto; font-size: 12px; color: #cfe6d8; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.local::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5fd08f; }

main { max-width: 1320px; margin: 0 auto; padding: 28px; }
h1 { font-size: 24px; font-weight: 650; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 650; margin: 0 0 10px; }
.sub { color: var(--muted); margin: 0 0 22px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

/* hearings list */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.hcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
         display: flex; flex-direction: column; gap: 10px; color: var(--ink); transition: border-color .12s, transform .12s; }
.hcard:hover { border-color: var(--line-2); transform: translateY(-1px); }
.hcard .title { font-weight: 600; font-size: 16px; line-height: 1.3; }
.hcard .meta { display: flex; gap: 10px; color: var(--muted); font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 99px;
        background: var(--navy-soft); color: var(--navy-2); width: fit-content; }
.chip.ready { background: var(--ok-soft); color: var(--ok); } .chip.failed { background: var(--bad-soft); color: var(--bad); }
.chip.live { background: var(--bad-soft); color: var(--bad); }
.mini { height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; }
.mini > div { height: 100%; background: var(--navy-2); }
.empty { text-align: center; padding: 56px 24px; }
.empty .big { font: 600 20px var(--serif); margin-bottom: 6px; }
.empty .row { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }

/* setup */
.setup { display: grid; grid-template-columns: minmax(0, 960px); gap: 22px; align-items: start; }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: none; padding-top: 0; }
.step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center;
           font-weight: 650; font-size: 13px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.fields .wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.field input[type=text], .field input[type=date], .field select, .field textarea {
  border: 1px solid var(--line-2); border-radius: 9px; padding: 9px 11px; background: #fff; font-weight: 400; font-size: 14px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--navy-soft); border-color: var(--navy-2); }
.field textarea { min-height: 104px; font: 13px/1.5 var(--mono); resize: vertical; }
.drop { display: block; border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 28px; text-align: center; cursor: pointer; background: #fcfbf8;
        transition: border-color .12s, background .12s; }
.drop:hover, .drop.over { border-color: var(--navy-2); background: var(--navy-soft); }
.drop .big { font-weight: 600; } .drop.has { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg label { padding: 8px 14px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-2); border-right: 1px solid var(--line-2); }
.seg label:last-child { border-right: none; }
.seg input { display: none; }
.seg label:has(input:checked) { background: var(--navy); color: #fff; }
.toggle { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
          margin-bottom: 10px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); }
.toggle b { display: block; font-weight: 600; } .toggle span { color: var(--muted); font-size: 13px; }
.toggle.off { opacity: .55; cursor: default; }
.aside h2 { margin-top: 0; } .aside p { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.example { font: 12px/1.5 var(--mono); background: #f7f5f0; border: 1px solid var(--line); border-radius: 8px; padding: 10px; white-space: pre-wrap; }

/* processing */
.steps { list-style: none; margin: 18px 0 6px; padding: 0; }
.steps li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--muted); }
.steps li .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 11px; }
.steps li.done { color: var(--ink-2); } .steps li.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps li.now { color: var(--ink); font-weight: 600; }
.steps li.now .dot { border-color: var(--navy-2); border-top-color: transparent; animation: spin .9s linear infinite; }
.steps li.skip { text-decoration: line-through; opacity: .5; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { color: var(--bad); background: var(--bad-soft); padding: 12px 14px; border-radius: 9px; }

/* live */
.livehead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.recdot { width: 12px; height: 12px; border-radius: 50%; background: var(--bad); animation: pulse 1.3s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.clock { font: 600 28px var(--mono); letter-spacing: .02em; }
.meter { width: 160px; height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.meter > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), #8fd16b 70%, #e0b520); transition: width .08s; }
.conn { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 99px; }
.conn.ok { background: var(--ok-soft); color: var(--ok); } .conn.lost { background: var(--warn-soft); color: var(--warn); }

/* document (shared by live draft and review) */
.paper { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow);
         padding: 48px 64px 64px; font: 17px/1.75 var(--serif); color: var(--ink); }
.paper .dochead { text-align: center; margin-bottom: 30px; }
.paper .dochead .t { font: 700 15px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.paper .dochead .d { color: var(--muted); font: 13px var(--sans); }
.para { position: relative; margin: 0 0 14px; padding: 4px 8px 4px 0; text-indent: 2.2em; border-radius: 6px; transition: background .2s; }
.para .lbl { font: 650 14px var(--sans); letter-spacing: .02em; text-indent: 0; cursor: pointer; border-bottom: 1px dashed transparent; }
.para .lbl:hover { border-bottom-color: var(--muted); }
.para .ts { position: absolute; left: -58px; top: 6px; text-indent: 0; font: 11px var(--mono); color: var(--muted); background: none;
            border: none; cursor: pointer; padding: 0; opacity: 0; }
.para:hover .ts, .para.playing .ts { opacity: 1; color: var(--navy-2); }
.para.playing { background: #eef3fb; }
.para.focus { background: #fff8e3; }
.para .body[contenteditable=true] { outline: 2px solid var(--navy-soft); border-radius: 4px; background: #fff; }
.para .edit { position: absolute; right: -36px; top: 4px; opacity: 0; text-indent: 0; }
.para:hover .edit { opacity: 1; }
mark { border-radius: 3px; padding: 0 1px; cursor: pointer; color: inherit; }
mark.sugg { background: var(--sugg); box-shadow: inset 0 -2px 0 var(--sugg-line); }
mark.chg { background: var(--chg); box-shadow: inset 0 -2px 0 var(--chg-line); }
mark.tidy { background: transparent; box-shadow: inset 0 -2px 0 #9aa7bd; color: var(--muted); }
mark.cur { outline: 2px solid var(--navy-2); outline-offset: 1px; }
.flagpin { display: inline-block; text-indent: 0; font: 600 11px var(--sans); color: var(--flag-line); background: var(--flag);
           border-radius: 99px; padding: 0 8px; margin: 0 4px; cursor: pointer; vertical-align: 1px; }
.flagpin.cur { outline: 2px solid var(--flag-line); }

/* review layout */
.review { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; padding-bottom: 90px; }
main:has(.review) { padding-bottom: 80px; }
.revhead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.revhead .grow { flex: 1; }
.queue { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 170px); overflow-y: auto;
         padding-bottom: 8px; }
.progress { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.progress .mini { margin: 8px 0 10px; height: 6px; }
.progress .mini > div { background: var(--ok); }
.counts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; }
.counts button { all: unset; cursor: pointer; display: flex; justify-content: space-between; color: var(--ink-2); padding: 2px 0; }
.counts button b { font-weight: 650; } .counts button.zero b { color: var(--ok); }
.counts button.on { color: var(--navy-2); font-weight: 600; }
.qcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.qcard .kind { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.qcard .kind.sugg { color: #a67c00; } .qcard .kind.chg { color: var(--ok); } .qcard .kind.flag { color: var(--flag-line); }
.qcard .kind.spk { color: var(--navy-2); } .qcard .kind.tidy { color: #5b6b85; }
.qcard .bulk { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, #e6e1d6); font-size: 13px; color: var(--muted);
               display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.diff { font: 16px/1.6 var(--serif); }
.diff .was { text-decoration: line-through; color: var(--bad); }
.diff .now { color: var(--ok); font-weight: 600; }
.why { color: var(--muted); font-size: 13px; margin-top: 6px; }
.qactions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.qnav { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.quote { font: 15px/1.6 var(--serif); color: var(--ink-2); border-left: 3px solid var(--line-2); padding-left: 10px; margin: 8px 0; }
.qcard select { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; background: #fff; max-width: 100%; }
.keys { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.alldone { text-align: center; padding: 26px 16px; }
.alldone .big { font: 600 18px var(--serif); color: var(--ok); }

/* player */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--panel); border-top: 1px solid var(--line);
          box-shadow: 0 -4px 16px rgba(20, 24, 31, .05); }
.player .in { max-width: 1320px; margin: 0 auto; padding: 10px 28px; display: flex; align-items: center; gap: 14px; }
.player .pp { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; border: none; cursor: pointer; font-size: 15px; }
.player .time { font: 13px var(--mono); color: var(--ink-2); min-width: 110px; }
/* The position bar: played in navy, the rest of the recording in a light tint, and the playhead is the
   pen nib from the Shelton mark, writing on the line. --p (played share) is set by paintSeek(). */
.player input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 30px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; --p: 0%; }
.player input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--navy) 0 var(--p), #c9d4e6 var(--p) 100%); }
.player input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 22px; margin-top: -19px;
  border: 0; background: url(nib.svg) center bottom / contain no-repeat; }
.player input[type=range]::-moz-range-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--navy) 0 var(--p), #c9d4e6 var(--p) 100%); }
.player input[type=range]::-moz-range-thumb { width: 20px; height: 22px; border: 0; border-radius: 0; transform: translateY(-8px);
  background: url(nib.svg) center bottom / contain no-repeat; }
.player input[type=range]:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 4px; border-radius: 4px; }
.player select { border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 6px; background: #fff; }
.player .follow { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* popover for inline marks */
.pop { position: absolute; z-index: 30; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 8px 28px rgba(20, 24, 31, .16);
       padding: 12px; width: 300px; font: 14px/1.45 var(--sans); }
.toast { position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 9px 16px;
         border-radius: 9px; font-size: 14px; z-index: 40; }

@media (max-width: 860px) {
  .top { gap: 12px; padding: 0 16px; } .top nav a { padding: 6px 8px; } .local { font-size: 0; } .local::before { width: 9px; height: 9px; }
  .brand .wordmark { display: none; } .brand .tile { display: block; } .top nav { min-width: 0; overflow-x: auto; scrollbar-width: none; } .plan, .local, .brand { flex-shrink: 0; } .top nav .long { display: none; }
  main { padding: 20px 16px; } .player .in { padding: 10px 16px; flex-wrap: wrap; } .player .follow { display: none; }
}
@media (max-width: 1000px) {
  .review, .setup { grid-template-columns: 1fr; } .queue { position: static; max-height: none; }
  .paper { padding: 28px 22px; } .para .ts { display: none; } .fields { grid-template-columns: 1fr; }
}

/* --- live session: three panes --------------------------------------------------------- */
.livebar { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
           padding: 10px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.livebar .grow { flex: 1; min-width: 0; } .livebar .lt { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr) minmax(0, 1.25fr); gap: 12px; height: calc(100vh - 56px - 56px - 96px); min-height: 420px; }
.lpane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 0; }
.lpane.preview { background: var(--paper); }
.lhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lhead b { white-space: nowrap; }
.lhead span { color: var(--muted); font-size: 12px; }
.lbody { padding: 12px 14px; overflow-y: auto; flex: 1; min-height: 0; }
.dpara { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.dpartial { margin: 0 0 10px; font-size: 14px; color: var(--muted); line-height: 1.55; font-style: italic; }
.dpartial b { font-style: normal; font-size: 12px; letter-spacing: .02em; margin-right: 4px; }
.dpara .ts, .pchunk .ts { font: 11px var(--mono); color: var(--muted); margin-right: 8px; }
.dt.typing::after { content: "▍"; color: var(--navy-2); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.source video { width: 100%; border-radius: 8px; background: #000; aspect-ratio: 16 / 9; }
.bigmeter { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 14px 0; }
.bigmeter > div { height: 100%; width: 0; background: linear-gradient(90deg, #4c9f70, #f2c230 75%, #c45252); transition: width .1s; }
.notice { background: #fff8e1; border: 1px solid #f2c230; color: #5c4a00; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 8px; }
.lstats { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; margin: 14px 0 0; }
.lstats dt { color: var(--muted); } .lstats dd { margin: 0; font-variant-numeric: tabular-nums; }
.pchunk { font: 16px/1.75 var(--serif); margin: 0 0 14px; position: relative; }
.pchunk .checking { font: 11px var(--sans); color: var(--muted); margin-left: 6px; }
.pchunk .addmiss { font: 11px var(--sans); color: var(--muted); background: none; border: 1px dashed var(--line-2); border-radius: 6px;
                   padding: 0 6px; margin-left: 6px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.pchunk:hover .addmiss { opacity: 1; }
.ptext mark.umark { background: #e3e8ff; box-shadow: inset 0 -2px 0 #5468c4; }
.ptext mark.unclear { background: var(--flag); box-shadow: inset 0 -2px 0 var(--flag-line); }
.missmark::after { content: "⋯ missing"; font: 600 10px var(--sans); color: #fff; background: #5468c4; border-radius: 4px; padding: 1px 4px;
                   margin: 0 3px; vertical-align: 2px; cursor: pointer; }
.flagmark::after { content: "⚑ marked"; font: 600 10px var(--sans); color: #fff; background: #5468c4; border-radius: 4px; padding: 1px 4px;
                   margin: 0 3px; vertical-align: 2px; cursor: pointer; }
.dpara mark.umark { background: #e3e8ff; box-shadow: inset 0 -2px 0 #5468c4; color: inherit; }
.missmark.found::after { content: "⋯ found more"; background: var(--chg-line); }
.missmark.none::after { content: "⋯ listen later"; background: var(--flag-line); }
.selbar { position: absolute; z-index: 30; display: flex; gap: 4px; background: var(--ink); border-radius: 8px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.selbar button { background: none; border: 0; color: #fff; font: 13px var(--sans); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.selbar button:hover { background: rgba(255,255,255,.14); }
.pop .diff { margin: 6px 0; }
.ltabs { display: none; }
@media (max-width: 1100px) {
  .ltabs { display: flex; gap: 4px; margin-bottom: 8px; }
  .ltabs button { flex: 1; padding: 8px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 8px; font: 500 14px var(--sans); cursor: pointer; }
  .ltabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
  .live3 { grid-template-columns: 1fr; height: calc(100vh - 56px - 56px - 140px); }
  .live3 .lpane { display: none; }
  .live3[data-show="draft"] .draft, .live3[data-show="source"] .source, .live3[data-show="preview"] .preview { display: flex; }
  .pchunk .addmiss { opacity: 1; }
}

/* people in this hearing (review panel) */
.people { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; }
.people summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; list-style: none; }
.people summary::before { content: "▸"; color: var(--muted); } .people[open] summary::before { content: "▾"; }
.people > p { margin: 6px 0 8px; }
.prow { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.prow .pmeta { font-size: 12px; color: var(--muted); white-space: nowrap; }
input.pname, #newperson { flex: 1; min-width: 0; font: 600 13px var(--sans); letter-spacing: .02em; padding: 5px 8px;
                          border: 1px solid var(--line-2); border-radius: 6px; background: #fff; color: var(--ink); }
input.pname:focus, #newperson:focus { outline: 2px solid var(--navy-soft); border-color: var(--navy-2); }
.prow.add #newperson { font-weight: 400; }
.qactions input.pname { max-width: 220px; }
.pop input.pname { width: 100%; margin-top: 8px; box-sizing: border-box; }

/* attendance sheet upload (setup, step 3) */
.attend { display: flex; gap: 12px; align-items: center; border: 1.5px dashed var(--line-2); border-radius: 10px; padding: 12px 14px;
          margin: 4px 0 14px; cursor: pointer; background: var(--panel); transition: border-color .12s, background .12s; }
.attend:hover, .attend.over { border-color: var(--navy-2); background: var(--navy-soft); }
.attend .aicon { font-size: 22px; color: var(--navy-2); }
.attend.busy { opacity: .7; cursor: progress; } .attend.done { border-color: var(--chg-line); border-style: solid; }
.attend.failed { border-color: var(--flag-line); } .attend.failed #attendmsg { color: var(--flag-line); }

/* voice library (settings) and picker (setup) */
.vlib { max-width: 960px; } .vlib h2 { margin-top: 0; }
.vperson { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: var(--paper); }
.vrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; } .vrow .grow { flex: 1; min-width: 200px; }
.vrow .field input { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; font: 13px var(--sans); }
.vperson .pname { max-width: 360px; }
.pill { font-size: 12px; padding: 2px 10px; border-radius: 99px; background: var(--line); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--chg); color: #23633f; } .pill.warn { background: var(--sugg); color: #6b5200; }
.vclips { margin: 6px 0; } .vclip { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vadd { border-top: 1px dashed var(--line-2); padding-top: 8px; }
.vnew { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 6px; } .vnew h3 { margin: 6px 0; font-size: 15px; }
.consent { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); margin: 8px 0 12px; }
.vpick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.vchip { font: 600 12px var(--sans); letter-spacing: .02em; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line-2);
         background: #fff; color: var(--ink-2); cursor: pointer; }
.vchip.on { background: var(--navy); border-color: var(--navy); color: #fff; } .vchip.on::before { content: "✓ "; }
.vchip.weak { border-style: dashed; } .vmanage { font-size: 12px; margin-left: 4px; }
.vchip.add { border-style: dashed; color: var(--navy-2); background: var(--panel); }
.vquick { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--paper); font-weight: 400; }
.vquick input:not([type]) , .vquick input[name^="vq_from"], .vquick input[name^="vq_to"] { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; font: 13px var(--sans); }
.vquick input[name="vq_label"] { min-width: 260px; } .vquick .consent { margin: 6px 0; }

/* takes (live) */
.seg.takes label { padding: 6px 12px; font-variant-numeric: tabular-nums; }
.takecustom { margin-top: 8px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; font: 13px var(--sans); width: 140px; }
.ltakes { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.ltakes .lt2 { display: flex; gap: 8px; align-items: baseline; } .ltakes .lt2 a { margin-left: auto; }
.ltake { display: flex; align-items: center; gap: 4px; font-size: 13px; margin: 4px 0; font-variant-numeric: tabular-nums; }
.ltake span { flex: 1; }
.towait { margin-left: 6px; font: 600 11px var(--sans); color: #6b5200; background: var(--sugg); border: 0; border-radius: 99px;
          padding: 1px 8px; cursor: pointer; } .towait:hover { box-shadow: inset 0 0 0 1px var(--sugg-line); }
/* Zeig on the free plan: shown as a paid feature */
body.no-zeig [data-nav="live"]::after, body.no-zeig a.btn[href="#/live"]::after { content: "Paid"; font: 600 10px var(--sans);
  letter-spacing: .04em; color: #17325c; background: #f2c230; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
.zeiglock { max-width: 720px; } .zeiglock h1 { margin-top: 10px; }
.zeigfeat { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); line-height: 1.8; }
/* Zeig (live mode) identity: the hourglass Z */
.top nav .zicon { height: 18px; width: 18px; vertical-align: -4px; margin-right: 6px; border-radius: 5px; }
.livebar .zbadge { height: 30px; width: 30px; border-radius: 8px; }
.zeigtitle { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.zeigtitle img { height: 40px; width: 40px; border-radius: 10px; }
.zeigtitle span { font: 700 28px Georgia, serif; letter-spacing: .06em; color: var(--navy); }
.zeigtitle small { font: 400 15px var(--sans); color: var(--muted); align-self: flex-end; margin-bottom: 5px; }
.zeiglock h2.zl { margin: 14px 0 6px; font-size: 20px; }

/* --- Zeig: the review screen, live ------------------------------------------------------- */
.live3.zeig { grid-template-columns: minmax(0, .9fr) minmax(300px, .72fr) minmax(0, 1.4fr); height: calc(100vh - 56px - 56px - 96px - 62px); }
.live3.zeig.folded { grid-template-columns: 46px minmax(300px, .72fr) minmax(0, 1.8fr); }
.zeig.folded .draft .lbody, .zeig.folded .draft .lhead b, .zeig.folded .draft .lhead span { display: none; }
.zeig .draft .lhead { position: relative; padding-right: 44px; } .zeig.folded .draft .lhead { padding: 10px 6px; }
.zeig .fold { position: absolute; right: 6px; top: 6px; }
main:has(.zeig) { padding-bottom: 80px; }
.zeig .source video { max-height: 170px; object-fit: contain; }
.zeig .queue { position: static; max-height: none; overflow: visible; margin-top: 14px; }
.zeig .queue .qcard, .zeig .queue .progress { box-shadow: none; }
.zeig .lpane.preview .lbody { padding: 0; }
.zeig .paper { border: 0; border-radius: 0; box-shadow: none; padding: 22px 46px 40px 66px; font-size: 16px; min-height: 100%; box-sizing: border-box; }
.zeig .paper .dochead { margin-bottom: 20px; }
.dspk { margin: 0 0 12px; }
.dwho { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.dwho b { font: 650 12px var(--sans); letter-spacing: .04em; color: var(--navy-2); text-transform: uppercase; }
.dwho .ts { font: 11px var(--mono); color: var(--muted); }
.dspk .dpara { margin: 0; }
mark.umark { background: #e3e8ff; box-shadow: inset 0 -2px 0 #5468c4; color: inherit; }
.hearback { font: 600 12px var(--sans); color: #17325c; background: #f2c230; border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.pop .scope { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; font-size: 13px; }
.pop .scope label { display: flex; gap: 6px; align-items: flex-start; }
.pop .diff input { font: inherit; }

/* readback: find what was said */
.readback { position: relative; display: flex; align-items: center; gap: 8px; }
.revhead .readback { flex: 0 1 320px; }
.zeig .readback { padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
#rbq { flex: 1; min-width: 0; font: 14px var(--sans); padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
#rbq:focus { outline: 2px solid var(--navy-soft); border-color: var(--navy-2); }
.rbres { position: absolute; top: 100%; left: 0; right: 0; z-index: 25; max-height: 50vh; overflow-y: auto; background: var(--panel);
         border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 8px 28px rgba(20, 24, 31, .16); padding: 6px; min-width: 300px; }
.rbres p { margin: 6px 8px; }
.rbhit { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-radius: 8px; cursor: pointer; font: 14px/1.45 var(--serif); }
.rbhit:hover { background: var(--navy-soft); }
.rbhit b { font: 650 11px var(--sans); letter-spacing: .03em; }
.rbhit .btn { flex-shrink: 0; font-variant-numeric: tabular-nums; }
mark.rbm { background: #ffe58a; cursor: inherit; }
::highlight(readback) { background-color: #ffe58a; }
@media (max-width: 1100px) {
  .live3.zeig, .live3.zeig.folded { grid-template-columns: 1fr; height: calc(100vh - 56px - 56px - 140px - 62px); }
  .zeig .fold { display: none; }
  .zeig.folded .draft .lbody, .zeig.folded .draft .lhead b, .zeig.folded .draft .lhead span { display: revert; }
  .zeig .paper { padding: 18px 18px 30px; } .hearback { order: 10; }
}
mark.spk { background: #e9e3ff; box-shadow: inset 0 -2px 0 #7a5cc4; }
.card.note { background: var(--navy-soft); border-color: var(--line-2); font-size: 14px; margin-bottom: 14px; }
.pop .saidby { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.pop .saidby select { flex: 1; border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 6px; background: #fff; font: 600 13px var(--sans); }

/* cloud usage & spend (superadmin) */
.usage { max-width: 960px; margin-bottom: 18px; }
.uhead { display: flex; align-items: center; gap: 10px; } .uhead h2 { margin: 0; } .uhead select { margin-left: auto; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 7px; }
.utable { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.utable th { text-align: left; font: 600 12px var(--sans); color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 8px; }
.utable td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.utable tfoot td { border-bottom: 0; }
.ubudget { width: 90px; padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 6px; font: 13px var(--sans); }
.ubar { width: 170px; } .ubar .mini { height: 6px; margin: 6px 0 2px; } .ubar .mini > div { background: var(--ok); }
.utable tr.lv-warn .ubar .mini > div { background: #e0b520; } .utable tr.lv-high .ubar .mini > div, .utable tr.lv-over .ubar .mini > div { background: var(--bad, #c45252); }
.notice.lv-high, .notice.lv-over { background: #fdecec; border-color: #c45252; color: #7a1f1f; }
[data-nav="settings"][data-alert="warn"]::after, [data-nav="settings"][data-alert="high"]::after, [data-nav="settings"][data-alert="over"]::after {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: 2px; background: #e0b520; }
[data-nav="settings"][data-alert="high"]::after, [data-nav="settings"][data-alert="over"]::after { background: #c45252; }
.urem { min-width: 210px; line-height: 1.45; } .ulow { color: #b03a3a; font-weight: 600; } .uerr { color: #8a5a00; }
/* the original script of a romanized passage (app/scripts.py), on its own line beneath the Latin text;
   "added by Shelton" when the engine wrote Latin letters and Shelton supplied the script */
.orig .origby { font: italic 11px var(--sans, system-ui); color: var(--muted); margin-left: 6px; }
.orig { display: block; font-size: 0.8em; line-height: 1.6; color: var(--muted); text-align: left; margin: 2px 0 4px;
  font-family: "Geeza Pro", "Noto Naskh Arabic", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Noto Sans CJK SC", serif; }
/* Zeig pause (centre console) */
.feedbox { position: relative; }
.source video.paused { filter: grayscale(1) brightness(.55); }
.pausedcover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff;
  font: 600 18px var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.pauserow { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.pauserow .muted { line-height: 1.3; }
.recdot.paused { animation: none; background: var(--muted); border-radius: 2px; }
/* Zeig: waiting for the hearing to start, and the notice once it has */
.waitbar, .startedbar { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; padding: 12px 16px; border-radius: 10px; }
.waitbar { background: #fff8e1; border: 1px solid #f2c230; }
.waitbar .muted { margin-top: 4px; }
.startedbar { background: var(--navy-soft); border: 1px solid #c9d4e6; justify-content: space-between; }
/* a paragraph by the person who spoke the one before: no name again; a faint handle on hover */
.para .lbl.cont { opacity: 0; margin-right: 6px; cursor: pointer; }
.para:hover .lbl.cont, .para .lbl.cont:focus { opacity: .45; }

/* Recordings: tiles or list */
.viewswitch { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; }
.viewswitch button { border: 0; background: transparent; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.viewswitch button.on { background: var(--navy); color: #fff; }
.rtable { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rtable th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #faf9f6; }
.rtable td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.rtable tr:last-child td { border-bottom: 0; }
.rtable td a:not(.btn) { color: var(--ink); font-weight: 600; }
/* Yes / Cancel */
.modalback { position: fixed; inset: 0; z-index: 50; background: rgba(20, 24, 31, .38); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--panel); border-radius: 14px; padding: 22px 24px; max-width: 440px; width: 100%; box-shadow: 0 18px 50px rgba(20, 24, 31, .25); }
.modal h2 { margin: 0 0 8px; font-size: 18px; }
.modal p { margin: 0; color: var(--ink-2); line-height: 1.5; }
/* Save, on the review page: the brand yellow, at the lower left of the player bar */
.savebtn { background: #f2c230; color: #17325c; border: 0; border-radius: 10px; padding: 10px 24px; margin-right: 6px;
  font: 700 15px var(--sans, system-ui); cursor: pointer; }
.savebtn:hover { background: #e9b81c; }
.delbtn { background: #c0392b; color: #fff; border: 0; border-radius: 10px; padding: 10px 20px; margin-right: 6px;
  font: 700 15px var(--sans, system-ui); cursor: pointer; }
.delbtn:hover { background: #a93226; }
.savebtn:disabled { opacity: .7; cursor: default; }
.pop .scope { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 2px; font-size: 13px; color: var(--ink-2); }
.pop .scope input { margin-right: 6px; }
/* right-click in the transcript */
.ctxmenu { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 24, 31, .18); padding: 4px; }
.ctxmenu button { display: block; border: 0; background: transparent; padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer;
  border-radius: 7px; color: var(--ink); white-space: nowrap; }
.ctxmenu button:hover { background: var(--navy-soft); }
.pop .askscope p { margin: 10px 0 8px; font-size: 14px; line-height: 1.4; max-width: 300px; }
.pop .joinprev { display: block; margin-top: 10px; padding: 0; border: 0; background: none; font: 600 13px var(--sans); color: var(--navy, #17325c); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pop .joinprev:hover { color: #000; }
.pop .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- header: who is using Shelton, nav badges --------------------------------------------------- */
.who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.who .wname { font-weight: 600; } .who .wgroup { color: rgba(255, 255, 255, .6); }
.who .viewas { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .65); }
.who select { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 7px; padding: 2px 6px; font-size: 12px; max-width: 220px; }
.who select option { color: var(--ink); }
.who .viewas.acting { color: #f2c230; font-weight: 600; } .who .viewas.acting select { border-color: #f2c230; }
.top nav a[data-count]:not([data-count=""])::after { content: attr(data-count); margin-left: 6px; font-size: 11px; font-weight: 700; background: #f2c230; color: var(--navy);
  border-radius: 99px; padding: 0 6px; }
@media (max-width: 1560px) { .local { font-size: 0; gap: 0; } .top nav .long { display: none; } .top { gap: 18px; } .brand .tag { display: none; } }
@media (max-width: 1100px) { .who .wgroup { display: none; } }
.back { display: inline-block; margin-bottom: 10px; font-size: 13px; }
.check { display: flex; align-items: baseline; gap: 8px; font-size: 14px; margin: 8px 0; cursor: pointer; }
.check input { accent-color: var(--navy); }
.mtag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--navy-soft); color: var(--navy-2); white-space: nowrap; }
h3 { font-size: 14px; font-weight: 650; margin: 0 0 8px; }

/* --- tools ----------------------------------------------------------------------------------------- */
.tools { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.toolnav { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 76px; }
.toolnav a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; color: var(--ink); }
.toolnav a span { font-size: 12px; color: var(--muted); }
.toolnav a:hover { background: var(--panel); border-color: var(--line); }
.toolnav a.on { background: var(--panel); border-color: var(--navy-2); box-shadow: inset 3px 0 0 var(--navy); }
.toolpane { min-height: 360px; }
.mergecols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 14px; }
.libpick { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.libitem { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.libitem:last-child { border-bottom: none; }
.grow { flex: 1; min-width: 0; }
.parts { list-style: none; counter-reset: part; padding: 0; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px; min-height: 60px; }
.parts li { counter-increment: part; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fff; }
.parts li:last-child { border-bottom: none; }
.parts li:not(.none)::before { content: counter(part); width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.parts li.none { justify-content: center; padding: 18px; }
.parts .grip { cursor: grab; color: var(--muted); letter-spacing: -2px; }
.parts .mtag.file { background: var(--ok-soft); color: var(--ok); }
.parts b { overflow-wrap: anywhere; margin-right: 6px; }
.flist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 6px; }
.fitem { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.fitem.on { border-color: var(--navy-2); background: var(--navy-soft); }
.fitem input { margin-top: 4px; accent-color: var(--navy); }
.fbtns { display: flex; gap: 4px; }
.fdetect { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fcfbf8; }
.facts { margin: 0 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.fpaper { background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); padding: 28px 30px; font-size: 13px; min-height: 220px; }
.fpaper p { margin: 0 0 10px; }
.notice.dnote { background: var(--navy-soft); border-color: #b7c7e3; color: var(--navy); font-size: 14px; }
.dtable { width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-size: 14px; }
.dtable th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.dtable td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.dcell { border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; width: 100%; background: transparent; }
.dcell:hover, .dcell:focus { border-color: var(--line-2); background: #fff; }
.dflag { font-size: 12px; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.dflag.dup { background: var(--line); color: var(--ink-2); } .dflag.con { background: var(--sugg); color: #6b5200; } .dflag.ok { background: var(--chg); color: #23633f; }
.dadd { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.dadd input { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; width: 160px; }
.dupload { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.dupload summary { cursor: pointer; }
.dupload textarea, #dtry { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; font: 13px/1.5 var(--mono); }
.dsum { margin: 12px 0 6px; font-size: 14px; }
.dout { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: var(--serif); font-size: 15px; }
.dmark { background: var(--chg); border-bottom: 2px solid var(--chg-line); padding: 0 2px; border-radius: 3px; }
.todiction { display: block; margin: 8px 0 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.todiction input { accent-color: var(--navy); margin-right: 6px; }
.todiction .why { display: block; font-weight: 400; margin-top: 2px; }
.people .gcard { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.ghead { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.gprice { display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; }
.gmembers { margin-top: 10px; } .gmembers select { border: 1px solid var(--line-2); border-radius: 7px; padding: 2px 6px; font-size: 13px; }
.gadd input, .gadd select, .gnew input, .gnew select { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; font-size: 14px; background: #fff; }
.gnew { border-top: 1px solid var(--line); padding-top: 14px; }
.gnew .vrow { align-items: flex-end; flex-wrap: wrap; }

/* --- reports ------------------------------------------------------------------------------------------ */
.tstats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.tstat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; }
.tstat b { font-size: 22px; } .tstat span { font-size: 12px; color: var(--muted); }
.tbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.tbar input, .tbar select { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; background: #fff; }
.tbar input { margin-left: auto; min-width: 200px; }
.ttabs { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.ttabs button { border: none; background: none; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ttabs button span { margin-left: 6px; font-size: 11px; color: var(--muted); }
.ttabs button.on { background: var(--navy); color: #fff; } .ttabs button.on span { color: rgba(255, 255, 255, .7); }
.tlist { display: flex; flex-direction: column; gap: 6px; }
.trow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.trow:hover { border-color: var(--line-2); }
.trow.unread { border-left: 4px solid #f2c230; }
.ticon { width: 34px; height: 34px; border-radius: 9px; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.tline { display: flex; gap: 8px; align-items: center; } .tline b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnew { font-size: 11px; font-weight: 700; background: #f2c230; color: var(--navy); border-radius: 99px; padding: 0 7px; white-space: nowrap; }
.tago { min-width: 72px; text-align: right; }
.tstatus { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; white-space: nowrap; background: var(--line); color: var(--ink-2); }
.st-new { background: #e3ecfb; color: #1d4fa0; } .st-acknowledged { background: var(--navy-soft); color: var(--navy-2); }
.st-in_progress { background: var(--sugg); color: #6b5200; } .st-waiting { background: #fde2cf; color: #8f3d00; }
.st-resolved { background: var(--chg); color: #23633f; } .st-closed { background: var(--line); color: var(--muted); }
.tstat.st-new, .tstat.st-acknowledged, .tstat.st-in_progress, .tstat.st-waiting, .tstat.st-resolved { border-top: 3px solid currentColor; }
.tsev { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; color: var(--muted); }
.sv-blocking { color: var(--bad); } .sv-high { color: var(--warn); }
.rform { display: flex; flex-direction: column; }
.rstep { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.rstep:first-child { border-top: none; padding-top: 0; }
.rstep .n { width: 28px; height: 28px; border-radius: 50%; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; font-weight: 650; font-size: 13px; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 500; }
.cat input { display: none; }
.cat .ci { width: 28px; height: 28px; border-radius: 8px; background: var(--navy-soft); display: grid; place-items: center; flex-shrink: 0; }
.cat:has(input:checked) { border-color: var(--navy); background: var(--navy-soft); box-shadow: 0 0 0 1px var(--navy); }
.sevs { flex-wrap: wrap; } .sevs label { font-size: 13px; }
.attach { display: block; border: 2px dashed var(--line-2); border-radius: 10px; padding: 14px; cursor: pointer; font-size: 13px; color: var(--ink-2); background: #fcfbf8; }
.attach.over { border-color: var(--navy-2); background: var(--navy-soft); }
.alist, .afiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.achip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 8px; font-size: 12px; color: var(--ink); }
.achip img { width: 44px; height: 32px; object-fit: cover; border-radius: 4px; }
.achip button { border: none; background: none; cursor: pointer; color: var(--muted); }
.sysinfo { margin-top: 10px; } .sysinfo pre { font: 12px/1.5 var(--mono); background: #f7f5f0; padding: 10px; border-radius: 8px; white-space: pre-wrap; }
.ractions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.ractions .check { margin: 0 auto 0 0; }
.field.inline { flex-direction: row; align-items: center; gap: 6px; }
.field.inline select { border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px; }
.thead { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.life { display: flex; list-style: none; padding: 0; margin: 4px 0 18px; }
.life li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); position: relative; text-align: center; }
.life li::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--line-2); z-index: 0; }
.life li:first-child::before { display: none; }
.life li.done::before, .life li.now::before { background: var(--ok); }
.life .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg); display: grid; place-items: center; font-size: 12px; z-index: 1; }
.life li.done { color: var(--ink-2); } .life li.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.life li.now { color: var(--ink); font-weight: 650; } .life li.now .dot { border-color: var(--navy); box-shadow: 0 0 0 4px var(--navy-soft); background: var(--navy); }
.lwait { font-size: 11px; font-weight: 700; color: #8f3d00; background: #fde2cf; padding: 1px 8px; border-radius: 99px; }
.tdetail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.tmain { display: flex; flex-direction: column; gap: 14px; }
.tside { display: flex; flex-direction: column; gap: 14px; }
.tside .card { padding: 16px; } .tside .field { margin-bottom: 10px; } .tside select { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; }
.tdl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.tdl dt { color: var(--muted); font-size: 13px; } .tdl dd { margin: 0; white-space: pre-wrap; }
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.msg.reporter { align-self: flex-end; background: #fff; }
.msg.support { align-self: flex-start; background: var(--navy-soft); border-color: #c9d6ec; }
.msg.internal { background: var(--sugg); border-color: var(--sugg-line); border-style: dashed; }
.mhead { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 4px; }
.mhead .muted { margin-left: auto; }
.mtext { white-space: pre-wrap; font-size: 14px; }
.treply textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.canned { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.canned .btn { border: 1px solid var(--line); font-size: 12px; white-space: normal; text-align: left; }
.tmoves, .trate { display: flex; gap: 8px; align-items: center; }
.hist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hist li { display: flex; flex-direction: column; font-size: 13px; padding-left: 12px; border-left: 2px solid var(--line-2); }
.sys { display: grid; grid-template-columns: 80px 1fr; gap: 4px 8px; font-size: 12px; margin: 0; } .sys dt { color: var(--muted); } .sys dd { margin: 0; overflow-wrap: anywhere; }

/* --- about ---------------------------------------------------------------------------------------------- */
.abouthead { display: flex; align-items: center; gap: 18px; } .abouthead .sub { margin: 0; }
.aboutmark { height: 34px; }
.atabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); margin: 18px 0 22px; overflow-x: auto; }
.atabs a { padding: 10px 16px; color: var(--ink-2); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.atabs a.on { color: var(--navy); border-bottom-color: #f2c230; }
.about { display: flex; flex-direction: column; gap: 18px; max-width: 1080px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a6400; margin-bottom: 6px; }
.big { font: 700 30px/1.2 var(--serif); color: var(--navy); margin: 0 0 10px; letter-spacing: -.01em; }
.ahero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px 30px; box-shadow: var(--shadow); }
.ahero p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.astats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.astats div { background: var(--navy); color: #fff; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; }
.astats b { font: 700 28px var(--serif); color: #f2c230; } .astats span { font-size: 13px; color: rgba(255, 255, 255, .85); }
.acard { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; box-shadow: var(--shadow); }
.acard h3 { font: 700 19px var(--serif); color: var(--navy); margin-bottom: 12px; }
.bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bar { display: grid; grid-template-columns: 300px 1fr 56px; gap: 12px; align-items: center; font-size: 14px; }
.bar .bt { height: 14px; background: #f1eee7; border-radius: 0 4px 4px 0; }
.bar .bt span { display: block; height: 100%; background: #9aa6b8; border-radius: 0 4px 4px 0; }
.bar.us .bt span { background: var(--navy); } .bar.us .bn, .bar.us .bv { font-weight: 700; color: var(--navy); }
.bar.x .bt span { background: repeating-linear-gradient(45deg, #c9a2a2 0 4px, #e6cccc 4px 8px); }
.bar .bv { text-align: right; font-variant-numeric: tabular-nums; }
.shot { margin: 12px 0; } .shot figcaption { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.shot img { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; display: block; }
.shot.small img { max-width: 380px; }
.acols, .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat2 { background: var(--navy-soft); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; }
.stat2 b { font: 700 20px var(--serif); color: var(--navy); } .stat2 span { font-size: 13px; color: var(--ink-2); }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cmp .us { background: var(--navy-soft); color: var(--navy); font-weight: 600; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feats div { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.feats span { font-size: 13px; color: var(--ink-2); } .feats img { width: 100%; border-radius: 8px; border: 1px solid var(--line); margin-top: 6px; }
.flow { display: flex; flex-direction: column; gap: 6px; }
.flow .node { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; }
.flow .node span { font-size: 13px; color: var(--muted); } .flow .node.you { background: var(--navy); color: #fff; border-color: var(--navy); }
.flow .node.you span { color: rgba(255, 255, 255, .8); }
.flow .arrow { display: flex; align-items: center; gap: 8px; padding-left: 26px; font-size: 12px; color: var(--ok); font-weight: 600; }
.flow .arrow::before { content: "🔒 ↓"; }
.grid2 .sec { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.grid2 .sec span { font-size: 13px; color: var(--ink-2); }
.todo { margin: 0; padding-left: 20px; line-height: 1.7; }
.paperwrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.ptoc { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ptoc a { color: var(--ink-2); padding: 3px 0; } .ptoc a:hover { color: var(--navy); } .ptoc .btn { margin-top: 10px; }
.wpaper { background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: 48px 56px; font: 16px/1.7 var(--serif); color: #23262c; }
.wpaper h1 { font: 700 30px/1.25 var(--serif); color: var(--navy); margin: 0 0 10px; }
.wpaper h2 { font: 700 19px var(--serif); color: var(--navy); margin: 30px 0 8px; scroll-margin-top: 80px; }
.wpaper header { border-bottom: 2px solid #f2c230; padding-bottom: 16px; margin-bottom: 8px; }
.ptable { border-collapse: collapse; font: 14px var(--sans); margin: 8px 0; } .ptable td { padding: 4px 14px 4px 0; border-bottom: 1px solid var(--line); }
@media print { body.printing-paper .top, body.printing-paper .abouthead, body.printing-paper .atabs, body.printing-paper .ptoc { display: none !important; }
  body.printing-paper main { padding: 0; } body.printing-paper .paperwrap { display: block; } body.printing-paper .wpaper { border: none; box-shadow: none; padding: 0; } }
.faqbar { display: flex; gap: 12px; align-items: center; }
.faqbar input { flex: 1; max-width: 480px; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px; font-size: 15px; }
.faqsec h3 { font: 700 17px var(--serif); color: var(--navy); margin: 18px 0 8px; }
.faq { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; }
.faq summary { padding: 12px 16px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 18px; line-height: 1; } .faq[open] summary::after { content: "–"; }
.faq p { margin: 0; padding: 0 16px 14px; color: var(--ink-2); }
.ahero.shel { background: linear-gradient(135deg, #fffdf6, #f7f0dc); }
.quill { text-align: center; } .quill img { width: 180px; height: 180px; }
.tl { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; margin: 8px 0 16px; }
.tl::before { content: ""; position: absolute; left: 10%; right: 10%; top: 18px; height: 2px; background: var(--line-2); }
.tly { position: relative; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; }
.tly b { width: 64px; height: 36px; border-radius: 99px; display: grid; place-items: center; background: #fff; border: 2px solid var(--line-2); font: 700 14px var(--serif); color: var(--navy); }
.tly span { font-size: 12px; color: var(--muted); }
.tly.on b { background: var(--navy); border-color: var(--navy); color: #f2c230; } .tly.on span { color: var(--navy); font-weight: 600; }
.tlbody { display: grid; grid-template-columns: 110px 1fr; gap: 16px; background: #fcfaf3; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-height: 110px; }
.tlyear { font: 700 34px var(--serif); color: #8a6400; } .tlbody p { margin: 4px 0 0; color: var(--ink-2); }
.vowel { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center; margin: 14px 0; }
.vstage { position: relative; width: 240px; height: 240px; background: #fcfaf3; border: 1px solid var(--line); border-radius: 16px; }
.vb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 56px var(--serif); color: var(--navy); }
.vspot { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--line-2); background: #fff; cursor: pointer;
  font: 700 22px var(--serif); color: #8a6400; transition: border-color .15s, background .15s; }
.vspot:hover { border-color: #8a6400; } .vspot.on { border: 2px solid #8a6400; background: #fff6d8; }
.vword { font: 700 64px var(--serif); color: var(--navy); line-height: 1.1; margin: 4px 0; }
.ambig { background: var(--navy-soft); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--navy); }
.users { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.users div { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.users b { font: 700 17px var(--serif); color: var(--navy); } .users span { font-size: 13px; color: var(--ink-2); }
.acard.zeig { display: flex; gap: 20px; align-items: center; } .zbig { width: 96px; height: 96px; flex-shrink: 0; }
.sources { max-width: 1080px; }
@media (max-width: 900px) {
  .tools, .mergecols, .fdetect, .tdetail, .ahero, .acols, .grid2, .feats, .paperwrap, .vowel, .users { grid-template-columns: 1fr; }
  .toolnav, .ptoc { position: static; } .tstats { grid-template-columns: repeat(3, 1fr); } .bar { grid-template-columns: 150px 1fr 50px; font-size: 12px; }
  .wpaper { padding: 24px; } .tl span { display: none; } .msg { max-width: 100%; } .cmp { font-size: 12px; } }
@media (max-width: 700px) {
  .who { display: none !important; }
  .trow { flex-wrap: wrap; } .trow .grow { flex-basis: calc(100% - 50px); } .tline b { white-space: normal; }
  .ttabs { overflow-x: auto; max-width: 100%; } .ttabs button { white-space: nowrap; }
  .tbar input { margin-left: 0; flex: 1; } .tstats { grid-template-columns: repeat(2, 1fr); }
  .life li { font-size: 10px; } .tdl { grid-template-columns: 1fr; } .cats { grid-template-columns: 1fr 1fr; }
  .bar { grid-template-columns: 1fr 44px; } .bar .bt { grid-column: 1 / -1; grid-row: 2; }
  .dadd input { width: 120px; } .abouthead { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.plan .hleft { margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .3); font-weight: 500; }
.plan .hleft.low { color: #f2c230; } .plan .hleft.out { color: #ffb4a8; }
.hleftline { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--navy-2); margin: 2px 0; }
.hleftline.out { color: var(--bad); }

/* Word-style editing: every paragraph is a page to type on; your words in blue, Shelton's kept */
.para .body[contenteditable] { outline: none; border-radius: 3px; caret-color: var(--navy-2); }
.para .body[contenteditable]:focus { background: #fffdf3; box-shadow: 0 0 0 3px #fffdf3; }
.mine { color: #1f5fd6; }
.para .lbl.mine { color: #1f5fd6; }
.gone { display: inline-block; width: 0; position: relative; cursor: help; user-select: none; }
.gone::after { content: "‸"; position: absolute; left: -3px; top: -9px; font: 700 13px var(--sans); color: #c2412d; }
.para .rev { position: absolute; right: -36px; top: 4px; opacity: 0; text-indent: 0; }
.para:hover .rev { opacity: 1; }
.para.edited::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: #9db8ef; }
.vbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px; padding: 8px 12px; border-radius: 8px;
        background: #f4f6fb; font: 12.5px var(--sans); text-indent: 0; }
.vbar .grow { flex: 1; }
.vbar.shv { background: #fff4dc; }
.para.shv { color: #333; }
.para.shv.was { box-shadow: inset 3px 0 0 #1f5fd6; padding-left: 8px; }

/* Settings → Storage */
.storage .sthead h2 { margin: 0 0 4px; }
.storage .stwarn { margin: 10px 0; }
.stlimits { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin: 12px 0 8px; }
.stlimits input { width: 72px; padding: 4px 6px; }
.stpick { font-size: 13px; margin: 6px 0 8px; }
.linkish { background: none; border: 0; padding: 0; color: var(--navy-2); text-decoration: underline; cursor: pointer; font: inherit; }
.sttable { max-height: 420px; overflow: auto; border: 1px solid var(--line, #e3e6ee); border-radius: 8px; }
.sttable table { width: 100%; }
.sttable tr.gone td { color: var(--muted); }
.chip.old { background: #fff1d6; color: #8a5a00; }
.stbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0 2px; background: var(--card, #fff); font-size: 13px; }
.stbar .stver { flex: 1; color: var(--muted); }
.stlog { margin-top: 10px; font-size: 12.5px; }
.storenote { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sttable td, .sttable th { white-space: nowrap; }
.sttable td:nth-child(2) { white-space: normal; min-width: 220px; }

/* Zeig: what to listen to, the microphone checked before starting */
.srcseg { flex-wrap: wrap; }
.srchint { margin: 8px 0 0; max-width: 62ch; }
.miccheck { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; max-width: 560px; }
.miccheck select { max-width: 100%; }
.miccheck .bigmeter { margin: 10px 0; }
.miccheck #outnote { margin: 0; }
/* Zeig: the transcript full width, with the live essentials above it */
.live3.zeig.wide, .live3.zeig.wide.folded { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.zeig .wqueue .lbody { overflow-y: auto; padding: 12px; }
.zeig .wqueue .queue { margin-top: 0; }
.zeig.wide .draft, .zeig.wide .source { display: none; }
.zeig .preview .lhead { position: relative; padding-right: 120px; }
.zeig .widen { position: absolute; right: 8px; top: 6px; }
.fstrip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.fstrip .fslot { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.fstrip .bigmeter { margin: 0; height: 6px; max-width: 360px; }
.fstrip #notices .notice { margin: 0; }
.fstrip #notices:empty { display: none; }
.notice.ask { background: #fdecec; border-color: #c45252; color: #5a1a1a; }
.notice.ask .askrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* the paragraph still being written; a possible echo of the playback */
.para.writing .body { color: var(--muted, #667); cursor: default; }
.writingtag { margin-left: 8px; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--line); color: #556; white-space: nowrap; user-select: none; }
mark.echo { background: #ffe4cc; box-shadow: inset 0 -2px 0 #d9822b; color: inherit; }
@media (max-width: 1100px) { .zeig .widen { display: none; } .zeig .preview .lhead { padding-right: 14px; } }
/* warnings that must be seen */
.toast.warn { background: #b42318; }
.alarm { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(20, 10, 10, .35); }
.alarmcard { max-width: 460px; margin: 16px; background: #fff; border: 2px solid #c0392b; border-radius: 12px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.alarmcard b { color: #a12a1f; font-size: 17px; display: block; margin-bottom: 6px; }
.alarmcard p { margin: 0 0 14px; line-height: 1.45; }
body.alarming::after { content: ""; position: fixed; inset: 0; z-index: 8999; pointer-events: none; border: 8px solid #e0302a; animation: alarmpulse 1s ease-in-out infinite; }
@keyframes alarmpulse { 0%, 100% { opacity: 1; box-shadow: inset 0 0 40px rgba(224,48,42,.65); } 50% { opacity: .25; box-shadow: inset 0 0 6px rgba(224,48,42,.2); } }
@media (prefers-reduced-motion: reduce) { body.alarming::after { animation: none; } }
/* karaoke: the word being heard, in Shelton yellow */
::highlight(karaoke) { background-color: #f2c230; color: #1b1d22; }
::highlight(karaoke-past) { text-decoration: underline 2px #f2c230; text-underline-offset: 3px; }
/* review keys */
.keystable td { padding: 6px 10px; } .keystable td:first-child { width: 45%; }
.skipf { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 12px 0 4px; }
.skipf input { width: 70px; }
/* the formatting bar: in the review, and in Zeig's full-width view */
.fmtbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; margin: 0 0 10px; position: sticky; top: 64px; z-index: 5; }
.zeig .fmtbar { border-radius: 0; border-width: 0 0 1px; margin: 0; top: 0; }
.zeig:not(.wide) .fmtbar { display: none; }
.fmtbar button { min-width: 32px; height: 30px; border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer;
  font: 600 14px var(--sans); color: var(--ink-2); display: inline-grid; place-items: center; }
.fmtbar button:hover { background: var(--navy-soft); }
.fmtbar button.on { background: var(--navy-soft); border-color: #b7c7e3; color: var(--navy); }
.fmtbar .sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 6px; }
.fmtbar .fmthint { margin-left: auto; }
/* the transcription queue on Recordings */
.tqueue { margin: 0 0 16px; padding: 12px 16px; }
.tqhead { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.tqrow { display: grid; grid-template-columns: 22px minmax(0, 1.4fr) minmax(0, 1fr) minmax(80px, 1fr) 44px; gap: 12px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink); }
.tqrow:first-of-type { border-top: 0; }
.tqn { font: 600 12px var(--mono); color: var(--muted); }
.tqt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tqs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tqbar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tqbar > span { display: block; height: 100%; background: var(--navy); transition: width .4s; }
.tqp { font: 12px var(--mono); text-align: right; }
@media (max-width: 640px) { .tqrow { grid-template-columns: 22px minmax(0, 1fr) 44px; } .tqs, .tqbar { display: none; } }
.fmtbar button:disabled { opacity: .35; cursor: default; background: none; }

/* Signing in (app/auth.py): no menu until someone is signed in */
body.signed-out header nav, body.signed-out #plan, body.signed-out #who { display: none !important; }
.authcard { max-width: 420px; margin: 48px auto; display: flex; flex-direction: column; gap: 12px; }
.authcard h1 { margin: 0; }
.authcard .field input { width: 100%; box-sizing: border-box; }
.who .wlink { margin-left: 10px; font-size: 0.85em; }
.who #signout { margin-left: 6px; }
.alarmcard p { white-space: pre-line; overflow-wrap: anywhere; }
/* full width: the most room for the transcript. The panel heading and the "recording since" line
   go (the strip above has the essentials and the way back); readback and formatting share a row. */
main:has(.zeig.wide) .startedbar, .zeig.wide .preview > .lhead { display: none; }
.zeig.wide .ptools { display: flex; align-items: center; border-bottom: 1px solid var(--line); background: var(--panel); }
.zeig.wide .ptools .readback { flex: 0 1 240px; min-width: 160px; border-bottom: 0; }
.zeig.wide .ptools .fmtbar { flex: 1 1 auto; border-bottom: 0; }
.zeig.wide #paperbox { flex: 1 1 auto; min-height: 0; }
.zeig.wide .paper { padding: 18px 40px 30px 60px; }
.zeig.wide .fmthint { display: none; }
.zeig.wide .fmtbar { flex-wrap: nowrap; padding: 4px 6px; overflow-x: auto; } .zeig.wide .fmtbar button { min-width: 28px; } .zeig.wide .fmtbar .sep { margin: 0 3px; }
/* full width as a Word page (overrides the boxed layout above): the window scrolls one long page */
.live3.zeig.wide, .live3.zeig.wide.folded { height: auto; min-height: 0; align-items: start; gap: 22px; grid-template-columns: minmax(0, 1fr) 360px; }
.zeig.wide .lpane.preview { background: none; border: 0; box-shadow: none; overflow: visible; }
.zeig.wide #paperbox { overflow: visible; padding: 16px 0 60px; }
.zeig.wide .paper { border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: 56px 72px 72px;
  font-size: 17px; max-width: 900px; margin: 0 auto; min-height: calc(100vh - 220px); }
main:has(.zeig.wide) .livebar { position: sticky; top: 56px; z-index: 12; }
.zeig.wide .wtop { position: sticky; top: calc(56px + var(--lbh, 72px)); z-index: 11; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.zeig.wide .wtop .fstrip { border-bottom: 1px solid var(--line); }
.zeig.wide .wqueue { position: sticky; top: calc(56px + var(--lbh, 72px)); max-height: calc(100vh - 56px - var(--lbh, 72px) - 80px); }
.zeig.wide .wqueue .lbody { overflow-y: auto; }
main:has(.zeig.wide) .livebar { box-shadow: 0 -8px 0 var(--bg), 0 9px 0 var(--bg); }
.zeig.wide #paper { scroll-margin-top: calc(56px + var(--lbh, 72px) + 110px); }
/* typing rested: the review keys are in charge, said in the player bar */
.keyspill { display: none; font: 600 12px var(--sans); color: var(--navy); background: var(--navy-soft); border: 1px solid #b7c7e3; border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
body.keysmode .keyspill { display: inline-block; }