/* S22: BMS courses list and course cockpit. On top of tokens.css, app.css, bms.css, ds10.css. Tokens only. */
.s22-main{max-width:1180px}
.s22-main a:focus-visible,.s22-main button:focus-visible,.s22-main input:focus-visible,.s22-main summary:focus-visible,.admin-nav a:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}
.s22-live{cursor:pointer}
.s22-toast{position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:50;background:var(--color-ink);color:var(--color-card);padding:var(--s-3) var(--s-4);border-radius:var(--radius-sm);box-shadow:var(--shadow);font-size:var(--t-sm);max-width:22rem}
.s22-toast[hidden]{display:none}
.s22-in{width:100%;box-sizing:border-box;background:var(--color-card);border:1.5px solid var(--color-line);border-radius:var(--radius-sm);padding:.5rem var(--s-3);font:inherit;font-size:var(--t-sm);color:var(--color-ink)}
.s22-in:focus{border-color:var(--color-accent);outline:3px solid var(--color-accent-wash)}
.s22-lab{display:block;font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);margin-bottom:4px}
.s22-panel{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--color-line);background:var(--color-bg)}
.s22-panel[hidden]{display:none}
.s22-grid2{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:var(--s-3);align-items:end}
.s22-grid3{grid-template-columns:1fr 1fr auto}
.s22-err{color:var(--color-danger);font-size:var(--t-xs);margin:var(--s-1) 0 0}
.s22-btn-row{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}

/* courses list */
.s22-head,.s22-row{display:grid;grid-template-columns:minmax(240px,2.4fr) 1.3fr 1.5fr 90px 110px 120px;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4)}
.s22-head{background:var(--color-bg);border-bottom:1px solid var(--color-line);font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted)}
.s22-row{border-top:1px solid var(--color-line);color:inherit;text-decoration:none}
.s22-head + .s22-row{border-top:none}
.s22-row:hover{background:var(--color-accent-wash)}
.s22-row .nm{font-weight:800;color:var(--color-ink)}
.s22-row .sub{font-size:var(--t-sm);color:var(--color-muted)}
.s22-row .k{display:none}
.s22-cap{font-size:var(--t-sm);color:var(--color-ink);font-weight:700}
.s22-cap small{display:block;font-weight:400;color:var(--color-muted);font-size:var(--t-xs)}
.s22-bar{height:6px;border-radius:3px;background:var(--color-line);margin-top:4px;overflow:hidden;max-width:150px}
.s22-bar i{display:block;height:100%;background:var(--color-accent)}
.s22-bar.is-full i{background:var(--color-success)}
.s22-tag{display:inline-block;font-size:var(--t-xs);font-weight:800;padding:2px 9px;border-radius:999px;background:var(--color-bg);color:var(--color-muted);border:1px solid var(--color-line)}
.s22-tag.is-full{background:var(--color-success-wash);color:var(--color-success-ink);border-color:transparent}
.s22-tag.is-open{background:var(--color-info-wash);color:var(--color-info-ink);border-color:transparent}
.s22-tag.is-opt{background:var(--color-warning-wash);color:var(--color-warning-ink);border-color:transparent}
.s22-empty{padding:var(--s-6) var(--s-5);text-align:center;color:var(--color-muted)}

/* cockpit */
.s22-hero{display:flex;gap:var(--s-4);align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--s-4)}
.s22-hero h1{margin:0}
.s22-hero .bms-sub{display:block;margin-top:4px}
.s22-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-bottom:var(--s-4)}
.s22-kpi{background:var(--color-card);border:1px solid var(--color-line);border-top:4px solid var(--color-accent);border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4)}
.s22-kpi .n{display:block;font-family:var(--font-head);font-weight:800;font-size:var(--t-2xl);color:var(--color-ink);line-height:1}
.s22-kpi .l{display:block;font-size:var(--t-xs);font-weight:700;color:var(--color-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:var(--s-1)}
.s22-kpi.is-warn{border-top-color:var(--color-warning)}
.s22-kpi.is-ok{border-top-color:var(--color-success)}
.s22-tabs{display:flex;gap:var(--s-1);border-bottom:2px solid var(--color-line);margin-bottom:var(--s-4);flex-wrap:wrap}
.s22-tab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:.6rem var(--s-4);font:inherit;font-weight:700;color:var(--color-muted);cursor:pointer}
.s22-tab em{font-style:normal;background:var(--color-bg);border-radius:999px;padding:1px 8px;margin-left:6px;font-size:var(--t-xs);color:var(--color-ink)}
.s22-tab:hover{color:var(--color-accent-text)}
.s22-tab[aria-selected="true"]{color:var(--color-ink);border-bottom-color:var(--color-accent)}
.s22-pane[hidden]{display:none}
.s22-st-head,.s22-st{display:grid;grid-template-columns:minmax(220px,2.2fr) 150px 130px 1.4fr;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4)}
.s22-st-head{background:var(--color-bg);border-bottom:1px solid var(--color-line);font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted)}
.s22-st{border-top:1px solid var(--color-line)}
.s22-st-head + .s22-st{border-top:none}
.s22-st:hover{background:var(--color-accent-wash)}
.s22-st .nm{font-weight:700;color:var(--color-ink)}
.s22-st .em{font-size:var(--t-sm);color:var(--color-muted)}
.s22-who{display:flex;gap:var(--s-3);align-items:center;min-width:0}
.s22-who > div{min-width:0}
.s22-acts{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end}
.s22-pay{display:inline-flex;font-size:var(--t-xs);font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap}
.s22-pay.p-paid{background:var(--color-success-wash);color:var(--color-success-ink)}
.s22-pay.p-wait{background:var(--color-warning-wash);color:var(--color-warning-ink)}
.s22-pay.p-pend{background:var(--color-bg);color:var(--color-muted);border:1px solid var(--color-line)}
.s22-two{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-5);align-items:start}
.s22-box{padding:var(--s-4) var(--s-5)}
.s22-box h4{margin:0 0 var(--s-2);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted);font-weight:800}
.s22-box p{margin:0 0 var(--s-3);font-size:var(--t-sm)}
.s22-facts{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);margin:0;font-size:var(--t-sm)}
.s22-facts dt{color:var(--color-muted);font-weight:700}
.s22-facts dd{margin:0;color:var(--color-ink);font-weight:600}
.s22-score{display:flex;gap:var(--s-2);align-items:center}
.s22-score .ds10-bar{max-width:120px;flex:1}
.s22-topics{display:flex;gap:6px;flex-wrap:wrap}
.s22-topics span{font-size:var(--t-xs);font-weight:700;padding:2px 8px;border-radius:6px;background:var(--color-bg);color:var(--color-muted)}
.s22-topics span.low{background:var(--color-warning-wash);color:var(--color-warning-ink)}
.s22-res-head,.s22-res{display:grid;grid-template-columns:minmax(220px,2fr) 1.2fr 2fr;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4)}
.s22-res-head{background:var(--color-bg);border-bottom:1px solid var(--color-line);font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted)}
.s22-res{border-top:1px solid var(--color-line)}
.s22-res-head + .s22-res{border-top:none}
.s22-wl{display:grid;grid-template-columns:36px minmax(200px,2fr) 1.2fr auto;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-top:1px solid var(--color-line)}
.s22-wl .pos{font-family:var(--font-head);font-weight:800;color:var(--color-accent-text)}
.s22-found{list-style:none;margin:var(--s-2) 0 0;padding:0}
.s22-found li{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-card);margin-bottom:var(--s-1);font-size:var(--t-sm)}
.s22-over{background:var(--color-warning-wash);color:var(--color-warning-ink);padding:var(--s-2) var(--s-4);font-size:var(--t-sm);font-weight:700}
.s22-over[hidden]{display:none}

@media (max-width:900px){
  .s22-kpis{grid-template-columns:1fr 1fr}
  .s22-two{grid-template-columns:1fr}
  .s22-grid2,.s22-grid3{grid-template-columns:1fr}
  .s22-head,.s22-st-head,.s22-res-head{display:none}
  .s22-row,.s22-st,.s22-res{grid-template-columns:1fr;gap:var(--s-2)}
  .s22-row .k{display:inline;font-size:var(--t-xs);font-weight:800;text-transform:uppercase;color:var(--color-muted);margin-right:6px}
  .s22-acts{justify-content:flex-start}
  .s22-wl{grid-template-columns:30px 1fr}
  .s22-wl .s22-acts{grid-column:1 / -1}
  .s22-tab{padding:.5rem var(--s-3)}
}

/* Waiting column */
.s22-wn{font-weight:800;color:var(--color-muted)}
.s22-wn.has{color:var(--color-ink)}

/* r4 BMSCONTACTS: seat rule line, remove and offer dialogs, cancelled list, waiting order, access history */
.s22-dlg{border:1px solid var(--color-line);border-radius:var(--radius);padding:0;max-width:34rem;width:calc(100% - 2rem);box-shadow:var(--shadow);background:var(--color-card);color:var(--color-body)}
.s22-dlg::backdrop{background:rgba(0,0,0,.35)}
.s22-dlg-in{padding:var(--s-5)}
.s22-dlg h2{margin:0 0 var(--s-2);font-size:var(--t-lg);font-family:var(--font-head);color:var(--color-ink)}
.s22-dlg p{margin:0 0 var(--s-3);font-size:var(--t-sm);line-height:1.55}
.s22-dlg .s22-field{display:grid;gap:var(--s-1);margin-bottom:var(--s-3)}
.s22-dlg .s22-field label{font-size:var(--t-xs);font-weight:800;color:var(--color-ink)}
.s22-dlg .s22-in{width:100%;box-sizing:border-box;font:inherit;font-size:var(--t-sm);padding:.55rem var(--s-3);border:1.5px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-card);color:var(--color-ink)}
.s22-dlg .s22-actions{display:flex;gap:var(--s-2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--s-3)}
.s22-dlg .s22-err{color:var(--color-danger,#b3261e);font-size:var(--t-sm)}
.s22-dlg button:focus-visible,.s22-dlg select:focus-visible,.s22-dlg textarea:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.s22-callout{background:var(--color-accent-wash);border-left:4px solid var(--color-accent);padding:var(--s-3) var(--s-4);border-radius:var(--radius-sm)}
.s22-capline{margin:var(--s-2) 0 var(--s-4);font-size:var(--t-sm);color:var(--color-body);line-height:1.5}
.s22-wnote{margin:0;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--color-line)}
.s22-wl{grid-template-columns:36px minmax(200px,2fr) 1.4fr auto}
.s22-wat .em{font-size:var(--t-sm);color:var(--color-muted);margin-top:2px}
.s22-next{font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--color-accent-text)}
.s22-hold{font-size:var(--t-sm);color:var(--color-muted)}
.s22-cn{display:grid;grid-template-columns:minmax(200px,2fr) 150px 2fr;gap:var(--s-3);align-items:start;padding:var(--s-3) var(--s-4);border-top:1px solid var(--color-line)}
.s22-cn .nm{font-weight:700;color:var(--color-ink)}.s22-cn .em{font-size:var(--t-sm);color:var(--color-muted)}
.s22-why{font-size:var(--t-sm);color:var(--color-body);line-height:1.5}
.s22-pay.p-cancel{background:var(--color-bg);color:var(--color-muted);border:1px solid var(--color-line)}
.s22-ah{grid-column:1 / -1;font-size:var(--t-sm)}
.s22-ah summary{cursor:pointer;color:var(--color-accent-text);font-weight:700}
.s22-ah ul{list-style:none;margin:var(--s-2) 0 0;padding:0}
.s22-ah li{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-1) 0;border-top:1px solid var(--color-line)}
.s22-ah li em{font-style:normal;color:var(--color-muted)}
@media (max-width:720px){.s22-cn{grid-template-columns:1fr}.s22-wl{grid-template-columns:30px 1fr}}

.s22-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.s22-wl{grid-template-columns:36px minmax(200px,2fr) 210px minmax(0,1.6fr)}
.s22-wl .s22-acts{justify-content:flex-end;align-items:center}
@media (max-width:1100px){.s22-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

.s22-dlg{margin:auto}
.s22-toast{bottom:calc(var(--s-5) + 56px)}

/* course settings tab (round 4, DESCOURSE) */
.s22-set{margin-bottom:var(--s-5)}
.s22-setlead{margin:0 0 var(--s-3);color:var(--color-ink);max-width:62ch}
.s22-opts{display:grid;gap:var(--s-2)}
.s22-opt{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border:1.5px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-card);cursor:pointer}
.s22-opt:hover{border-color:var(--color-muted)}
.s22-opt:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-wash)}
.s22-opt:has(input:focus-visible){outline:3px solid var(--color-accent);outline-offset:2px}
.s22-opt input{margin-top:.3rem;accent-color:var(--color-accent);flex:0 0 auto}
.s22-opt-b{display:grid;gap:2px;font-size:var(--t-sm);min-width:0}
.s22-opt-b b{color:var(--color-ink);font-size:var(--t-base)}
.s22-opt-b span{color:var(--color-muted)}
.s22-opt-b em{font-style:normal;font-size:var(--t-xs);font-weight:700;color:var(--color-muted)}
.s22-opt-b em[hidden]{display:none}
.s22-effect{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--color-bg);border-left:4px solid var(--color-line);border-radius:var(--radius-sm);font-size:var(--t-sm)}
.s22-effect h5,.s22-who2 h5{margin:0 0 var(--s-2);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);font-weight:800}
.s22-effect ul{margin:0;padding-left:1.1rem;display:grid;gap:4px}
.s22-fine{margin:var(--s-3) 0 0;font-size:var(--t-xs);color:var(--color-muted)}
.s22-saved{font-size:var(--t-xs);font-weight:800;color:var(--color-success)}
.s22-saved[hidden]{display:none}
.s22-tgrow{display:flex;gap:var(--s-2);align-items:stretch;flex-wrap:wrap}
.s22-tgrow .s22-in{flex:1 1 16rem;min-width:0}
.s22-test{margin:var(--s-2) 0 0;padding:var(--s-2) var(--s-3);border-radius:var(--radius-sm);font-size:var(--t-sm)}
.s22-test[hidden]{display:none}
.s22-test.good{background:var(--color-success-wash,var(--color-bg));color:var(--color-ink);border-left:4px solid var(--color-success)}
.s22-test.bad{background:var(--color-accent-wash);color:var(--color-ink);border-left:4px solid var(--color-danger)}
.s22-who2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin:var(--s-4) 0}
.s22-ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:var(--t-sm)}
.s22-ul li{padding-left:1.5rem;position:relative}
.s22-ul li.yes::before,.s22-ul li.no::before{position:absolute;left:0;font-weight:800}
.s22-ul li.yes::before{content:"\2713";color:var(--color-success)}
.s22-ul li.no::before{content:"\2715";color:var(--color-danger)}
.s22-priv{padding:var(--s-3) var(--s-4);background:var(--color-bg);border-left:4px solid var(--color-line);border-radius:var(--radius-sm);font-size:var(--t-sm);line-height:1.6}
.s22-seen{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--t-sm);color:var(--color-muted);margin-bottom:var(--s-5)}
.s22-seen a{color:var(--color-ink);font-weight:700}
@media(max-width:720px){.s22-who2{grid-template-columns:1fr}.s22-tgrow .btn{width:100%}}
.s22-ul li:not(.yes):not(.no){padding-left:0}