/* Friar Breaks — visual identity
   ============================================================================
   Sampled from the break-stream frame in Friar Breaks.pptx, not invented:

     #542A02  the border/field brown          (62% and 90% of two border samples)
     #F5C20E  the gold diagonal stripes       (#F5C10C / #F4C314 across two corners)
     #FCFAE0  the cream of the "Breaks" script
     #E9D775  the softer gold inside the logo
     #261A14  the dark outline around the script

   The San Diego Padres' official pair (#2F241D brown, #FFC425 gold) is the same
   scheme and was used as a sanity check. Where they differ this follows the mat:
   the stream brown is warmer and more saturated than the Padres' near-black brown,
   and the gold is fractionally deeper than theirs.

   The browns below are a RAMP, not the single #542A02. A whole interface painted in
   the mat's brown is too light to read cream text against for long, so the surfaces
   run darker and #542A02 survives as the mid-tone used for rules and the field motif.

   Every text colour here was measured against its background. The lowest is
   cream-faint at 6.84:1 on the page and 5.97:1 on a card, both above the 4.5:1 that
   WCAG AA asks for body text; cream itself is 17.85:1. Nothing here is decorative to
   the point of being unreadable, which matters most on the claims sheet during a
   live break.
   ========================================================================== */

:root{
  /* Surfaces: darkest at the back, lifting toward the reader. */
  --brown-950:#1A0F05;   /* page */
  --brown-900:#241505;   /* sunken: table stripes, inputs */
  --brown-850:#2E1B07;   /* card */
  --brown-800:#3A2208;   /* raised: buttons, chips */
  --brown-700:#4C2D0B;   /* rules and borders */
  --brown-600:#6B4415;   /* hover borders */
  --brown-field:#542A02; /* the mat brown itself, for the plate motif */

  /* Gold: the stripe colour, plus one lighter and one deeper. */
  --gold:#F5C20E;
  --gold-hi:#FFD24A;
  --gold-lo:#C79A0B;
  --gold-soft:#E9D775;   /* the logo's inner gold */

  /* Ink. */
  --cream:#FCFAE0;
  --cream-dim:#D9CFA8;
  --cream-faint:#A99B72;
  --ink-on-gold:#1A0F05;

  /* Status. Warm-shifted so they sit in the brown world instead of on top of it. */
  --ok:#7FD3A0;
  --warn:#F5C20E;
  --bad:#F09A90;

  --radius:9px;
  --plate:polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);  /* home plate */
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--brown-950); color:var(--cream);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* A very faint plate-shaped wash behind the page, echoing the mat without
     competing with anything on top of it. */
  background-image:radial-gradient(ellipse 900px 520px at 50% -140px,
                   rgba(84,42,2,.55), transparent 70%);
  background-repeat:no-repeat;
}
a{color:var(--gold-hi);text-decoration-color:rgba(245,194,14,.35);text-underline-offset:2px}
a:hover{text-decoration-color:var(--gold)}

/* --- header ------------------------------------------------------------- */
header.top{
  display:flex;align-items:center;gap:16px;padding:10px 20px;
  background:linear-gradient(180deg,var(--brown-field),var(--brown-900));
  border-bottom:2px solid var(--gold);
}
header.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
/* The wordmark: home plate in gold, "FRIAR" in block caps above a script "Breaks",
   which is the arrangement on the mat and on the stream overlay. */
.mark{
  width:34px;height:34px;flex:0 0 34px;position:relative;
  background:var(--gold);clip-path:var(--plate);
}
.mark::after{
  content:"";position:absolute;inset:3px;background:var(--brown-field);
  clip-path:var(--plate);
}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark .friar{
  font-size:10px;letter-spacing:3.5px;color:var(--gold);font-weight:800;
  text-transform:uppercase;
}
.wordmark .breaks{
  font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;
  font-size:25px;font-style:italic;color:var(--cream);margin-top:-1px;
  text-shadow:1px 1px 0 var(--gold-lo), 2px 2px 0 rgba(0,0,0,.45);
}
header.top nav{margin-left:auto;display:flex;gap:15px;align-items:center;flex-wrap:wrap}
header.top nav a{color:var(--cream-dim);text-decoration:none;font-size:13.5px}
header.top nav a:hover{color:var(--gold-hi)}

main{max-width:1120px;margin:0 auto;padding:24px 20px 64px}
h1{font-size:24px;margin:0 0 4px;letter-spacing:-.2px}
h2{font-size:17px;margin:26px 0 10px;color:var(--cream)}
.sub{color:var(--cream-faint);font-size:14px;margin:0 0 18px}

/* --- surfaces ----------------------------------------------------------- */
.card{
  background:var(--brown-850);border:1px solid var(--brown-700);
  border-radius:var(--radius);padding:16px;margin-bottom:14px;
}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--brown-700);vertical-align:middle}
th{color:var(--gold-soft);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.7px}
tbody tr:hover{background:rgba(84,42,2,.35)}

/* --- controls ----------------------------------------------------------- */
input,select,textarea,button{
  font:inherit;color:var(--cream);background:var(--brown-900);
  border:1px solid var(--brown-700);border-radius:6px;padding:7px 9px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:-1px}
button{cursor:pointer;background:var(--brown-800);transition:border-color .12s,filter .12s}
button:hover{border-color:var(--gold-lo)}
button.primary{background:var(--gold);color:var(--ink-on-gold);border-color:var(--gold);font-weight:750}
button.primary:hover{filter:brightness(1.08)}
button.danger{border-color:#6B2F27;color:var(--bad);background:var(--brown-900)}
button.danger:hover{border-color:var(--bad)}
button:disabled{opacity:.42;cursor:not-allowed}
label{display:block;font-size:11.5px;color:var(--cream-faint);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.7px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row>div{flex:1;min-width:130px}

/* --- chips and messages -------------------------------------------------- */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;
  font-weight:750;text-transform:uppercase;letter-spacing:.6px}
.pill.open,.pill.paid{background:#173A25;color:var(--ok)}
.pill.draft{background:var(--brown-800);color:var(--cream-faint)}
.pill.live,.pill.claimed{background:#4A3306;color:var(--gold)}
.pill.closed{background:#3A1E1B;color:var(--bad)}
.muted{color:var(--cream-dim)} .dim{color:var(--cream-faint)}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.err{background:#3A1E1B;border:1px solid #6B2F27;color:#F5B5AC;padding:10px 12px;
  border-radius:6px;margin:10px 0;font-size:14px}
.notice{background:#173A25;border:1px solid #2C6344;color:#A6E3C0;padding:10px 12px;
  border-radius:6px;margin:10px 0;font-size:14px}

/* --- wizard -------------------------------------------------------------- */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.steps .s{flex:1;min-width:112px;padding:9px 11px;border-radius:8px;
  background:var(--brown-900);border:1px solid var(--brown-700);
  font-size:12.5px;color:var(--cream-faint)}
.steps .s .n{display:inline-block;width:19px;height:19px;line-height:19px;text-align:center;
  border-radius:50%;background:var(--brown-800);margin-right:7px;font-size:11px;color:var(--cream-dim)}
.steps .s.on{border-color:var(--gold);color:var(--cream);background:var(--brown-850)}
.steps .s.on .n{background:var(--gold);color:var(--ink-on-gold);font-weight:800}
.steps .s.done .n{background:var(--ok);color:#06210F}
.step{display:none} .step.on{display:block}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px}
.opt{border:1px solid var(--brown-700);border-radius:8px;padding:11px 12px;cursor:pointer;
  background:var(--brown-900)}
.opt:hover{border-color:var(--gold-lo)}
.opt.sel{border-color:var(--gold);background:#3A2A08}
.opt .t{font-weight:700;font-size:14px}
.opt .d{color:var(--cream-faint);font-size:12.5px;margin-top:3px}

/* --- numbers ------------------------------------------------------------- */
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px;margin-top:12px}
.calc .k{background:var(--brown-900);border:1px solid var(--brown-700);border-radius:8px;padding:11px}
.calc .k .lbl{font-size:10.5px;color:var(--cream-faint);text-transform:uppercase;letter-spacing:.7px}
.calc .k .v{font-size:20px;font-weight:700;margin-top:3px}
.calc .k.hero{border-color:var(--gold);background:#3A2A08}
.calc .k.hero .v{color:var(--gold)}
.wizfoot{display:flex;gap:10px;margin-top:18px;padding-top:15px;border-top:1px solid var(--brown-700)}
.wizfoot .sp{margin-left:auto}

/* --- the selector -------------------------------------------------------- */
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px}
/* Team colours are an ACCENT, never a fill.
   Filling a card with, say, the Packers' green would put cream text on it at about
   3:1 — below the 4.5:1 AA asks for body text — and it would do it differently on all
   124 cards. A 5px edge and a small chip carry the identity while every card keeps the
   same 15:1 text contrast. Spots with no team yet (Random before the draw) have no
   --team set and fall back to the site gold. */
.team{border:1px solid var(--brown-700);border-radius:8px;padding:10px 11px 10px 14px;
  background:var(--brown-850);transition:border-color .12s;
  position:relative;overflow:hidden}
.team::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg, var(--team, var(--gold)), var(--team2, var(--gold-lo)));
}
.team .n::after{
  content:"";display:inline-block;width:7px;height:7px;border-radius:2px;
  margin-left:7px;vertical-align:middle;
  background:var(--team2, transparent);
  box-shadow:0 0 0 1px rgba(252,250,224,.22);
}
.team:hover{border-color:var(--brown-600)}
.team.taken{opacity:.6;background:var(--brown-900)}
.team .n{font-weight:650;font-size:14px}
.team .p{color:var(--gold);font-weight:750;font-size:14px}
.team .o{font-size:12px;color:var(--cream-faint);margin-top:3px}
.team .hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
/* Claim is outlined, not filled. There are thirty of these on a selector, and thirty
   solid gold buttons is a wall of gold in which the price and the fill bar — the two
   things a buyer is actually reading — stop being visible. Solid gold stays reserved
   for the single primary action on a screen. */
.team button{
  width:100%;margin-top:8px;padding:6px;
  background:transparent;border-color:var(--gold-lo);color:var(--gold-hi);font-weight:700;
}
.team button:hover{background:var(--gold);color:var(--ink-on-gold);border-color:var(--gold)}
.bar{height:7px;background:var(--brown-900);border-radius:4px;overflow:hidden;margin:8px 0;
  border:1px solid var(--brown-700)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold))}

/* --- brand page ---------------------------------------------------------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.sw{border:1px solid var(--brown-700);border-radius:8px;overflow:hidden;background:var(--brown-850)}
.sw .chip{height:64px}
.sw .meta{padding:8px 10px;font-size:12px}
.sw .meta b{display:block;font-size:12.5px}
.sw .meta code{color:var(--cream-faint);font-size:11.5px}

@media (max-width:640px){
  main{padding:16px 13px 48px}
  header.top{padding:9px 13px;gap:10px}
  header.top nav{gap:11px}
  .wordmark .breaks{font-size:21px}
}