/* DECA Practice — shared look and feel.
   Every colour the app uses is a token on :root below, so re-skinning to
   the school's palette means editing this block and nothing else. */

  :root {
    /* Crescent green is Pantone 342 C. #006747 is the sRGB equivalent in
       common use; swap it here if the school's style guide specifies another,
       and every surface in both themes follows. */
    --crescent:#006747;
    --crescent-dark:#003322;
    --crescent-light:#4f9b80;

    --bg:#f7f8f7; --card:#fff; --fg:#17201c; --muted:#5a6560; --line:#e0e4e1;
    --accent:var(--crescent); --accent-soft:#e6f0ec; --accent-ink:var(--crescent-dark);
    --ok:#1a7f44; --ok-soft:#e8f5ec; --bad:#9d2235; --bad-soft:#fbeaec; --flag:#9d2235;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#121513; --card:#1a1e1c; --fg:#e7ebe8; --muted:#97a19b; --line:#2c3230;
      --accent:#4f9b80; --accent-soft:#132a22; --accent-ink:#7fc9ab;
      --ok:#5cc98a; --ok-soft:#16281d; --bad:#e8808f; --bad-soft:#2b171b; --flag:#e8808f;
    }
  }
  * { box-sizing:border-box; }
  body { margin:0; padding:18px 16px 56px; background:var(--bg); color:var(--fg);
         font:14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  .wrap { max-width:1080px; margin:0 auto; }
  .narrow { max-width:780px; margin:0 auto; }
  header { display:flex; justify-content:space-between; align-items:baseline;
           gap:12px; flex-wrap:wrap; margin-bottom:4px; }
  h1 { font-size:18px; margin:0; letter-spacing:-.015em; }
  .tagline { color:var(--muted); font-size:13px; margin:2px 0 14px; }
  .who { font-size:13px; color:var(--muted); }
  .who button { font-size:13px; padding:0; border:0; background:none;
                color:var(--accent-ink); cursor:pointer; text-decoration:underline; }
  .panel { background:var(--card); border:1px solid var(--line); border-radius:12px;
           padding:15px 18px; }
  .lab { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
         color:var(--muted); font-weight:700; margin:0 0 6px; }
  .grp { margin-bottom:10px; }
  .cols { display:grid; grid-template-columns:1fr 1fr; gap:13px 28px; }
  @media (max-width:720px) { .cols { grid-template-columns:1fr; } }
  .choices { display:flex; flex-wrap:wrap; gap:5px; }
  .chip { font:inherit; font-size:12.5px; padding:3px 10px; border-radius:16px;
          border:1px solid var(--line); background:var(--card); color:var(--fg);
          cursor:pointer; display:inline-flex; gap:8px; align-items:baseline; }
  .chip:hover:not(:disabled) { border-color:var(--accent); }
  .chip .n { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .chip[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft);
                               color:var(--accent-ink); font-weight:600; }
  .chip[aria-pressed="true"] .n { color:var(--accent-ink); }
  .chip:disabled { opacity:.35; cursor:default; }
  .tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px; }
  .tab { font:inherit; font-size:13px; font-weight:600; padding:6px 13px;
         border-radius:8px; border:1px solid transparent; background:none;
         color:var(--muted); cursor:pointer; }
  .tab[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-ink); }
  .tab:disabled { opacity:.35; cursor:default; }
  input[type=number], select { font:inherit; font-size:13.5px; padding:6px 10px;
    border-radius:9px; border:1px solid var(--line); background:var(--card);
    color:var(--fg); max-width:100%; }
  input[type=number] { width:78px; }
  .opts { display:flex; flex-direction:column; gap:6px; }
  .ck { display:flex; gap:8px; align-items:center; font-size:13px; cursor:pointer; }
  .foot { display:flex; align-items:center; gap:18px; flex-wrap:wrap;
          margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
  button.btn { font:inherit; font-size:14px; font-weight:600; padding:9px 24px;
               border-radius:8px; border:1px solid var(--accent);
               background:var(--accent); color:#fff; cursor:pointer; }
  button.btn.quiet { background:transparent; color:var(--accent-ink); }
  button.btn.danger { background:transparent; color:var(--bad); border-color:var(--bad); }
  button.btn:disabled { opacity:.4; cursor:default; }
  .match b { font-size:17px; font-weight:700; }
  .match { font-size:13px; color:var(--muted); }
  .note { font-size:12.5px; color:var(--muted); }
  .rule { border:0; border-top:1px solid var(--line); margin:18px 0; }

  table.t { border-collapse:collapse; width:100%; font-size:12.5px; }
  table.t td, table.t th { padding:4.5px 10px 4.5px 0; border-bottom:1px solid var(--line);
                           text-align:left; font-weight:400; color:var(--muted); }
  table.t th { font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
               font-weight:700; }
  table.t td.num { text-align:right; color:var(--fg); font-weight:600;
                   font-variant-numeric:tabular-nums; padding-right:0; }
  .bar { height:6px; border-radius:3px; background:var(--line); overflow:hidden;
         min-width:90px; }
  .bar i { display:block; height:100%; background:var(--accent); }
  .bar i.weak { background:var(--bad); }
  .statrow { display:flex; gap:32px; flex-wrap:wrap; }
  .stat b { display:block; font-size:23px; font-weight:700; letter-spacing:-.02em; }
  .stat span { font-size:12.5px; color:var(--muted); }

  .meta { font-size:13px; color:var(--muted); margin-bottom:10px;
          display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .clock { font-variant-numeric:tabular-nums; font-weight:600; }
  .clock.low { color:var(--bad); }
  .stem { font-size:16px; font-weight:500; margin:0 0 16px; line-height:1.5; }
  .opt { display:flex; gap:11px; width:100%; text-align:left; font:inherit;
         padding:10px 14px; margin-bottom:7px; border:1px solid var(--line);
         border-radius:10px; background:var(--card); color:var(--fg); cursor:pointer; }
  .opt:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-soft); }
  .opt:disabled { cursor:default; }
  .opt .ltr { font-weight:700; color:var(--muted); flex:0 0 auto; }
  .opt.chosen { border-color:var(--accent); background:var(--accent-soft); }
  .opt.correct { border-color:var(--ok); background:var(--ok-soft); }
  .opt.correct .ltr { color:var(--ok); }
  .opt.wrong { border-color:var(--bad); background:var(--bad-soft); }
  .opt.wrong .ltr { color:var(--bad); }
  .why { border-left:3px solid var(--line); padding:2px 0 2px 13px; margin:14px 0 0;
         font-size:13.5px; color:var(--muted); }
  .why strong { color:var(--fg); }
  .qbar { margin-top:22px; display:flex; justify-content:space-between;
          align-items:center; gap:12px; flex-wrap:wrap; }
  .flagbtn { font:inherit; font-size:14px; padding:8px 14px; border-radius:9px;
             border:1px solid var(--line); background:var(--card);
             color:var(--muted); cursor:pointer; }
  .flagbtn[aria-pressed="true"] { border-color:var(--flag); color:var(--flag);
                                  font-weight:600; }
  .pips { display:flex; gap:5px; flex-wrap:wrap; margin-top:20px;
          padding-top:14px; border-top:1px solid var(--line); }
  .pip { width:25px; height:25px; border-radius:7px; border:1px solid var(--line);
         font:inherit; font-size:12px; font-weight:600; color:var(--muted);
         background:var(--card); cursor:pointer; padding:0;
         display:flex; align-items:center; justify-content:center; }
  .pip.ans { border-color:var(--muted); color:var(--fg); }
  .pip.ok  { border-color:var(--ok);  background:var(--ok-soft);  color:var(--ok); }
  .pip.no  { border-color:var(--bad); background:var(--bad-soft); color:var(--bad); }
  .pip.flag { border-color:var(--flag); background:var(--flag); color:#fff; }
  .pip.cur { outline:2px solid var(--accent); outline-offset:1px; }

  .score { font-size:38px; font-weight:700; letter-spacing:-.025em; margin:0; }
  .score small { font-size:16px; font-weight:500; color:var(--muted);
                 margin-left:10px; letter-spacing:0; }
  .rev { border:1px solid var(--line); border-radius:9px; padding:13px 15px;
         margin-bottom:12px; background:var(--card); }
  .rev .q { font-weight:500; margin:0 0 10px; }
  .rev .line { font-size:13.5px; margin:2px 0; }
  .gave { color:var(--bad); } .real { color:var(--ok); }
  .saved { font-size:13px; color:var(--muted); margin-top:16px; }
  .err { color:var(--bad); font-size:14.5px; }
  .hide { display:none; }
  footer { text-align:center; font-size:11.5px; color:var(--muted); margin-top:26px; }

/* ---- masthead ---- */
.mast { border-bottom:2px solid var(--crescent); padding-bottom:9px;
        margin-bottom:14px; display:flex; justify-content:space-between;
        align-items:flex-end; gap:14px; flex-wrap:wrap; }
.mast .brand { display:flex; align-items:center; gap:13px; }
.mast img.logo { height:38px; width:auto; display:block; }
.mast .school { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
                color:var(--crescent); font-weight:700; margin:0 0 1px; }
:root:not([data-theme="light"]) .mast .school { color:var(--accent-ink); }
:root:not([data-theme="light"]) .mast img.logo { filter:brightness(1.45); }
.mast h1 { font-family:Georgia, "Times New Roman", serif; font-size:20px;
           font-weight:600; margin:0; letter-spacing:-.01em; }
h2.sec { font-family:Georgia, "Times New Roman", serif; font-size:17px;
         font-weight:600; margin:0 0 3px; }
.tab[aria-pressed="true"] { box-shadow:inset 0 -2px 0 var(--crescent); }
.badge { font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
         font-weight:700; padding:2px 7px; border-radius:4px;
         background:var(--accent-soft); color:var(--accent-ink); }
.badge.due { background:var(--bad-soft); color:var(--bad); }
.badge.done { background:var(--ok-soft); color:var(--ok); }
.card { border:1px solid var(--line); border-radius:10px; padding:13px 15px;
        background:var(--card); margin-bottom:9px; }
.card .top { display:flex; justify-content:space-between; align-items:baseline;
             gap:12px; flex-wrap:wrap; }
.card h3 { font-size:14.5px; margin:0 0 2px; font-weight:600; }
.empty { color:var(--muted); font-size:13px; padding:14px 0; }
.field { margin-bottom:11px; }
.field input[type=text], .field input[type=date], .field select {
  font:inherit; font-size:13.5px; padding:6px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--card); color:var(--fg); width:100%; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
tr.click { cursor:pointer; }
tr.click:hover td { background:var(--accent-soft); }

/* Finish early sits at the top right, well away from Next, so a hand aiming
   for the primary action cannot land on it. It still asks to be sure. */
.metaright { display:flex; align-items:center; gap:13px; }
.finishbtn { font:inherit; font-size:12px; font-weight:600; padding:3px 11px;
             border-radius:14px; border:1px solid var(--line);
             background:transparent; color:var(--muted); cursor:pointer; }
.finishbtn:hover { border-color:var(--bad); color:var(--bad); }
.finishbtn[data-armed] { border-color:var(--bad); color:var(--bad);
                         background:var(--bad-soft); }

/* ---- home: builder on the left, the student's record down the right ---- */
.homegrid { display:grid; grid-template-columns:minmax(0,1fr) 288px; gap:16px;
            align-items:start; }
.homeside .panel { padding:14px 16px; }
.homeside .statrow.tight { gap:18px; }
.homeside .statrow.tight .stat b { font-size:19px; }
.homeside table.t { font-size:12px; }
.homeside table.t td { padding:4px 8px 4px 0; }
@media (max-width:1040px) { .homegrid { grid-template-columns:1fr; } }
.keys { font-size:11.5px; color:var(--muted); }
@media (max-width:620px) { .keys { display:none; } }
table.t.names { margin-top:9px; }
table.t.names td { padding:3.5px 8px 3.5px 0; font-size:12.5px; }
table.t.names td:first-child { color:var(--fg); }
.homeside .bar { min-width:56px; }
.homeside table.t td:first-child { padding-right:6px; }
.homegrid { grid-template-columns:minmax(0,1fr) 300px; }
.acts { display:flex; gap:10px; flex-wrap:wrap; align-items:center;
         margin-bottom:22px; }

/* ---- weekly goal ---- */
.goal { display:flex; align-items:baseline; gap:8px; }
.goal b { font-size:21px; font-weight:700; }
.goal span { font-size:12px; color:var(--muted); }
.goalbar { height:7px; border-radius:4px; background:var(--line);
           overflow:hidden; margin-top:7px; }
.goalbar i { display:block; height:100%; background:var(--accent); }
.goalbar i.met { background:var(--ok); }
.goalset { font:inherit; font-size:11.5px; padding:0; border:0;
           background:none; color:var(--accent-ink); cursor:pointer;
           text-decoration:underline; margin-top:7px; }
/* ---- one past set, reviewed ---- */
.pq { border:1px solid var(--line); border-radius:9px; padding:12px 14px;
      margin-bottom:8px; background:var(--card); }
.pq.wrong { border-left:3px solid var(--bad); }
.pq.right { border-left:3px solid var(--ok); }
.pq .s { font-size:14px; margin:0 0 7px; }
.pq .o { font-size:13px; margin:2px 0; color:var(--muted); }
.pq .o.pick { color:var(--bad); font-weight:600; }
.pq .o.key { color:var(--ok); font-weight:600; }
.pq .o.both { color:var(--ok); font-weight:600; }

/* ---- readiness tiers ---- */
.tier { display:inline-block; font-size:12px; font-weight:700;
        letter-spacing:.06em; text-transform:uppercase; padding:4px 11px;
        border-radius:5px; background:var(--line); color:var(--muted); }
.tier.compete { background:var(--accent-soft); color:var(--accent-ink); }
.tier.medal   { background:var(--ok-soft); color:var(--ok); }
.tier.top     { background:var(--accent); color:#fff; }
:root:not([data-theme="light"]) .tier.top { color:#0d1a15; }
textarea#newEmail { font:inherit; font-size:13px; padding:8px 10px;
  border-radius:8px; border:1px solid var(--line); background:var(--card);
  color:var(--fg); width:100%; resize:vertical; line-height:1.45; }

/* ---------- touch ----------
   Phones and iPads: a 12px chip with 3px of padding is a 20px target, and
   Apple's own guidance is 44. Everything that gets tapped grows, the two
   columns become one, and the tab strip scrolls sideways rather than
   wrapping into four rows that push the picker off the screen. */
@media (pointer: coarse) {
  body { font-size:15px; }
  .chip { font-size:14px; padding:9px 15px; border-radius:22px; }
  .tab { font-size:15px; padding:10px 16px; }
  .tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
          scrollbar-width:none; padding-bottom:2px; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { flex:0 0 auto; }
  .opt { padding:15px 16px; font-size:15.5px; margin-bottom:10px; }
  .pip { width:38px; height:38px; font-size:14px; border-radius:9px; }
  .pips { gap:8px; }
  button.btn { padding:13px 26px; font-size:15.5px; }
  .flagbtn, .finishbtn { padding:10px 16px; font-size:14px; }
  .finishbtn { border-radius:20px; }
  input[type=number], select, .field input, textarea { font-size:16px;
    padding:10px 12px; }           /* 16px stops iOS zooming on focus */
  input[type=number] { width:96px; }
  .ck { padding:4px 0; font-size:14.5px; }
  .ck input { width:20px; height:20px; }
  .keys { display:none; }          /* no keyboard to speak of */
  .stem { font-size:17px; }
}

/* One column well before a tablet in portrait runs out of room. */
@media (max-width:900px) {
  .homegrid { grid-template-columns:1fr; }
  .cols { grid-template-columns:1fr; }
  .wrap { max-width:100%; }
  .mast { align-items:flex-start; }
  .mast img.logo { height:30px; }
  .who { font-size:12px; }
}
@media (max-width:560px) {
  body { padding:12px 12px 48px; }
  .panel { padding:13px 13px; border-radius:10px; }
  .mast h1 { font-size:17px; }
  .mast .school { font-size:9.5px; letter-spacing:.12em; }
  .score { font-size:32px; }
  .foot { gap:12px; }
  .statrow { gap:16px; }
  table.t { font-size:12.5px; }
}
/* Nothing should ever scroll sideways. */
html, body { max-width:100%; overflow-x:hidden; }
img, table { max-width:100%; }

/* A chip must never be wider than its container: "Business Management and
   Administration" is 42 characters, which on a phone is wider than the
   screen. Let the label wrap inside the chip rather than run off the edge. */
.chip { max-width:100%; }
@media (max-width:560px) {
  .chip { white-space:normal; text-align:left; font-size:13.5px;
          padding:8px 13px; line-height:1.35; }
  .chip .n { font-size:11.5px; }
  .choices { gap:6px; }
  .homeside .panel { padding:13px; }
}
/* Long single words (an email, a test number) should break rather than
   stretch the page. */
td, .note, .lede, .stem, .rev .q { overflow-wrap:anywhere; }

/* A grid or flex item defaults to min-width:auto, so a child that refuses to
   wrap — the horizontally scrolling tab strip — stretches the whole column
   past the screen instead of scrolling inside it. These two lines are what
   actually make the layout fit a phone; the overflow-x:hidden above is only
   a backstop. */
.homegrid > *, .homemain, .cols > * { min-width:0; }
.tabs { min-width:0; max-width:100%; }

/* ---- study ---- */
.pi { border-left:3px solid var(--accent-soft); padding:2px 0 2px 13px;
      margin:14px 0; }
.pihead { display:flex; flex-direction:column; gap:1px; margin-bottom:5px; }
.pihead b { font-size:14.5px; font-weight:600; }
.why2 { font-size:13.5px; color:var(--muted); margin:5px 0; }
ul.plain { margin:6px 0 0; padding-left:18px; }
ul.plain li { font-size:13px; color:var(--muted); margin:2px 0; }
.areaChip { font-weight:500; }

/* A score column must never wrap: "43%" split across two lines as "43" and
   "%", and "5/100" became "5/1" and "00". Keep it on one line and give it
   room, taking the space from the bar rather than the label. */
table.t td.num, table.t th.num { white-space:nowrap; }
.homeside table.t td.num { min-width:44px; padding-left:6px; }
.homeside table.t td:nth-child(2) { width:34%; }
.homeside .bar { min-width:48px; }

details.wkdet { margin:6px 0 2px; }
details.wkdet summary { font-size:11.5px; color:var(--accent-ink);
  cursor:pointer; list-style:none; }
details.wkdet summary::-webkit-details-marker { display:none; }
details.wkdet summary::before { content:"▸ "; }
details.wkdet[open] summary::before { content:"▾ "; }
details.wkdet table.t { margin-top:5px; }
details.wkdet table.t td { font-size:12px; padding:3px 6px 3px 0; }

/* A long list belongs in its own scrolling box rather than pushing the rest
   of the page down forever. */
.scrolllist { max-height:230px; overflow-y:auto; overscroll-behavior:contain;
  border-bottom:1px solid var(--line); }
.scrolllist table.t tr:last-child td { border-bottom:0; }
#histList { max-height:none; }
@media (pointer: coarse) { .scrolllist { max-height:300px; } }

/* ---- activity ---- */
.actbar { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.actbar select, .actbar input { font-size:13.5px; }
#actPane th[data-sort] { cursor:pointer; user-select:none; }
#actPane th[data-sort]:hover { color:var(--accent-ink); }
#actPane td svg { display:block; }
#actChart rect:hover { fill-opacity:1; }

/* A right-aligned number under a left-aligned heading does not read as a
   column. Headings follow their data. */
table.t th.num { text-align:right; }

/* The students table on the Activity tab. Scoped by its own class — the
   levels table sits in the same pane and must not inherit these widths. */
table.acttable th:nth-child(1), table.acttable td:nth-child(1) { width:20%; }
table.acttable th:nth-child(2), table.acttable td:nth-child(2) { width:22%; }
table.acttable th:nth-child(3), table.acttable td:nth-child(3) { width:5%; }
table.acttable th:nth-child(4), table.acttable td:nth-child(4) { width:7%; }
table.acttable th:nth-child(5), table.acttable td:nth-child(5) {
  width:11%; padding-left:14px; }
table.acttable th:nth-child(6), table.acttable td:nth-child(6),
table.acttable th:nth-child(7), table.acttable td:nth-child(7) { width:9%; }
table.acttable th:nth-child(8), table.acttable td:nth-child(8) {
  width:9%; padding-left:14px; }
table.acttable th:nth-child(9), table.acttable td:nth-child(9) {
  width:12%; text-align:right; }
table.acttable td { vertical-align:middle; }

/* A row's colour has to beat the per-cell colours, or the warning does not
   show at all — which is what happened the first time. */
table.acttable tr.idle td,
table.acttable tr.idle td.num { color:var(--bad); }

/* ---- Students tab: keep the roster table inside its own column ----
   The two cluster/grade dropdowns have a wide intrinsic size, which pushed
   the table past its grid cell and slid it under the weakness panel. Fixed
   column widths stop the table sizing itself from its contents. */
#rosterPane .cols { grid-template-columns:minmax(0,1fr) 272px; }
@media (max-width:1040px) { #rosterPane .cols { grid-template-columns:1fr; } }

table.rostertable { table-layout:fixed; }
table.rostertable th:nth-child(1), table.rostertable td:nth-child(1) { width:21%; }
table.rostertable th:nth-child(2), table.rostertable td:nth-child(2) { width:18%; }
table.rostertable th:nth-child(3), table.rostertable td:nth-child(3) { width:14%; }
table.rostertable th:nth-child(4), table.rostertable td:nth-child(4) { width:9%; }
table.rostertable th:nth-child(5), table.rostertable td:nth-child(5) { width:6%; }
table.rostertable th:nth-child(6), table.rostertable td:nth-child(6) { width:7%; }
table.rostertable th:nth-child(7), table.rostertable td:nth-child(7) {
  width:14%; text-align:right; white-space:nowrap; font-size:12px; }
table.rostertable th:nth-child(8), table.rostertable td:nth-child(8) {
  width:11%; text-align:right; padding-right:0; }
table.rostertable td { vertical-align:middle; }

/* A long address wraps at sensible points rather than one letter per line. */
table.rostertable td:nth-child(1) { overflow-wrap:anywhere; white-space:normal; }

/* The dropdowns take the width of their column instead of setting it. */
table.rostertable select { width:100%; max-width:100%; padding-left:7px;
  padding-right:7px; }

/* The Remove button must not be squeezed into two lines. */
table.rostertable button { white-space:nowrap; }

/* Vertical rules. With two dropdowns and four numeric columns, the eye needs
   something to run down; the horizontal rules alone were not enough to tell
   which number belonged to which heading. The last column has no rule after
   it, so the table does not look boxed in. */
table.rostertable th, table.rostertable td {
  border-right:1px solid var(--line); padding-left:10px; }
table.rostertable th:first-child, table.rostertable td:first-child {
  padding-left:0; }
table.rostertable th:last-child, table.rostertable td:last-child {
  border-right:0; }

/* ---- Study: the three curriculum tiers ----
   The tiers are the spine of the tab, so each is a shelf with its own rule
   and number. Tier 3 is marked apart because it behaves differently from the
   other two: it is role-play material and never appears on a written exam,
   which is the single most useful thing on this page. */
.tiershelf { border-top:2px solid var(--line); padding:14px 0 6px;
  margin:0 0 6px; }
.tiershelf.t3 { border-top-color:var(--accent); }
.tierhead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tierhead b { font-size:17px; }
.tiernum { font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; color:var(--accent); }
.tierblurb { max-width:74ch; margin-top:5px; }
.rponly { color:var(--accent); font-weight:600; }

/* The tier an indicator list belongs to, restated at the top of an area so
   the reader is never guessing which shelf they came in from. */
.tierpill { display:inline-block; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:2px 8px;
  border-radius:999px; background:var(--accent-soft); color:var(--accent);
  margin-right:6px; }

/* The instructional area's own standard: one sentence, DECA's words. */
.standard { font-size:13.5px; color:var(--fg); border-left:3px solid var(--line);
  padding:2px 0 2px 11px; margin:12px 0 16px; max-width:70ch; }

/* What a group of indicators is for, above the indicator itself. */
.pielem { font-size:12.5px; color:var(--muted); margin:3px 0 7px;
  max-width:70ch; }

/* Ontario's coaching note, folded away: it is long, it is a different voice
   from DECA's, and it is only wanted when a student is working on that one
   indicator. Attributed, so nobody takes it for official wording. */
details.coach { margin:7px 0 2px; }
details.coach > summary { cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--accent); list-style:none; }
details.coach > summary::-webkit-details-marker { display:none; }
details.coach > summary::before { content:"▸ "; }
details.coach[open] > summary::before { content:"▾ "; }
details.coach p { font-size:13px; margin:7px 0; max-width:70ch; }
details.coach p.src { font-size:11.5px; color:var(--muted); font-style:italic; }

/* ---- Two-level navigation ----
   The mode row is the heavier of the two: it answers "what am I doing?",
   and the tab row under it only "which part of it?". */
.modes { display:flex; gap:4px; flex-wrap:wrap; margin:0 0 8px;
  border-bottom:2px solid var(--line); }
.modes .mode { font:inherit; font-size:15px; font-weight:600; background:none;
  border:0; border-bottom:3px solid transparent; margin-bottom:-2px;
  padding:8px 14px 9px; color:var(--muted); cursor:pointer; }
.modes .mode[aria-pressed="true"] { color:var(--accent);
  border-bottom-color:var(--accent); }
.modes .mode:disabled { cursor:default; opacity:.55; }
.modes .mode:not(:disabled):hover { color:var(--fg); }
.modes .dot { display:inline-block; min-width:18px; padding:0 5px;
  border-radius:9px; background:var(--accent); color:#fff; font-size:11px;
  line-height:18px; text-align:center; margin-left:3px; }
.modes .soon { font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin-left:3px; }
@media (max-width:560px) {
  .modes { flex-wrap:nowrap; overflow-x:auto; }
  .modes .mode { padding:8px 10px 9px; font-size:14px; white-space:nowrap; }
}

/* ---- Study: which cluster is on screen ----
   Looking at another cluster is allowed; mistaking it for your own is not.
   So the bar turns the warning colour whenever the two differ. */
.clusterbar { border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; margin:0 0 16px; background:var(--accent-soft); }
.clusterbar .who { margin:0 0 6px; font-size:14.5px; }
.clusterbar select { margin-left:6px; }
.clusterbar.notmine { background:var(--bad-soft); border-color:var(--bad); }
.clusterbar .warn { margin:8px 0 0; color:var(--bad); font-size:13.5px; }
.linkbtn { font:inherit; background:none; border:0; padding:0; cursor:pointer;
  color:var(--accent); text-decoration:underline; margin-left:4px; }

/* ---- Role plays ---- */
.rpfilters { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 0 10px; }
.rpfilters select, .rpfilters input { margin-left:4px; max-width:220px; }
.rpgrid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.rpcard { font:inherit; text-align:left; background:var(--card); color:var(--fg);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; cursor:pointer; }
.rpcard:hover { border-color:var(--accent); }
.rpcard .rptop { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.rpcard .done { color:var(--ok); font-weight:600; }
.rpsyn { font-size:13px; color:var(--muted); margin:6px 0 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rph { font-size:15px; margin:18px 0 6px; }
.rptext p { max-width:72ch; margin:0 0 10px; }
.rppis { margin:4px 0 0 18px; } .rppis li { margin:3px 0; }
.prepbar { margin:14px 0 4px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.clock { font-size:18px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
/* The judge's material is hidden by default: reading it first spoils the case. */
details.judge { margin:20px 0 0; border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; background:var(--accent-soft); }
details.judge > summary { cursor:pointer; font-weight:600; color:var(--accent); }
details.judge .warnline { color:var(--bad); }
.attempt { margin:20px 0 0; border-top:1px solid var(--line); padding-top:4px; }
.attempt input { display:block; width:100%; max-width:520px; margin-top:4px; }
@media (max-width:560px) { .rpgrid { grid-template-columns:1fr; } }
.rplinks { margin:6px 0 0; font-size:14px; }
.rplinks a { color:var(--accent); font-weight:600; }
.rppis .pilink.locked { color:var(--fg); text-decoration:none; cursor:default; }
.prepbar .btn.quiet { padding:7px 14px; }
ol.steps { margin:6px 0 10px 18px; font-size:13.5px; max-width:70ch; }
ol.steps li { margin:4px 0; }
ol.steps code { font-size:12.5px; background:var(--accent-soft); padding:1px 5px; border-radius:4px; }
.rpcard a.rpnotes { color:var(--accent); }

/* ---- Cases catalogue (advisor) ---- */
.dim { opacity:.4; pointer-events:none; }
.rphits { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ybars { display:flex; align-items:flex-end; gap:3px; height:90px; margin:6px 0 4px; }
.ybar { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.ybar span { width:100%; background:var(--accent); border-radius:2px 2px 0 0; min-height:2px; }
.ybar em { font-size:10px; font-style:normal; color:var(--muted); margin-top:2px; }
.scrollx { overflow-x:auto; }
table.cases th.sortable { cursor:pointer; white-space:nowrap; }
table.cases td { white-space:nowrap; }

/* ---- Judging: laptop or iPad ----
   The case on the left, the sheet on the right. Every scoring target is a
   large button, so a judge can score with a fingertip without looking away
   from the student for long. */
.jhead { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px; }
.jclock { display:flex; align-items:center; gap:10px; }
.jgrid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:22px; }
@media (max-width:860px) { .jgrid { grid-template-columns:1fr; } }
.jleft { position:sticky; top:8px; align-self:start; max-height:calc(100vh - 20px); overflow:auto; }
.jleft details { margin:10px 0; } .jleft summary { cursor:pointer; }
.jq { background:var(--accent-soft); border-radius:10px; padding:10px 14px; }
.jq ol { margin:4px 0 0 18px; } .jq li { margin:5px 0; font-size:15px; }
.jrow { border-bottom:1px solid var(--line); padding:9px 0 10px; }
.jlabel { margin:0 0 7px; font-weight:600; font-size:14.5px; }
.jbands { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.jband { font:inherit; border:1px solid var(--line); background:var(--card); color:var(--fg);
  border-radius:8px; padding:9px 6px; min-height:56px; cursor:pointer; text-align:center; }
.jband b { display:block; font-size:12px; font-weight:600; line-height:1.2; }
.jband span { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.jband.on { border-color:var(--accent); background:var(--accent); color:#fff; }
.jband.on span { color:#fff; }
.jfine { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.jnum { font:inherit; min-width:40px; min-height:38px; border:1px solid var(--line);
  border-radius:7px; background:var(--card); color:var(--fg); cursor:pointer; }
.jnum.on { border-color:var(--accent); background:var(--accent-soft); font-weight:700; }
.jtotal { font-size:18px; margin:14px 0 10px; } .jtotal b { font-size:24px; color:var(--accent); }
textarea#jFb { width:100%; font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }

/* ---- Results ---- */
.outcome { font-weight:600; }
.outcome.pass { color:var(--ok); } .outcome.fail { color:var(--bad); }
.outcome.remediate { color:var(--flag); }
.judged { border:1px solid var(--line); border-radius:10px; padding:4px 14px 12px; margin:18px 0 0; }
.jsum { font-size:16px; margin:2px 0 8px; } .jsum b { font-size:22px; }
.fb { white-space:normal; max-width:70ch; }
.hwbar { background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px;
  padding:9px 14px; margin:0 0 12px; font-size:14px; }
/* Team judging: each member, present or absent. */
.jteam { display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.jmember { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.jmember b { font-size:17px; min-width:160px; }
.jmember.absent b { text-decoration:line-through; color:var(--muted); }
/* Catalogues (Exams, Cases): three summaries side by side. */
.catsum { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
@media (max-width:860px) { .catsum { grid-template-columns:1fr; } }
table.catalogue th.sortable { cursor:pointer; white-space:nowrap; }
table.catalogue td { white-space:nowrap; }
/* 2026-27 judge sheet */
.jsec { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  margin:16px 0 2px; text-align:left; }
.jdetail { margin:-4px 0 7px; }
details.jguide { margin:6px 0 4px; } details.jguide summary { cursor:pointer; }
details.jguide table { font-size:12px; } details.jguide td, details.jguide th { vertical-align:top; padding:5px 6px; }
details.jguide table { table-layout:fixed; width:100%; }
details.jguide th:first-child { width:20%; }
details.jguide td { overflow-wrap:normal; word-break:normal; hyphens:auto; }
input.errfield { border-color:var(--bad); }
.warnline { color:var(--bad); }

/* Crescent judging rubric: a checklist beside DECA's score */
.crescent { border-top:2px solid var(--line); margin-top:16px; padding-top:4px; }
.lab.cres { margin:12px 0 4px; }
.jck { font:inherit; display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left;
  background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; margin:0 0 6px; cursor:pointer; font-size:13.5px; min-height:44px; }
.jck .box { flex:0 0 22px; height:22px; border:2px solid var(--line); border-radius:5px;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
.jck.on { border-color:var(--accent); background:var(--accent-soft); }
.jck.on .box { background:var(--accent); border-color:var(--accent); }
table.decagrid { margin:6px 0 2px; } table.decagrid th { text-align:center; width:48px; }
table.decagrid td:not(:first-child) { text-align:center; }
.jdeca { font:inherit; width:40px; height:40px; border:2px solid var(--line); border-radius:7px;
  background:var(--card); color:#fff; font-weight:700; cursor:pointer; }
.jdeca.on { background:var(--accent); border-color:var(--accent); }
ul.crlist { list-style:none; margin:2px 0 0; padding:0; font-size:13.5px; }
ul.crlist li { margin:3px 0; } ul.crlist li.yes { color:var(--ok); } ul.crlist li.no { color:var(--muted); }
table.decagrid td.yes { color:var(--ok); font-weight:700; } table.decagrid td.no { color:var(--muted); }
details.jopt { margin:14px 0 0; border-top:1px dashed var(--line); padding-top:4px; }
details.jopt > summary.jsec { cursor:pointer; display:block; }
.jtodo { margin:12px 0 0; }
.chip.pathChip.mine { border-color:var(--accent); background:var(--accent-soft); font-weight:600; }
/* The facts of a case, before anything else. */
table.caseinfo { border-collapse:collapse; margin:6px 0 4px; font-size:14px; }
table.caseinfo th { text-align:left; font-weight:600; color:var(--muted); padding:3px 18px 3px 0;
  white-space:nowrap; vertical-align:top; }
table.caseinfo td { padding:3px 0; }

/* ---- Minimum requirements ---- */
table.reqgrid th { white-space:normal; font-size:11px; max-width:110px; vertical-align:bottom; }
table.reqgrid td.na { color:var(--line); text-align:center; }
table.reqgrid td.met, .reqgrid td.num.met { color:var(--ok); font-weight:700; }
table.reqgrid td.late { color:var(--bad); }
button.tick { font:inherit; width:34px; height:34px; border:2px solid var(--line); border-radius:7px;
  background:var(--card); color:#fff; font-weight:700; cursor:pointer; }
button.tick.on { background:var(--accent); border-color:var(--accent); }
button.tick:disabled { opacity:.4; cursor:default; }
details.reqadd { margin:12px 0; border:1px solid var(--line); border-radius:10px; padding:8px 14px; }
details.reqadd summary { cursor:pointer; }
.reqs { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.req { border:1px solid var(--line); border-radius:10px; padding:11px 14px; background:var(--card); }
.req.met { border-color:var(--ok); } .req.late { border-color:var(--bad); }
.req .reqtop { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.req .bar { height:8px; background:var(--line); border-radius:5px; overflow:hidden; margin:9px 0 4px; }
.req .bar span { display:block; height:100%; background:var(--accent); }
.req.met .bar span { background:var(--ok); }
table.reqgrid th:not(:first-child), table.reqgrid td:not(:first-child) { text-align:center; }
table.resstud td.num, table.resstud th.num { padding-right:18px; }

.pi.pihit{outline:2px solid #c9a227;outline-offset:4px;border-radius:4px}
.iabanner{border:2px solid #c9a227;background:#fdf8e6;border-radius:10px;padding:14px 18px;margin-bottom:14px}
.iabanner p{margin:4px 0}.iabanner .lab{color:#7a5d00}
.welcome{border:1px solid #cfdcd3;background:#f3f8f5;border-radius:10px;padding:16px 20px;margin-bottom:14px}
.welcome ul{margin:6px 0;padding-left:20px;line-height:1.6}
.nextstep{border-left:4px solid #1f5c3d;padding:6px 0 6px 16px;margin:0 0 18px}
.nextstep p{margin:4px 0}
.histrows{border-top:1px solid var(--line,#dde3df)}
.histrow{display:grid;grid-template-columns:96px minmax(0,1fr) auto 52px;gap:12px;align-items:center;padding:5px 4px;border-bottom:1px solid var(--line,#dde3df);font-size:14.5px}
.histrow .hlabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.histrow .hdate{color:var(--muted,#5b6660);font-variant-numeric:tabular-nums}
.histrow .hscore{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.histrow .hscore.good{color:var(--accent,#1f5c3d)}
.histrow .linkbtn{justify-self:end}

/* ---------- Business Team portal ---------- */
.ptiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
          gap:12px; margin-top:14px; }
a.ptile { display:block; text-decoration:none; color:var(--fg); background:var(--card);
          border:1px solid var(--line); border-radius:12px; padding:15px 17px;
          transition:border-color .12s; }
a.ptile:hover, a.ptile:focus-visible { border-color:var(--accent); }
a.ptile h3 { margin:0 0 3px; font-size:15px; font-weight:650; color:var(--accent-ink); }
a.ptile p { margin:0; font-size:12.5px; color:var(--muted); }
.pchips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.pchip { font-size:12.5px; padding:3px 11px; border-radius:16px;
         background:var(--accent-soft); color:var(--accent-ink); }
.pchip .r { font-size:11px; opacity:.8; margin-left:6px; }
.pchip.exec { background:var(--crescent); color:#fff; }
.pchip.adv { background:var(--crescent-dark); color:#fff; }
.medit { margin-bottom:12px; }
.etop { display:flex; justify-content:space-between; align-items:center; gap:10px;
        flex-wrap:wrap; margin-bottom:10px; }
.ecols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr); gap:12px 24px; }
@media (max-width:900px) { .ecols { grid-template-columns:1fr; } }
button.btn.small, button.btn.quiet.small { padding:6px 15px; font-size:13px; }
.mhead { display:flex; justify-content:space-between; align-items:center; gap:10px;
         flex-wrap:wrap; margin-bottom:10px; }
.statrow.tight { gap:22px; }
.statrow.tight .stat b { font-size:19px; display:inline; margin-right:5px; }
.mscroll { max-height:58vh; overflow:auto; border:1px solid var(--line); border-radius:8px; }
table.t.mlist thead th { position:sticky; top:0; background:var(--card); z-index:1;
                         padding-top:7px; padding-bottom:7px; }
table.t.mlist td, table.t.mlist th { white-space:nowrap; padding:4px 10px; }
table.t.mlist td.memail { color:var(--muted); max-width:260px; overflow:hidden; text-overflow:ellipsis; }
table.t.mlist td.mprogs { white-space:normal; }
table.t.mlist td.mprogs .pchip { margin:1px 4px 1px 0; display:inline-block; }
.mfilters { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:10px; }
.mfilters input[type=search] { font:inherit; font-size:13.5px; padding:6px 10px;
  border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--fg);
  min-width:180px; }
table.t.mlist tr { cursor:pointer; }
table.t.mlist tr:hover td { background:var(--accent-soft); }
table.t.mlist tr.sel td { background:var(--accent-soft); }
table.t.mlist td { vertical-align:middle; }
.mlist .pchip { font-size:11px; padding:0 8px; }
.medit .field input[type=text], .medit .field input[type=number], .medit .field input[type=email] {
  width:100%; font:inherit; font-size:13.5px; padding:6px 10px; border-radius:9px;
  border:1px solid var(--line); background:var(--card); color:var(--fg); }
.emrow { display:flex; gap:6px; align-items:center; margin-bottom:5px; }
.emrow input { flex:1; font:inherit; font-size:13.5px; padding:6px 10px; border-radius:9px;
               border:1px solid var(--line); background:var(--card); color:var(--fg); }
.emrow .tagp { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.linkbtn2 { font:inherit; font-size:12.5px; border:0; background:none; padding:0;
            color:var(--accent-ink); text-decoration:underline; cursor:pointer; }
.linkbtn2.bad { color:var(--bad); }
table.t.enrol td { vertical-align:middle; }
table.t.enrol select, table.t.enrol input { font-size:12.5px; padding:4px 7px; }
table.t.enrol input[type=text] { width:100%; border-radius:7px; border:1px solid var(--line);
  background:var(--card); color:var(--fg); font:inherit; }
.okline { color:var(--ok); }
.imptab { border:1px solid var(--line); border-radius:10px; padding:10px 13px; margin-bottom:8px; }
.imptab .top { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.imptab .top b { min-width:150px; }
table.t.enrol td:first-child { white-space:nowrap; padding-right:10px; }
@media (max-width:720px) {
  table.t.mlist .memail { display:none; }
  table.t.mlist td, table.t.mlist th { padding:4px 6px; }
  .mscroll { max-height:65vh; }
}