/* Tau Ops console styling — the Dataset console (browse.html) and the review
   queue (queue.html) share one visual language.
 *
 * Extracted from browse.html so the two pages cannot drift: an annotator
 * moving between "what is in this dataset" and "what do I review next" should
 * not cross a design boundary, and a second copy of these tokens is how the
 * queue would slowly stop looking like the console it is part of.
 *
 * Not to be confused with labelling.css, which is the DARK theme the viewer
 * and its overlay use. That one belongs to a video tool and stays dark on
 * purpose; this one is for the reading-and-deciding pages.
 */

/* Design tokens copied from Tau Ops (tau-data:8096/static/styles.css). Copied
   rather than linked: that stylesheet is served from another host on the
   tailnet, and this page must render for admins coming in over the public
   domain. --max-width is the one deliberate divergence — Tau Ops is a 44rem
   column for bookings, and tables of 600 episodes need the room. */
:root {
  --color-primary: #008965;
  --color-primary-dark: #07503C;
  --color-brand: #FE4C00;
  --color-mint: #CEF9BA;
  --color-panache: #ECFFE6;
  --color-text: #222;
  --color-text-secondary: rgba(0, 0, 0, 0.55);
  --color-border: rgba(0, 0, 0, 0.09);
  --radius: 12px;
  --max-width: 78rem;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; font-family:var(--font); color:var(--color-text); background:#fafafa; line-height:1.5; }
a { color: var(--color-primary); text-decoration: none; }

.header { display:flex; align-items:baseline; gap:12px; padding:16px; max-width:var(--max-width); margin:0 auto; }
.header h1 { font-size:1.5rem; margin:0; color:var(--color-primary-dark); font-weight:600; }
.meta { color:var(--color-text-secondary); font-size:0.9rem; }
.header .spacer { margin-left:auto; }

.tabs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; max-width:var(--max-width); margin:0 auto; padding:0 16px 12px; }
.tab { font:inherit; font-size:0.9rem; padding:7px 14px; border-radius:999px;
       border:1px solid var(--color-border); background:#fff; color:var(--color-text); cursor:pointer; }
.tab.is-on { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.tabs--primary { padding-bottom:4px; }
.tabs--primary .tab { font-size:1rem; font-weight:600; padding:8px 18px; }

.container { max-width:var(--max-width); margin:0 auto; padding:0 16px 48px; }
.panel-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); padding:16px; margin-bottom:14px; }
.panel-card h2 { font-size:1rem; margin:0 0 12px; color:var(--color-primary-dark); }
.panel-card h2 span { font-weight:400; font-size:0.85rem; color:var(--color-text-secondary); margin-left:8px; }
.sub-h { font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
         color:var(--color-text-secondary); margin:18px 0 8px; }
.note { color:var(--color-text-secondary); font-size:0.85rem; margin-bottom:10px; }
.analytics-summary { background:var(--color-panache); color:var(--color-primary-dark);
                     border-radius:var(--radius); padding:12px 16px; margin:0 0 14px; }
.bullet-list { margin:0; padding-left:1.15rem; }
.bullet-list li { margin:0 0 5px; }
.bullet-list li:last-child { margin-bottom:0; }
.bullet-list--compact li { margin-bottom:2px; }
.bullet-list .bullet-list { margin-top:3px; }
.note .bullet-list { color:inherit; }

.stats { display:flex; gap:28px; flex-wrap:wrap; }
.stat { display:flex; flex-direction:column; }
.stat-num { font-size:1.9rem; font-weight:700; color:var(--color-primary-dark); line-height:1.1; }
.stat-lbl { font-size:0.8rem; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.04em; }
.stat.is-warn .stat-num { color:#B23600; }

.badge { font-size:0.7rem; font-weight:700; letter-spacing:0.04em; padding:2px 8px; border-radius:999px; }
.badge.is-booked { background:var(--color-panache); color:var(--color-primary-dark); }
.badge.is-held { background:#FFE7DC; color:#B23600; }

.wl-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.wl-table th { text-align:left; font-weight:600; color:var(--color-text-secondary); font-size:0.8rem;
               text-transform:uppercase; letter-spacing:0.03em; padding:6px 8px; border-bottom:1px solid var(--color-border); }
.wl-table td { padding:8px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.wl-code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--color-primary-dark); }
td.bad { color:#B23600; font-weight:600; }

.bar-row { display:grid; grid-template-columns:14rem 1fr auto; align-items:center; gap:10px; margin-bottom:7px; font-size:0.9rem; }
.bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { background:#f0f0f0; border-radius:999px; height:12px; overflow:hidden; }
.bar-fill { display:block; height:100%; background:var(--color-primary); border-radius:999px; }
.bar-count { text-align:right; color:var(--color-text-secondary); font-variant-numeric:tabular-nums; }

.btn-primary { font:inherit; font-weight:600; font-size:0.9rem; padding:8px 16px; border-radius:999px;
               border:none; cursor:pointer; background:var(--color-primary); color:#fff; }
.btn-primary:disabled { opacity:0.4; cursor:not-allowed; }
.btn-ghost { font:inherit; font-size:0.85rem; padding:6px 14px; cursor:pointer; border-radius:999px;
             border:1px solid var(--color-border); background:#fff; color:var(--color-text); }

input[type=search], input[type=text], input[type=date] { font:inherit; font-size:0.9rem; padding:8px 12px;
  border-radius:8px; border:1px solid var(--color-border); background:#fff; color:var(--color-text); width:100%; }
.field { display:flex; flex-direction:column; gap:3px; font-size:0.8rem; color:var(--color-text-secondary); }
.form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }

.chips { display:flex; flex-wrap:wrap; gap:8px; max-height:190px; overflow:auto; }
.chip { border:1px solid var(--color-border); border-radius:999px; background:#fff; padding:6px 12px;
        font-size:0.85rem; cursor:pointer; white-space:nowrap; }
.chip:hover { border-color:var(--color-primary); }
.chip b { color:var(--color-text-secondary); font-weight:600; margin-left:8px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.card { background:#fff; border:1px solid var(--color-border); border-left:4px solid var(--color-primary);
        border-radius:var(--radius); padding:14px; }
.card h3 { margin:0 0 4px; font-size:1rem; font-weight:600; }
.card .meta { font-size:0.8rem; margin-bottom:8px; display:block; }
.labels { list-style:none; padding:0; margin:0 0 10px; }
.labels li { font-size:0.85rem; display:flex; justify-content:space-between; gap:12px; padding:1px 0; }
.labels li b { color:var(--color-text-secondary); font-weight:600; }
.ex { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.ex a { position:relative; display:block; border-radius:8px; overflow:hidden;
        border:1px solid var(--color-border); aspect-ratio:4/3; background:#f0f0f0; }
.ex a:hover { border-color:var(--color-primary); }
.ex img { width:100%; height:100%; object-fit:cover; display:block; }
.ex img.pending { opacity:0; }
.ex .cap { position:absolute; left:0; right:0; bottom:0; padding:3px 6px; font-size:0.7rem;
           color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.72)); }
.ex .noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
             color:var(--color-text-secondary); font-size:0.7rem; }

/* Collection calendar. Intensity thresholds are absolute hours, not quantiles
   of the current data: a relative scale would recolour every past day as soon
   as one heavy day arrived, so "dark green" would mean nothing over time. */
.cal-months { display:flex; flex-wrap:wrap; gap:26px; }
.cal-month h3 { font-size:0.85rem; font-weight:600; margin:0 0 8px; color:var(--color-primary-dark); }
.cal-grid { display:grid; grid-template-columns:repeat(7, 3rem); gap:4px; }
.cal-dow { font-size:0.68rem; color:var(--color-text-secondary); text-align:center; padding-bottom:2px; }
.cal-day { position:relative; aspect-ratio:1; border-radius:7px; border:1px solid var(--color-border);
           background:#fff; font-size:0.75rem; font-variant-numeric:tabular-nums;
           color:var(--color-text-secondary);
           display:flex; align-items:center; justify-content:center; }
/* The day number is the index, the episode count is the content — so the count
   is what the cell reads as, and the date retreats to a corner. */
.cal-day .dom { position:absolute; top:2px; left:4px; font-size:0.6rem; opacity:0.75; font-weight:400; }
.cal-day .n { font-size:0.95rem; font-weight:700; line-height:1; }
.cal-day .n small { font-size:0.6rem; font-weight:600; opacity:0.85; margin-left:1px; }
.cal-day.lv1 { background:rgba(0,137,101,0.16); color:var(--color-text); }
.cal-day.lv2 { background:rgba(0,137,101,0.36); color:var(--color-text); }
.cal-day.lv3 { background:rgba(0,137,101,0.64); color:#fff; }
.cal-day.lv4 { background:var(--color-primary); color:#fff; }
.cal-day.has-data { cursor:pointer; font-weight:600; }
.cal-day.has-data:hover { outline:2px solid var(--color-primary-dark); outline-offset:1px; }
.cal-day.is-sel { outline:2px solid var(--color-brand); outline-offset:1px; }
/* Days the corpus cutoff excludes, and days that have not happened yet: both
   are "not a gap in collection" and must not read as a zero-episode day. */
.cal-day.is-out { border-style:dashed; color:rgba(0,0,0,0.22); background:#fbfbfb; }
.cal-legend { display:flex; align-items:center; gap:6px; margin-top:14px;
              font-size:0.78rem; color:var(--color-text-secondary); }
.cal-legend i { width:14px; height:14px; border-radius:4px; border:1px solid var(--color-border); display:inline-block; }
.cal-detail { margin-top:12px; }

.results { margin-top:12px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px;
       padding:8px 0; border-bottom:1px solid var(--color-border); font-size:0.9rem; }
.empty { color:var(--color-text-secondary); font-size:0.9rem; padding:10px 0; }
.err { color:#B23600; font-size:0.9rem; }
.ok { color:var(--color-primary-dark); font-weight:600; }
.section { display:none; }
.section.is-on { display:block; }

/* --- Corpus growth small multiples -------------------------------------
   Thirteen task groups is past the eight-hue categorical ceiling, so the
   groups are faceted instead of coloured: every panel is a single series and
   takes its identity from its title, not from a hue nobody can tell apart
   under CVD. One sequential brand hue does all the work.

   --growth-ink is the brand primary; --growth-ink-pending is the same hue
   stepped lighter for days that are still filling in. Validated as an ordinal
   ramp against the white card: monotone lightness, single hue (5 deg spread),
   light end 2.84:1 on the surface. */
#growthCard { --growth-ink:#008965; --growth-ink-pending:#4FA98F;
              --growth-grid:#e1e0d9; --growth-axis:#c3c2b7; --growth-muted:#898781; }
.growth-controls { display:flex; flex-wrap:wrap; gap:14px; margin:4px 0 14px; }
.growth-ctl { display:inline-flex; }
.growth-ctl .chip { border-radius:0; margin-left:-1px; }
.growth-ctl .chip:first-child { border-radius:999px 0 0 999px; margin-left:0; }
.growth-ctl .chip:last-child { border-radius:0 999px 999px 0; }
.growth-ctl .chip:only-child { border-radius:999px; }
.growth-grid { display:grid; gap:10px;
               grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); }
.growth-panel { border:1px solid var(--color-border); border-radius:10px;
                padding:9px 10px 6px; background:#fff; }
.growth-head { display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.growth-name { font-weight:600; font-size:0.85rem; }
/* The panel total is the one direct label -- a number on every bar would go
   unread and is an anti-pattern; the axis and tooltip carry the rest. */
.growth-total { font-size:0.78rem; color:var(--color-text-secondary);
                font-variant-numeric:tabular-nums; }
.growth-peak { font-size:0.68rem; color:var(--growth-muted);
               font-variant-numeric:tabular-nums; }
.growth-panel svg { display:block; width:100%; height:62px; overflow:visible; }
.growth-panel rect.bar:hover, .growth-panel circle.dot:hover { opacity:0.72; }
.growth-legend { font-size:0.74rem; color:var(--color-text-secondary);
                 margin-top:10px; display:flex; gap:14px; flex-wrap:wrap; }
.growth-swatch { display:inline-block; width:9px; height:9px; border-radius:2px;
                 margin-right:5px; vertical-align:baseline; }
.growth-tt { position:fixed; z-index:50; pointer-events:none; background:#fff;
             border:1px solid var(--color-border); border-radius:8px; padding:6px 9px;
             font-size:0.78rem; box-shadow:0 4px 14px rgba(0,0,0,0.12); }

/* --- Task-group kind ----------------------------------------------------
   A group is either a SUSTAINED steady state or a TRANSITION at a span
   boundary, and the two are measured differently (see
   tau_data/appending/task_groups.py). That distinction rides along wherever a
   group is named — the Motion tab's chips and the review queue's — so it is a
   class here rather than a style object in one page's script, which is what
   it was when only one page named groups. */
.chip.kind-sustained, .kind-sustained { background:#eff6ff; border-color:#bfdbfe; }
.chip.kind-transition, .kind-transition { background:#f5f3ff; border-color:#ddd6fe; }
.chip.kind-none, .kind-none { background:#f9fafb; border-color:#e5e7eb; }
.analytics-summary.kind-sustained, .analytics-summary.kind-transition,
.analytics-summary.kind-none { border:1px solid; }

/* The selected chip. Was an inline style repeated at each call site. */
.chip.is-on { border-color:var(--color-primary); font-weight:600; }

/* --- Review queue -------------------------------------------------------
   The queue is the same console with a different question, so it adds only
   what the console has no equivalent for. */
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
/* Grow to the room available rather than sitting at a fixed width: these
   placeholders are sentences ("Semantic video search: vacuum cleaning…") and
   a 16rem box cuts every one of them off. */
.toolbar input[type=search], .toolbar input[type=text] { width:auto; flex:1 1 20rem; max-width:34rem; }
.toolbar .spacer { margin-left:auto; }

.wl-table td.actions { white-space:nowrap; text-align:right; }
.wl-table td.actions .btn-primary { padding:5px 13px; font-size:0.8rem; }
.wl-table td.actions .btn-ghost { padding:4px 11px; font-size:0.8rem; margin-left:5px; }
.wl-table tr.is-mine { background:#fffdf5; }

/* One motion per row: the instruction is the row's identity, so it gets the
   width and everything else stays narrow. */
.motion-instruction { display:block; max-width:34rem; overflow:hidden;
                      text-overflow:ellipsis; white-space:nowrap; }
.chip.is-static { cursor:default; padding:2px 10px; font-size:0.78rem; }
.icon-btn { font:inherit; font-size:0.85rem; padding:4px 9px; cursor:pointer;
            border-radius:999px; border:1px solid var(--color-border);
            background:#fff; color:#B23600; margin-left:5px; }
.icon-btn:hover { border-color:#B23600; }