/* ==========================================================================
   The flipped week — My week, Class prep, Class log, badges
   Two badges, never mixed: .wk-badge.own ("On my own", blue) and
   .wk-badge.class ("In class", violet). Uses the theme tokens.
   ========================================================================== */
:root {
  --wk-own: var(--sky, #3B7DE8);
  --wk-own-soft: var(--sky-soft, #E8F1FE);
  --wk-own-ink: #1F57A6;
  --wk-class: var(--violet, #2c4a9a);
  --wk-class-soft: var(--violet-soft, #e9eef9);
  --wk-class-ink: #24407f;
}

.wk-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:650;letter-spacing:.01em;line-height:1.35;border:1px solid transparent;white-space:nowrap;vertical-align:middle}
.wk-badge.own{color:var(--wk-own-ink);background:var(--wk-own-soft);border-color:color-mix(in srgb, var(--wk-own) 35%, transparent)}
.wk-badge.class{color:var(--wk-class-ink);background:var(--wk-class-soft);border-color:color-mix(in srgb, var(--wk-class) 35%, transparent)}
.wk-badge-ico{font-size:12px;line-height:1}
.wk-tap{min-height:44px}
.btn.btn-sm.wk-tap{min-height:44px;padding-top:8px;padding-bottom:8px}
.wk-tapline{min-height:44px;align-items:center}
.wk-prep-pick .input,.wk-session .input,.wk-bar .input,#classDaysCard .input{min-height:44px}

/* ---------- My week ---------- */
.wk-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.wk-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px}
.wk-sched{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wk-nav{gap:6px;flex-wrap:wrap}
.wk-total{margin:12px 0 10px}
.wk-board{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:1200px){
  .wk-board{grid-template-columns:minmax(0,1fr) minmax(0,.86fr) minmax(0,1fr) minmax(0,.86fr) minmax(0,1fr);gap:10px;align-items:stretch}
}
.wk-col{border:1px solid var(--line-2);border-radius:var(--r-md,13px);padding:12px;background:var(--panel);min-width:0;position:relative}
.wk-owncol{border-top:4px solid var(--wk-own)}
.wk-classcol{border-top:4px solid var(--wk-class);background:linear-gradient(180deg,var(--wk-class-soft),var(--panel) 120px)}
.wk-col-h{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.wk-col-h h3{font-size:15px;margin:0}
.wk-when{font-size:12px;color:var(--dim);margin-bottom:8px}
.wk-board[data-phase="beforeA"]>:nth-child(1),
.wk-board[data-phase="classA"]>:nth-child(2),
.wk-board[data-phase="afterA"]>:nth-child(3),
.wk-board[data-phase="classB"]>:nth-child(4),
.wk-board[data-phase="afterB"]>:nth-child(5){box-shadow:0 0 0 2px var(--brand,#c81e1e)}
.wk-board[data-phase="beforeA"]>:nth-child(1)::after,
.wk-board[data-phase="classA"]>:nth-child(2)::after,
.wk-board[data-phase="afterA"]>:nth-child(3)::after,
.wk-board[data-phase="classB"]>:nth-child(4)::after,
.wk-board[data-phase="afterB"]>:nth-child(5)::after{content:'Now';position:absolute;top:10px;right:10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--brand,#c81e1e);border-radius:999px;padding:2px 8px}
.wk-class-t{margin:2px 0;font-size:13.5px}
.wk-stages{margin:8px 0 6px;padding:0;list-style:none;font-size:12px;color:var(--dim);display:grid;gap:3px}
.wk-stages span{display:inline-block;min-width:44px;font-variant-numeric:tabular-nums;color:var(--dim-2)}
.wk-bring{margin:6px 0 0}
.wk-items{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wk-items-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.wk-item{display:flex;gap:6px;align-items:flex-start;padding:2px 0;min-height:44px}
.wk-cbx{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:-4px 0 -4px -8px;cursor:pointer}
.wk-cbx input{width:20px;height:20px;accent-color:var(--wk-own);cursor:pointer}
.wk-cbx input:disabled{cursor:default}
.wk-item-main{display:flex;flex-direction:column;min-width:0;padding-top:9px}
.wk-item-main a{font-size:13px;line-height:1.35;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.wk-item-main a:hover,.wk-item-main a:focus-visible{text-decoration:underline}
.wk-item-sub{font-size:11.5px;color:var(--dim-2);margin-top:1px}
.wk-item.done .wk-item-main a{color:var(--dim);text-decoration:line-through;text-decoration-color:color-mix(in srgb, var(--dim) 50%, transparent)}
.wk-item.wk-opt .wk-item-main a{font-style:italic}
.wk-auto{color:var(--mint-2,#0EA372);font-weight:650}
.wk-practice{margin-top:12px}
.wk-printfoot{display:none}

.wk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0 0}
.wk-stat{border:1px solid var(--line-2);border-radius:var(--r-md,13px);padding:10px 12px;background:var(--panel);display:flex;flex-direction:column;gap:4px;min-width:0}
.wk-stat b{font-size:22px;line-height:1.1}
.wk-stat b small{font-size:14px;color:var(--dim-2);font-weight:500}
.wk-stat span:last-child{font-size:12px;color:var(--dim)}
.wk-stat-conf{color:var(--wk-own)}
.wk-conf-ttl{font-size:12px;color:var(--dim)}
.wk-spark{display:block;margin-top:4px}

/* check-in banner (class day) */
.wk-banner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-left:4px solid var(--wk-class);margin:12px 0}
.wk-banner-main{min-width:0;flex:1 1 260px}
.wk-banner h3{margin:6px 0 2px;font-size:16px}
.wk-ci-form{display:flex;gap:8px;align-items:center}
.wk-code-in{width:120px;min-height:44px;font-family:var(--mono);font-size:20px;letter-spacing:.25em;text-transform:uppercase;text-align:center}
[data-ci-msg]{flex-basis:100%}

/* home check-in */
.wk-fs{border:0;padding:0;margin:0 0 10px}
.wk-fs legend{margin-bottom:4px}
.wk-conf{display:flex;flex-wrap:wrap;gap:6px}
.wk-conf-o{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:58px;min-height:58px;padding:6px;border:1px solid var(--line-2);border-radius:12px;cursor:pointer;font-size:22px;background:var(--panel)}
.wk-conf-o input{position:absolute;opacity:0;width:1px;height:1px}
.wk-conf-o:has(input:checked){border-color:var(--wk-own);background:var(--wk-own-soft);box-shadow:0 0 0 1px var(--wk-own)}
.wk-conf-o:has(input:focus-visible){outline:2px solid var(--wk-own);outline-offset:2px}
.wk-conf-l{font-size:10.5px;color:var(--dim)}
.wk-did{margin-bottom:10px}

/* dashboard */
.wk-dash{margin-top:16px}
.wk-prep-k{margin:0 0 4px}

/* ---------- Class prep ---------- */
.wk-tabs button{min-height:44px;padding:8px 16px}
.wk-kpis .stat b small{font-size:14px;color:var(--dim-2);font-weight:500}
.wk-bar-h{height:6px;border-radius:4px;background:var(--line);margin-top:8px;overflow:hidden}
.wk-bar-h i{display:block;height:100%;background:var(--wk-own);border-radius:4px}
.wk-miss td{vertical-align:top}
.wk-who{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.wk-who li{display:flex;justify-content:space-between;gap:8px;font-size:13px;align-items:center;min-height:30px;border-bottom:1px dashed var(--line)}
.wk-dots{display:inline-flex;gap:4px;align-items:center}
.wk-dots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--wk-own);display:inline-block}
.wk-dots i.on{background:var(--wk-own)}
.wk-dots small{color:var(--dim);margin-left:4px;font-variant-numeric:tabular-nums}
.wk-sugg{margin:0;padding-left:20px;display:grid;gap:8px}
.wk-sugg li{font-size:13.5px}
.wk-sugg li span{display:block}
.wk-session{border-left:4px solid var(--wk-class)}
.wk-code-box{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:12px;padding:12px;border-radius:12px;background:var(--wk-class-soft)}
.wk-code{font-family:var(--mono);font-size:44px;font-weight:700;letter-spacing:.18em;color:var(--wk-class-ink);line-height:1.1}
.wk-code-xl{font-size:min(22vw,140px);margin:10px 0}
.wk-code-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wk-att{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 10px}
.wk-proj{text-align:center}
.wk-proj-topic{font-size:20px;margin:6px 0}
.wk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wk-flag{display:inline-block;background:var(--amber-soft);color:#8A5A06;border-radius:8px;padding:2px 7px;margin:1px 0;font-size:11.5px}
.wk-charts{align-items:stretch}
.wk-chart{margin:0;border:1px solid var(--line-2);border-radius:var(--r-md,13px);padding:10px;background:var(--panel)}
.wk-chart figcaption{font-size:12.5px;font-weight:600;margin-bottom:4px}
.wk-chart svg{width:100%;height:auto;display:block}
.wk-chart .wk-grid{stroke:var(--line);stroke-width:1}
.wk-chart .wk-ax{font-size:10px;fill:var(--dim)}
.wk-chart .wk-line{stroke:var(--brand,#c81e1e);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.wk-chart .wk-pt circle:first-child{fill:var(--brand,#c81e1e);stroke:var(--panel);stroke-width:2}

/* Unit page badges */
.unit-tabs button .wk-badge{margin-left:6px;font-size:10.5px;padding:1px 7px}
.wk-apply-steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.wk-apply-steps .arr{color:var(--dim-2)}

/* Lesson mode clinic */
.lm-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0}
.lm-board .lm-kpi{border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;background:var(--panel)}
.lm-board .lm-kpi b{display:block;font-size:22px}
.lm-mini{margin:6px 0 0;padding-left:20px}
.lm-mini li{margin-bottom:8px}
.lm-mini .opts-inline{font-size:12.5px;color:var(--dim)}

@media (max-width:640px){
  .wk-code{font-size:36px}
  .wk-ci-form{width:100%}
  .wk-code-in{flex:1}
  .unit-tabs button .wk-badge{display:none}
  .unit-tabs button{min-height:44px}
}

/* ---------- print: one page ---------- */
/* A4 landscape is set by app-week.js only while My week is open (an @page rule it adds and removes). */
@media print{
  .wk-print-root{font-size:9pt;color:#111}
  .wk-print-root .view-head{margin:0 0 4px}
  .wk-print-root .view-head h1{font-size:15pt;margin:0}
  .wk-print-root .view-head p{font-size:8.5pt;margin:2px 0}
  .wk-board{grid-template-columns:1fr .85fr 1fr .85fr 1fr!important;gap:5px!important}
  .wk-col{padding:6px;border-radius:6px;break-inside:avoid;box-shadow:none!important;background:#fff!important}
  .wk-col::after{display:none!important}
  .wk-col-h h3{font-size:10pt}
  .wk-item{min-height:0;gap:3px}
  .wk-cbx{flex-basis:16px;width:16px;height:16px;margin:2px 0 0}
  .wk-cbx input{width:11px;height:11px}
  .wk-item-main{padding-top:1px}
  .wk-item-main a{font-size:8.5pt;color:#111!important;text-decoration:none!important}
  .wk-item-sub,.wk-when,.wk-stages,.mini{font-size:7.5pt!important}
  .wk-practice{margin-top:5px;padding:6px!important;box-shadow:none!important}
  .wk-items-2{grid-template-columns:repeat(4,1fr)}
  .wk-badge{font-size:7pt;padding:1px 5px;border:1px solid #888!important;background:#fff!important;color:#111!important}
  .wk-printfoot{display:block;margin-top:4px}
  .wk-stages,.wk-item.wk-opt,.wk-legend .mini,.wk-bring,.wk-total,.wk-practice .card-h .sub{display:none!important}
  .wk-item-sub{display:block;line-height:1.2}
  .wk-print-root .view-head p,.wk-legend{display:none!important}
  .wk-class-t{font-size:9pt}
  .wk-print-root{max-width:100%;overflow:hidden}
  .wk-items{gap:2px}
  .wk-col-h{gap:2px}
  .wk-print-root .view-head .eyebrow{font-size:7.5pt}
  .main,.view,#view{padding-top:0!important}
  .wk-total{margin:2px 0 4px}
}