/* FullCircle — shared stylesheet (WebAssign scheme)
   Every mock-up in this folder links to this one file. */
:root{
  --blue:#004165; --blue-dark:#002a41; --blue-hover:#005a87;
  --grad-a:#00293f; --grad-b:#00364f;
  --red:#CC0000; --red-dark:#A30000;
  --accent:#71C5E8; --accent-pale:#DAE6EF;
  --gold:#FFC72D;
  --ink:#1A1A1A; --gray-700:#575757; --gray-500:#707070;
  --gray-300:#D5DCE1; --gray-100:#F1F3F4; --gray-050:#F7F8F9;
  --ok:#2E7D32; --ok-bg:#EDF5ED;
  --warn:#8A5B00; --warn-bg:#FDF6E8;
  --bad:#CC0000; --bad-bg:#FCF0F0;
  --max:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Open Sans',Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;font-size:15px;line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}

/* ---------- logo ---------- */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .name{font-weight:800;font-size:1.3rem;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.logo .sub{display:block;font-weight:600;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gray-500);margin-top:3px}

/* ---------- signed-out chrome ---------- */
.navbar{height:73px;background:#fff;display:flex;align-items:center;border-bottom:1px solid var(--gray-300)}
.navbar-inner{width:min(1320px,calc(100% - 48px));margin:0 auto;display:flex;align-items:center;justify-content:space-between}

/* ---------- interior chrome ---------- */
.apphead{background:var(--blue);color:#fff;display:flex;align-items:center;gap:12px;padding:10px 0}
.apphead .inner{width:min(var(--max),calc(100% - 40px));margin:0 auto;display:flex;align-items:center;gap:12px}
.apphead .mark{font-weight:800;font-size:1.05rem;color:#fff}
.apphead .mark span{background:var(--red);border-radius:7px;padding:1px 7px;margin-right:4px}
.apphead .who{margin-left:auto;font-size:13.5px;color:#fff}
.nav{background:var(--blue-dark)}
.nav .inner{width:min(var(--max),calc(100% - 40px));margin:0 auto;display:flex}
.nav .item{color:#fff;font-weight:600;font-size:14px;padding:11px 17px;letter-spacing:.02em;cursor:pointer}
.nav .item:hover{background:var(--blue-hover)}
.nav .item.on{background:var(--blue-hover)}
.crumb{background:var(--gray-100);border-bottom:1px solid var(--gray-300);padding:8px 0;font-size:13.5px}
.crumb .inner{width:min(var(--max),calc(100% - 40px));margin:0 auto}

/* ---------- page furniture ---------- */
main{padding:26px 0 60px}
h1{font-size:1.85rem;font-weight:800;margin:0 0 4px}
.sub{color:var(--gray-700);font-size:14px;margin:0 0 22px}
h2.sec{font-size:1.05rem;font-weight:700;color:var(--red);margin:26px 0 2px}
h2.sec + .rule{border-bottom:3px solid var(--blue);margin-bottom:14px}

/* ---------- buttons ---------- */
.btn{font-family:inherit;font-size:14.5px;font-weight:700;padding:.6em 1.45em;border-radius:4px;border:0;cursor:pointer;display:inline-block;text-decoration:none}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);text-decoration:none}
.btn-outline{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.btn-plain{background:var(--gray-300);color:var(--ink);font-weight:600}
.btn-small{font-size:12.5px;padding:.38em .9em;font-weight:600}
.btn-big{font-size:18px;padding:.7em 1.7em}
.btn-off{background:var(--gray-300);color:#9A9E9E;cursor:not-allowed}
.btn-danger{background:#fff;color:var(--red);border:1px solid var(--red);font-weight:700}
.btn-full{width:100%;text-align:center}

/* ---------- forms ---------- */
label.f{display:block;font-size:13.5px;font-weight:700;margin-bottom:5px}
input.f,select.f{font-family:inherit;font-size:15px;padding:10px 11px;border:1px solid var(--gray-300);border-radius:4px;width:100%;color:var(--ink);background:#fff}
input.f:focus{outline:2px solid var(--blue);border-color:var(--blue)}
input.bad{border-color:var(--red);background:var(--bad-bg)}
.hint{font-size:12.5px;color:var(--gray-700);margin-top:5px}
.err{font-size:13px;color:var(--red);font-weight:700;margin-top:6px;display:flex;align-items:center;gap:6px}
.field{margin-bottom:16px}

/* ---------- card (sign-in style) ---------- */
.card-page{background:var(--gray-050);min-height:560px;padding:42px 0 70px}
.card{width:440px;margin:0 auto;background:#fff;border:1px solid var(--gray-300);border-radius:4px}
.card .card-top{padding:26px 34px 22px;border-bottom:1px solid var(--gray-300);text-align:center}
.card .card-body{padding:24px 34px 30px}
.card .card-foot{padding:16px 34px;border-top:1px solid var(--gray-300);text-align:center;font-size:14px;color:var(--gray-700)}
.card h2{font-size:1.35rem;font-weight:800;text-align:center;margin:0 0 20px}

/* ---------- tables ---------- */
.tbl-head{display:flex;align-items:center;background:var(--gray-100);border:1px solid var(--gray-300);border-bottom:0;padding:8px 12px}
.tbl-head h3{margin:0;font-size:15px;font-weight:700}
.tbl-head .r{margin-left:auto}
table{border-collapse:collapse;width:100%;font-size:14px;border:1px solid var(--gray-300)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--gray-300)}
th{background:var(--accent-pale);font-size:12.5px;font-weight:700;color:var(--blue)}
tr.alt td{background:var(--gray-050)}
td.acts{white-space:nowrap;color:#AEB2B2}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:22px;text-align:center;color:var(--gray-700);font-size:14px;background:var(--gray-050);border:1px dashed var(--gray-300);border-top:0}

/* ---------- status ---------- */
.pill{display:inline-block;font-size:12.5px;padding:3px 10px;border-radius:3px;border:1px solid var(--gray-300);background:#fff;color:var(--gray-700)}
.pill.ok{background:var(--ok-bg);border-color:#C5DCC6;color:var(--ok);font-weight:700}
.pill.warn{background:var(--warn-bg);border-color:#E6D3A8;color:var(--warn);font-weight:700}
.pill.bad{background:var(--bad-bg);border-color:#E6B8B8;color:var(--bad);font-weight:700}
.msg{font-size:14px;padding:11px 13px;margin-bottom:12px;border:1px solid;border-radius:4px}
.msg.ok{background:var(--ok-bg);border-color:#C5DCC6}
.msg.warn{background:var(--warn-bg);border-color:#E6D3A8}
.msg.bad{background:var(--bad-bg);border-color:#E6B8B8}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:6px}
.tile{border:1px solid var(--gray-300);border-top:4px solid var(--blue);border-radius:3px;padding:13px 15px;background:#fff}
.tile .n{font-size:26px;font-weight:800;line-height:1.15}
.tile .l{font-size:12.5px;color:var(--gray-700)}
.tile.warn{border-top-color:var(--warn)}
.tile.ok{border-top-color:var(--ok)}
.tile.red{border-top-color:var(--red)}

/* ---------------------------------------------------------------- additions
   Landing page chrome, sign-in card details and small helpers. These were in
   the landing mock-up; they live here now so every page shares one file. */
.util{background:var(--blue-dark);height:46px}
.redrule{height:7px;background:var(--red)}
.blackrule{height:10px;background:#000}

.hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 88% 18%, rgba(113,197,232,.22), transparent 26rem),
             linear-gradient(120deg,#00293f 0%, var(--blue) 48%, #00364f 100%);
  padding:clamp(3.4rem,8vw,5.6rem) 0 clamp(2.4rem,5vw,3.6rem)}
.hero h1{margin:0;font-size:clamp(2.4rem,6vw,3.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#fff}
.hero .chip{background:var(--red);color:#fff;padding:.06em .36em .10em;font-weight:800;border-radius:12px;display:inline-block}
.hero .tagline{margin:.55em 0 0;font-size:1.22rem;font-weight:600;color:#b8dcf0}
.chip-sm{background:var(--red);color:#fff;padding:.06em .36em .10em;font-weight:800;border-radius:12px;
  font-size:1.7rem;display:inline-block}

.photo-strip{width:100%;overflow:hidden;background:#000;
  --slot-w:300px; --slot-h:360px; --perf-w:30px;
  --perf-pitch:calc(var(--perf-w) * 0.346154); --unit:calc(var(--slot-w) + var(--perf-w))}
.photo-track{display:flex;width:max-content;animation:scroll-strip 53s linear infinite}
.photo-track img{flex:0 0 var(--slot-w);width:var(--slot-w);height:var(--slot-h);object-fit:cover;display:block}
.perf{flex:0 0 var(--perf-w);width:var(--perf-w);height:var(--slot-h);display:block;background-color:#fff;
  background-image:url('images/film-perf-tile.svg');background-repeat:repeat-y;background-position:center top;
  background-size:var(--perf-w) var(--perf-pitch)}
@keyframes scroll-strip{0%{transform:translateX(calc(-12 * var(--unit)))}100%{transform:translateX(0)}}

.lede-h{font-size:1.38rem;font-weight:600;margin:0 0 2px}
.lead{font-size:1.06rem;max-width:930px;margin:0 0 26px}
.rule{border-bottom:3px solid var(--blue);margin-bottom:14px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.card-col,.cols .card{border:1px solid var(--gray-300);border-left:5px solid var(--accent);background:var(--gray-050);
  padding:16px 18px;border-radius:0}
.cols .card{width:auto;margin:0}
.cols .card h3{margin:0 0 6px;font-size:1.02rem;font-weight:700}
.cols .card p{margin:0;font-size:.94rem;color:var(--gray-700)}

.cta{padding:44px 0 40px;text-align:center}
.cta-head{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.cta-head::before,.cta-head::after{content:"";flex:1;border-top:1px solid var(--gray-300)}
.cta-head h2{border:0;padding:0;margin:0;font-size:1.72rem;font-weight:700;white-space:nowrap;color:var(--ink)}
.cta-btns{display:flex;gap:10px;justify-content:center}
.btn-solid{background:var(--red);color:#fff;font-weight:700;padding:.62em 1.5em;border-radius:3px;
  text-decoration:none;font-size:.95rem;letter-spacing:.03em;text-transform:uppercase;display:inline-block}
.btn-solid:hover{background:var(--red-dark);text-decoration:none}

.apphead .mark{color:#fff;text-decoration:none}
.apphead .who a{color:#cfe3ef}
.nav .item{text-decoration:none}
.nav .item.right{margin-left:auto}
.err .bang{background:var(--red);color:#fff;border-radius:50%;width:17px;height:17px;display:inline-flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700}
.card-kicker{font-size:1.05rem;font-weight:700;color:var(--blue)}
.narrow{max-width:460px}
.narrow .btn{margin-right:8px}
.soon{font-size:12px;color:var(--gray-500);font-style:italic}
h2.sec{font-size:1.05rem;font-weight:700;color:var(--red);margin:26px 0 2px}

/* phones: the reel and the three cards stack, tables stay readable */
@media (max-width:760px){
  .cols{grid-template-columns:1fr}
  .navbar-inner{padding:0 14px}
  .logo .sub{display:none}
  .photo-strip{--slot-w:190px; --slot-h:240px; --perf-w:20px}
  .card{width:auto;margin:0 14px}
  table{font-size:13px}
  th,td{padding:7px 8px}
}

/* wizard steps + small helpers added with the roster upload */
.steps{display:flex;gap:8px;font-size:12.5px;margin:0 0 18px}
.step{padding:6px 14px;border:1px solid var(--gray-300);border-radius:14px;background:#fff;color:var(--gray-700)}
.step.done{background:var(--ok-bg);border-color:#C5DCC6;color:var(--ok);font-weight:600}
.step.now{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.mono{font-family:Consolas,'Courier New',monospace;font-size:13px}
td select.f{width:100%;font-size:14px;padding:6px 8px}
ul.plain{margin:0 0 14px;padding-left:20px;font-size:14.5px}
ul.plain li{margin-bottom:5px}
input[type=file].f{padding:8px;background:#fff}

/* rubric review: one card per dimension, with its four levels */
.dimcard{border:1px solid var(--gray-300);border-radius:4px;margin-bottom:12px;overflow:hidden}
.dimhead{background:var(--gray-050);border-bottom:1px solid var(--gray-300);padding:9px 12px;font-size:14.5px}
.dimhead .hint{display:block;margin-top:2px}
table.levels{border:0}
table.levels td{border-bottom:1px solid #E8ECEF;font-size:13.5px;padding:7px 12px}
table.levels tr:last-child td{border-bottom:0}
td.lvl{width:38px;font-weight:800;color:var(--blue);text-align:center;background:var(--accent-pale)}

/* people and roles */
th.mid, td.mid{text-align:center;width:14%}
td.mid input[type=checkbox]{width:18px;height:18px}
label.check{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
label.check input{width:17px;height:17px}

/* session control */
.win{border:1px solid var(--gray-300);border-radius:5px;margin-bottom:14px;overflow:hidden}
.win.on{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok) inset}
.win-head{display:flex;align-items:center;gap:14px;padding:11px 14px;background:var(--gray-050);
  border-bottom:1px solid var(--gray-300)}
.win.on .win-head{background:var(--ok-bg)}
.win-title{font-size:16px;font-weight:800}
.win-state{margin-left:auto;display:flex;align-items:center;gap:12px}
.countdown{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ok)}
.countdown.soon{color:var(--warn)}
.countdown.out{color:var(--red)}
.win-body{display:flex;align-items:center;gap:20px;padding:12px 14px;flex-wrap:wrap}
.counts{display:flex;gap:18px;font-size:14px}
.counts b{font-size:19px;font-weight:800}
.win-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.win-actions form{margin:0}
.win-more{border-top:1px solid var(--gray-300);padding:10px 14px;font-size:13.5px}
.win-more summary{cursor:pointer;color:var(--blue);font-weight:600}
.inline-form{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.inline-form .f{width:auto;min-width:160px}
.linkish{background:none;border:0;color:var(--blue);cursor:pointer;font:inherit;text-decoration:underline;padding:0}

/* ---------------------------------------------------------------- rating
   Phone first: these screens are used standing up, in five minutes, on a
   375px screen. Everything else in the app is desktop-first. */
body.rating{background:#fff}
.rate-head{background:var(--blue);color:#fff;display:flex;align-items:center;gap:10px;
  padding:9px 14px;position:sticky;top:0;z-index:5}
.rate-head .mark{font-weight:800;color:#fff;text-decoration:none}
.rate-head .mark span{background:var(--red);border-radius:6px;padding:1px 7px}
.rate-head .ctx{font-size:14px;font-weight:600}
.rate-head .countdown{margin-left:auto;font-size:19px}
.rate-flash{background:var(--warn-bg);border-bottom:1px solid #E6D3A8;padding:10px 14px;font-size:14px}
.rate-main{max-width:560px;margin:0 auto;padding:14px 14px 40px}
.rate-h1{font-size:1.45rem;font-weight:800;margin:0 0 4px}
.rating .msg{font-size:14px}
.qstep{font-size:13px;color:var(--gray-700);margin:0 0 12px}
.why{font-size:14px;color:var(--gray-700);margin:0 0 12px}

.dots{display:flex;gap:5px;margin:0 0 12px}
.dot{height:5px;flex:1;background:var(--gray-300);border-radius:3px}
.dot.done{background:var(--blue)}
.dot.now{background:var(--red)}

.rating .dim{border:1px solid var(--gray-300);border-radius:6px;padding:13px;margin-bottom:12px}
.rating .dim .q{font-size:1.06rem;font-weight:800;margin-bottom:3px}
.rating .dim .why{font-size:13px;margin-bottom:12px}
.scale{display:flex;flex-direction:column;gap:8px}
.sc{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--gray-300);border-radius:6px;
  padding:11px 12px;font-size:13px;color:var(--gray-700);background:#fff;cursor:pointer}
.sc input{position:absolute;opacity:0;width:0;height:0}
.sc b{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--gray-100);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.sc .lab{font-weight:700;color:var(--ink);font-size:13.5px}
.sc.on,.sc:has(input:checked){border-color:var(--red);background:var(--bad-bg)}
.sc.on b,.sc:has(input:checked) b{background:var(--red);color:#fff}

.remain{display:flex;justify-content:space-between;align-items:center;background:var(--accent-pale);
  border:1px solid var(--accent);border-radius:6px;padding:10px 12px;margin-bottom:12px;
  font-size:13.5px;font-weight:700}
.remain.zero{background:var(--ok-bg);border-color:#C5DCC6;color:var(--ok)}
.remain.over{background:var(--bad-bg);border-color:#E6B8B8;color:var(--red)}
.pts{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.pts.small{margin-bottom:4px}
.pts .nm{flex:1;font-size:14.5px}
.pts .you{font-size:12px;color:var(--gray-700)}
.pts input.pt{width:84px;font-size:18px;padding:10px;border:1px solid var(--gray-300);border-radius:6px;
  text-align:center;font-family:inherit;font-weight:700;color:var(--ink)}
.pts input.pt.auto{background:var(--accent-pale);border-color:var(--accent)}
.score-chip{min-width:40px;text-align:center;font-weight:800;background:var(--gray-100);
  border:1px solid var(--gray-300);border-radius:5px;padding:4px 8px}
.total{float:right;font-size:13px;font-weight:700;color:var(--warn)}
.total.ok{color:var(--ok)}
.rating textarea{width:100%;font-family:inherit;font-size:16px;padding:12px;border:1px solid var(--gray-300);
  border-radius:6px;min-height:150px;line-height:1.5}

.rate-foot{margin-top:18px}
.btn-rate{display:block;width:100%;font-family:inherit;font-size:17px;font-weight:800;padding:15px;
  border-radius:6px;border:0;background:var(--red);color:#fff;cursor:pointer;text-align:center;text-decoration:none}
.btn-rate:disabled{background:var(--gray-300);color:#9A9E9E;cursor:not-allowed}
.btn-rate.ghost{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.why-not{font-size:12.5px;color:var(--warn);text-align:center;margin-top:8px}
.nav-links{display:flex;gap:16px;justify-content:center;margin-top:14px;font-size:14px}
.big-ok{font-size:2rem;font-weight:800;color:var(--ok);margin:10px 0 4px}

/* student lists */
.rows{border:1px solid var(--gray-300);border-radius:5px;overflow:hidden;margin-bottom:6px}
.rows .row{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--gray-300);
  background:#fff;text-decoration:none;color:var(--ink)}
.rows .row:last-child{border-bottom:0}
.rows .row .t{font-weight:700;font-size:15px}
.rows .row .m{font-size:12.5px;color:var(--gray-700)}
.rows .row .go{margin-left:auto;color:var(--blue);font-weight:800;font-size:20px}
.rows .row.off{background:var(--gray-050);color:var(--gray-500)}
.rows .row.off .t{color:var(--gray-500)}

/* staff score entry: all seven dimensions on one screen, at a laptop */
table.scoring td.mid, table.scoring th.mid{width:11%;text-align:center}
.radio-cell{display:inline-flex;align-items:center;justify-content:center;width:100%;
  min-height:34px;cursor:pointer}
.radio-cell input{position:absolute;opacity:0;width:0;height:0}
.dot-mark{width:22px;height:22px;border-radius:50%;border:2px solid var(--gray-300);display:block}
.radio-cell:hover .dot-mark{border-color:var(--blue)}
.radio-cell input:checked + .dot-mark{border-color:var(--red);background:var(--red);
  box-shadow:inset 0 0 0 3px #fff}
textarea.big{width:100%;font-family:inherit;font-size:15px;padding:12px;border:1px solid var(--gray-300);
  border-radius:4px;line-height:1.55;min-height:220px}

/* The scoring table is for a laptop, but guests score on their phones.
   Under 760px the table becomes one card per dimension with four big
   tap targets, the same shape students see. */
.lvl-num, .lvl-word{display:none}
@media (max-width:760px){
  table.scoring, table.scoring tbody, table.scoring tr, table.scoring td{display:block;width:auto}
  table.scoring tr:first-child{display:none}            /* the 4/3/2/1 header */
  table.scoring{border:0}
  table.scoring tr{border:1px solid var(--gray-300);border-radius:6px;margin-bottom:12px;padding:11px 12px}
  table.scoring tr.alt{background:#fff}
  table.scoring td{border:0;padding:0}
  td.dim-cell{margin-bottom:10px}
  td.dim-cell b{font-size:15.5px}
  table.scoring td.mid{display:block;width:auto;text-align:left;margin-bottom:7px}
  .radio-cell{justify-content:flex-start;gap:11px;border:1px solid var(--gray-300);border-radius:6px;
    padding:10px 12px;min-height:46px}
  .radio-cell:has(input:checked){border-color:var(--red);background:var(--bad-bg)}
  .lvl-num{display:flex;width:26px;height:26px;border-radius:50%;background:var(--gray-100);
    align-items:center;justify-content:center;font-weight:800;font-size:14px}
  .radio-cell:has(input:checked) .lvl-num{background:var(--red);color:#fff}
  .lvl-word{display:block;font-size:14px;font-weight:700;color:var(--ink)}
  .dot-mark{display:none}
  .on-wide{display:none}
  textarea.big{min-height:160px;font-size:16px}
}

/* ---------------------------------------------------------------- phones
   The admin pages are desktop-first, but a session can be run from a phone
   between meetings, so the chrome and the wide tables have to cope. */
@media (max-width:760px){
  .apphead .inner{padding:0 14px;gap:8px}
  .apphead .mark{font-size:1rem}
  .apphead .who{font-size:11.5px;line-height:1.3;text-align:right}
  .nav .inner{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0}
  .nav .item{padding:11px 13px;font-size:13px;white-space:nowrap}
  .nav .item.right{margin-left:0}
  .crumb .inner{padding:0 14px}
  .crumb{font-size:12.5px}
  .wrap{width:calc(100% - 28px)}
  h1{font-size:1.5rem}

  /* wide tables scroll sideways rather than squeezing to nothing */
  .tbl-head{flex-wrap:wrap;gap:8px}
  .tbl-head .r{margin-left:0;width:100%}
  main table:not(.scoring){display:block;overflow-x:auto;white-space:nowrap}
  main table:not(.scoring) td.hint{white-space:normal;min-width:180px}

  /* session control: stack the counts and let the buttons fill the width */
  .win-head{flex-wrap:wrap}
  .win-state{margin-left:0;width:100%;justify-content:space-between}
  .win-body{flex-direction:column;align-items:stretch}
  .counts{flex-wrap:wrap;gap:12px}
  .win-actions{margin-left:0;flex-direction:column}
  .win-actions form{width:100%}
  .win-actions .btn{width:100%}
  .inline-form{flex-direction:column;align-items:stretch}
  .inline-form .f{width:100%}

  /* forms and cards */
  .narrow{max-width:none}
  .card{width:auto;margin:0 14px}
  .tiles{grid-template-columns:repeat(2,1fr)}
}

/* Confirming something that cannot be undone. Deliberately plain and a
   little uncomfortable: a red edge, and a box you have to type into. */
.confirm{border:1px solid #E6B8B8;border-left:5px solid var(--red);
  background:var(--bad-bg);padding:14px 16px;border-radius:4px;max-width:640px}
.confirm p{margin:0 0 10px}
.confirm input[type=text]{font-family:Consolas,'Courier New',monospace;font-size:15px;
  padding:9px 11px;border:1px solid var(--gray-500);border-radius:3px;width:100%;
  max-width:360px;background:#fff}
.confirm input[type=text]:focus{outline:0;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(204,0,0,.14)}

/* A table row describing something that would destroy data if it went ahead. */
tr.danger td{background:var(--bad-bg)}
tr.danger:hover td{background:#F8E6E6}

a.danger-link{color:var(--red);font-weight:700}
a.danger-link:hover{color:var(--red-dark)}

/* A settings panel: a label and its explanation on the left, the control on
   the right, stacked on a phone. */
.panel{border:1px solid var(--gray-300);border-radius:4px;background:#fff;margin-bottom:18px}
.panel-row{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--gray-300)}
.panel-row:last-child{border-bottom:0}
.panel-row > div:first-child{flex:1 1 auto;min-width:0}
.panel-acts{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.panel-acts form{margin:0}

/* A wide table on a narrow screen scrolls sideways on its own rather than
   pushing the whole page out. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-x table{min-width:620px}
table.grades th,table.grades td{font-size:13.5px;padding:8px 9px}
table.grades th.num,table.grades td.num{white-space:nowrap}

h3.sub-sec{font-size:15px;margin:18px 0 8px;color:var(--blue)}

/* A written note, quoted. */
.note{border:1px solid var(--gray-300);border-left:4px solid var(--accent);
  background:var(--gray-050);border-radius:3px;padding:12px 14px;margin-bottom:10px}
.note p{margin:0;white-space:pre-wrap}
.note-head{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.note-hidden{border-left-color:var(--gray-500);background:#fff;opacity:.72}
.note-hidden p{text-decoration:line-through;text-decoration-color:var(--gray-300)}

@media (max-width:760px){
  .panel-row{flex-direction:column;gap:10px}
  .panel-acts{width:100%}
  .panel-acts .btn{width:100%;text-align:center}
}

/* A student's own total, the first thing they look for. */
.bigscore{border:1px solid var(--gray-300);border-top:4px solid var(--blue);border-radius:3px;
  background:#fff;padding:22px;text-align:center;margin-bottom:18px}
.bigscore .n{font-size:54px;font-weight:800;line-height:1;color:var(--blue)}
.bigscore .l{font-size:13px;color:var(--gray-700);margin-top:6px}

/* The settings page: a number and its unit, a switch that says what it is,
   and radio choices that carry their own explanation. */
.numfield{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.numfield input[type=number]{width:104px;font-size:15px;padding:8px 10px;
  border:1px solid var(--gray-500);border-radius:3px;text-align:right;background:#fff}
.numfield input[type=number]:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,65,101,.14)}
.numfield .unit{font-size:13px;color:var(--gray-700);white-space:nowrap}
.numfield .total{font-size:20px;font-weight:800;color:var(--ok);min-width:60px;
  text-align:right;display:inline-block}
.numfield .total.bad{color:var(--red)}

.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--gray-300);border-radius:3px;padding:8px 12px;background:#fff}
.switch input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
.switch span{font-weight:700;font-size:14px}

.choices{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.choice{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--gray-300);border-radius:3px;padding:10px 12px;background:#fff}
.choice:hover{border-color:var(--blue)}
.choice input{margin-top:3px;accent-color:var(--blue);cursor:pointer;flex:0 0 auto}
.choice span{font-size:14px}

.stickysave{position:sticky;bottom:0;background:#fff;border-top:3px solid var(--blue);
  padding:14px 0;margin-top:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

@media (max-width:760px){
  .numfield{justify-content:flex-start}
  .numfield input[type=number]{width:100%;max-width:160px}
  .switch{width:100%;justify-content:space-between}
  .stickysave .hint{width:100%}
}

.textfield{font-family:Consolas,'Courier New',monospace;font-size:14px;padding:8px 10px;
  border:1px solid var(--gray-500);border-radius:3px;background:#fff;width:300px;max-width:100%}
.textfield:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,65,101,.14)}
ol.steps-list{margin:0 0 0 20px;padding:0;font-size:14px;line-height:1.65}
ol.steps-list li{margin-bottom:8px}
@media (max-width:760px){ .textfield{width:100%} }