/* Rosterguise HQ -- dark control panel for a dynasty franchise. */

:root {
  --bg:        #0b0f16;
  --bg-2:      #111823;
  --panel:     #141c29;
  --panel-2:   #1a2434;
  --line:      #22304a;
  --line-soft: #1a2333;

  --ink:       #e8eef8;
  --ink-2:     #9fb0ca;
  --ink-3:     #6b7d99;

  --good:      #35d07f;
  --good-dim:  #1d7a4c;
  --warn:      #f5b53d;
  --bad:       #ff6b6b;
  --accent:    #56a8ff;
  --accent-dim:#1e4b7a;

  --radius: 12px;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text and widening rows */
  text-size-adjust: 100%;
}

/* Long unbroken strings (file paths, session ids, contract notes) are the other
   thing that quietly forces a page wider than the screen. */
body { overflow-wrap: anywhere; }
.mono, code, pre { overflow-wrap: anywhere; word-break: break-word; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }

/* Anything hidden stays hidden. Without this, a rule like `.pill { display:
   inline-flex }` quietly beats the hidden attribute and the cap pill from one
   league sits on screen while All leagues is selected. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------- app shell */

#app { display: grid; grid-template-columns: 208px minmax(0, 1fr); height: 100vh; }
#app.chat-open { grid-template-columns: 208px minmax(0, 1fr) 400px; }

/* ------------------------------------------------------------- nav rail */

#nav {
  background: var(--bg-2); border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; overflow-y: auto;
}
.brand { padding: 18px 18px 14px; border-bottom: 1px solid var(--line-soft); }
.brand h1 { margin: 0; font-size: 15px; letter-spacing: -0.2px; }
.brand .sub { color: var(--ink-3); font-size: 11px; margin-top: 3px; }

.navlist { padding: 10px 8px; flex: 1; }
.navitem {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin-bottom: 2px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2); cursor: pointer; text-align: left;
}
.navitem:hover { background: var(--panel); color: var(--ink); }
.navitem.on { background: var(--accent-dim); color: #fff; }
.navitem .ico { width: 18px; text-align: center; opacity: .9; font-size: 13px; }
.navitem .badge {
  margin-left: auto; background: var(--bad); color: #fff; font-size: 10px;
  font-weight: 700; padding: 1px 6px; border-radius: 9px;
}
.navitem.on .badge { background: rgba(0,0,0,.35); }

.navfoot { padding: 12px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--ink-3); }
.navfoot .row { display: flex; justify-content: space-between; margin-bottom: 4px; }

/* ------------------------------------------------------------- main */

#main { overflow-y: auto; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 12px 22px; background: rgba(11,15,22,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar h2 { margin: 0; font-size: 16px; font-weight: 600; }
.topbar .spacer { flex: 1; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; font-size: 12px; background: var(--panel); border: 1px solid var(--line);
}
.pill.good { color: var(--good); border-color: var(--good-dim); }
.pill.warn { color: var(--warn); border-color: #6b4d12; }
.pill.bad  { color: var(--bad); border-color: #6b2020; }
.pill .mono { font-family: var(--mono); font-weight: 600; }

.btn {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); cursor: pointer;
}
.btn:hover { background: var(--panel-2); border-color: var(--accent-dim); }
.btn.primary { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #245d96; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { padding: 3px 9px; font-size: 12px; }

.page { padding: 22px; max-width: 1180px; min-width: 0; }
.page.wide { max-width: none; }

/* At ANY width, a table too wide for its card scrolls inside the card rather
   than dragging the whole page with it. */
.card .body, .card .body.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.card, .hero, .explain, .banner, .stats { min-width: 0; max-width: 100%; }

/* ------------------------------------------------------------- hero */

.hero {
  background: linear-gradient(135deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 16px;
}
.hero .headline { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 6px; }
.hero .sub { color: var(--ink-2); font-size: 13px; }
.hero .sub strong { color: var(--ink); }

/* ------------------------------------------------------------- stat cards */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; transition: border-color .12s, transform .12s;
  text-align: left; width: 100%;
}
.stat:hover { border-color: var(--accent); transform: translateY(-1px); }
.stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-3); }
.stat .value { font-family: var(--mono); font-size: 26px; font-weight: 600; margin: 6px 0 2px; letter-spacing: -1px; }
.stat .value.good { color: var(--good); }
.stat .value.warn { color: var(--warn); }
.stat .value.bad  { color: var(--bad); }
.stat .foot { font-size: 11px; color: var(--ink-3); }
.stat .more { font-size: 10px; color: var(--accent); margin-top: 6px; opacity: 0; transition: opacity .12s; }
.stat:hover .more { opacity: 1; }

/* ------------------------------------------------------------- cards */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 16px; overflow: hidden;
}
.card > header {
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.card > header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card > header .hint { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.card > header .spacer { flex: 1; }
.card .body { padding: 14px 16px; }
.card .body.flush { padding: 0; }

.explain {
  font-size: 12px; color: var(--ink-2); background: var(--bg-2);
  border-left: 2px solid var(--accent-dim); padding: 8px 12px; margin-bottom: 12px; border-radius: 0 6px 6px 0;
}

/* ------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2);
  cursor: pointer; font-size: 13px;
}
.chip:hover { border-color: var(--accent); }
.chip .n {
  font-family: var(--mono); font-weight: 700; background: var(--bad);
  color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px;
}
.chip.ok { border-color: var(--good-dim); color: var(--good); }
.chip.ok .n { background: var(--good-dim); }

/* ------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 9px 14px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ink-3); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel); cursor: pointer; white-space: nowrap;
}
thead th:hover { color: var(--ink); }
thead th.num, tbody td.num { text-align: right; font-family: var(--mono); }
tbody td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--panel-2); }
tbody tr.me { background: rgba(86,168,255,.07); }
tbody tr.detail td { background: var(--bg-2); padding: 0; }

.pos {
  display: inline-block; min-width: 30px; text-align: center; padding: 1px 6px;
  border-radius: 5px; font-size: 11px; font-weight: 700; font-family: var(--mono);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2);
}
.pos.QB { color: #ff9e64; border-color: #6b3f1f; }
.pos.RB { color: #7ee787; border-color: #1f5c2c; }
.pos.WR { color: #79c0ff; border-color: #1f4a75; }
.pos.TE { color: #d2a8ff; border-color: #4a2f6b; }
.pos.PK { color: #f5b53d; border-color: #6b4d12; }
.pos.DT, .pos.DE, .pos.LB, .pos.CB, .pos.S { color: #ff7b9c; border-color: #6b2035; }

.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); }
.right { text-align: right; }

.bar { height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; min-width: 44px; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ------------------------------------------------------------- drawer */

#drawer {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
#drawer.open { display: block; }
#drawer .sheet {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(560px, 92vw);
  background: var(--bg-2); border-left: 1px solid var(--line);
  overflow-y: auto; padding: 20px 22px;
}
#drawer h3 { margin: 0 0 4px; font-size: 16px; }
#drawer .close { position: absolute; top: 14px; right: 18px; }

.ledger { width: 100%; font-family: var(--mono); font-size: 13px; }
.ledger td { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.ledger td:last-child { text-align: right; }
.ledger tr.total td { border-top: 1px solid var(--line); border-bottom: 0; font-weight: 700; padding-top: 10px; }

/* ------------------------------------------------------------- forms */

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); margin-bottom: 5px; }
input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; align-items: end; }

/* ------------------------------------------------------------- chat rail */

#chat { background: var(--bg-2); border-left: 1px solid var(--line-soft); display: none; flex-direction: column; height: 100vh; }
#app.chat-open #chat { display: flex; }
#chat header { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 8px; }
#chat header h3 { margin: 0; font-size: 14px; }
#chat .logwrap { flex: 1; position: relative; display: flex; min-height: 0; }
#chat .log { flex: 1; overflow-y: auto; padding: 14px 16px; }
#chatJump {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  z-index: 5; background: var(--accent-dim); border-color: var(--accent);
  color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.45); white-space: nowrap;
}
#chatJump:hover { background: #245d96; }
#chat .composer { border-top: 1px solid var(--line-soft); padding: 10px 12px; }
#chat textarea { resize: none; height: 62px; }

.msg { margin-bottom: 14px; }
.msg .who { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-3); margin-bottom: 4px; }
.msg.user .bubble { background: var(--accent-dim); border-radius: 10px 10px 2px 10px; padding: 9px 12px; }
.msg.bot .bubble { background: var(--panel); border: 1px solid var(--line); border-radius: 10px 10px 10px 2px; padding: 10px 12px; }
.msg .bubble p:first-child { margin-top: 0; } .msg .bubble p:last-child { margin-bottom: 0; }
.msg .bubble code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 12px; }
.msg .bubble pre { background: var(--bg); padding: 10px; border-radius: 8px; overflow-x: auto; font-size: 12px; }
.msg .bubble pre code { background: none; padding: 0; }

.toolcall {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 5px 9px; margin: 5px 0; overflow-x: auto; white-space: nowrap;
}
.toolcall b { color: var(--accent); font-weight: 600; }
.turnmeta { font-size: 10px; color: var(--ink-3); margin-top: 5px; font-family: var(--mono); }

.starters { display: flex; flex-direction: column; gap: 6px; }
.starter {
  text-align: left; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); cursor: pointer; font-size: 12.5px;
}
.starter:hover { border-color: var(--accent); background: var(--panel-2); }
.starter b { display: block; color: var(--ink); margin-bottom: 1px; }
.starter span { color: var(--ink-3); font-size: 11px; }

.dots::after { content: '.'; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0%,20%{content:'.'} 40%{content:'..'} 60%{content:'...'} 80%,100%{content:''} }

.banner {
  padding: 9px 13px; border-radius: 8px; font-size: 12.5px; margin-bottom: 14px;
  border: 1px solid var(--line);
}
.banner.warn { background: rgba(245,181,61,.08); border-color: #6b4d12; color: #f0cd8a; }
.banner.bad  { background: rgba(255,107,107,.08); border-color: #6b2020; color: #ffb0b0; }
.banner.good { background: rgba(53,208,127,.07); border-color: var(--good-dim); color: #8ee9b8; }

.empty { text-align: center; padding: 40px 20px; color: var(--ink-3); }
.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Narrow screens: the rail becomes a scrollable strip across the top rather
   than disappearing, so navigation still exists on a phone or a split window. */
@media (max-width: 1100px) {
  #app, #app.chat-open { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }
  #nav { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line-soft); overflow: hidden; min-width: 0; }
  .brand { border-bottom: 0; padding: 10px 14px; white-space: nowrap; }
  .brand .sub { display: none; }
  .navlist { display: flex; gap: 4px; overflow-x: auto; padding: 8px; flex: 1; min-width: 0; -webkit-overflow-scrolling: touch; }
  .navlist::-webkit-scrollbar { display: none; }
  .navitem { width: auto; white-space: nowrap; margin: 0; }
  .navitem span:not(.ico):not(.badge) { display: none; }
  .navitem .ico { font-size: 15px; }
  .navfoot { display: none; }
  #app.chat-open #chat { position: fixed; right: 0; top: 0; bottom: 0; width: min(400px, 92vw); z-index: 60; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  #searchWrap { order: 9; width: 100%; }
}

#searchWrap { position: relative; }
#playerSearch { width: 190px; padding: 5px 10px; font-size: 12.5px; }

/* ------------------------------------------------- right-click note capture */

.notebox {
  position: fixed; z-index: 300; width: 300px;
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 10px; padding: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.6);
}
.notebox .nb-head { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.notebox .nb-ctx { font-size: 11px; color: var(--ink-3); margin-bottom: 8px; }
.notebox .nb-snip {
  margin-top: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  background: var(--bg); border-radius: 5px; padding: 4px 6px;
  max-height: 46px; overflow: hidden;
}
.notebox textarea { height: 74px; resize: none; font-size: 13px; }
.notebox .nb-actions { display: flex; gap: 7px; margin-top: 9px; }

.stat .foot.after { margin-top: 4px; color: var(--ink-2); }
.stat .foot.after b { color: var(--ink); font-family: var(--mono); }

/* =================================================================== phone */
/* A phone is not a narrow desktop. Wide tables become stacked cards, the chat
   becomes a full-screen sheet, and every tap target gets big enough to hit. */

@media (max-width: 720px) {
  html, body { font-size: 15px; }
  .page, .page.wide { max-width: 100%; min-width: 0; }
  .card, .card .body, .hero, .explain, .banner { min-width: 0; max-width: 100%; }

  .page { padding: 12px; }
  /* The spacer is what makes a wrapped top bar look ragged: it eats a whole
     row. Drop it and let the controls flow, with search on its own line. */
  .topbar { padding: 9px 12px; gap: 7px; }
  .topbar h2 { font-size: 15px; margin-right: auto; }
  .topbar .spacer { display: none; }
  .topbar #capPill, .topbar #spotsPill { order: 2; }
  .topbar #refreshBtn { order: 3; }
  .topbar #chatToggle { order: 4; }
  #searchWrap { order: 9; width: 100%; }
  #playerSearch { width: 100%; padding: 9px 12px; }
  #agePill { display: none; }              /* the cap pill is the one that matters */
  .btn { padding: 9px 13px; }              /* thumb-sized */
  .btn.sm { padding: 7px 11px; font-size: 13px; }

  .hero { padding: 15px 16px; }
  .hero .headline { font-size: 17px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat { padding: 11px 12px; }
  .stat .value { font-size: 21px; }
  .stat .more { display: none; }           /* no hover on a phone */

  .card > header { flex-wrap: wrap; padding: 11px 13px; }
  .card .body { padding: 12px 13px; }

  /* Anything still too wide scrolls inside its own card rather than being
     clipped by the page. body has overflow-x hidden, so without this a wide
     child is silently cut off instead of reachable. */
  .card .body, .card .body.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Chat becomes a full-screen sheet */
  #app.chat-open #chat { width: 100vw; height: 100dvh; }
  #chat .composer { padding: 9px 11px calc(9px + env(safe-area-inset-bottom)); }
  #chat textarea { height: 48px; font-size: 16px; }   /* 16px stops iOS zooming in */
  input, select, textarea { font-size: 16px; }

  #drawer .sheet { width: 100vw; padding: 16px 15px 40px; }

  .notebox { width: calc(100vw - 24px); left: 12px !important; }
  .explain { font-size: 12.5px; }
  .banner { font-size: 12.5px; }
}

/* A touch device gets a press-and-hold hint instead of a right-click one. */
.longpress-armed { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------- stacked tables */
/* Applied by JS whenever a table cannot fit its container, at any width,
   so landscape, iPad and split view are covered without guessing a breakpoint. */
table.stacked thead { display: none; }
table.stacked, table.stacked tbody, table.stacked tr, table.stacked td { display: block; width: 100%; }
table.stacked tr {
  border: 1px solid var(--line); border-radius: 10px;
  margin: 0 0 9px; padding: 9px 11px; background: var(--panel-2);
}
table.stacked tr.detail { background: var(--bg-2); padding: 0; }
table.stacked td {
  border: 0; padding: 3px 0; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; text-align: right;
  flex-wrap: wrap;                 /* a long list of position tags wraps */
}
table.stacked td > * { min-width: 0; }
table.stacked td:empty { display: none; }
table.stacked td::before {
  content: attr(data-label); color: var(--ink-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; text-align: left; flex: 0 0 auto;
}
table.stacked td:first-child {
  font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px; margin-bottom: 4px;
  justify-content: flex-start; text-align: left;   /* the name is a heading */
}
table.stacked td:first-child::before { content: ''; display: none; }
table.stacked td.num { font-family: var(--mono); }
/* A cell holding only a proportion bar says nothing once the row is a card: the
   number it illustrates is on the line above it. It was rendering as a column
   name with an invisible bar beside it. */
table.stacked td.barcell { display: none; }

/* ------------------------------------------------- improvement run history */

.runrow { border-bottom: 1px solid var(--line-soft); }
.runrow:last-child { border-bottom: 0; }
.runhead {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 11px 15px; border: 0; background: transparent; color: var(--ink);
  cursor: pointer; text-align: left; font-size: 13px;
}
.runhead:hover { background: var(--panel-2); }
.runhead.open { background: var(--panel-2); }
.runwhen { color: var(--ink-3); font-size: 11px; font-family: var(--mono); flex: 0 0 auto; }
.runwhat { flex: 1; min-width: 0; }
.runmeta { color: var(--ink-3); font-size: 11px; flex: 0 0 auto; }
.runbody { padding: 4px 15px 15px; border-top: 1px solid var(--line-soft); background: var(--bg-2); }
.runbody table { font-size: 12px; }

@media (max-width: 720px) {
  .runhead { flex-wrap: wrap; gap: 4px 10px; }
  .runwhat { flex: 1 0 100%; order: 3; }
}

/* ============================================================ league switcher */

/* A label only a screen reader needs; the select says what it is. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

#leagueWrap { display: inline-flex; min-width: 0; }
#leagueSwitch {
  width: auto; max-width: 210px; padding: 4px 8px; font-size: 12.5px;
  background: var(--panel); text-overflow: ellipsis;
}

/* One line under the top bar saying which team a page is about. */
#leaguenote:empty { display: none; }
.notestrip {
  padding: 7px 22px; font-size: 12px; color: var(--ink-2);
  background: var(--bg-2); border-bottom: 1px solid var(--line-soft);
}
.notestrip strong { color: var(--ink); }
.notestrip.warn { color: #f0cd8a; background: rgba(245,181,61,.08); }

/* ============================================================ opportunities */

/* The recommendations strip at the top of Today. Every card is one decision,
   and the three controls are: talk it through, dismiss it, see the rule. */

.oppcard { border-color: var(--accent-dim); }
.oppcard > .body.flush { padding: 10px 12px; }

.oppgroup { margin-bottom: 6px; }
.oppgroup-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-2); padding: 6px 2px 8px; display: flex; gap: 8px; flex-wrap: wrap;
}

.opp {
  display: flex; gap: 10px; align-items: flex-start; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 10px;
  padding: 11px 12px; margin-bottom: 9px;
}
.opp.high   { border-left-color: var(--bad); }
.opp.medium { border-left-color: var(--warn); }
.opp.low    { border-left-color: var(--accent-dim); }
.opp-body { flex: 1; min-width: 0; }
.opp-tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 5px; }
.urg {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line);
}
.urg.high   { color: var(--bad); border-color: #6b2020; background: rgba(255,107,107,.1); }
.urg.medium { color: var(--warn); border-color: #6b4d12; background: rgba(245,181,61,.1); }
.urg.low    { color: var(--ink-2); }
.opp-league {
  font-size: 11px; color: var(--accent); border: 1px solid var(--accent-dim);
  border-radius: 999px; padding: 1px 8px;
}
.opp-rule { font-size: 11px; color: var(--ink-3); }
.opp-title { font-weight: 600; font-size: 14.5px; margin-bottom: 3px; }
.opp-text { font-size: 12.5px; color: var(--ink-2); }
.opp-players { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip.sm { padding: 3px 9px; font-size: 11.5px; }

.opp-acts { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; padding: 0 6px; font-size: 14px; line-height: 1;
  border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-2); cursor: pointer;
}
.iconbtn:hover { border-color: var(--accent); color: var(--ink); }
.iconbtn:disabled { opacity: .3; cursor: not-allowed; }
.iconbtn.stale { color: var(--warn); border-color: #6b4d12; }

/* Looking for recommendations asks the model about every rule that matched, one
   league at a time, so it can run for a minute or two. This strip says which
   league it is on and how long it has been going: a button that sits there with
   no sign of life reads as broken. */
.oppprogress {
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2); min-width: 0;
}
.oppprogress-top {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  flex-wrap: wrap; margin-bottom: 7px;
}
.oppprogress-top .spacer { flex: 1; }
.oppprogress .bar { height: 4px; }
.oppprogress-foot { font-size: 11px; margin-top: 6px; }
.oppprogress-foot .warn { color: #f0cd8a; display: block; margin-top: 3px; }

/* ================================================================= playbook */

.rule {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
  padding: 10px 12px; margin-bottom: 10px; min-width: 0;
  -webkit-touch-callout: none;      /* a long press must open our menu, not iOS's */
}
.rule.off { opacity: .62; }
.rule.targeted { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(86,168,255,.3); }
.rule.targeted.settled { box-shadow: none; }
.rule-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rule-name { font-weight: 600; flex: 1; min-width: 0; }
.rule-text { font-size: 12.5px; color: var(--ink-2); margin: 7px 0 9px; }
.rule-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; }
.rule-foot .spacer { flex: 1; }
.rule-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rule.editing { border-color: var(--accent); }
.rule.editing .field:last-of-type { margin-bottom: 10px; }

/* An on/off switch, because "enabled" is a checkbox word and this is a light. */
.switch {
  flex: 0 0 auto; width: 40px; height: 23px; border-radius: 999px; padding: 2px;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer;
}
.switch > i {
  display: block; width: 17px; height: 17px; border-radius: 50%;
  background: var(--ink-3); transition: transform .12s, background .12s;
}
.switch.on { border-color: var(--good-dim); background: rgba(53,208,127,.15); }
.switch.on > i { background: var(--good); transform: translateX(17px); }

/* The rule menu. Deliberately not the improvement-note box: that one is about
   the website, this one is about the rule you pressed. */
.rulemenu {
  position: fixed; z-index: 300; width: 224px; padding: 5px;
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.6);
}
.rulemenu .rm-head {
  font-size: 11px; color: var(--ink-3); padding: 5px 8px 7px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-item {
  display: block; width: 100%; text-align: left; padding: 9px 10px;
  border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer;
  font-size: 13px;
}
.rm-item:hover { background: var(--panel-2); }
.rm-item.danger { color: var(--bad); }

/* Editing the rule is what pressing a rule is for, so it is the one item that
   looks like a button rather than a list entry. */
.rm-item.primary {
  background: var(--accent-dim); border: 1px solid var(--accent); padding: 9px 11px;
}
.rm-item.primary:hover { background: #255b91; }
.rm-item.primary b { display: block; font-size: 13.5px; }
.rm-item.primary span {
  display: block; font-size: 11px; color: #cfe3fb; margin-top: 2px; line-height: 1.35;
}
.rm-sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }

/* =========================================================== phone tweaks */

@media (max-width: 720px) {
  .topbar #leagueWrap { order: 1; flex: 1 1 130px; min-width: 0; }
  #leagueSwitch { width: 100%; max-width: 100%; padding: 8px 10px; }
  .notestrip { padding: 7px 12px; }

  /* The three controls move under the text, where a thumb reaches them. */
  .opp { flex-wrap: wrap; }
  .opp-acts { flex-direction: row; width: 100%; justify-content: flex-end; }
  .iconbtn { min-width: 42px; min-height: 42px; font-size: 16px; }
  .opp-title { font-size: 15px; }

  .rulemenu { width: calc(100vw - 24px); left: 12px !important; }
  .rule-foot { row-gap: 8px; }
}

/* ----------------------------------------- collapsible league groups */
/* Twelve leagues stacked flat came to sixteen screens on a phone. Closed,
   each league is one line and the whole list fits on about one screen. */

.oppgroup { border-bottom: 1px solid var(--line-soft); }
.oppgroup:last-child { border-bottom: 0; }
.oppgroup-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 15px; border: 0; background: transparent; color: var(--ink);
  cursor: pointer; text-align: left; font-size: 13.5px;
}
.oppgroup-head:hover { background: var(--panel-2); }
.oppgroup.open > .oppgroup-head { background: var(--panel-2); font-weight: 600; }
.oppgroup-caret {
  font-family: var(--mono); color: var(--ink-3); width: 12px; flex: 0 0 auto;
}
.oppgroup-name { flex: 1; min-width: 0; }
.oppgroup-worst {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px; flex: 0 0 auto; white-space: nowrap;
}
.urg-high   { background: rgba(255,107,107,.15); color: var(--bad); }
.urg-medium { background: rgba(245,181,61,.13); color: var(--warn); }
.urg-low    { background: var(--panel); color: var(--ink-3); }
.oppgroup-cards { border-top: 1px solid var(--line-soft); }

@media (max-width: 720px) {
  .oppgroup-head { flex-wrap: wrap; gap: 4px 8px; padding: 11px 13px; }
  .oppgroup-name { flex: 1 0 60%; }
}

/* ----------------------------------------- sign in page
   One card, centred, in the same dark palette as the rest of the site so it
   reads as the front door of this thing and not as somebody else's form.
   Sized in relative units and capped with a max-width, so a 393px phone gets
   the same page with no sideways scroll. */

body.loginpage { display: block; overflow-x: hidden; }

.loginwrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}

.logincard {
  width: 100%; max-width: 368px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px;
}

.loginbrand { margin-bottom: 20px; }
.loginbrand h1 { margin: 0; font-size: 19px; letter-spacing: -0.3px; }
.loginbrand .sub { color: var(--ink-3); font-size: 11.5px; margin-top: 4px; }

.logincard label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-3); margin: 0 0 5px;
}
.logincard input { margin-bottom: 14px; }
.logincard .banner { margin-bottom: 14px; }

.btn.block { display: block; width: 100%; padding: 10px 12px; font-size: 14px; }

.loginfoot {
  color: var(--ink-3); font-size: 11.5px; line-height: 1.55;
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
}

/* ----------------------------------------- who is signed in
   A line in the nav foot saying which account this is, with the way out next to
   it. Only painted when the site is running behind a password. */

.whoami { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.whoami .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On a narrow screen the nav rail becomes a strip across the top and .navfoot
   is hidden, which would leave a phone -- the way this site is mostly used --
   with no way to sign out at all. This one row stays, shrunk to just the
   button and tucked against the right-hand edge of the strip. */
@media (max-width: 1100px) {
  #whoami:not([hidden]) {
    display: block; flex: 0 0 auto; margin-left: auto;
    padding: 8px 12px; border-top: 0;
  }
  #whoami .whoami { margin-top: 0; }
  #whoami .whoami .name { display: none; }
}