/* dubTC web-tools design system — the shared look for every dub.tc tool.
   Direction (Luke 2026-07-13): neon-green tinted translucent glass pane on a
   soft off-white background, black text, Roboto, no emoji, exactly two button
   schemes (normal + red). Every tool page links this file; restyling the whole
   suite is a one-file change here. Bump the ?v= query when it changes. */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  /* LIGHT (default): NEUTRAL surfaces — no green shading (Luke 2026-07-16).
     Green survives only as small accents: the active-tab underline, focus
     borders (--neon) and on-state chips. */
  --bg:        #e6e7e9;   /* flat neutral gray (background test) */
  --ink:       #0b0f0c;   /* black text */
  --ink-soft:  #5a6060;   /* secondary text (neutral) */
  --neon:      #00e676;   /* green ACCENT only — not surface shading */
  --line:      rgba(20,26,23,.14);   /* divider / hairline (neutral) */
  --pane-hdr:  rgba(0,0,0,.05);      /* header tint (neutral) */
  --pane-body: rgba(20,26,23,.06);   /* expanded-body fill — slightly darker than base */
  --ring:      rgba(20,26,23,.28);   /* borders (neutral) */
  --chip:      rgba(20,26,23,.06);
  --chip-ink:  #5a6060;
  --chip-on:   rgba(0,200,102,.18);  /* on-state accent stays green */
  --chip-on-ink:#0a6b3c;
  --red:       #c0342a;
  --red-fill:  rgba(214,58,46,.10);
  --red-ring:  rgba(214,58,46,.45);
  --radius:    2px;       /* squared edges */
  /* Themable surfaces — every gradient/fill/shadow the components use lives
     here so the [data-theme] blocks below can restyle the whole suite. */
  --pane-grad:   linear-gradient(135deg, rgba(255,255,255,.72), rgba(250,250,251,.5) 42%, rgba(244,245,246,.6));
  --pane-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 14px 44px rgba(25,30,28,.12);
  --head-grad:   linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
  --head-grad-soft: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.015));
  --btn-grad:    linear-gradient(180deg, rgba(255,255,255,.95), rgba(243,244,245,.85));
  --btn-hl:      inset 0 1px 0 rgba(255,255,255,.85);
  --btn-red-grad:linear-gradient(180deg, rgba(255,236,234,.95), rgba(250,220,217,.82));
  --field-bg:    rgba(255,255,255,.78);
  --surface:     rgba(255,255,255,.55);   /* generic card fill */
  --surface-soft:rgba(255,255,255,.45);
  --seg-bg:      rgba(255,255,255,.65);
  --toast-bg:    rgba(255,255,255,.96);
  --dlg-grad:    linear-gradient(135deg, rgba(255,255,255,.97), rgba(248,249,250,.95) 45%, rgba(242,243,244,.96));
  --dlg-shadow:  0 18px 60px rgba(25,30,28,.28);
  --inset-body:  inset 0 2px 7px rgba(25,30,28,.07);
  --hover:       rgba(20,26,23,.05);
}

/* ---- DARK: shale — neutral slate grays, NO green cast (Luke 2026-07-19).
   The brand green lives in the dubTC skin; dark mode stays quiet. ---- */
html[data-theme="dark"] {
  --bg:        #15171a;
  /* Softened off the old near-white #e8eaec toward the muted grey below
     (Luke 2026-07-19) — easier on the eyes on a second monitor. Kept one
     clear step ABOVE --ink-soft so labels/headers/muted text still read as
     secondary; matching them exactly would flatten the hierarchy. */
  --ink:       #bcc3ca;
  --ink-soft:  #9aa3ac;
  --line:      rgba(255,255,255,.10);
  --pane-body: rgba(0,0,0,.26);
  --ring:      rgba(255,255,255,.22);
  --chip:      rgba(255,255,255,.08);
  --chip-ink:  #9aa3ac;
  --chip-on:   rgba(148,163,184,.28);
  --chip-on-ink:#d3dbe3;
  --red:       #ff8177;
  --red-fill:  rgba(214,58,46,.16);
  --red-ring:  rgba(214,58,46,.55);
  --pane-grad:   linear-gradient(135deg, rgba(38,41,45,.94), rgba(28,31,35,.90) 42%, rgba(31,34,38,.94));
  --pane-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 44px rgba(0,0,0,.55);
  --head-grad:   linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  --head-grad-soft: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  --btn-grad:    linear-gradient(180deg, rgba(62,66,72,.92), rgba(46,50,55,.88));
  --btn-hl:      inset 0 1px 0 rgba(255,255,255,.07);
  --btn-red-grad:linear-gradient(180deg, rgba(96,36,31,.92), rgba(72,27,23,.88));
  --field-bg:    rgba(255,255,255,.07);
  --surface:     rgba(255,255,255,.05);
  --surface-soft:rgba(255,255,255,.04);
  --seg-bg:      rgba(255,255,255,.07);
  --toast-bg:    rgba(33,36,40,.97);
  --dlg-grad:    linear-gradient(135deg, rgba(36,39,43,.98), rgba(27,30,34,.97));
  --dlg-shadow:  0 18px 60px rgba(0,0,0,.65);
  --inset-body:  inset 0 2px 7px rgba(0,0,0,.4);
  --hover:       rgba(255,255,255,.06);
}

/* ---- dubTC SKIN: black with a restrained green cast — the brand look.
   Toned down (Luke 2026-07-16), then blacker + less green (2026-07-19). ---- */
html[data-theme="dubtc"] {
  --bg:        #050706;
  --ink:       #e9f5ee;
  --ink-soft:  #8fa79a;
  --line:      rgba(0,230,118,.12);
  --pane-body: rgba(0,0,0,.32);
  --ring:      rgba(0,230,118,.26);
  --chip:      rgba(0,230,118,.05);
  --chip-ink:  #8fa79a;
  --chip-on:   rgba(0,230,118,.18);
  --chip-on-ink:#6fe8ac;
  --red:       #ff8177;
  --red-fill:  rgba(214,58,46,.18);
  --red-ring:  rgba(214,58,46,.6);
  --pane-grad:   linear-gradient(135deg, rgba(15,25,19,.94), rgba(10,16,12,.92) 42%, rgba(12,20,15,.94));
  --pane-shadow: inset 0 1px 0 rgba(0,230,118,.06), 0 0 34px rgba(0,230,118,.03), 0 14px 44px rgba(0,0,0,.65);
  --head-grad:   linear-gradient(180deg, rgba(0,230,118,.10), rgba(0,230,118,.02));
  --head-grad-soft: linear-gradient(180deg, rgba(0,230,118,.07), rgba(0,230,118,.02));
  --btn-grad:    linear-gradient(180deg, rgba(27,42,33,.92), rgba(18,30,23,.9));
  --btn-hl:      inset 0 1px 0 rgba(0,230,118,.09);
  --btn-red-grad:linear-gradient(180deg, rgba(96,36,31,.92), rgba(72,27,23,.88));
  --field-bg:    rgba(0,230,118,.035);
  --surface:     rgba(0,230,118,.028);
  --surface-soft:rgba(0,230,118,.024);
  --seg-bg:      rgba(0,230,118,.035);
  --toast-bg:    rgba(10,17,13,.97);
  --dlg-grad:    linear-gradient(135deg, rgba(12,21,16,.98), rgba(8,14,10,.97));
  --dlg-shadow:  0 0 40px rgba(0,230,118,.05), 0 18px 60px rgba(0,0,0,.75);
  --inset-body:  inset 0 2px 7px rgba(0,0,0,.5);
  --hover:       rgba(0,230,118,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Roboto', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* Form controls do NOT inherit font-family — without this, inputs/selects/
   buttons fall back to the system face (Luke 2026-07-19: Roboto across the
   board). */
input, select, textarea, button { font-family: 'Roboto', system-ui, sans-serif; }
/* Flat gray background (test) — no image layer. When a tool is embedded
   (iframe inside another tool) its body stays transparent so the parent
   page's single background shows through, never a second one. */
html.embed body { background: transparent !important; }

/* ---- shell ---- */
/* Full-width: tools use the whole browser width (Luke 2026-07-15). The table
   builder needs the room; card-builder rows just get more breathing space. A
   little extra side padding on wide screens keeps content off the edges. */
.wrap { max-width: none; margin: 0 auto; padding: 1.25rem 1rem 6rem; }
@media (min-width: 60rem) { .wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* Sheen (glossy) finish, not frost: semi-opaque green-tinted fill with a
   diagonal light sweep + a bright top highlight; squared edges. */
.pane {
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pane-grad);
  box-shadow: var(--pane-shadow);
}

.pane-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 15px 16px;
  background: var(--head-grad);
  border-bottom: 1px solid var(--line);
}
.pane-head .h-main { min-width: 0; flex: 1; }
.pane-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.pane-sub   { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---- rows (Discord-Section layout: text left, one button right) ---- */
.rows > * { border-top: 1px solid var(--line); }
.rows > :first-child { border-top: 0; }

details.sec > summary { list-style: none; cursor: pointer; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec[open] > summary .chev { transform: rotate(180deg); }
.chev { transition: transform .15s; color: var(--ink-soft); font-size: 11px; flex: 0 0 auto; }

.sec-sum {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
}
.sec-sum:hover { background: var(--hover); }
.r-title { font-size: 14px; font-weight: 500; }
.r-chips { margin-left: auto; display: flex; gap: 6px; align-items: center; min-width: 0; }

/* Expanded panels sit slightly DARKER/recessed than the base pane. */
.sec-body {
  background: var(--pane-body);
  border-top: 1px solid var(--line);
  box-shadow: var(--inset-body);
}
.sec-body > * { border-top: 1px solid var(--line); }
.sec-body > :first-child { border-top: 0; }

.action, .row-link {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
}
.a-main { min-width: 0; flex: 1; }
.a-label { font-size: 14px; font-weight: 500; }
.a-desc  { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }

/* ---- chips ---- */
.chip {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius);
  background: var(--chip); color: var(--chip-ink); font-weight: 500; white-space: nowrap;
}

/* Embedded sub-tool (card builder / live results) inside an expandable row. */
.embed-frame { width: 100%; height: 72vh; border: 0; display: block; background: transparent; }
.embed-open { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--line); }
.embed-open a { font-size: 12px; color: var(--chip-on-ink); text-decoration: none; }
.chip.on { background: var(--chip-on); color: var(--chip-on-ink); }

/* ---- buttons: exactly two schemes ---- */
.btn {
  width: 116px; padding: 8px; border-radius: var(--radius); text-align: center;
  font: 500 13px/1 'Roboto', sans-serif; cursor: pointer;
  color: var(--ink);
  background: var(--btn-grad);
  border: 1px solid var(--ring);
  box-shadow: var(--btn-hl);
  transition: filter .12s;
}
.btn:hover { filter: brightness(1.05); }
.btn.red {
  color: var(--red);
  background: var(--btn-red-grad);
  border-color: var(--red-ring);
}
.btn[disabled] { opacity: .4; cursor: default; box-shadow: none; }
.btn[disabled]:hover { filter: none; }

.refresh {
  flex: 0 0 auto; margin-top: 1px;
  width: auto; padding: 6px 11px; font-size: 14px;
}

/* small utility */
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* gate + toasts (shared) */
.gate { max-width: 26rem; margin: 6rem auto 0; padding: 1.5rem; text-align: center; }
.gate h1 { font-size: 20px; margin: 0 0 6px; }
.gate p  { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.gate .err { color: var(--red); font-size: 13px; margin-top: 1rem; }

#toast-wrap { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  padding: 9px 16px; border-radius: var(--radius); font-size: 13px;
  background: var(--toast-bg); color: var(--ink);
  border: 1px solid var(--ring);
  box-shadow: 0 6px 20px rgba(6,40,22,.18);
  animation: toast-in .15s ease-out;
}
.toast.err { background: var(--red-fill); border-color: var(--red-ring); color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.busy { opacity: .5; pointer-events: none; }

/* =====================================================================
   Shared components — used by card builder / live results / future tools.
   ===================================================================== */

/* tabs */
.tabs { display: flex; gap: 4px; }
.tab {
  padding: 8px 14px; font: 500 13px 'Roboto', sans-serif; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-soft);
}
.tab.active { color: var(--ink); border-bottom-color: var(--neon); }

/* form fields */
.field {
  width: 100%; padding: 7px 9px; border-radius: var(--radius);
  font: 400 13px 'Roboto', sans-serif; color: var(--ink);
  background: var(--field-bg); border: 1px solid var(--ring);
}
.field:focus { outline: none; border-color: var(--neon); }
select.field { cursor: pointer; }
/* Label-over-field: a COLUMN flex so the caption text always stacks cleanly
   above the control — inline text + inline-block fields used to share a line
   box and overlap (Luke 2026-07-16). min-width:0 lets wide selects (long
   option lists) shrink to the cell instead of overflowing it. */
.lbl { font-size: 11px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lbl .field { margin-top: 0; }
.lbl select, .lbl input, .lbl textarea { min-width: 0; max-width: 100%; }

/* fighter-corner identity (data, not buttons) */
.corner-red  { border-left: 3px solid #d64236; }
.corner-blue { border-left: 3px solid #2f6bd6; }
.tx-red  { color: #b23a30; }
.tx-blue { color: #2857ad; }

/* odds bar */
.oddsbar { height: 6px; border-radius: var(--radius); overflow: hidden; display: flex; }
.oddsbar .red  { background: #d64236; }
.oddsbar .blue { background: #2f6bd6; }

/* segmented result control (Red / Blue / Draw / —) */
.seg-wrap { display: flex; border: 1px solid var(--ring); border-radius: var(--radius); overflow: hidden; }
.seg {
  flex: 1; padding: 8px 4px; font: 600 12px 'Roboto', sans-serif; cursor: pointer;
  background: var(--seg-bg); color: var(--ink-soft); border: 0; border-left: 1px solid var(--line);
}
.seg:first-child { border-left: 0; }
.seg.on-red  { background: #d64236; color: #fff; }
.seg.on-blue { background: #2f6bd6; color: #fff; }
.seg.on-draw { background: #6b7a70; color: #fff; }
.seg.on-none { background: var(--chip); color: var(--ink); }

/* dialogs — the sheen pane look */
dialog.dlg {
  padding: 0; color: var(--ink);
  border: 1px solid var(--ring); border-radius: var(--radius);
  background: var(--dlg-grad);
  box-shadow: var(--dlg-shadow);
  max-width: 94vw;
}
dialog.dlg::backdrop { background: rgba(6,26,16,.45); }
.dlg-head {
  position: sticky; top: 0; z-index: 1; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--head-grad-soft);
  border-bottom: 1px solid var(--line);
}
.dlg-title { font-size: 14px; font-weight: 700; }
.x-btn { background: transparent; border: 0; color: var(--ink-soft); font-size: 15px; cursor: pointer; padding: 2px 6px; }
.x-btn:hover { color: var(--ink); }

/* list rows (fighter picker, pool) */
.list-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: var(--radius);
  background: transparent; border: 0; color: var(--ink); font-family: 'Roboto', sans-serif;
}
.list-row:hover { background: var(--hover); }
.list-row[disabled] { opacity: .4; cursor: default; }
.list-row.sel { background: var(--chip-on); }

/* matchup cell grid — aligns red names in one column, blue in another across
   every row (card builder + live results). num | red | mid | blue | end. */
.mm-row {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) 46px minmax(0,1fr) auto;
  align-items: center; gap: 8px;
}
.mm-name {
  min-width: 0; text-align: left; padding: 3px 5px; border-radius: var(--radius);
  background: transparent; border: 0; cursor: pointer;
  font: 500 13px 'Roboto', sans-serif; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-name:hover { background: var(--hover); }
.mm-name.empty { color: var(--chip-on-ink); border: 1px dashed var(--ring); font-weight: 500; }
.mm-name.static { cursor: default; }
.mm-name.static:hover { background: transparent; }
.mm-name.win { font-weight: 700; }
.mm-mid { text-align: center; font-size: 10px; color: var(--ink-soft); }
.mm-end { display: flex; align-items: center; gap: 5px; justify-self: end; }

/* small accent tag (placement / winner) */
.tag { font-size: 10px; padding: 1px 6px; border-radius: var(--radius); background: var(--chip-on); color: var(--chip-on-ink); }
.tag.warn { background: rgba(214,58,46,.14); color: var(--red); }

/* small ghost icon button (⇄ change, etc.) */
.icon-btn { background: transparent; border: 0; color: var(--ink-soft); cursor: pointer; font-size: 13px; padding: 2px 6px; }
.icon-btn:hover { color: var(--ink); }

/* muted helper text */
.muted { color: var(--ink-soft); }
.mono-sm { font-size: 11px; color: var(--ink-soft); }

/* =====================================================================
   Table builder — reusable configurable table + column picker.
   Users choose which columns show; rows expand for detail/editing.
   ===================================================================== */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 600; color: var(--ink-soft);
  padding: 8px 10px; white-space: nowrap;
  background: var(--head-grad-soft);
  border-bottom: 1px solid var(--line);
}
/* drag-to-resize column grips (dubtc-tbl.js) — a thin hit zone on each
   header's right edge; the visible line only appears on hover. */
.tbl thead th { position: relative; }
.col-grip { position: absolute; top: 0; right: -5px; width: 10px; height: 100%;
            cursor: col-resize; user-select: none; touch-action: none; z-index: 2; }
.col-grip:hover, .col-grip:active {
  background: linear-gradient(to right, transparent 4px, var(--neon) 4px, var(--neon) 6px, transparent 6px);
}
/* The LAST column's grip must not poke past the table edge — a 5px overhang
   put a permanent phantom horizontal scrollbar on EVERY table (2026-07-19). */
.tbl thead th:last-child .col-grip { right: 0; width: 6px; }
.tbl thead th:last-child .col-grip:hover, .tbl thead th:last-child .col-grip:active {
  background: linear-gradient(to right, transparent 2px, var(--neon) 2px, var(--neon) 4px, transparent 4px);
}
/* hold-and-drag column reorder (dubtc-tbl.js) — dragged header dims, a neon
   insertion edge marks where the column will land. */
.tbl.col-reordering { cursor: grabbing; user-select: none; }
th.col-dragging { opacity: .5; }
th.col-drop-left  { box-shadow: inset 3px 0 0 var(--neon); }
th.col-drop-right { box-shadow: inset -3px 0 0 var(--neon); }
/* .numc, not .num — the matchmaking card builder's local <style> claims .num
   for its 30px bout-number chip; a bare .num here would inherit that chip. */
.tbl thead th.numc, .tbl tbody td.numc { text-align: right; font-variant-numeric: tabular-nums; }
/* vertical dividers between columns (Luke 2026-07-16) — detail rows excluded
   (their single full-width cell shouldn't carry a stray divider). */
.tbl thead th:not(:last-child), .tbl tbody tr:not(.detail) > td:not(:last-child) {
  border-right: 1px solid var(--line);
}
.tbl tbody tr { border-top: 1px solid var(--line); cursor: pointer; }
.tbl tbody tr:first-child { border-top: 0; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tbody tr.open { background: var(--hover); }
.tbl tbody td { padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.tbl td.name { font-weight: 500; }
.tbl tr.detail > td { padding: 0; background: var(--pane-body); box-shadow: var(--inset-body); cursor: default; }
.tbl tr.detail:hover { background: var(--pane-body); }

/* theme switcher (Light / Dark / dubTC) — shared by every tool page. Pages
   add the pre-paint snippet in <head> + the #themes buttons; dubtc-theme.js
   logic is small enough that each page carries the 8-line wire-up. */
.themes { display: flex; border: 1px solid var(--ring); border-radius: var(--radius); overflow: hidden; flex: 0 0 auto; }
.themes button { padding: 6px 10px; font: 500 11px 'Roboto',sans-serif; cursor: pointer; border: 0;
                 background: var(--seg-bg); color: var(--ink-soft); border-left: 1px solid var(--line); }
.themes button:first-child { border-left: 0; }
.themes button.on { background: var(--chip-on); color: var(--chip-on-ink); font-weight: 700; }
/* embedded tools follow the parent page's stored theme; no second switcher */
html.embed .themes { display: none; }

/* column-picker button + dialog */
.colpick-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; overflow-y: auto; max-height: 62vh; }
.colpick-group { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 8px 8px 3px; }
.colpick-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius); cursor: pointer; }
.colpick-row:hover { background: var(--hover); }
.colpick-row input { accent-color: var(--neon); }
.colpick-row .sub { margin-left: auto; }
.colpick-sub { margin: 0 8px 6px 30px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }