/* Bridge scores. Mobile first; the desktop layout is the same pages with room.
 *
 * Good is BLUE and bad is RED, never green: Mark is colour blind, and green
 * against red is the one distinction he cannot see. Colour is always the
 * second signal; an arrow (▲ ▼) and a signed number carry it first. */

:root {
  color-scheme: light dark;
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --text: #15171A;
  --muted: #5B6270;
  --line: #E1E4EA;
  --good: #0A66C2;
  --good-bg: #E7F0FA;
  --bad: #C0182F;
  --bad-bg: #FBEAEC;
  --flat: #6B7280;
  --mine: #FFF6D6;
  --suit-S: #15171A;
  --suit-H: #C8102E;
  --suit-D: #D0670A;
  --suit-C: #4E5663;
  --radius: 12px;
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1014;
    --surface: #171A20;
    --text: #EEF1F5;
    --muted: #9AA3B2;
    --line: #2A2F38;
    --good: #58A6FF;
    --good-bg: #10243B;
    --bad: #FF6B7A;
    --bad-bg: #3A161B;
    --flat: #9AA3B2;
    --mine: #3A3216;
    --suit-S: #F4F6FA;
    --suit-H: #FF6B7A;
    --suit-D: #FFA24D;
    --suit-C: #B3BCC9;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 18px; }
@media (min-width: 900px) { html { font-size: 16px; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; }
h1 { font-size: 1.25rem; line-height: 1.25; }
h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 8px; }
.muted { color: var(--muted); font-size: 0.875rem; }
.small { font-size: 0.8rem; text-transform: none; letter-spacing: 0; }

.suit-S { color: var(--suit-S); }
.suit-H { color: var(--suit-H); }
.suit-D { color: var(--suit-D); }
.suit-C { color: var(--suit-C); }
.suit { font-family: "Apple Symbols", "Segoe UI Symbol", sans-serif; }

/* Tone: the arrow and the number say it; colour repeats it. */
.tone-good { --tone: var(--good); --tone-bg: var(--good-bg); }
.tone-bad { --tone: var(--bad); --tone-bg: var(--bad-bg); }
.tone-flat { --tone: var(--flat); --tone-bg: transparent; }
.arrow { color: var(--tone); font-size: 0.7em; margin-right: 0.2em; vertical-align: 0.1em; }

/* Bar ---------------------------------------------------------------------- */
/* The bar, and on a board the board navigation, stay put while scrolling. */
.top { position: sticky; top: 0; z-index: 5; }
.bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top) + 10px) var(--gutter) 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; }
.bar-link { color: var(--good); font-size: 0.95rem; }

.page { padding: 12px var(--gutter) 40px; }
.narrow { max-width: 760px; margin: 0 auto; }
.messages { padding: 8px var(--gutter) 0; max-width: 760px; margin: 0 auto; }
.message { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--bad-bg); color: var(--bad); }
.empty { color: var(--muted); padding: 24px 0; }

/* Sessions ----------------------------------------------------------------- */
.add { display: flex; gap: 8px; margin-bottom: 14px; }
.add input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text);
}
.add button, .login button {
  padding: 10px 16px; font: inherit; font-weight: 600; border: 0; border-radius: 10px;
  background: var(--good); color: #fff;
}
.sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.session-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; background: var(--surface); border-radius: var(--radius);
  border-left: 5px solid var(--tone);
}
.date-block { display: grid; text-align: center; width: 2.6rem; line-height: 1.1; }
.date-block .day { font-size: 1.35rem; font-weight: 700; }
.date-block .month { font-size: 0.75rem; text-transform: uppercase; color: var(--muted); }
.session-title { font-weight: 600; }
.session-score { text-align: right; }
.big-pct { font-size: 1.5rem; font-weight: 700; color: var(--tone); line-height: 1.1; white-space: nowrap; }

/* Session ------------------------------------------------------------------ */
.session-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 14px; margin-bottom: 12px; background: var(--surface); border-radius: var(--radius);
  border-top: 5px solid var(--tone);
}
.session-head > div:first-child { min-width: 0; }
.session-head h1 { margin: 2px 0; }
.session-head .big-pct { font-size: 1.9rem; }

.sort { display: inline-flex; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.sort a { padding: 6px 12px; font-size: 0.875rem; color: var(--muted); }
.sort a[aria-current] { background: var(--text); color: var(--surface); }

.boards { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.board-row {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto 2.2rem 3.3rem;
  gap: 7px; align-items: center; padding: 10px 10px; border-bottom: 1px solid var(--line);
}
.board-row:last-child { border-bottom: 0; }
.board-row .bn { font-weight: 700; color: var(--muted); }
.board-row .contract { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; }
.board-row .c { font-weight: 600; }
.board-row .by, .board-row .tricks { color: var(--muted); font-size: 0.85rem; }
.board-row .tricks::before { content: "·"; margin-right: 3px; }
.who { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; min-width: 3.1em; color: var(--muted); }
.who-we { color: var(--text); }
.board-row .score { text-align: right; font-weight: 600; }
.board-row .pct { text-align: right; font-weight: 700; color: var(--tone); white-space: nowrap; }
.flag { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* MP% as a bar centred on 50: blue grows right, red grows left. */
.meter { position: relative; height: 8px; background: var(--line); border-radius: 4px; }
.meter::after { content: ""; position: absolute; left: calc(50% - 1px); top: -3px; width: 2px; height: 14px; background: var(--muted); }
.meter .fill { position: absolute; top: 0; bottom: 0; width: calc(var(--w) / 2); background: var(--tone); }
.tone-good .meter .fill { left: 50%; border-radius: 0 4px 4px 0; }
.tone-bad .meter .fill { right: 50%; border-radius: 4px 0 0 4px; }

/* Board -------------------------------------------------------------------- */
.rail { display: none; }
.board { padding: 0 var(--gutter) 40px; max-width: 760px; margin: 0 auto; }
.board section { margin-top: 14px; }
.board-nav {
  display: grid; grid-template-columns: 4rem 1fr 4rem; align-items: center; text-align: center;
  padding: 2px var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line);
}
.board-nav a { color: var(--good); padding: 8px 0; }
.board-nav a:last-child { text-align: right; }
.board-nav a:first-child { text-align: left; }

.verdict {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px; background: var(--tone-bg); border-radius: var(--radius); border-left: 5px solid var(--tone);
}
.verdict .big-pct { font-size: 2.2rem; }
.verdict-score { font-size: 1.35rem; font-weight: 700; }
.dd-line { margin-top: 4px; font-size: 0.875rem; }
.dd-line strong { color: var(--tone); }

.ask-seat { padding: 14px; background: var(--surface); border-radius: var(--radius); border: 2px solid var(--good); }
.ask-seat h2 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.ask-seat form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 8px; }
.ask-seat button {
  padding: 12px 8px; font: inherit; font-weight: 700; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--good); background: var(--good-bg); color: var(--good);
}
.ask-seat button span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); }

.deal {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". n ." "w c e" ". s .";
  gap: 6px; padding: 12px 8px; background: var(--surface); border-radius: var(--radius);
}
.seat-N { grid-area: n; } .seat-S { grid-area: s; } .seat-W { grid-area: w; } .seat-E { grid-area: e; }
.hand { padding: 6px 6px; border-radius: 8px; font-size: 0.9rem; min-width: 0; }
.hand.is-ours { background: var(--good-bg); }
.hand-head { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; margin-bottom: 2px; white-space: nowrap; overflow: hidden; }
.seat { font-weight: 700; font-size: 0.8rem; }
.tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.seat-person { color: var(--good); font-size: 0.95rem; }
/* Vulnerable: a small solid badge, not a colour, so it can't read as good/bad. */
.vul-mark {
  display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 4px;
  font-size: 0.7rem; font-weight: 800; background: var(--text); color: var(--surface);
}
.tag-us { color: var(--good); border-color: var(--good); text-transform: none; font-size: 0.72rem; }
.holding { display: flex; gap: 6px; white-space: nowrap; }
.holding .suit { width: 1em; text-align: center; }
.ranks { letter-spacing: 0.02em; }
.compass {
  grid-area: c; align-self: center; justify-self: center; display: grid; place-items: center;
  min-width: 76px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 10px;
  text-align: center; line-height: 1.15; font-size: 0.7rem; color: var(--muted);
}
.compass strong { display: block; font-size: 1.1rem; color: var(--text); }

table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
thead th { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
.num { text-align: right; }
.dd td, .dd th { text-align: center; }
.dd tr.is-ours th { color: var(--good); }
.par { margin: 8px 2px 0; font-size: 0.9rem; color: var(--muted); }
.par strong { color: var(--text); }
/* Folded until asked for: the verdict first, then the reasons. */
.analysis { background: var(--surface); border-radius: var(--radius); }
.analysis summary {
  padding: 12px 14px; cursor: pointer; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.analysis summary::-webkit-details-marker { display: none; }
.analysis summary::after { content: "Show"; font-weight: 600; font-size: 0.85rem; color: var(--good); }
.analysis[open] summary::after { content: "Hide"; }
.analysis ul { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 8px; }
.analysis li { display: grid; grid-template-columns: 1.1em 1fr; gap: 6px; line-height: 1.4; font-size: 0.92rem; }
.analysis li .arrow { color: var(--tone); font-size: 0.8em; padding-top: 0.2em; }
.analysis li.headline { font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.traveller .col-pair { display: none; }
.traveller tr.line { cursor: pointer; }
.traveller tr.line[aria-expanded="true"] td { border-bottom-color: transparent; }
.traveller tr.players td { padding-top: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.traveller tr.is-mine + tr.players td { background: var(--mine); }
.traveller .dir { display: inline-block; width: 2em; font-weight: 700; font-size: 0.75rem; color: var(--text); }
.traveller td.num:last-child { color: var(--tone); font-weight: 600; white-space: nowrap; }
.traveller tr.is-mine td { background: var(--mine); font-weight: 700; }
.traveller tr.is-mine td:first-child { box-shadow: inset 4px 0 0 var(--text); }

.login { max-width: 360px; margin: 40px auto; display: grid; gap: 10px; padding: 0 var(--gutter); }
.login input { padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }

/* Desktop: the session's boards stay beside the board being read. */
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: 380px 1fr; gap: 20px; max-width: 1280px; margin: 0 auto; padding: 16px 20px; }
  .rail { display: block; position: sticky; top: 112px; align-self: start; max-height: calc(100vh - 128px); overflow: auto; }
  .board { padding: 0; margin: 0; max-width: none; }
  .traveller .col-pair { display: table-cell; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .traveller tr.line { cursor: default; }
  .traveller tr.players { display: none; }
  .board-row { grid-template-columns: 1.6rem minmax(0, 1fr) 3.3rem 3rem 3.4rem; gap: 8px; padding: 10px 12px; }
  .board-row.is-current { background: var(--bg); box-shadow: inset 4px 0 0 var(--text); }
  .board-nav { padding: 2px max(20px, calc((100vw - 1280px) / 2 + 20px)); }
  .board .board-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ask-seat { padding: 14px; background: var(--surface); border-radius: var(--radius); border: 2px solid var(--good); }
.ask-seat h2 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.ask-seat form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 8px; }
.ask-seat button {
  padding: 12px 8px; font: inherit; font-weight: 700; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--good); background: var(--good-bg); color: var(--good);
}
.ask-seat button span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); }

.deal { padding: 18px; }
  .hand { font-size: 1rem; }
}