/* Recon — Copyright (c) 2026 Tedd Tony */
/* Strategy dashboard, 1240px reference.

   Soft and open: panes are separated by space and shading rather than ruled
   lines, controls are pill-shaped, and red marks only what is selected or
   needs attention. Colours come from theme.css, so everything here works in
   both the dark and the light theme. */

*{box-sizing:border-box}
html,body{margin:0;background:var(--page);font-family:var(--f-body)}
body{padding:24px;color:var(--t0);min-width:1240px;font-weight:500}
a{color:var(--red-link);text-decoration:none;font-weight:700}
a:hover{text-decoration:underline}
.tnum{font-variant-numeric:tabular-nums}
button{font-family:var(--f-body)}
input,select,textarea{font-family:var(--f-body)}

/* 1240px is the floor and the design canvas, not a maximum. */
.shell{
  min-width:1240px; max-width:1600px; margin:0 auto;
  background:var(--panel); border-radius:28px;
  overflow:hidden; box-shadow:var(--shadow);
}

/* ---------------------------------------------------------------- header */
.apphead{display:flex;flex-direction:column;gap:14px;padding:22px 28px 16px}
.apphead .bar{display:none}
.apphead .in{flex:1;display:flex;align-items:center;gap:16px}
.apphead .logo{width:44px;height:44px;border-radius:50%;background:var(--red);color:var(--on-red);
  display:grid;place-items:center;font:700 15px var(--f-num);flex:none}
.apphead h1{font:800 20px/1.15 var(--f-body);margin:0}
.apphead .sub{font:600 14px var(--f-body);color:var(--t4);margin-top:2px}
.apphead .sp{flex:1}

/* status pills: green fine, amber look soon, red act now */
.pill{display:inline-flex;align-items:center;gap:7px;font:700 13px var(--f-body);
  padding:6px 13px;border-radius:999px;white-space:nowrap;background:var(--soft);color:var(--t1)}
.pill .d{width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--green);background:var(--green-bg)}
.pill.warn{color:var(--amber);background:var(--amber-bg)}
.pill.bad{color:var(--red-alert);background:var(--red-bg)}

/* tabs: three groups of pills */
.nav{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.nav .grp{display:flex;gap:4px;align-items:center}
.nav .gl{font:700 12px var(--f-body);color:var(--t5);margin-right:6px}
.nav button{padding:8px 16px;border-radius:999px;border:0;background:transparent;cursor:pointer;
  font:700 14.5px var(--f-body);color:var(--t2)}
.nav button:hover{background:var(--soft);color:var(--t0)}
.nav button.on{background:var(--red);color:var(--on-red)}
.nav button:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* segmented control - picklist modes and the like */
.seg{display:flex;gap:2px;background:var(--soft);border-radius:999px;padding:3px}
.seg button{
  padding:7px 14px;border-radius:999px;border:none;background:transparent;
  font:700 13px var(--f-body);color:var(--t3);cursor:pointer;
}
.seg button.on{background:var(--red);color:var(--on-red)}
.seg.small{padding:2px}
.seg.small button{padding:4px 11px;font-size:12px}

/* panes sit side by side with space between, not ruled lines */
.cols{display:grid;gap:28px;padding:10px 28px 28px}
.cols.live{grid-template-columns:270px 1fr 290px}
.cols.one{grid-template-columns:1fr}
.pane{padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.pane.mid{gap:18px}

.eyebrow{font:800 15px var(--f-body);color:var(--t0)}
.eyebrow.red{color:var(--red-alert)}
.hint{font:500 13px/1.5 var(--f-body);color:var(--t5)}

/* ------------------------------------------------------------- on field */
.mrow{border-radius:22px;padding:13px 18px}
.mrow.now{background:var(--red-bg)}
.mrow .top{display:flex;justify-content:space-between;font:700 13px var(--f-body)}
.mrow .top .l{color:var(--t4)}
.mrow .top .r{color:var(--red-alert)}
.mrow.now .top .l{color:var(--red-alert)}
.mrow .teams{margin-top:4px;font:600 20px/1.3 var(--f-num);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.mrow .teams.red{color:var(--red-label)}
.mrow .teams.blue{color:var(--blue-label)}
.mrow.next .teams{font-size:18px;color:var(--t2)}
.mrow.later .teams{font-size:18px;color:var(--t6)}

.callout{margin-top:6px;padding:13px 17px;border-radius:22px;background:var(--amber-bg)}
.callout .h{font:800 14px var(--f-body);color:var(--amber)}
.callout .b{font:500 13.5px/1.5 var(--f-body);color:var(--t1);margin-top:3px}

/* ---------------------------------------------------------------- tiles
   Big numbers in a row, without boxes round them. */
.tiles{display:flex;gap:40px;flex-wrap:wrap}
.tile{padding:0;display:flex;flex-direction:column}
.tile .v{order:1}
.tile .c{order:3}
.tile .k{font:600 14px var(--f-body);color:var(--t2);order:2}
.tile .v{font:700 40px/1.05 var(--f-num)}
.tile .v small{font-size:20px;color:var(--t6)}
.tile .c{font:600 13px var(--f-body);color:var(--t5)}
.tile .c.warn{color:var(--red-alert)}
.tile.alert .k{color:var(--red-alert)}
.tile.alert .v{color:var(--red-alert)}
.tile.alert .c{color:var(--t4)}

/* --------------------------------------------------------------- tables
   A list with soft alternating rows, no grid lines. */
.tbl{display:flex;flex-direction:column;gap:2px}
.tbl .cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 4px 8px}
.tbl .cap .t{font:800 16px var(--f-body)}
.tbl .cap .n{font:500 13px var(--f-body);color:var(--t4)}
.tbl .cap .n b{color:var(--t1)}
.tbl .hd,.tbl .r{display:grid;align-items:center}
.tbl .hd{padding:4px 16px;font:700 13px var(--f-body);color:var(--t5)}
.tbl .hd span{cursor:pointer}
.tbl .hd span:hover{color:var(--t1)}
.tbl .r{padding:10px 16px;border-radius:18px;
  font:500 14.5px var(--f-body);font-variant-numeric:tabular-nums}
.tbl .r:nth-child(odd){background:var(--soft)}
.tbl .num{text-align:right}
/* RANK sits immediately left of the team number and the grid has no gap, so
   the column carries its own trailing space. */
.tbl .rk{text-align:right;padding-right:14px;color:var(--t5)}
.tbl .tno{font:700 18px var(--f-num)}
.tbl .nm{color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl .band{color:var(--t6);font-size:12.5px}

.cl{font:700 12.5px var(--f-body);padding:3px 10px;border-radius:999px;background:var(--soft2);color:var(--t2);white-space:nowrap}
.cl.l3{background:var(--red-bg);color:var(--red-alert)}
.cl.l2{color:var(--t1)}
.cl.l1{color:var(--t4)}
.cl.none{background:transparent;color:var(--t6)}
.tbl .r:nth-child(odd) .cl:not(.l3):not(.none){background:var(--panel)}

.trust{display:inline-block;width:56px;height:6px;border-radius:3px;background:var(--soft2);overflow:hidden;vertical-align:middle}
.trust i{display:block;height:6px;border-radius:3px;background:var(--red)}
.trust i.low{background:var(--red-dim)}
.tbl .r:nth-child(odd) .trust{background:var(--panel)}

/* -------------------------------------------------------------- picklist */
.pk{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:18px;background:var(--soft)}
.pk.top{background:var(--red-bg)}
.pk .i{font:700 14px var(--f-num);color:var(--red-alert);width:14px}
.pk .n{font:700 17px var(--f-num);min-width:44px}
.pk .nm{flex:1;font:500 13px var(--f-body);color:var(--t2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pk .s{font:800 13px var(--f-body);color:var(--red-label)}
.pk.taken{opacity:.45}
.pk.taken .nm{text-decoration:line-through}
.pk.dnp{background:transparent;box-shadow:inset 0 0 0 2px var(--red-ring)}
.x{font:700 12px var(--f-body);color:var(--t3);cursor:pointer;
  border:0;border-radius:999px;padding:4px 11px;background:var(--soft2)}
.x:hover{color:var(--t0)}
.pk .x{background:var(--panel)}

/* Filters over the draft board. One row, directly above what it scopes. An
   active filter wears red, so a list that is hiding rows can never look like
   the whole list. */
.pkf{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 4px 10px}
.pkf input,.pkf select{background:var(--soft);border:0;border-radius:999px;
  padding:7px 12px;color:var(--t0);font:600 13px var(--f-body)}
.pkf input{width:150px}
.pkf input::placeholder{color:var(--t6);font-weight:500}
.pkf select{color:var(--t1);cursor:pointer}
.pkf button{padding:7px 12px;border-radius:999px;background:var(--soft);cursor:pointer;
  border:0;color:var(--t3);font:700 12.5px var(--f-body)}
.pkf button.on{background:var(--red-bg);color:var(--red-alert)}
.pkf .c{margin-left:auto;white-space:nowrap;font:500 13px var(--f-body);color:var(--t5)}
.pkf button.clear{background:transparent;color:var(--t5)}

.wt{display:flex;flex-direction:column;gap:4px}
.wt .lb{display:flex;justify-content:space-between;font:600 13px var(--f-body);color:var(--t3)}
.wt input[type=range]{width:100%;accent-color:var(--red);height:4px}

/* ---------------------------------------------------------------- misc */
.list{display:flex;flex-direction:column;gap:6px}
.kv{display:flex;justify-content:space-between;gap:12px;font:500 14px var(--f-body);color:var(--t2);
  padding:7px 4px}
.kv + .kv{border-top:1px solid var(--line-row)}
.kv b{color:var(--t0);font-weight:700}
.mono{font-family:var(--f-mono)}
.hide{display:none !important}
.empty{padding:22px 16px;font:500 14px var(--f-body);color:var(--t5);text-align:center;
  background:var(--soft);border-radius:22px}

/* ------------------------------------------------------------- charts */
/* Marks carry the series colour; every piece of text wears a text token, so a
   chart stays readable if a hue is hard to see. */
.chart{display:flex;flex-direction:column;gap:8px}
.chart .plot{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{font:600 11px var(--f-body);fill:var(--t5)}
.chart .rowlab{font:700 13px var(--f-num);fill:var(--t2)}
.chart .val{font:600 11.5px var(--f-body);fill:var(--t4)}
.chart .endlab{font:700 11.5px var(--f-body);fill:var(--t3)}
.chart .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .band{opacity:.16;stroke:none}
/* The 2px ring is the surface doing the separating, so a dot stays legible
   where it lands on another line. */
.chart .dot{stroke:var(--panel);stroke-width:2}
.chart .bar{stroke:none}
.chart .cross{stroke:var(--track);stroke-width:1}
.chart .agree{stroke:var(--track);stroke-width:1;stroke-dasharray:3 4}
.chart .legend{display:flex;flex-wrap:wrap;gap:4px 14px}
.chart .legend .key{display:flex;align-items:center;gap:6px;
  font:600 12.5px var(--f-body);color:var(--t3)}
.chart .legend .key i{width:12px;height:3px;border-radius:2px;flex:none}
.chart .tip{position:absolute;pointer-events:none;z-index:5;min-width:130px;
  background:var(--chrome);border-radius:16px;
  padding:9px 12px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.chart .tip .hd{font:800 12.5px var(--f-body);color:var(--t2);margin-bottom:5px}
.chart .tip .row{display:flex;align-items:center;gap:7px;padding:1px 0}
.chart .tip .row i{width:10px;height:3px;border-radius:2px;flex:none}
.chart .tip .row b{font:700 14px var(--f-num);color:var(--t0);min-width:34px}
.chart .tip .row span{font:500 12px var(--f-body);color:var(--t4)}
.chart .tip .u{font:500 11px var(--f-body);color:var(--t5);margin-top:4px}
.chart .tblview summary{font:600 12.5px var(--f-body);color:var(--t4);cursor:pointer}
.chart .tblview table{width:100%;border-collapse:collapse;margin-top:6px}
.chart .tblview th,.chart .tblview td{text-align:right;padding:5px 8px;
  font:500 12.5px var(--f-body);color:var(--t2)}
.chart .tblview tr:nth-child(even) td{background:var(--soft)}
.chart .tblview th:first-child,.chart .tblview td:first-child{text-align:left;color:var(--t4)}
.chart .tblview th{color:var(--t5);font-weight:700}
.empty-chart{padding:22px 16px;font:500 14px var(--f-body);color:var(--t5);text-align:center;
  background:var(--soft);border-radius:22px}

/* The team picker above the event-wide charts. One row, above what it scopes. */
.picker{display:flex;flex-wrap:wrap;gap:6px}
.picker button{padding:6px 12px;border-radius:999px;background:var(--soft);cursor:pointer;
  border:0;color:var(--t3);font:700 12.5px var(--f-body)}
.picker button.on{background:var(--soft2);color:var(--t0)}
.picker button.on i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

/* --------------------------------------------------------- pit questions */
.qlist{display:flex;flex-direction:column;gap:10px}
.qcard{background:var(--soft);border-radius:22px;padding:14px 16px;display:grid;
  grid-template-columns:1fr 170px auto;gap:10px 12px;align-items:center}
.qcard input,.qcard select{width:100%;background:var(--panel);border:2px solid transparent;border-radius:14px;
  padding:9px 13px;color:var(--t0);font:600 14px var(--f-body)}
.qcard input:focus,.qcard select:focus{outline:none;border-color:var(--red-ring)}
.qcard input::placeholder{color:var(--dim);font-weight:500}
.qcard .wide{grid-column:1 / 3}
.qcard .tools{display:flex;gap:4px}
.qcard .sub{font:600 12.5px var(--f-body);color:var(--t4);margin-bottom:4px}
.qbtn{padding:9px 16px;border-radius:999px;border:0;background:var(--soft);color:var(--t1);
  font:700 14px var(--f-body);cursor:pointer}
.qbtn:hover{color:var(--t0)}
.qbtn.go{background:var(--red);color:var(--on-red);font-weight:800}
.qbtn.sm{padding:7px 11px;font-size:13px;background:var(--panel)}
.qbtn:disabled{opacity:.4;cursor:default}
.qprev{display:flex;flex-direction:column;gap:14px;background:var(--soft);border-radius:22px;padding:16px}
.qprev .lbl{font:700 14px var(--f-body);color:var(--t1);margin-bottom:6px}
.qprev .chips{display:flex;gap:6px;flex-wrap:wrap}
.qprev .chip{padding:7px 14px;border-radius:999px;background:var(--panel);font:700 13px var(--f-body);color:var(--t1)}
.qprev .box{height:38px;border-radius:14px;background:var(--panel)}
.qprev .h2{font:500 12.5px var(--f-body);color:var(--dim);margin-top:4px}

/* ------------------------------------------------- scout: match or pit */
/* The Scout button asks which kind first. A <details>, so it needs no script
   and closes again with a second click. */
.scoutpick{position:relative;display:inline-block}
.scoutpick>summary{list-style:none;cursor:pointer}
.scoutpick>summary::-webkit-details-marker{display:none}
.scoutpick>summary::after{content:" ▾";color:var(--t5)}
.scoutpick .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:240px;
  display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:20px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.scoutpick .menu a{display:block;padding:10px 14px;border-radius:14px;color:var(--t0);
  font:700 14.5px var(--f-body)}
.scoutpick .menu a:hover{background:var(--soft);text-decoration:none}
.scoutpick .menu a span{display:block;font:500 12.5px/1.4 var(--f-body);color:var(--t5);margin-top:2px}

/* Built-in pit questions: a name and Remove / Put back, nothing to edit. */
.qcard.builtin{grid-template-columns:1fr auto;padding:10px 16px}
.qcard.builtin .blbl{font:700 14px var(--f-body);color:var(--t1)}
.qcard.builtin.off .blbl{color:var(--dim);text-decoration:line-through}