/* Welcome page, direction F: a calm checklist. Layout only; every value is a token from tokens.css. */

/* one white field */
.app-main{background:var(--color-card)}
.app-content h1{max-width:30ch}

/* student switch strip (dev preview only) */
.wf-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-6);padding:var(--s-3) var(--s-4);background:var(--color-bg);border-radius:var(--radius-sm)}
.wf-strip p{margin:0;font-size:var(--t-base);color:var(--color-muted)}
.wf-strip-links{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.wf-strip .btn{min-height:40px;display:inline-flex;align-items:center}
.wf-strip a:focus-visible,.wf-layout a:focus-visible{outline:3px solid var(--color-accent-text);outline-offset:2px}

.wf-sum{margin:0 0 var(--s-5);font-size:var(--t-base);color:var(--color-body)}

/* layout: course box first on phones, beside the list from 1280 */
.wf-layout{display:grid;grid-template-columns:minmax(0,40rem);gap:var(--s-5)}
.wf-layout>.wf-side{order:-1;margin:0}
.wf-main{min-width:0}
@media (min-width:1280px){
  .wf-layout{grid-template-columns:minmax(0,40rem) minmax(15rem,19rem);column-gap:clamp(var(--s-6),3vw,var(--s-7));align-items:start}
  .wf-layout>.wf-side{order:0;grid-column:2;grid-row:1}
  .wf-layout>.wf-main{grid-column:1;grid-row:1}
}

/* course side box: the In this section box, quiet */
.wf-side .l-aside-in{background:var(--color-bg);border:0;border-top:4px solid var(--color-accent);border-radius:var(--radius);box-shadow:none;position:static;max-height:none;overflow:visible;padding:var(--s-4)}
.wf-side-h{margin:0 0 var(--s-2);font-size:var(--t-base);font-weight:700;color:var(--color-ink)}
.wf-side p{margin:0 0 var(--s-1);line-height:1.4;font-size:var(--t-base);color:var(--color-body)}
.wf-side .wf-s-name{font-weight:700;color:var(--color-ink)}
.wf-side .wf-s-sub{margin-top:var(--s-3);font-weight:600;color:var(--color-ink)}

/* the checklist */
.wf-list{gap:0}
.wf-list>li{padding:var(--s-2) 0}
.wf-line{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-1) var(--s-3);font-size:var(--t-base)}
.wf-list .mk{margin-top:2px;width:22px;height:22px}
.wf-list .mk svg{width:12px;height:12px}
.wf-t{flex:1 1 12rem;min-width:0;font-weight:600;color:var(--color-ink)}
.wf-m{flex:1 1 100%;margin-left:calc(22px + var(--s-3));font-size:var(--t-sm);color:var(--color-muted)}
.wf-txt{flex:1 1 0;min-width:0}
.wf-done .wf-t{display:inline;font-weight:400;color:var(--color-muted)}
.wf-done .wf-m{display:inline;margin-left:var(--s-2)}
.wf-x a{font-weight:600;color:var(--color-accent-text)}
.wf-x{flex:1 1 100%;margin-left:calc(22px + var(--s-3));font-size:var(--t-sm)}
.wf-todo .wf-t,.wf-todo .wf-m{color:var(--color-body)}
.wf-todo .wf-t{color:var(--color-ink)}
.wf-todo .wf-m{color:var(--color-muted)}
.wf-act{margin:var(--s-2) 0 0 calc(22px + var(--s-3));font-size:var(--t-sm)}
.wf-act .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:44px;padding:var(--s-2) var(--s-5);font-size:var(--t-base)}
.wf-act a:not(.btn){display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--color-accent-text)}
.wf-list .wf-bar{margin:var(--s-2) 0 0 calc(22px + var(--s-3));max-width:20rem}
.wf-list>li>.wf-bar{display:block}

/* the one open item, opened up */
.wf-list>li.wf-open{margin:var(--s-3) 0;padding:var(--s-4) var(--s-5);background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius)}
.wf-big{margin:0;flex:1 1 12rem;min-width:0;font-size:var(--t-xl);font-weight:700;line-height:1.25;color:var(--color-ink)}
.wf-open .mk{margin-top:6px;border-color:var(--color-accent)}
.wf-open-in{margin-left:calc(22px + var(--s-3))}
.wf-open-in p{margin:var(--s-2) 0 0;max-width:60ch;color:var(--color-body)}
.wf-open-in .wf-act{margin:var(--s-4) 0 0}
.wf-open-in .wf-bar{margin:var(--s-3) 0 0;max-width:24rem}
@media (max-width:480px){
  .wf-list>li.wf-open{padding:var(--s-4)}
  .wf-open-in .btn-primary{display:flex;width:100%}
}

/* bar fill widths (counts out of 24) */
.wf-n0{width:0}
.wf-n3{width:12.5%}
.wf-n9{width:37.5%}

/* people */
.wf-people{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-3)}
.wf-person{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);color:var(--color-ink)}
.wf-person .app-avatar{grid-row:auto;width:32px;height:32px;font-size:var(--t-sm);flex:0 0 auto}
.wf-list .wf-people{margin-left:calc(22px + var(--s-3))}

/* sections under the list */
.wf-h2{margin:var(--s-7) 0 var(--s-3);font-size:var(--t-base);font-weight:700;color:var(--color-ink);background:none;padding:0;text-transform:none;letter-spacing:0}
.wf-h3{margin:var(--s-4) 0 var(--s-2);font-size:var(--t-base);font-weight:600;color:var(--color-ink)}
.wf-past p,.wf-log p{margin:0 0 var(--s-2);max-width:65ch;color:var(--color-body)}
.wf-sub{font-size:var(--t-base)}
.wf-plist{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-3)}
.wf-plist li{max-width:65ch;color:var(--color-body)}
.wf-flights{margin:0;padding-left:var(--s-5);display:grid;gap:var(--s-2);max-width:65ch}
.wf-flights li{color:var(--color-body)}
.wf-fn{font-weight:600;color:var(--color-ink)}
.wf-ok{margin-left:var(--s-2);color:var(--color-success-ink)}
.wf-rep{margin-left:var(--s-2);color:var(--color-warning-ink);font-weight:600}
.wf-flights .wf-m{display:block;margin-left:0}

/* course list rows */
.wf-state{flex:0 0 auto;font-size:var(--t-sm);color:var(--color-body)}
.course-list{box-shadow:none}
.crow .tchip{display:none}
.course-list .mo{font-size:var(--t-sm);font-weight:600;letter-spacing:0;text-transform:none;color:var(--color-body)}
.crow .what .meta{color:var(--color-body)}
.crow .btn{min-height:44px;display:inline-flex;align-items:center}
.wf-layout .course-list{max-width:40rem}
@media (max-width:720px){.crow .what{flex:1 1 100%}}

/* past courses: one unit per course */
.wf-course{margin:0 0 var(--s-6);padding:var(--s-4) 0 0;border-top:1px solid var(--color-line);max-width:40rem}
.wf-ch{margin:0;font-size:var(--t-lg);font-weight:700;color:var(--color-ink)}
.wf-cm{margin:var(--s-1) 0 0;font-size:var(--t-sm);color:var(--color-muted)}
.wf-part{margin:var(--s-3) 0 0}
.wf-part .wf-h3{margin:0 0 var(--s-2)}
.wf-part .wf-people{margin-top:0}
.wf-day{margin:var(--s-3) 0 var(--s-2);font-size:var(--t-base);font-weight:600;color:var(--color-ink)}
.wf-facts{margin:0;display:grid;gap:var(--s-2)}
.wf-facts>div{display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr);gap:var(--s-1) var(--s-3)}
.wf-facts dt{font-size:var(--t-sm);font-weight:600;color:var(--color-muted)}
.wf-facts dd{margin:0;color:var(--color-body)}
@media (max-width:480px){.wf-facts>div{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}