/* UMAA Portal — design tokens
   Ink #1B1F26 · Mat #EEF0F2 · Dojo red #A6252B · Paper #FFFFFF · Line #D7DBE0
   Display: Barlow Condensed · Body: Barlow
   Signature: the belt — rank rendered as a real fabric strip, login card wears one too. */

:root {
  --ink: #1B1F26; --ink-2: #2A303A; --mat: #EEF0F2; --paper: #fff;
  --line: #D7DBE0; --text: #23272E; --quiet: #6B7280; --red: #A6252B;
  --red-dark: #871E23; --ok: #1F7A3D; --warn-bg: #FBF3E4;
  /* belt colors */
  --b-white:#F4F4F2; --b-yellow:#E8C63C; --b-orange:#E08A2E; --b-green:#3E8E4F;
  --b-blue:#2F6DB5; --b-purple:#6B4FA1; --b-red:#B03A3A; --b-brown:#7A5230; --b-black:#17181A;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--mat); color: var(--text);
  font: 15px/1.5 "Barlow", system-ui, sans-serif;
}
.display {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; margin: 0;
}
h1.display { font-size: 34px; }
h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 600; text-transform: uppercase;
     letter-spacing: .04em; font-size: 17px; margin: 0 0 12px; color: var(--ink); }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--quiet); margin: 20px 0 8px; }
a { color: var(--red-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.quiet { color: var(--quiet); }
.fine { font-size: 13px; color: var(--quiet); margin-top: 12px; }
.cap { text-transform: capitalize; }

/* ---- top bar ---- */
.topbar {
  background: var(--ink); color: #fff; display: flex; align-items: center;
  justify-content: space-between; padding: 0 22px; height: 58px;
  border-bottom: 3px solid var(--red);
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 10px; background: var(--red); border-radius: 2px;
  position: relative; }
.brand-mark::after { content: ""; position: absolute; left: 10px; top: -4px;
  width: 6px; height: 18px; background: var(--red); border-radius: 2px; } /* tied belt knot */
.brand-name { font-family: "Barlow Condensed"; font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: .06em; }
.brand-name em { font-style: normal; font-weight: 500; color: #B9BFC9; }
.topbar nav { display: flex; gap: 4px; align-items: center; }
.topbar nav a {
  color: #C9CED6; padding: 8px 12px; border-radius: 6px;
  font-weight: 500; font-size: 14px; text-transform: uppercase;
  font-family: "Barlow Condensed"; letter-spacing: .06em; font-size: 15px;
}
.topbar nav a:hover { color: #fff; text-decoration: none; background: var(--ink-2); }
.topbar nav a.on { color: #fff; background: var(--ink-2); box-shadow: inset 0 -2px 0 var(--red); }
.topbar nav a.quiet { color: #8A919C; }

/* ---- layout ---- */
.wrap { max-width: 1060px; margin: 0 auto; padding: 26px 20px 60px; }
.page-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.date-label { color: var(--quiet); font-size: 15px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.two-col.wide-left { grid-template-columns: 1.6fr 1fr; }
.stack-col { display: grid; gap: 18px; }
@media (max-width: 820px) { .two-col, .two-col.wide-left { grid-template-columns: 1fr; } }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.panel.warn { background: var(--warn-bg); border-color: #E4CB93; }

.stat-row { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; min-width: 150px; }
.stat b { display: block; font-family: "Barlow Condensed"; font-size: 26px; font-weight: 700; }
.stat span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--quiet); }
.stat.alert b { color: var(--red); }

/* ---- tables & lists ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--quiet); padding: 6px 8px; border-bottom: 1px solid var(--line); }
td { padding: 8px; border-bottom: 1px solid #ECEEF1; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.muted { opacity: .5; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 5px 0; }
.mono-row { font-variant-numeric: tabular-nums; }
.empty { color: var(--quiet); font-size: 14px; background: #F7F8F9;
  border: 1px dashed var(--line); border-radius: 8px; padding: 14px; }

/* ---- forms ---- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
input, select, textarea {
  width: 100%; padding: 9px 10px; margin-top: 4px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red);
}
.stack { display: grid; gap: 12px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inline-form { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn {
  font: 600 14px "Barlow", sans-serif; padding: 9px 16px; border-radius: 7px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
}
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-dark); }
.btn.full { width: 100%; }
.btn.tiny { padding: 4px 10px; font-size: 12px; }

/* ---- chips & pills ---- */
.belt-chip {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px 2px 20px;
  border-radius: 20px; border: 1px solid var(--line); background: #fff; position: relative;
}
.belt-chip::before { content: ""; position: absolute; left: 7px; top: 50%;
  transform: translateY(-50%); width: 8px; height: 8px; border-radius: 2px;
  background: var(--chip, #ccc); box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; }
.belt-chip.big { font-size: 14px; padding: 4px 14px 4px 26px; }
.belt-chip.big::before { width: 11px; height: 11px; left: 9px; }
.belt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  background: var(--chip, #ccc); box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; margin-right: 8px; }
.b-white  { --chip: var(--b-white); }  .b-yellow { --chip: var(--b-yellow); }
.b-orange { --chip: var(--b-orange); } .b-green  { --chip: var(--b-green); }
.b-blue   { --chip: var(--b-blue); }   .b-purple { --chip: var(--b-purple); }
.b-red    { --chip: var(--b-red); }    .b-brown  { --chip: var(--b-brown); }
.b-black  { --chip: var(--b-black); } .b-gold { --chip: var(--b-gold); }

/* curriculum list */
.curr-list { list-style: none; margin: 0; padding: 0; }
.curr-list li { display: flex; align-items: center; gap: 12px; padding: 9px 6px;
  border-bottom: 1px solid #ECEEF1; flex-wrap: wrap; }
.curr-list li:last-child { border-bottom: 0; }
.curr-list li.locked { opacity: .45; }
.curr-list li.current { background: #FBF7EF; border-radius: 8px; }
.curr-action { margin-left: auto; font-size: 14px; }
/* senior belts: a dark stripe through the middle, like the real belt */
.belt-chip.sr::before, .belt-dot.sr, .belt-seg.sr {
  background-image: linear-gradient(to bottom,
    transparent 38%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.55) 62%, transparent 62%);
}
/* dan ranks: black belt with a colored stripe */
:root { --b-gold: #C9A227; }
.stripe-yellow, .stripe-gold, .stripe-orange, .stripe-green, .stripe-blue,
.stripe-purple, .stripe-red, .stripe-brown { --stripe: #fff; }
.stripe-yellow { --stripe: var(--b-yellow); } .stripe-gold   { --stripe: var(--b-gold); }
.stripe-orange { --stripe: var(--b-orange); } .stripe-green  { --stripe: var(--b-green); }
.stripe-blue   { --stripe: var(--b-blue); }   .stripe-purple { --stripe: var(--b-purple); }
.stripe-red    { --stripe: var(--b-red); }    .stripe-brown  { --stripe: var(--b-brown); }
.belt-chip[class*="stripe-"]::before, .belt-dot[class*="stripe-"], .belt-seg[class*="stripe-"] {
  background-image: linear-gradient(to bottom,
    transparent 38%, var(--stripe) 38%, var(--stripe) 62%, transparent 62%);
}
.pill { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  padding: 2px 8px; border-radius: 12px; background: #EEF0F2; color: var(--quiet); }
.pill.p-current { background: #E3F2E7; color: var(--ok); }
.pill.p-past_due { background: #F9E6E7; color: var(--red-dark); }
.pill.p-canceled { background: #F1F1F1; color: #777; }

/* ---- signature: the belt ---- */
.belt-panel { padding: 22px 20px; }
.belt-track { display: flex; gap: 2px; height: 26px; }
.belt-seg { flex: 1; border-radius: 3px; background: var(--chip, #ddd);
  opacity: .18; transition: opacity .5s; box-shadow: inset 0 -6px 0 rgba(0,0,0,.10), inset 0 2px 0 rgba(255,255,255,.25); }
.belt-seg.earned { opacity: 1; }
.belt-caption { display: flex; justify-content: space-between; margin-top: 10px;
  font-size: 14px; flex-wrap: wrap; gap: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 6px 0; border-bottom: 1px solid #ECEEF1; font-size: 14px; }
.timeline li:last-child { border-bottom: 0; }

/* ---- flash ---- */
.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px;
  background: #E9EDF3; border: 1px solid #C9D4E2; word-break: break-word; }
.flash.ok { background: #E3F2E7; border-color: #BCDDC6; color: #15522A; }
.flash.error { background: #F9E6E7; border-color: #EAC1C3; color: #7C1B20; }

/* ---- login & kiosk ---- */
.center-page main, body.kiosk main { min-height: 100vh; display: flex;
  flex-direction: column; justify-content: center; align-items: center; }
.login-card, .kiosk-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 34px 34px 28px; width: min(420px, 92vw); box-shadow: 0 10px 30px rgba(27,31,38,.10);
}
.kiosk-card { width: min(480px, 94vw); }
body.kiosk { background: var(--ink); }
.login-belt { height: 12px; border-radius: 3px; margin-bottom: 22px;
  background: linear-gradient(90deg,
    var(--b-white) 0 12%, var(--b-yellow) 12% 24%, var(--b-orange) 24% 36%,
    var(--b-green) 36% 48%, var(--b-blue) 48% 60%, var(--b-purple) 60% 72%,
    var(--b-red) 72% 84%, var(--b-black) 84% 100%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.login-card h1 { font-size: 26px; }
.sub { color: var(--quiet); margin: 4px 0 20px; }
.login-card form, .kiosk-card form { display: grid; gap: 14px; }
.pin-input { font-size: 30px; letter-spacing: .35em; text-align: center;
  font-family: "Barlow Condensed"; }
.big-flash { font-size: 17px; transition: opacity .6s; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}