/* Recon strategy desk — denser than the scout app, same dark forest.
 *
 * A different job from either other surface. The phone exists to take as little attention as
 * possible from someone watching a robot; the console exists to answer "is every station
 * covered"; this exists to answer "what is this robot actually like", with the evidence
 * beside every claim.
 *
 * Denser, but not a Bloomberg terminal and not a generic admin dashboard
 * (recon-design-system §11).
 */

body.sg { max-width: none; }
body.sg main { max-width: none; padding: 0; }

.shead {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s6);
  border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
.shead .ctag {
  font: 700 10px/1 Inter, sans-serif; letter-spacing: 2px; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 999px; padding: 4px 8px;
}

/* Two columns: the roster stays put while a profile scrolls. A strategy user is comparing,
   which means going back to the list constantly — burying it under the profile would make
   every comparison a scroll to the top. */
#s-main { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; }

.sglist {
  border-right: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 53px; height: calc(100dvh - 53px); overflow-y: auto;
  padding: var(--s4);
}
.sgsearch {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 0 var(--s3); color: var(--text-3);
}
.sgsearch input {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--text);
  font: 400 14px/1 Inter, sans-serif; padding: 12px 0; min-height: 0;
}
.sgsearch input:focus { outline: none; }
.sgcount { margin: var(--s3) 0 var(--s2); font-size: 12px; }

.sgrow {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 10px var(--s3); border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--text); cursor: pointer; text-align: left;
  font: inherit; margin-bottom: 2px;
}
.sgrow:hover { background: var(--raised); }
.sgrow.on { background: var(--raised); border-color: var(--emerald); }
.sgrow .n { font: 700 15px/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
  min-width: 46px; }
.sgrow .nm { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgrow .bps { font: 600 12px/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
  color: var(--text-3); }
.sgrow.on .bps { color: var(--green-hot); }
/* A team with no reports at all is dimmed rather than hidden: "we have never scouted 9999"
   is itself a strategy fact, and hiding it makes it look like the team is not here. */
.sgrow.nodata .n, .sgrow.nodata .nm { opacity: .5; }

/* min-width:0 IS A BUG FIX, NOT A TWEAK.
 *
 * A grid item's default `min-width: auto` means it will not shrink below its own content, so
 * `minmax(0, 1fr)` on the TRACK is not enough — the item overflows the track it sits in. At
 * 375px this made .sgmain 485px wide inside a 375px column, the comparison table ran off the
 * screen, and `html{overflow-x:hidden}` in styles.css hid the evidence by clipping it.
 *
 * Every `.scrollx` inside here was doing nothing for the same reason: an overflow container
 * cannot constrain anything while its ancestor is already too wide. */
/* `body.sg main.sgmain`, not `.sgmain`. This IS a <main>, and `body.sg main { padding: 0 }`
 * above has specificity (0,1,2) against this rule's (0,1,0) — so the padding here never
 * applied and the desk's main pane has been flush to its edges since it was written. The
 * panels carry their own padding so most of it looked intentional; the team identity block,
 * which has none, sat hard against the border. Only obvious once it was on a phone. */
body.sg main.sgmain { padding: var(--s6); min-height: calc(100dvh - 53px); min-width: 0; }

/* ---------------------------------------------------------------- profile */
.sgid { display: flex; gap: var(--s6); align-items: flex-start; margin-bottom: var(--s6); }
.sgshot {
  width: 220px; height: 165px; flex: none; border-radius: var(--r-md); overflow: hidden;
  background: #0a1712; border: 1px dashed var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--text-3); position: relative;
}
.sgshot.has-img { border-style: solid; }
.sgshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgshot .cap { font: 600 10px/1.3 Inter, sans-serif; letter-spacing: .6px;
  text-transform: uppercase; text-align: center; padding: 0 var(--s3); }
.sgshot .stamp {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 5px 8px;
  background: rgba(7,17,13,.86); font: 600 9px/1.3 Inter, sans-serif; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text-3); text-align: center;
}
.sgshot .stamp.warn { color: var(--gold); }

.sgname { flex: 1; min-width: 0; }
.sgname h1 { font: 700 40px/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
  margin: 0 0 6px; }
.sgname .nick { font-size: 17px; color: var(--text-2); margin-bottom: var(--s4); }
.sgname .where { font-size: 13px; color: var(--text-3); }

.sgcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s4); align-items: start; }

.sgpanel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s4); margin-bottom: var(--s4);
}
.sgpanel > h3 {
  font: 700 10px/1 Inter, sans-serif; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 var(--s4);
  display: flex; align-items: center; gap: 7px;
}
.sgpanel > h3 .src {
  margin-left: auto; font-weight: 500; letter-spacing: .4px; text-transform: none;
  font-size: 11px;
}

/* ---------------------------------------------------------------- charts */
/* Small multiples, drawn as SVG. No chart library: the shapes here are a bar row and a line,
   and a dependency to draw two shapes is a dependency that has to be kept offline-safe. */
.spark { width: 100%; height: 74px; display: block; }
.spark .bar { fill: #1d4536; }
.spark .bar.hi { fill: var(--emerald); }
.spark .line { fill: none; stroke: var(--green-hot); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.spark .dot { fill: var(--green-hot); }
.spark .axis { stroke: var(--border); stroke-width: 1; }
.spark .lbl { fill: var(--text-3); font: 500 8px/1 Inter, sans-serif; }
.chartcap { font-size: 11px; color: var(--text-3); margin-top: 6px;
  display: flex; justify-content: space-between; }

/* ---------------------------------------------------------------- rows */
.sgline { display: flex; align-items: baseline; gap: var(--s3); padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: 13px; }
.sgline:last-child { border-bottom: 0; }
.sgline .k { flex: 0 0 130px; color: var(--text-3); }
.sgline .v { flex: 1; min-width: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.sgline .v.dash { color: var(--text-3); }
.sgline .why { color: var(--text-3); font-size: 11px; }

.sgtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.sgtable th { text-align: left; font: 600 9px/1 Inter, sans-serif; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-3); padding: 0 var(--s3) var(--s2) 0; }
.sgtable td { padding: 7px var(--s3) 7px 0; border-top: 1px solid var(--border);
  color: var(--text-2); font-variant-numeric: tabular-nums; }
.sgtable td.num { color: var(--text); font-weight: 600; }
.sgtable tr.loss td:first-child { color: #E0705F; }
.sgtable tr.win td:first-child { color: var(--green-hot); }

/* ---------------------------------------------------------------- evidence */
/* The summary layer. Counted, never generated — every line is a tally with an n behind it. */
.evid { font-size: 14px; line-height: 1.75; color: var(--text); }
.evid strong { font-variant-numeric: tabular-nums; }
.evid .none { color: var(--text-3); }
.evidnote {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6; color: var(--text-3);
}

.sgtag { display: inline-block; font: 600 9px/1 Inter, sans-serif; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 7px; border-radius: 4px; margin-left: 6px;
  border: 1px solid var(--border); color: var(--text-3); }
.sgtag.gold { border-color: rgba(212,175,55,.4); color: var(--gold); }

/* 900px is where the desk stops being two columns, so it is where every consequence of
   being one column belongs — including the ones added for phones. A portrait tablet at 768px
   was landing between two breakpoints: stacked layout, none of the fixes for it. */
@media (max-width: 900px) {
  /* flex, not grid, so the main pane can be ordered ABOVE the roster. `align-items` must be
     reset: the desktop rule sets `start`, and in a column flex container that sizes each
     item to its own content width instead of stretching it. */
  #s-main { display: flex; flex-direction: column; align-items: stretch; }
  .sglist { order: 2; position: static; height: auto; border-right: 0;
    border-top: 1px solid var(--border); border-bottom: 0; }

  /* MODES ABOVE THE ROSTER. The roster is ~40 rows at a real event, and with it first a
     strategy person scrolled past every team in the building to reach "Pick list".
     An EXPLICIT width: `align-items: stretch` plus `min-width: 0` measurably was not enough
     — the pane still sized itself to a 463px table inside a 375px screen. A definite width
     cannot be overridden by content, and it is what lets the `.scrollx` inside finally
     scroll: an overflow container needs a definite size to scroll relative to. */
  body.sg main.sgmain { order: 1; padding: var(--s4); min-height: 0;
                        width: 100%; max-width: 100%; min-width: 0; }
  .sgpanel, #sgCompare, #sgPickList, #sgTeam { max-width: 100%; min-width: 0; }

  /* Sticky, so the way between the three modes is one tap rather than a scroll to the top.
     No negative-margin bleed: it made this bar wider than its parent and, with the
     `align-items` above, widened the pane itself — the overflow this block exists to remove,
     reintroduced by the fix for it. */
  .sgmodes { position: sticky; top: 0; z-index: 5; background: var(--bg);
             margin: 0 0 var(--s4); padding: var(--s3) 0; }
  .sgmodes button { flex: 1; padding: 9px 6px; }

  /* The roster is only needed to CHOOSE a robot. In the other two modes it is a long scroll
     past information nobody on this screen is looking for. */
  body[data-mode="compare"] .sglist,
  body[data-mode="picklist"] .sglist { display: none; }

  .sgid { flex-direction: column; gap: var(--s4); }
  .sgshot { width: 100%; height: 200px; }
  .sgname h1 { font-size: 32px; }
}

/* ---------------------------------------------------------------- desk modes */
/* Robot · Compare · Pick list. Segmented rather than a second rail: these are three views of
   the same event, not three places, and a rail would imply leaving the desk. */
.sgmodes{display:flex;gap:6px;margin-bottom:var(--s4);border-bottom:1px solid var(--border);
  padding-bottom:var(--s3)}
.sgmodes button{background:none;border:1px solid transparent;border-radius:var(--r-sm);
  color:var(--text-2);cursor:pointer;font:600 13px/1 Inter,sans-serif;padding:9px 14px;
  min-height:38px}
.sgmodes button:hover{color:var(--text)}
.sgmodes button[aria-pressed="true"]{background:var(--raised);border-color:var(--border);
  color:var(--green-hot)}
.sgpanel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s6)}
.sgpanel .phead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s4)}
.sgpanel h2{font:700 17px/1.2 Inter,sans-serif;margin:0}

/* ================================================================ the desk on a phone
 *
 * The desk was built desktop-shaped on purpose — §11 calls it a workbench, not a phone
 * screen — and that was fine while the only way in was a laptop. Putting Compare and Pick
 * list on the scout's HOME screen changed the premise: a strategy person now arrives here
 * from a phone, and "desktop-shaped" stopped being a description and became a defect.
 *
 * This does not turn the desk into a phone app. It makes the three things somebody actually
 * does here survive a 375px screen.
 */
@media (max-width: 700px) {
  /* THE HEADER, which fits at tablet width and does not at phone width. flex-wrap:nowrap
     meant the event name and the signed-in name were simply clipped off the right edge —
     482px of content in a 375px bar. */
  .shead { flex-wrap: wrap; row-gap: 4px; padding: var(--s3) var(--s4); }
  .shead .spacer { display: none; }
  .shead #sgEvent { flex: 1 1 100%; order: 3; }
  /* The roles list is the first thing worth losing: reference, not navigation, and the
     longest string in the bar. */
  .shead #sgWho { max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }

  .sgpanel { padding: var(--s4); border-radius: var(--r-sm); }
  .sgpanel .phead { flex-direction: column; align-items: flex-start; gap: 4px; }
}