/* Box Score Archive — shared styles
   Visual idea: a scorer's ledger. Pencil-ruled newsprint, navy ink, and one
   scorer's red reserved strictly for things that are actually wrong.
   Sized generously: this is used by people who are not sitting in a terminal. */

:root{
  --ink:#14283C;
  --ink-soft:#3D4F63;
  --paper:#EDEFE8;
  --card:#FBFCF8;
  --rule:#CBD0C4;
  --rule-soft:#E0E3DA;
  --red:#A5322B;
  --red-bg:#FBF0EF;
  --moss:#3D6B4E;
  --moss-bg:#EFF4EF;
  --amber:#8A6A1F;
  --amber-bg:#FAF5E8;
  --dim:#6B7468;

  --display:"Avenir Next Condensed","Helvetica Neue",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --shadow:0 1px 2px rgba(20,40,60,.06), 0 4px 14px rgba(20,40,60,.05);
  --r:4px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- masthead */
.masthead{background:var(--ink);color:var(--paper)}
.masthead-in{
  max-width:960px;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;gap:26px;min-height:58px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;padding:10px 0}
.brand-mark{
  font:600 12px/1 var(--display);letter-spacing:.1em;
  border:1.5px solid currentColor;border-radius:2px;padding:5px 6px;
}
.brand-name{font:600 16px/1 var(--display);letter-spacing:.07em;text-transform:uppercase}
.masthead nav{display:flex;gap:4px;flex:1}
.masthead nav a{
  color:rgba(237,239,232,.72);text-decoration:none;padding:8px 12px;border-radius:var(--r);
  font-size:14.5px;
}
.masthead nav a:hover{color:#fff;background:rgba(255,255,255,.09)}
.masthead nav a.on{color:#fff;background:rgba(255,255,255,.14);font-weight:600}
.who{display:flex;align-items:center;gap:14px;font-size:13.5px;color:rgba(237,239,232,.68)}
.who a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.who a:hover{color:#fff}

/* -------------------------------------------------------------------- page */
.page{max-width:960px;margin:0 auto;padding:34px 22px 80px}
.narrow{max-width:620px}

h1{font:600 30px/1.2 var(--display);letter-spacing:.02em;margin:0 0 6px}
h2{font:600 21px/1.3 var(--display);letter-spacing:.02em;margin:36px 0 12px}
h3{font:600 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
   color:var(--dim);margin:0 0 10px}
.lede{font-size:17px;color:var(--ink-soft);margin:0 0 28px;max-width:60ch}
.muted{color:var(--dim)}
.small{font-size:13.5px}

/* -------------------------------------------------------------------- card */
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow);margin-bottom:20px;
}
.card.tight{padding:18px 20px}

/* ------------------------------------------------------------------- steps */
.steps{display:flex;gap:0;margin-bottom:26px;border-bottom:1px solid var(--rule)}
.step{
  display:flex;align-items:center;gap:9px;padding:0 20px 13px 0;color:var(--dim);
  font-size:14px;
}
.step-n{
  width:25px;height:25px;border-radius:50%;border:1.5px solid var(--rule);
  display:grid;place-items:center;font:600 12px/1 var(--body);flex:none;
}
.step.on{color:var(--ink);font-weight:600}
.step.on .step-n{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.step.done .step-n{background:var(--moss);color:#fff;border-color:var(--moss)}
.step.done{color:var(--ink-soft)}

/* ------------------------------------------------------------------ inputs */
label{display:block;font-weight:600;font-size:14.5px;margin-bottom:5px}
.hint{font-size:13.5px;color:var(--dim);margin:6px 0 0}
input[type=text],input[type=url],input[type=password],input[type=search],select{
  font:16px/1.4 var(--body);color:var(--ink);background:#fff;
  border:1.5px solid var(--rule);border-radius:var(--r);
  padding:12px 13px;width:100%;
}
input:focus,select:focus,button:focus-visible,a:focus-visible{
  outline:2.5px solid var(--ink);outline-offset:2px;
}
input::placeholder{color:#9AA396}
.field{margin-bottom:18px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>.field{flex:1;min-width:190px}

button,.btn{
  font:600 15px/1 var(--body);
  background:var(--ink);color:var(--paper);border:0;border-radius:var(--r);
  padding:13px 22px;cursor:pointer;text-decoration:none;display:inline-block;
  white-space:nowrap;
}
button:hover,.btn:hover{background:#0D1C2B}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:rgba(20,40,60,.06)}
.btn-quiet{background:transparent;color:var(--ink-soft);border:1.5px solid var(--rule);font-weight:500}
.btn-quiet:hover{background:#fff;color:var(--ink)}
.btn-sm{padding:8px 13px;font-size:13.5px}
button:disabled,.btn:disabled{opacity:.4;cursor:not-allowed}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px}

/* ------------------------------------------------------------------ notice */
.notice{
  border-left:3px solid var(--rule);background:#fff;padding:14px 16px;
  border-radius:0 var(--r) var(--r) 0;margin-bottom:20px;font-size:15px;
}
.notice strong{display:block;margin-bottom:3px}
.notice-bad{border-color:var(--red);background:var(--red-bg)}
.notice-good{border-color:var(--moss);background:var(--moss-bg)}
.notice-info{border-color:var(--amber);background:var(--amber-bg)}

/* ------------------------------------------------------------------- pills */
.pill{
  display:inline-block;font:600 11.5px/1 var(--body);letter-spacing:.02em;
  padding:5px 9px;border-radius:20px;white-space:nowrap;
}
.pill-good{background:var(--moss-bg);color:var(--moss);border:1px solid #C6D8C9}
.pill-wait{background:var(--amber-bg);color:var(--amber);border:1px solid #E4D9BC}
.pill-bad{background:var(--red-bg);color:var(--red);border:1px solid #E8C9C6}

/* ------------------------------------------------------------------- lists */
.tiles{display:grid;gap:12px}
.tile{
  display:flex;align-items:center;gap:16px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--shadow);
}
a.tile:hover{border-color:var(--ink);background:#fff}
.tile-main{flex:1;min-width:0}
.tile-title{font-weight:600;font-size:16.5px;margin-bottom:2px}
.tile-sub{font-size:13.5px;color:var(--dim)}
.tile-meta{text-align:right;font-size:13.5px;color:var(--dim);white-space:nowrap}
.chev{color:var(--rule);font-size:20px;line-height:1}
a.tile:hover .chev{color:var(--ink)}

/* ------------------------------------------------------------------ tables */
table{width:100%;border-collapse:collapse;background:var(--card);
      border:1px solid var(--rule);border-radius:var(--r)}
th{
  font:600 11.5px/1 var(--display);letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);text-align:left;padding:13px 14px;border-bottom:1.5px solid var(--ink);
}
td{padding:13px 14px;border-bottom:1px solid var(--rule-soft);font-size:14.5px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fff}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.tight{padding:9px 14px}

/* Box score tables are dense data — monospace and compact by design */
.statline{font-family:var(--mono);font-size:13px}
.statline th{font-size:10.5px;letter-spacing:.08em;padding:9px 7px;text-align:right}
.statline th.l{text-align:left}
.statline td{padding:7px;text-align:right;font-size:13px}
.statline td.l{text-align:left;font-family:var(--body);font-size:14px}
.statline tr.tot td{border-top:1.5px solid var(--ink);font-weight:700;background:#F3F5EE}
.statline .sub-row td.l{padding-left:24px;color:var(--ink-soft)}

/* Linescore gets the visual weight — it's the answer to "who won" */
.linescore td.big,.linescore th.big{
  border-left:1px solid var(--rule);font-weight:700;font-size:15px;
}
.linescore td.team{text-align:left;font-family:var(--body);font-weight:600;font-size:15.5px}
.linescore tr.win td.team::after{content:" ◄";color:var(--moss);font-weight:400}

/* ---------------------------------------------------------------- progress */
.progress{height:7px;background:var(--rule-soft);border-radius:20px;overflow:hidden;margin:6px 0 4px}
.progress span{display:block;height:100%;background:var(--ink);border-radius:20px;
               transition:width .35s ease}
.progress-label{font-size:14px;color:var(--ink-soft)}

.activity{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  max-height:270px;overflow-y:auto;
}
.activity div{padding:9px 16px;border-bottom:1px solid var(--rule-soft);font-size:14px;
              display:flex;gap:10px;align-items:baseline}
.activity div:last-child{border-bottom:0}
.activity .ico{flex:none;width:15px;text-align:center;font-size:12px}
.activity .ok .ico{color:var(--moss)}
.activity .warn .ico,.activity .error .ico{color:var(--red)}
.activity .step .ico,.activity .file .ico{color:var(--dim)}
.activity .file{color:var(--ink-soft);font-family:var(--mono);font-size:12.5px}

/* ------------------------------------------------------------- empty state */
.empty{
  text-align:center;padding:56px 26px;background:var(--card);
  border:1.5px dashed var(--rule);border-radius:var(--r);
}
.empty h2{margin:0 0 8px;font-size:19px}
.empty p{color:var(--dim);margin:0 auto 22px;max-width:44ch}

/* ------------------------------------------------------------- breadcrumbs */
.crumbs{font-size:14px;margin-bottom:18px;color:var(--dim)}
.crumbs a{color:var(--ink-soft)}
.crumbs span{margin:0 7px;color:var(--rule)}

/* ------------------------------------------------------------------- login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--paper)}
.login-box{width:100%;max-width:380px}
.login-box .card{padding:30px}
.login-mark{
  font:600 13px/1 var(--display);letter-spacing:.11em;color:var(--paper);
  background:var(--ink);border-radius:2px;padding:7px 9px;display:inline-block;margin-bottom:18px;
}

@media (max-width:620px){
  .page{padding:24px 16px 60px}
  h1{font-size:25px}
  .masthead-in{gap:14px}
  .who span{display:none}
  .tile{flex-wrap:wrap}
  .tile-meta{text-align:left}
}