/* SkillsProgress
   Layout and component design carried over from the progress-tracker design
   this was modelled on; palette moved onto the sky-blue used across the product
   (#00BFFF on cool neutrals) rather than the original warm
   cream and coral. Accent is overridable per-org from the dashboard. */

:root {
  --ink: #1a1a1a;
  --ink-soft: #5f6368;
  --accent: #00bfff;
  --accent-deep: #0099cc;
  --paper: #f8fafc;
  --rule: #e5e7eb;
  --slate: #475569;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 10px 26px -14px rgba(15, 23, 42, .28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #eef2f7;
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

.mit {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 18px 60px;
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 700px) { .mit { padding: 14px 12px 44px; } }

.mit button { font-family: inherit; cursor: pointer; }
.mit :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 4px; }
.mit input, .mit select, .mit textarea { font-family: inherit; font-size: 16px; }
.mit textarea { resize: vertical; line-height: 1.5; }

.boot { color: var(--ink-soft); font-size: 14px; }
.eyebrow { font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.field { padding: 11px 12px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-solid { background: var(--ink); color: #fff; border: 0; border-radius: 8px; padding: 12px 15px; font-weight: 800; font-size: 15px; }
.btn-solid:hover { background: var(--accent-deep); }
.btn { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 9px 13px; font-size: 13.5px; font-weight: 800; color: var(--slate); min-height: 40px; }
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn.danger:hover { border-color: #d92d20; color: #d92d20; }
.btn.mini { padding: 5px 8px; min-height: 32px; font-size: 12px; }
.btn[disabled], .btn-solid[disabled] { opacity: .55; cursor: default; }
.msg { font-size: 13px; color: #d92d20; font-weight: 700; min-height: 18px; }
.msg.good { color: #067647; }
.hint { font-size: 12.5px; color: var(--ink-soft); }
.linkish { background: none; border: 0; padding: 6px 2px; font-size: 13.5px; font-weight: 800; color: var(--accent-deep); text-decoration: underline; align-self: flex-start; }
.linkish:hover { color: var(--ink); }
@media (max-width: 700px) { .linkish { font-size: 15px; padding: 10px 2px; } }

/* ---------- sign in ---------- */

/* Two panels side by side on a desktop: the organisation on the left in its
   own colour, the form on the right. Stacked on a phone, brand first, so the
   page still opens on the tracker's face rather than on a pair of boxes. */
.auth-wrap { position: relative; max-width: 460px; margin: 0 auto; }

/* The page behind the card, washed with whichever accent the tracker uses.
   Fixed so it fills the window rather than only the card's own height. */
.auth-wrap::before, .welcome::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Plain wash first, so a browser without color-mix keeps a background
     rather than dropping the whole declaration and showing bare grey. */
  background: linear-gradient(180deg, #f7fafd 0%, #e8eef5 100%);
  background:
    radial-gradient(760px 520px at 8% -8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%),
    radial-gradient(680px 520px at 102% 4%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 70%),
    linear-gradient(180deg, #f7fafd 0%, #e8eef5 100%);
}

.auth {
  position: relative; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 32px 60px -28px rgba(15, 23, 42, .42);
  /* minmax(0, …) rather than a bare 1fr: the heading is set in Caveat at 50px
     and its min-content width would otherwise push the card wider than a
     phone screen. */
  display: grid; grid-template-columns: minmax(0, 1fr);
}

/* The organisation's half. Accent behind a dark-to-light wash, the same
   treatment as the signed-in header band, so white text stays readable
   whichever colour an org picked — including the pale ones. */
.auth-brand {
  position: relative; overflow: hidden;
  padding: 30px 28px 28px;
  background: var(--accent);
  background-image: linear-gradient(146deg, rgba(9, 13, 30, .52) 0%, rgba(9, 13, 30, .16) 52%, rgba(255, 255, 255, .14) 100%);
  color: #fff;
}
.auth-brand .wedge { position: absolute; top: -15%; right: -46px; bottom: -15%; width: 140px; background: rgba(255, 255, 255, .14); transform: skewX(-19deg); }
.brand-inner { position: relative; }
.auth-brand h1 { font-family: 'Caveat', cursive; font-size: 42px; margin: 0; font-weight: 700; line-height: 1.02; overflow-wrap: break-word; }
.auth-brand p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 300px; }
.auth-eyebrow { font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 6px !important; color: rgba(255, 255, 255, .78) !important; }

.auth-body { padding: 30px 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.auth .field { border-radius: 10px; background: #fbfdff; border-color: #dde5ee; padding: 13px 14px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.auth .field:hover { border-color: #c6d2e0; }
.auth .field:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.auth .btn-solid {
  border-radius: 10px; padding: 14px 15px;
  background: linear-gradient(180deg, #262e3c 0%, var(--ink) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .3), 0 12px 22px -14px rgba(15, 23, 42, .8);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.auth .btn-solid:hover { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%); transform: translateY(-1px); }
.auth .btn-solid:active { transform: translateY(0); }
.auth .btn { border-radius: 10px; padding: 12px 14px; }

/* A password box and its Show button. */
.field-wrap { position: relative; display: flex; }
.field-wrap .field { padding-right: 66px; }
.reveal { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); background: none; border: 0; border-radius: 7px; padding: 7px 9px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.reveal:hover { color: var(--ink); background: #eef2f7; }

/* Under the card: the way in to the console, for whoever runs the site. */
.auth-foot { margin: 16px 2px 0; text-align: center; font-size: 12.5px; }
.auth-foot a { color: var(--slate); font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(71, 85, 105, .3); padding-bottom: 1px; }
.auth-foot a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Picking between the trackers one address belongs to. Colour and initials
   tell them apart faster than the names do. */
.org-picks { display: flex; flex-direction: column; gap: 8px; }
.org-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.org-pick:hover { border-color: var(--pick, var(--accent)); transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(15, 23, 42, .7); }
.org-pick-mark { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--pick, var(--accent)); color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .02em; }
.org-pick b { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.org-pick-go { width: 8px; height: 8px; flex: none; border-right: 2px solid var(--ink-soft); border-top: 2px solid var(--ink-soft); transform: rotate(45deg); }
.org-pick:hover .org-pick-go { border-color: var(--pick, var(--accent)); }

/* Sat in the middle of the window rather than pinned under the top edge —
   there is nothing else on these pages for it to sit above. 82px is the
   padding .mit puts above and below it. */
@media (min-width: 701px) {
  .auth-wrap, .welcome { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 82px); }
}

@media (min-width: 840px) {
  .auth-wrap { max-width: 900px; }
  .auth { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); }
  .auth-brand { display: flex; flex-direction: column; justify-content: center; padding: 44px 36px; }
  .auth-brand h1 { font-size: 50px; }
  .auth-brand p { font-size: 14.5px; }
  .auth-body { padding: 44px 40px; }
}

@media (max-width: 700px) {
  .auth-wrap { max-width: 100%; display: flex; flex-direction: column; min-height: 84vh; }
  /* The form takes whatever height is left below the brand panel, so a short
     screen does not leave a band of empty white under the button. */
  .auth { flex: 1; border-radius: 18px; grid-template-rows: auto 1fr; }
  .auth-brand { padding: 38px 24px 34px; }
  .auth-brand .wedge { right: -40px; width: 150px; }
  .auth-brand h1 { font-size: 52px; }
  .auth-brand p { font-size: 16px; margin-top: 8px; max-width: 300px; }
  .auth-body { flex: 1; padding: 28px 22px 32px; }
  .auth-body .stack { gap: 12px; }
  .auth-body .field { padding: 16px 15px; font-size: 17px; border-radius: 11px; }
  .auth-body .field-wrap .field { padding-right: 72px; }
  .auth-body .btn-solid { padding: 17px; font-size: 17px; border-radius: 11px; margin-top: 4px; }
  .reveal { font-size: 13.5px; padding: 10px 11px; }
}

/* ---------- chrome ---------- */
.topbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 16px; }

/* Branded header band. The accent carries the studio's colour across the whole
   width; the dark wash on the left keeps white text readable whichever accent
   is chosen, including the pale ones in the palette. */
.appbar {
  position: relative; overflow: hidden;
  padding: 18px 22px; margin-bottom: 18px;
  border-radius: var(--radius-lg, 16px);
  background: var(--accent);
  background-image: linear-gradient(103deg, rgba(10, 14, 30, .42) 0%, rgba(10, 14, 30, .10) 55%, rgba(255, 255, 255, .10) 100%);
  box-shadow: var(--shadow);
  color: #fff;
}
/* Echoes the skewed wedge on the sign-in card and the progress header. */
.appbar-wedge { position: absolute; top: -20%; right: -40px; bottom: -20%; width: 130px; background: rgba(255, 255, 255, .13); transform: skewX(-19deg); pointer-events: none; }
.appbar > *:not(.appbar-wedge) { position: relative; }
.appbar .btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .42); color: #fff; }
.appbar .btn:hover { background: rgba(255, 255, 255, .28); border-color: #fff; color: #fff; }
.appbar .badge.plain { background: rgba(255, 255, 255, .24); color: #fff; }
.appbar .badge { background: rgba(255, 255, 255, .92); color: var(--ink); }

.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-name { font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -.015em; }
.whoami { font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, .82); }
.whoami b { color: #fff; font-weight: 800; }
@media (max-width: 560px) {
  .appbar { padding: 15px 16px; }
  .brand { gap: 12px; }
  .brand-name { font-size: 22px; }
}
@media print {
  .appbar { background: #fff; color: var(--ink); box-shadow: none; padding: 0; }
  .appbar .whoami { color: var(--ink-soft); }
}
.badge { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 3px 7px; border-radius: 5px; margin-left: 6px; }
.badge.plain { background: #e2e8f0; color: var(--slate); }
.topbar .spacer { flex: 1; }

/* Logo. Constrained by height so a wide mark and a square one both sit on the
   same baseline as the text beside them. */
.brand-logo { height: 68px; width: auto; max-width: 300px; object-fit: contain; display: block; }
@media (max-width: 560px) { .brand-logo { height: 50px; max-width: 200px; } }
/* On a signed-out screen the logo sits on the org's own colour, so it gets a
   white chip behind it — a dark mark on a dark accent would disappear. */
img.auth-logo, img.welcome-logo { background: #fff; padding: 8px 12px; border-radius: 14px; box-shadow: 0 6px 18px -10px rgba(9, 13, 30, .6); }
.auth-logo { position: relative; height: 60px; width: auto; max-width: 260px; object-fit: contain; display: block; margin-bottom: 16px; }
/* The product lockup is a stacked mark with the wordmark under it, so it needs
   height where a club's wide logo needs width. It keeps the same white tile a
   club logo gets — dark red on the accent panel is unreadable without it. */
.auth-logo.product-mark { height: 152px; max-width: 240px; padding: 13px 18px; border-radius: 18px; }
@media (max-width: 700px) { .auth-logo.product-mark { height: 132px; } }
/* Present for a screen reader, absent for everyone else. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 700px) { .auth-logo { height: 68px; max-width: 280px; margin-bottom: 18px; } }

/* Stand-in for a tracker that has never uploaded a logo: its initials on a
   tile, so every organisation still arrives with a mark of its own. */
.monogram {
  height: 58px; width: 58px; max-width: none; padding: 0;
  display: grid; place-items: center;
  border-radius: 17px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff; font-size: 23px; font-weight: 900; letter-spacing: .01em; line-height: 1;
}
@media (max-width: 700px) { .monogram { height: 64px; width: 64px; font-size: 26px; } }

.logo-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.logo-preview { width: 150px; min-height: 74px; flex: none; display: grid; place-items: center; padding: 10px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }
.logo-preview.empty { border-style: dashed; }
.logo-preview img { max-width: 100%; max-height: 90px; display: block; }
.logo-preview span { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.logo-row input[type="file"] { font-size: 13px; color: var(--slate); max-width: 100%; }

/* Change-your-own-password panel, dropped under the top bar on any page. */
.selfpw { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px; margin-bottom: 14px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); }
.selfpw input { flex: 1; min-width: 165px; }
.selfpw .msg { flex-basis: 100%; margin: 0; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; overflow-x: auto; }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 13px; font-size: 14px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.shell { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
/* A grid track will not shrink below its content's own minimum unless it is
   told it may. Without this a long level name in a picker — the club's to
   choose, and some are a sentence — props the whole page open sideways on a
   phone. */
.shell > * { min-width: 0; }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; gap: 14px; } }
.shell.solo { grid-template-columns: 1fr; }

.panel { background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.panel + .panel { margin-top: 16px; }
/* Tinted with the accent rather than plain grey, so the brand colour carries
   past the header. Kept very light — these sit behind body text. */
.panel-head { padding: 14px 16px; background: var(--paper); background: color-mix(in srgb, var(--accent) 9%, #fff); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.panel-head .spacer { flex: 1; }
.panel-body { padding: 16px; }

.roster { background: var(--paper); background: color-mix(in srgb, var(--accent) 7%, #fff); border: 1px solid var(--rule); border-radius: 12px; padding: 15px; box-shadow: var(--shadow); }
.roster h2 { margin: 0 0 11px; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.roster h2 span { color: var(--ink-soft); font-weight: 700; letter-spacing: 0; text-transform: none; }
.person-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.person { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 9px; padding: 10px; font-size: 15px; color: var(--ink); min-height: 46px; }
.person:hover { background: #e8edf3; }
.person[aria-current="true"] { background: var(--ink); color: #fff; }
.person[aria-current="true"] .person-meta { color: rgba(255, 255, 255, .6); }
.person-name { flex: 1; min-width: 0; font-weight: 700; }
.person-name b, .person-tpl { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-name b { font-weight: 700; }
/* Which template this person is on. Only rendered where the tracker has more
   than one, so the roster stays a single line per person until it earns two. */
.person-tpl { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.person[aria-current="true"] .person-tpl { color: rgba(255, 255, 255, .68); }
.person-meta { font-size: 11px; color: var(--ink-soft); font-weight: 800; }
/* The ring is how far through the level they are; what sits in it is their
   face. Big enough to be a face — the ring was 24px when it held nothing. */
.dot { width: 36px; height: 36px; flex: none; border-radius: 50%; background: conic-gradient(var(--accent) var(--p), #dde3ea 0); display: grid; place-items: center; padding: 3px; box-sizing: border-box; }
.dot .face { background: color-mix(in srgb, var(--face) 18%, #fff); box-shadow: 0 0 0 1.5px #fff; }
.dot.done { background: var(--accent); }
.divider { height: 1px; background: var(--rule); margin: 15px 0; }


/* ---------- the face on a card ---------- */

/* One tile, three fillings: a photo, a drawn icon, or initials. Sized by
   whatever it sits in, so the same markup serves the roster and the card. */
.face { --face: var(--accent); width: 100%; height: 100%; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--face) 16%, #fff); color: var(--face); font-weight: 900; line-height: 1; }
.face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-icon { width: 68%; height: 68%; display: block; }
.face.initials { font-size: .42em; letter-spacing: .02em; }

/* In the roster: the ring is progress, the tile inside it is the person. */
.face.sm { font-size: 30px; }
/* On the card head, beside the name. */
.face.lg { width: 54px; height: 54px; font-size: 54px; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(15, 23, 42, .18); }
@media (max-width: 560px) { .face.lg { width: 44px; height: 44px; font-size: 44px; } }
@media print { .face { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* The picker: every shape at once, in whichever colour is chosen, grouped so
   a swim club can find the goggles without reading past the crowns. */
.face-picks { max-height: 320px; overflow-y: auto; padding-right: 2px; }
.face-group { margin: 12px 0 6px; font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.face-group:first-child { margin-top: 0; }
.face-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.face-pick { --face: var(--accent); display: grid; place-items: center; aspect-ratio: 1; padding: 6px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; cursor: pointer; }
.face-pick:hover { border-color: var(--ink); }
.face-pick.on { border-color: var(--face); background: color-mix(in srgb, var(--face) 12%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--face) 45%, #fff); }
.face-pick .face-icon { width: 100%; height: 100%; }

.face-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.face-color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rule); cursor: pointer; padding: 0; }
.face-color.on { box-shadow: 0 0 0 2px var(--ink); }

/* ---------- card ---------- */
.card-head { position: relative; padding: 18px 20px 16px; background: var(--paper); background: color-mix(in srgb, var(--accent) 6%, #fff); overflow: hidden; }
.wedge-fill { position: absolute; inset: 0 0 0 auto; width: 0; background: var(--accent); transform: skewX(-19deg); transform-origin: bottom right; transition: width .45s cubic-bezier(.2, .7, .3, 1); }
.wedge-fill::after { content: ""; position: absolute; inset: 0 -70px 0 auto; width: 70px; background: var(--accent); }
.head-inner { position: relative; display: flex; align-items: flex-end; gap: 10px 14px; flex-wrap: wrap; }
.name-block { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.name-block .name-text { min-width: 0; }
.name-line { font-size: 21px; font-weight: 800; overflow-wrap: anywhere; }
.email-line { font-size: 12.5px; color: var(--slate); overflow-wrap: anywhere; }
/* A level is named by the club, so it can be "Level 2" or "Level 2 — Intermediate
   Tumbling & Flexibility". The block takes a share of the row rather than
   whatever it likes, and the name wraps inside it: at 40px in a script face,
   an unconstrained name ran across the card and through the line under it. */
.level-block { flex: 0 1 auto; min-width: 0; max-width: 58%; text-align: right; }
/* Sized to the card, so a long name shrinks instead of spilling. Leading is
   above 1 because Caveat's ascenders and descenders are long — at .95 two
   lines of it touch, which is what "the words overlap" was. */
.level-name { font-family: 'Caveat', cursive; font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.08; display: block; overflow-wrap: break-word; }
.level-sub { display: block; margin-top: 1px; font-family: 'Caveat', cursive; font-size: 16px; line-height: 1.2; color: var(--slate); overflow-wrap: break-word; }
/* Narrow enough that sharing the row leaves neither side any width: the level
   drops under the name and keeps the whole card's width to itself. */
@media (max-width: 620px) {
  .level-block { flex-basis: 100%; max-width: 100%; }
  .level-name { font-size: 30px; }
}

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
/* The card's controls in three bands: where this person is, who they are to
   the club, and what can be done to the card. Equal height whatever each one
   holds, so the three read as a set rather than as one line that wrapped. */
.toolbar.rows { display: block; padding: 0; }
.trow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 14px; min-height: 56px; }
.trow + .trow { border-top: 1px dashed var(--rule); }
@media (max-width: 700px) { .trow { min-height: 0; padding: 10px 12px; } }
.toolbar .spacer { flex: 1; }
.toolbar select { width: auto; padding: 8px 10px; font-size: 14px; }
/* Labels for the template and level pickers, which sit side by side and would
   otherwise be two unexplained dropdowns. Tight against what they name. */
.toolbar .eyebrow { margin-right: -3px; }
.tally { font-size: 13px; font-weight: 800; color: var(--ink-soft); padding-left: 4px; }
.tally b { color: var(--ink); }

.columns { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .columns { grid-template-columns: 1fr; } }
.col { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.col:last-child { border-right: 0; border-bottom: 0; }
@media (max-width: 700px) { .col { border-right: 0; } }
.col-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 13px 14px; text-align: left; min-height: 52px; }
.col-head:hover { background: #f1f5f9; }
.col-head h3 { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; flex: 1; }
.col-tally { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.chev { width: 9px; height: 9px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform .2s ease; margin-bottom: 3px; }
.col.open .chev { transform: rotate(-135deg); margin-bottom: -3px; }
@media (min-width: 701px) { .chev { display: none; } }
.meter { height: 3px; background: #e2e8f0; margin: 0 14px; border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.col-body { display: none; padding: 8px 6px 12px; }
.col.open .col-body { display: block; }
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.item { display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-radius: 9px; padding: 11px 9px; font-size: 15px; color: var(--ink); line-height: 1.3; min-height: 46px; }
@media (min-width: 701px) { .item { font-size: 13.5px; padding: 8px; min-height: 0; } }
.item:not([disabled]):hover { background: #f1f5f9; }
.item[disabled] { cursor: default; }
.box { width: 20px; height: 20px; flex: none; border-radius: 5px; border: 2px solid #cbd5e1; background: #fff; position: relative; transition: all .15s ease; }
@media (min-width: 701px) { .box { width: 17px; height: 17px; border-width: 1.5px; margin-top: 1px; } }
.item[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); }
.item[aria-pressed="true"] .box::after { content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(43deg); }
@media (min-width: 701px) { .item[aria-pressed="true"] .box::after { left: 4.5px; top: 1px; width: 4px; height: 8px; border-width: 0 2px 2px 0; } }
.item[aria-pressed="true"] .item-text { color: var(--ink-soft); }

/* Every level of the card's template, with progress on each. Work is kept when
   somebody moves level, so this is the history as much as the navigation. */
.level-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.level-chip { display: flex; align-items: baseline; gap: 7px; background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 800; color: var(--slate); }
.level-chip span { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.level-chip:not([disabled]):hover { border-color: var(--ink); color: var(--ink); }
.level-chip[disabled] { cursor: default; }
.level-chip.done { border-color: var(--accent); color: var(--ink); }
.level-chip.done span { color: var(--accent-deep); }
.level-chip.here { background: var(--ink); border-color: var(--ink); color: #fff; }
.level-chip.here span { color: rgba(255, 255, 255, .65); }
/* A level being looked at, which is not the one this card is on. Outlined
   rather than filled: the filled chip means "you are here". */
.level-chip.peeking { border-color: var(--accent); border-width: 2px; padding: 4px 11px; color: var(--ink); }
/* Each chip carries its own level's colour as a dot. --accent is set per chip,
   so .done and .peeking above pick the same colour up for their borders. */
.chip-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); align-self: center; }
.level-chip.here .chip-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }

/* Reading a level you are not on. */
.peek-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: color-mix(in srgb, var(--accent) 12%, #fff); border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--slate); }
.peek-bar b { color: var(--ink); }
.peek-bar .spacer { flex: 1; }
@media print { .peek-bar { display: none; } }

/* Recommended classes band, between the toolbar and the columns. Tinted with
   the accent so it reads as guidance rather than another row of data. */
.classes { padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); background: color-mix(in srgb, var(--accent) 8%, #fff); }
.classes .eyebrow { display: block; margin-bottom: 6px; }
.classes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.classes li { font-size: 13.5px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; }
@media print { .classes { background: #fff; } }

/* What the teacher has written for this person. Warmer than the level's own
   band beside it, because it is addressed to them rather than to a level. */
.coach { padding: 13px 16px; border-bottom: 1px solid var(--rule); background: #fffdf5; }
.coach .eyebrow { display: block; margin-bottom: 7px; }
.coach p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.coach p:last-child { margin-bottom: 0; }
.coach-classes { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.coach-classes li { font-size: 13.5px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid #e6dcc0; border-radius: 999px; padding: 4px 12px; }
@media print { .coach { background: #fff; border-top: 1px solid var(--rule); } }


/* The two lists off the club's timetable: what somebody is in now, and what
   comes next. Side by side, because the point of the band is the comparison —
   on a narrow screen they stack, and "now" stays first. */
.class-band { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; }
.class-band .class-col { min-width: 0; }
.class-band li { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.25; }
.class-band li i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
/* Typed by the teacher rather than picked off the list. Same shape, softer
   edge, so it reads as a note beside the real classes. */
.class-band li.typed { background: #fffdf5; border-color: #e6dcc0; }
.class-none { margin: 0; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 620px) { .class-band { grid-template-columns: 1fr; gap: 12px; } }

/* Picking a card's classes: one row per class, a box for now and a box for
   next. Grouped by level, in the order the ladder runs. */
.class-picks { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; max-height: 340px; overflow-y: auto; }
.class-pick { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #f1f5f9; }
.class-pick:last-child { border-bottom: 0; }
.class-pick .cp-name { flex: 1; min-width: 0; font-size: 14px; }
.class-pick .cp-name b { display: block; font-weight: 700; }
.class-pick .cp-name i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.class-pick .cp-box { width: 46px; flex: none; display: flex; justify-content: center; cursor: pointer; }
.class-pick .cp-box input { width: 17px; height: 17px; margin: 0; }
.class-pick.head { background: var(--paper); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); position: sticky; top: 0; }
.class-pick.head span { flex: 1; }
.class-pick.head i { width: 46px; flex: none; font-style: normal; text-align: center; }
.class-pick-group { padding: 7px 10px; background: var(--paper); border-bottom: 1px solid var(--rule); font-size: 11.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }

/* The class list editor, on the dashboard. Wide enough for a name and narrow
   for the rest — a day and a time are a few characters each. */
.class-rows { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.class-row { display: grid; grid-template-columns: minmax(110px, 1.8fr) minmax(64px, .85fr) minmax(64px, .85fr) minmax(105px, 1.3fr) minmax(90px, 1.2fr) 34px; gap: 6px; align-items: center; padding: 5px 8px; border-bottom: 1px solid #f1f5f9; }
.class-row:last-child { border-bottom: 0; }
.class-row input, .class-row select { min-width: 0; font-size: 14px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: #fff; color: var(--ink); font-family: inherit; }
.class-row input:hover, .class-row input:focus, .class-row select:hover, .class-row select:focus { border-color: var(--rule); }
.class-row.head { background: var(--paper); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); padding: 8px; }
@media (max-width: 900px) { .class-row { grid-template-columns: 1fr 1fr 34px; } .class-row.head { display: none; } }

/* A pasted timetable is a table, so it reads better in a fixed pitch. */
textarea.field.mono { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 13px; line-height: 1.6; }

/* What an upload did, line by line, including the rows that did not land. */
.upload-report { margin: 4px 0 0; padding: 10px 12px; list-style: none; background: var(--paper); border: 1px solid var(--rule); border-radius: 9px; font-size: 13px; line-height: 1.6; color: var(--slate); }
.upload-report li + li { border-top: 1px solid var(--rule); padding-top: 6px; margin-top: 6px; }

/* A card with nobody's level on it. Sits where the columns would be. */
.no-level { padding: 30px 20px; text-align: center; border-bottom: 1px solid var(--rule); }
.no-level b { display: block; font-family: 'Caveat', cursive; font-size: 28px; font-weight: 700; }
.no-level span { font-size: 13.5px; color: var(--ink-soft); }

.card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px 18px; background: var(--paper); }
.completed-label { font-family: 'Caveat', cursive; font-size: 26px; font-weight: 700; }
.completed-line { font-family: 'Caveat', cursive; font-size: 23px; font-weight: 600; color: var(--accent-deep); border-bottom: 2px dotted #c2cad4; min-width: 140px; padding: 0 6px; }
.foot-note { font-size: 12.5px; color: var(--ink-soft); margin-left: auto; }

/* ---------- dashboard ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--paper); background: color-mix(in srgb, var(--accent) 8%, #fff); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; }
.stat b { display: block; font-size: 30px; font-weight: 900; line-height: 1.1; color: var(--accent-deep); }
.stat span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* Report tables. Wide content scrolls inside its own box rather than pushing
   the page sideways on a phone. */
/* A heading that can carry a control on its right, so the sort sits with the
   table it reorders rather than up in the panel head with Print and CSV. */
.report-h { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.report-h .field { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--ink); }
.report-h + .table-wrap { margin-bottom: 22px; }
.table-wrap { overflow-x: auto; }
table.report { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.report th { text-align: left; font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); padding: 0 12px 8px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.report td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.report tr:last-child td { border-bottom: 0; }
table.report td.num, table.report th.num { text-align: right; padding-right: 0; white-space: nowrap; }
/* A right-aligned column in the middle of a table would otherwise touch the
   one after it — "PROGRESSCOMPLETED". Only the last column can afford no
   right padding, because nothing follows it. */
table.report td.num:not(:last-child), table.report th.num:not(:last-child) { padding-right: 18px; }
table.report .unplaced { color: var(--ink-soft); font-style: normal; font-weight: 700; }
@media print { .report-h { color: var(--ink); } }

/* Leaderboard. Ranked on skills mastered, so the score column carries a bar
   split by the level each skill was earned on, in that level's colour. */
.field.mini { width: auto; min-width: 150px; padding: 6px 10px; font-size: 13px; min-height: 32px; }
table.report.lb td { vertical-align: middle; }
.lb-place { width: 34px; font-weight: 900; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* The face beside the name. Fixed box, because .face fills whatever holds it. */
.lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-face { width: 30px; height: 30px; flex: none; }
@media (max-width: 700px) { .lb-face { width: 26px; height: 26px; } }
.lb-score { width: 46%; }
.lb-bar { display: inline-block; width: calc(100% - 46px); height: 12px; border-radius: 6px; background: var(--paper); overflow: hidden; vertical-align: middle; }
.lb-fill { display: flex; height: 100%; border-radius: 6px; overflow: hidden; }
.lb-fill i { display: block; }
.lb-n { display: inline-block; width: 40px; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; vertical-align: middle; }
.lb-pct { color: var(--ink-soft); font-weight: 700; }
/* One level, one colour, wherever a level is named. Defaults to --accent so a
   caller can set it on the row instead of inline on the dot. */
.level-dot { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 3px; margin-right: 7px; vertical-align: baseline; background: var(--accent); }
@media (max-width: 700px) { .lb-score { width: 34%; } .lb-bar { display: none; } }

.bar-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.bar-row:last-child { border-bottom: 0; }
.bar-row .who { flex: 1; font-weight: 700; min-width: 90px; }
/* Two-line identity: name over email, so people with similar names are still
   distinguishable. Only the roster rows use it — the by-level rows below name
   a level, not a person. */
.bar-row .who b { display: block; font-weight: 700; }
.bar-row .who-sub { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .lvl { font-size: 11px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.bar { width: 110px; height: 7px; background: #e2e8f0; border-radius: 4px; overflow: hidden; flex: none; }
.bar i { display: block; height: 100%; background: var(--accent); }
.bar-row .num { width: 40px; text-align: right; font-weight: 800; font-size: 13px; }
@media (max-width: 560px) { .bar { width: 62px; } }

/* The list of levels, which used to be a dropdown. Every level on the tracker
   at once, under its template, with what is on it and how many people are. */
.lv-group + .lv-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.lv-group-name { margin: 0 0 6px; font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.lv-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.lv-row.here .lv-pick { background: color-mix(in srgb, var(--accent) 12%, #fff); border-color: var(--accent); }
.lv-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; text-align: left; padding: 9px 11px; font: inherit; color: inherit; background: #fff; border: 1px solid var(--rule); border-radius: 9px; cursor: pointer; }
.lv-pick:hover { border-color: var(--accent); }
.lv-pick b { font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-pick i { margin-left: auto; flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.lv-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18); }
.lv-dot[data-none] { background: repeating-linear-gradient(45deg, #fff, #fff 3px, var(--rule) 3px, var(--rule) 5px); }

/* One level's name, colour and recommended classes, as labelled fields rather
   than a row of unexplained controls. */
.lv-form { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 14px 20px; align-items: start; }
.lv-field.wide { grid-column: 1 / -1; max-width: 560px; }
.lv-field .row { gap: 8px; }
.lv-field .hint { margin: 0; }
@media (max-width: 700px) { .lv-form { grid-template-columns: 1fr; } }

/* The categories of a level, side by side the way they read on the card. */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.cat-n { flex: none; font-size: 11.5px; font-weight: 900; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px; }
.cat-add { margin: 8px 10px 10px; }
/* Reordering and deleting are there when wanted and quiet when not, so a
   column of skills reads as a list rather than as rows of buttons. */
/* Narrower here than elsewhere: three of them sit beside every skill, and the
   skill is what should have the room. */
.edit-item .icon-btn { width: 26px; height: 26px; opacity: .25; transition: opacity .12s; }
.edit-item:hover .icon-btn, .edit-item:focus-within .icon-btn { opacity: 1; }
.edit-item .icon-btn[disabled] { opacity: .1; cursor: default; }
.edit-item:hover .icon-btn[disabled], .edit-item:focus-within .icon-btn[disabled] { opacity: .25; }

.edit-cat { border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.cat-grid .edit-cat { margin-bottom: 0; display: flex; flex-direction: column; }
.edit-cat-head { display: flex; gap: 8px; align-items: center; padding: 9px 10px; background: var(--paper); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.edit-cat-head input { flex: 1; min-width: 130px; font-weight: 800; font-size: 14px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.edit-cat-head input:hover, .edit-cat-head input:focus { background: #fff; border-color: var(--rule); }
.edit-item { display: flex; gap: 6px; align-items: center; padding: 5px 10px; border-bottom: 1px solid #f1f5f9; }
.edit-item:last-child { border-bottom: 0; }
.edit-item input { flex: 1; min-width: 0; font-size: 14px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; }
.edit-item input:hover, .edit-item input:focus { border-color: var(--rule); }
/* The level's colour, in the row beside its name. Sized like a .btn so it lines
   up with the buttons either side, and stripped of the chrome browsers wrap a
   colour input in so it reads as a swatch rather than as a form control. */
input.swatch { width: 40px; height: 40px; flex: none; padding: 3px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; cursor: pointer; }
input.swatch::-webkit-color-swatch-wrapper { padding: 0; }
input.swatch::-webkit-color-swatch { border: 0; border-radius: 5px; }
input.swatch::-moz-color-swatch { border: 0; border-radius: 5px; }
/* No colour chosen: an empty well rather than whatever the picker happens to
   default to, which would read as a real choice already made. */
input.swatch.unset { opacity: .28; }
.icon-btn { background: none; border: 1px solid var(--rule); border-radius: 6px; width: 30px; height: 30px; flex: none; color: var(--ink-soft); font-size: 13px; font-weight: 800; line-height: 1; padding: 0; }
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn[disabled] { opacity: .3; }
.icon-btn[disabled]:hover { border-color: var(--rule); color: var(--ink-soft); }
.icon-btn.x:hover { border-color: #d92d20; color: #d92d20; }

.acct { display: flex; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.acct:last-child { border-bottom: 0; }
.acct .who { flex: 1; min-width: 140px; }
.acct .who b { display: block; font-size: 14.5px; }
.acct .who span { display: block; font-size: 12px; color: var(--ink-soft); }

/* Expanded reset row. Full width so it drops below the account it belongs to
   rather than squeezing in beside it. */
.acct-reset { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; padding: 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }
.acct-reset input { flex: 1; min-width: 190px; }
.acct-reset .msg { flex-basis: 100%; margin: 0; }
.btn-solid.mini { padding: 9px 14px; font-size: 13.5px; min-height: 40px; }

/* "Levels this person does". Unticking hides a level from their card; nothing
   is deleted, so it reads as a list of choices rather than a danger. */
.lvl-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 12px; }
.lvl-pick { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: #fff; border: 1px solid var(--rule); border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 700; }
.lvl-pick:hover { border-color: var(--ink); }
.lvl-pick input { width: 17px; height: 17px; flex: none; margin: 0; }
.lvl-pick span { flex: 1; min-width: 0; }
.lvl-pick i { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.lvl-pick.off { background: var(--paper); color: var(--ink-soft); }
.lvl-pick.off span { text-decoration: line-through; }

/* Same panel, dropped under the card toolbar rather than an account row. */
.template { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.template:first-child { padding-top: 0; }
.template-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.template b { font-size: 14.5px; }
.template-size { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-left: 8px; }

/* Preview of a template's contents, laid out like the card it will become. */
.template-preview { margin-top: 12px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }
.template-preview h4 { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tpl-level { display: flex; align-items: center; gap: 9px; margin: 16px 0 8px; cursor: pointer; }
.tpl-level:first-child { margin-top: 0; }
.tpl-level input { width: 17px; height: 17px; flex: none; margin: 0; }
.tpl-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.template-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px 14px; }
.template-cats b { display: block; font-size: 12px; font-weight: 800; }
.template-cats ul { margin: 4px 0 0; padding-left: 16px; }
.template-cats li { font-size: 12.5px; color: var(--slate); line-height: 1.5; }

/* Mail diagnostics readout. Monospace because every value in it is something
   you would paste into a support message verbatim. */
.diag { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12px; line-height: 1.7; color: var(--slate); }
.diag:not(:empty) { margin-top: 4px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; overflow-wrap: anywhere; }
.diag b { color: var(--ink); font-weight: 800; }

.card-reset { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.card-reset .acct-reset { margin-top: 0; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.swatch[aria-pressed="true"] { border-color: var(--ink); }

/* ---- a link with its Copy button, wherever one is handed out ---- */

.copyrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copyrow .field { flex: 1; min-width: 190px; }
.copyrow.stacked { flex-direction: column; align-items: stretch; }
.copyrow.stacked .btn { align-self: flex-start; }
.copyrow textarea.field { font-size: 14px; line-height: 1.55; }

/* ---- marking a whole level: who on the left, what on the right ---- */

.bulk-cols { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.4fr); gap: 16px; }
@media (max-width: 620px) { .bulk-cols { grid-template-columns: 1fr; } }

.bulk-col { min-width: 0; border: 1px solid var(--rule); border-radius: 11px; overflow: hidden; }
.bulk-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.bulk-head h3 { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; flex: 1; }
.bulk-head .linkish { padding: 0; align-self: center; font-size: 12.5px; }
.bulk-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.bulk-cat { padding: 10px 8px 4px; font-size: 10.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }

.pickrow { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: 14.5px; }
.pickrow:hover { background: #f1f5f9; }
.pickrow.on { background: color-mix(in srgb, var(--accent) 11%, #fff); }
.pickrow input { width: 17px; height: 17px; flex: none; margin: 0; }
.pickrow span { flex: 1; min-width: 0; line-height: 1.35; }
.pickrow i { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); flex: none; }

.bulk-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.bulk-foot .spacer { flex: 1; }

/* ---- the step-by-step sheet, over the page ---- */

.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet-card {
  width: 100%; max-width: 720px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
  overflow: hidden;
}
/* The marking sheet carries two columns, so it gets more room. */
.sheet-card.wide { max-width: 940px; }
.sheet-head {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--paper);
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  border-bottom: 1px solid var(--rule);
}
.sheet-head h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.015em; }
.sheet-head p { margin: 3px 0 0; font-size: 13px; color: var(--slate); }
.sheet-head .spacer { flex: 1; }
.sheet-body { padding: 20px; }

/* Adding a card, as three steps. The number is a marker in the margin, not a
   grid cell — the heading and the fields under it are one block. */
.ac-step { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--rule-soft, #eef2f6); }
.ac-step:first-child { border-top: 0; padding-top: 4px; }
.ac-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 900; margin-top: 2px; }
.ac-body { flex: 1; min-width: 0; }
.ac-body h3 { margin: 2px 0 10px; font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.ac-body .hint { margin: 8px 0 0; }
.ac-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .ac-fields { grid-template-columns: 1fr; } }
.ac-field { display: flex; flex-direction: column; gap: 5px; }
.ac-field .eyebrow { margin: 0; }
.ac-field select:disabled { opacity: .55; }
.ac-foot { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 16px; }
.ac-foot .row { margin-top: 14px; }
.ac-foot .hint { margin: 8px 0 0; }
.ac-foot .msg { margin: 10px 0 0; }

/* Where this tracker stands today, before any of the instructions. */
.guide-status {
  padding: 14px 16px; margin-bottom: 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 4px 10px 10px 4px;
}
.guide-status.off { border-left-color: #d92d20; }
.guide-status b { display: block; font-size: 15.5px; margin: 3px 0 4px; }
.guide-status p { margin: 0 0 10px; font-size: 13.5px; color: var(--slate); line-height: 1.55; }

ol.guide { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 22px; }
ol.guide li::marker { font-weight: 900; color: var(--accent-deep); font-size: 15px; }
ol.guide h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
ol.guide p { margin: 0 0 9px; font-size: 14.5px; line-height: 1.6; color: var(--slate); }
ol.guide p:last-child { margin-bottom: 0; }
ol.guide b { color: var(--ink); }
.ui {
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: .89em;
  background: #eef4f8;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 1px 5px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .sheet { padding: 0; }
  .sheet-card { border-radius: 0; min-height: 100%; }
}

/* ---- an organisation's front page, for the people it tracks ---- */

/* Wider than the sign-in card, and with no form on it: this is somewhere to
   arrive. Same wedge and Caveat heading as the rest of the app, so a club's
   page still looks of a piece with their card. */
.welcome { position: relative; max-width: 560px; margin: 0 auto; }
.welcome-card { background: #fff; border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 32px 60px -28px rgba(15, 23, 42, .42); overflow: hidden; }

/* A full accent hero rather than a tint: this is the club's own front page,
   and the colour is the first thing that says whose it is. Same wash as the
   sign-in panel so a pale accent still carries white text. */
.welcome-head {
  position: relative; overflow: hidden;
  padding: 40px 32px 34px;
  background: var(--accent);
  background-image: linear-gradient(146deg, rgba(9, 13, 30, .52) 0%, rgba(9, 13, 30, .16) 52%, rgba(255, 255, 255, .14) 100%);
  color: #fff;
}
.welcome-head .wedge { position: absolute; top: -15%; right: -46px; bottom: -15%; width: 160px; background: rgba(255, 255, 255, .14); transform: skewX(-19deg); }
.welcome-head h1 { margin: 0; font-family: 'Caveat', cursive; font-size: 50px; font-weight: 700; line-height: 1.02; overflow-wrap: break-word; }
.welcome-logo { position: relative; height: 74px; width: auto; max-width: 280px; object-fit: contain; display: block; margin-bottom: 18px; }
/* display and place-items repeated because .welcome-logo's own `display:block`
   is declared after .monogram and would otherwise win. */
.welcome-logo.monogram { display: grid; place-items: center; height: 66px; width: 66px; font-size: 26px; border-radius: 19px; }
.welcome-org { margin: 8px 0 0; font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, .86); }
.welcome-body { padding: 28px 32px 32px; }
.welcome-text { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--slate); }
.welcome-text:last-of-type { margin-bottom: 22px; }
.welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.welcome-actions .btn, .welcome-actions .btn-solid { flex: 1; min-width: 150px; justify-content: center; text-align: center; border-radius: 10px; }
.welcome-actions .btn-solid {
  padding: 14px 15px;
  background: linear-gradient(180deg, #262e3c 0%, var(--ink) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .3), 0 12px 22px -14px rgba(15, 23, 42, .8);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.welcome-actions .btn-solid:hover { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%); transform: translateY(-1px); }
.welcome-actions .btn-solid:active { transform: translateY(0); }

@media (max-width: 560px) {
  .welcome-head { padding: 32px 22px 26px; }
  .welcome-head h1 { font-size: 40px; }
  .welcome-body { padding: 22px 20px 24px; }
}

/* ---- sign-up, and the master admin console ---- */

/* One of several answers, each with its consequence spelled out under it —
   these choices decide who can get in, so the trade-off belongs on the option
   rather than in a paragraph somewhere below. */
.pick { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; }
.pick:hover { border-color: var(--ink); }
.pick.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); }
.pick input { width: 17px; height: 17px; flex: none; margin: 2px 0 0; }
.pick span { display: block; font-size: 12.5px; color: var(--slate); line-height: 1.5; }
.pick b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }

/* A quieter tally, for a state rather than a number. */
.tally.soft { font-weight: 800; color: var(--ink-soft); border: 1px dashed var(--rule); border-radius: 999px; padding: 3px 9px; }

/* Divider between signing in and making your own card. */
.or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--ink-soft); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* A master admin working inside somebody else's tracker. Deliberately loud:
   every control on the page below it belongs to that account, not to them. */
.master-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 9px 14px; background: var(--ink); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; }
.master-bar b { font-weight: 900; }
.master-bar .spacer { flex: 1; }
.master-bar .btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .42); color: #fff; }
.master-bar .btn:hover { background: rgba(255, 255, 255, .3); border-color: #fff; color: #fff; }

/* One tracker in the console list. Shares .acct with the Accounts tab, which
   is the same idea one level down: a row about somebody, actions on the right. */
.acct-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.acct-name { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.acct-meta { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.acct-meta.err { color: #d92d20; font-weight: 700; }
.acct-meta a { color: var(--accent-deep); }
.acct-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Issuing a tracker's sign-up link, on its console row. The link field takes
   the room it needs — it is long, and it is the thing being copied. */
.acct-signup { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rule); }
.acct-signup .eyebrow { flex: none; }
.acct-signup select { width: auto; padding: 6px 8px; font-size: 13px; min-height: 34px; }
.acct-signup input[readonly] { flex: 1; min-width: 220px; padding: 6px 9px; font-size: 12.5px; background: var(--paper); color: var(--slate); }
.acct.off .acct-main { opacity: .6; }

/* Somebody's own cards, where they have more than one — a parent signed in for
   two children. Sits above the card rather than beside it: this is not a
   roster of other people, it is which of yours you are looking at. */
.whose { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.whose .eyebrow { flex: none; }
.whose .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.whose .btn.on:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* News on the console: trackers a club built for itself. Sits above the list
   rather than inside it, because the point is that it should not have to be
   found among the rows. */
.newbox { background: #eff8fd; border: 1px solid #cfe9f7; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.newbox-head { display: flex; align-items: center; gap: 10px; font-size: 14.5px; flex-wrap: wrap; }
.newbox-head .spacer { flex: 1; }
.newbox ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.newbox .hint { margin: 8px 0 0; }
.acct-form { padding: 14px; margin-bottom: 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }

.blank { background: #fff; border: 1px dashed var(--rule); border-radius: 12px; padding: 44px 22px; text-align: center; }
.blank h2 { font-family: 'Caveat', cursive; font-size: 32px; margin: 0 0 6px; font-weight: 700; }
.blank p { margin: 0 auto; color: var(--ink-soft); font-size: 14px; max-width: 340px; }

/* What each dashboard tab is for, above the Overview. Boxes rather than a
   paragraph, because this is read by somebody scanning for the one section
   they came for — and each box is the way there, so it is a button. */
.guidegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 860px) { .guidegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .guidegrid { grid-template-columns: 1fr; } }
.guidegrid-lead { grid-column: 1 / -1; margin: 0 0 2px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.guidegrid-lead b { color: var(--ink); }
.guidebox { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px 13px; font: inherit; color: inherit; background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 10px; box-shadow: var(--shadow); cursor: pointer; }
.guidebox:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); }
.guidebox b { font-size: 13.5px; font-weight: 800; }
.guidebox span { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }

.status { font-size: 12px; color: var(--ink-soft); margin: 10px 2px 0; min-height: 16px; }
.notice { font-size: 12px; color: var(--ink-soft); background: #eff8fd; border: 1px solid #cfe9f7; border-radius: 8px; padding: 10px 12px; margin-top: 12px; line-height: 1.45; }

/* What happens to what you are about to type. Quieter than the notice above
   it — this is the small print, and it should read as small print rather than
   compete with the form. */
.privacy { font-size: 12px; color: var(--ink-soft); line-height: 1.55; margin-top: 12px; padding: 0 2px; }
.privacy b { color: var(--slate); font-weight: 800; }
.privacy a { color: var(--accent-deep); }

@media print {
  body { background: #fff; }
  /* .guidegrid is on-screen orientation. The report is printed from the same
     tab, and none of it belongs on the paper. */
  .roster, .toolbar, .status, .notice, .topbar, .tabs, .chev, .guidegrid { display: none !important; }
  /* A panel open under the toolbar is somebody mid-edit, not part of the card
     they meant to print. The bands it edits print; the form does not. */
  .card-reset { display: none !important; }
  /* The sort control reorders the table on screen; on paper the order is
     already fixed, so the dropdown is just a grey box. */
  .report-h .field { display: none; }
  .shell { grid-template-columns: 1fr; }
  .panel { border: 0; box-shadow: none; }
  .col-body { display: block !important; }
  /* Level colours are the point of the colour, so they have to survive the
     print dialog's habit of dropping anything decorative. */
  .level-chip, .chip-dot, .lb-fill i, .level-dot, .wedge-fill, .meter i, .box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- the help guide: contents down the side, one section at a time ---- */

.guide-cols { display: grid; grid-template-columns: 210px 1fr; align-items: stretch; }
.guide-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--paper); border-right: 1px solid var(--rule); }
.guide-tab { text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 11px; font-size: 13.5px; font-weight: 800; color: var(--slate); line-height: 1.35; }
.guide-tab:hover { background: #e8edf3; color: var(--ink); }
.guide-tab[aria-current="true"] { background: var(--ink); color: #fff; }
.guide-body { padding: 20px 22px 24px; max-height: 68vh; overflow-y: auto; }
.guide-body h3 { margin: 0 0 12px; font-size: 21px; font-weight: 800; letter-spacing: -.015em; }
.guide-body h4 { margin: 20px 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.guide-body p { margin: 0 0 11px; font-size: 14.5px; line-height: 1.62; color: var(--slate); max-width: 62ch; }
.guide-body p b, .guide-body li b, .guide-body dd b { color: var(--ink); }
.guide-body ul { margin: 0 0 11px; padding-left: 20px; }
.guide-body li { font-size: 14.5px; line-height: 1.6; color: var(--slate); margin-bottom: 5px; }
.guide-body code { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: .9em; background: #eef4f8; border-radius: 4px; padding: 1px 5px; }
/* Two kinds of aside the guide has always written but never styled: .note for
   something worth knowing, .flag for something about this tracker that wants
   attention. Without these they set as bare text and run into the paragraph
   underneath. */
.guide-body .note, .guide-body .flag { margin: 0 0 12px; padding: 11px 13px; border-radius: 9px; font-size: 14px; line-height: 1.55; color: var(--slate); max-width: 62ch; }
.guide-body .note { background: var(--paper); border-left: 3px solid var(--accent); }
.guide-body .flag { background: #fff8ec; border-left: 3px solid #f59e0b; }
.guide-body .note b { color: var(--ink); }
.guide-body .flag b { color: #92400e; }

/* Term and meaning, for the handful of words the app is built on. */
.glossary { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; }
.glossary dt { font-size: 13px; font-weight: 900; color: var(--ink); }
.glossary dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--slate); }

@media (max-width: 640px) {
  .guide-cols { grid-template-columns: 1fr; }
  .guide-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 10px; }
  .guide-tab { white-space: nowrap; }
  .guide-body { max-height: none; }
}

/* ---- first-time setup ---------------------------------------------------
   The wizard replaces the whole app for one admin on one tracker, so it gets
   the page rather than a sheet over it. Rows reuse .field.mini and .icon-btn;
   only the grids and the step rail are new. */
.wiz { margin-top: 16px; }
.wiz-rail {
  display: flex; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0;
  overflow-x: auto;
}
.wiz-railitem { flex: 1; min-width: 104px; }
.wiz-railbtn {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px;
  padding: 9px 11px; font: inherit; font-size: 12.5px; font-weight: 800;
  color: var(--ink-soft); box-shadow: var(--shadow); white-space: nowrap;
}
.wiz-railbtn[disabled] { opacity: .55; box-shadow: none; }
.wiz-railitem.here .wiz-railbtn { border-color: var(--accent); color: var(--ink); }
.wiz-railitem.done .wiz-railbtn { color: var(--ink); }
.wiz-num {
  display: grid; place-items: center; flex: none; width: 21px; height: 21px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--rule);
  font-size: 11px; font-weight: 900;
}
.wiz-railitem.here .wiz-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.wiz-railitem.done .wiz-num { background: var(--ink); border-color: var(--ink); color: #fff; }

.wiz-head { margin-bottom: 14px; }
.wiz-head h2 { margin: 0 0 4px; font-size: 19px; font-weight: 900; letter-spacing: -.015em; }
.wiz-head p { margin: 0; font-size: 13.5px; color: var(--slate); line-height: 1.55; max-width: 70ch; }
.wiz-lead { margin: 0 0 14px; font-size: 13.5px; color: var(--slate); line-height: 1.6; max-width: 76ch; }
.wiz-lead b { color: var(--ink); }
.wiz-note { margin: 12px 0 0; line-height: 1.55; max-width: 76ch; }

.wiz-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.wiz-foot .spacer { flex: 1; }
.wiz-foot .msg { min-height: 0; text-align: right; }

/* The template grid. A whole card is the label, so the click target is the
   card and not a 17px checkbox. */
.wiz-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wiz-tpl {
  display: grid; grid-template-columns: 18px 1fr; gap: 3px 9px; align-items: start;
  padding: 12px 13px; background: #fff; border: 1px solid var(--rule);
  border-left: 3px solid var(--rule); border-radius: 10px; cursor: pointer;
}
.wiz-tpl:hover { border-color: var(--accent); }
.wiz-tpl.on { border-color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); }
.wiz-tpl input { width: 18px; height: 18px; margin: 1px 0 0; grid-row: 1 / span 3; }
.wiz-tpl b { font-size: 13.5px; font-weight: 800; }
.wiz-tpl i { font-size: 11.5px; font-weight: 800; font-style: normal; color: var(--accent-deep); }
.wiz-tpl span { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 860px) { .wiz-tpls { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wiz-tpls { grid-template-columns: 1fr; } }

/* Editable rows. Three widths, one per step, so the column count follows the
   fields rather than every row carrying blank cells. */
.wiz-rows { display: grid; gap: 6px; }
.wiz-row, .wiz-rowhead { display: grid; gap: 6px; align-items: center; }
/* Every row ends on a dropdown — Coach/Admin, Starting level, Level — and then
   the button that deletes the row. Two things kept them jammed together:
   .field.mini has a 150px min-width, so the coach row's 130px role track was
   overflowed by its own select and the dropdown finished 2px ON TOP of the
   button; and a 6px gap is too little between a control worth reading and a
   control that destroys the row.
   So: the role track fits its select, and every last track is wider than the
   30px button with the button at its far edge. Real width, not a margin, which
   would overhang the track and reproduce the overlap elsewhere. */
.wiz-row { grid-template-columns: 1fr 1fr 150px 42px; }
.wiz-rowhead { grid-template-columns: 1fr 1fr 150px 42px; }
.wiz-row .icon-btn { justify-self: end; }
/* Students: student, parent, email, coach, level, remove. The email column is
   widest because an address is the longest thing on the row and the one worth
   reading in full before a card is made from it. */
.wiz-row.wide { grid-template-columns: 1fr .85fr 1.3fr 1fr 1fr 42px; }
.wiz-rowhead.wide { grid-template-columns: 1fr .85fr 1.3fr 1fr 1fr 42px; }
.wiz-row.wider { grid-template-columns: 1.4fr .7fr .8fr 1fr 1fr 42px; }
.wiz-rowhead.wider { grid-template-columns: 1.4fr .7fr .8fr 1fr 1fr 42px; }
.wiz-rowhead span {
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); padding-left: 2px;
}
@media (max-width: 860px) {
  /* Stacked, because four inputs in a row on a phone is four unusable inputs.
     The headings go: each field carries its own aria-label already. */
  .wiz-rowhead { display: none; }
  .wiz-row, .wiz-row.wide, .wiz-row.wider {
    grid-template-columns: 1fr 30px; padding: 10px; border: 1px solid var(--rule);
    border-radius: 10px; background: var(--paper);
  }
  /* Stacked: the button goes back beside the first field, at its own size, in
     a track that is exactly its width — so end and start are the same thing. */
  .wiz-row .icon-btn { grid-row: 1; grid-column: 2; justify-self: start; }
  .wiz-row > input, .wiz-row > select { grid-column: 1; }
}

.wiz-paste { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--rule); }
.wiz-paste h3 { margin: 0 0 4px; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.wiz-paste textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; margin-top: 8px; }
.wiz-pasterow { margin-top: 8px; }
.wiz-check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--slate); }
/* Applies to every row above it, so it reads as a footer to the table. */
.wiz-logins { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--rule); }
.wiz-check input { width: 17px; height: 17px; }

.wiz-sum { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wiz-sum th, .wiz-sum td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.wiz-sum th {
  width: 108px; font-size: 10.5px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.wiz-sum td:last-child { color: var(--ink-soft); font-size: 12.5px; }
.wiz-sum tr:last-child th, .wiz-sum tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .wiz-sum th { width: auto; }
  .wiz-sum th, .wiz-sum td { display: block; border-bottom: 0; padding: 2px 0; }
  .wiz-sum tr { display: block; padding: 9px 0; border-bottom: 1px solid var(--rule); }
}

.wiz-probs { margin: 16px 0 6px; font-size: 13px; font-weight: 900; color: #b42318; }

/* ---- sending a card to a parent ---------------------------------------
   Two halves side by side because they are alternatives, not steps: a link
   with no password, or an invitation to sign in. */
.share { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px; }
.share-half h3 {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.share-half .hint { margin: 0 0 9px; line-height: 1.55; }
.share-row { margin-bottom: 8px; }
.share-url {
  flex: 1; min-width: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; background: var(--paper);
}
.share .msg { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .share { grid-template-columns: 1fr; gap: 20px; } }

/* ---- the dashboard's own heading, with its help ------------------------ */
.dash-head {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.dash-head h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.015em; }
.dash-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.dash-head .spacer { flex: 1; }
.help-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.help-btn span {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 900;
}
.help-btn:hover span { background: var(--accent-deep); }

/* ---- next step, and the jobs grid under it ---------------------------- */
.nextstep {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
}
.nextstep-body { flex: 1; min-width: 240px; }
.nextstep h3 { margin: 2px 0 4px; font-size: 17px; font-weight: 900; letter-spacing: -.015em; }
.nextstep p { margin: 0; font-size: 13.5px; color: var(--slate); line-height: 1.55; max-width: 64ch; }
.nextstep .btn-solid { flex: none; }

.taskgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.taskbox {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 13px 14px; font: inherit; color: inherit; background: #fff;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: 10px; box-shadow: var(--shadow); cursor: pointer;
}
.taskbox:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); }
.taskbox b { font-size: 14px; font-weight: 800; }
.taskbox span { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 860px) { .taskgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .taskgrid { grid-template-columns: 1fr; } }

/* ---- Levels & items, side by side ------------------------------------- */
.lv-cols { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
/* The list follows you down a long level. 76px clears the sticky page chrome. */
.lv-cols > .panel:first-child { position: sticky; top: 12px; max-height: calc(100vh - 76px); display: flex; flex-direction: column; }
.lv-cols > .panel:first-child > .panel-body { overflow-y: auto; }
/* In a 320px sidebar the name and the counts no longer fit on one line, and
   the name is the half that was being cut off. Dot on the left, name above its
   own counts — the full name of a level is the point of the list. */
.lv-cols .lv-pick {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 1px 9px; align-items: center;
}
.lv-cols .lv-pick .lv-dot { grid-row: 1 / span 2; }
.lv-cols .lv-pick b { white-space: normal; overflow: visible; line-height: 1.3; }
.lv-cols .lv-pick i { margin-left: 0; }

/* The right column: settings and skills, one under the other. */
.lv-edit { display: grid; gap: 16px; min-width: 0; }
.lv-edit > .panel + .panel { margin-top: 0; }
@media (max-width: 980px) {
  .lv-cols { grid-template-columns: 1fr; }
  .lv-cols > .panel:first-child { position: static; max-height: none; display: block; }
  .lv-cols > .panel:first-child > .panel-body { overflow-y: visible; }
}

/* ---- steps within a section ------------------------------------------- */
.substrip {
  display: flex; gap: 6px; margin: 0 0 16px; padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: thin;
}
.substep {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 13px 8px 8px; font: inherit; font-size: 13px; font-weight: 800;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--rule);
  border-radius: 999px; white-space: nowrap; cursor: pointer;
}
.substep:hover { border-color: var(--accent); color: var(--ink); }
.substep-n {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--rule);
  font-size: 11px; font-weight: 900;
}
.substep[aria-selected="true"] {
  color: #fff; background: var(--ink); border-color: var(--ink);
}
.substep[aria-selected="true"] .substep-n {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* A step is one panel, so it should not also carry the gap meant for two. */
#dashBody > [data-step] + [data-step] { margin-top: 0; }

/* ---- adding a coach beside the list of coaches ------------------------- */
.addcoach { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.addcoach h3 {
  margin: 0 0 9px; font-size: 10.5px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.addcoach-row { display: grid; grid-template-columns: 1fr 1fr 150px auto; gap: 8px; align-items: center; }
.addcoach .hint { margin: 9px 0 0; max-width: 72ch; }
.addcoach .msg { margin: 6px 0 0; }
@media (max-width: 760px) { .addcoach-row { grid-template-columns: 1fr; } }

/* ---- a temporary password, shown once --------------------------------- */
.pw-made {
  margin-top: 10px; padding: 11px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
}
.pw-made .hint { margin: 7px 0 0; }
.pw-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .06em; max-width: 220px;
}