/* Direction D: the people on your course. Tokens only. Layout for the welcome page content. */
.wd{color:var(--color-body)}
.wd-switch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-2);margin:0 0 var(--s-6);padding:var(--s-3) var(--s-4);background:var(--color-card);border-radius:var(--radius-sm)}
.wd-switch p{flex:1 0 100%;margin:0 0 var(--s-1);font-size:var(--t-base);color:var(--color-muted)}
@media(min-width:1100px){.wd-switch p{flex:0 0 auto;margin:0 var(--s-2) 0 0}}
.wd-greet{margin:0 0 var(--s-1);font-size:var(--t-base);color:var(--color-muted)}
.wd h1{max-width:34em;margin:0 0 var(--s-6);font-weight:700;color:var(--color-ink)}
.wd h2,.wd h3{font-family:var(--font-head);color:var(--color-ink)}
.wd h2{margin:0 0 var(--s-3);font-size:var(--t-lg);font-weight:700;line-height:1.25}
.wd h3{margin:0 0 var(--s-2);font-size:var(--t-base);font-weight:700}
.wd p{margin:0 0 var(--s-3)}
.wd-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:start;margin:0 0 var(--s-7)}
@media(min-width:1100px){
  .wd-grid{align-items:stretch;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .wd-people{grid-column:1;grid-row:1}
  .wd-course{grid-column:2;grid-row:1}
}
.wd-people,.wd-course,.wd-log{box-shadow:none;padding:var(--s-5)}
@media(max-width:720px){.wd-people,.wd-course,.wd-log{padding:var(--s-4)}}
.wd-course{border-left:4px solid var(--color-accent)}
.wd-course h2{font-size:var(--t-lg)}
.wd-meta{font-size:var(--t-sm);color:var(--color-muted)}
.wd-status{font-weight:600;color:var(--color-ink)}
.wd-bar{margin:0 0 var(--s-2)}
.wd-bar > i{width:0}
.wd-w3 > i{width:12.5%}
.wd-w9 > i{width:37.5%}
.wd-w24 > i{width:100%}
.wd-course .btn{margin:var(--s-3) 0 var(--s-4)}
.wd .wd-sub{margin:var(--s-5) 0 0}
.wd .wd-people .btn + p,.wd .wd-group + p{margin-top:var(--s-4)}
.wd .wd-people p .btn{margin-left:var(--s-2)}
.wd-names{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
@media(min-width:600px){.wd-names{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wd-names li{display:flex;align-items:center;gap:var(--s-3);min-width:0;font-size:var(--t-lg);font-weight:600;line-height:1.25;color:var(--color-ink);overflow-wrap:anywhere}
.wd-names .app-avatar{flex:0 0 auto;grid-row:auto;width:44px;height:44px;background:var(--color-accent-wash);color:var(--color-ink);font-size:var(--t-sm);font-weight:700}
.wd-cgroup + .wd-cgroup{margin-top:var(--s-4)}
.wd-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin:var(--s-4) 0 0;padding:var(--s-4);background:var(--color-info-wash);color:var(--color-info-ink);border-radius:var(--radius-sm)}
.wd-group svg{flex:0 0 auto;width:26px;height:26px}
.wd-group div{flex:1 1 12rem;min-width:0}
.wd-group b{display:block;color:var(--color-ink)}
.wd-group span{font-size:var(--t-sm)}
.wd-group .btn{background:var(--color-card)}
.wd-days{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin:var(--s-4) 0 0}
@media(min-width:900px){.wd-days{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wd-day{padding:var(--s-4);background:var(--color-bg);border-radius:var(--radius-sm)}
.wd-flights{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.wd-flights li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);column-gap:var(--s-2);align-items:baseline}
.wd-n{color:var(--color-muted);font-size:var(--t-sm)}
.wd-m{font-weight:600;color:var(--color-ink)}
.wd-o{display:inline-flex;align-items:center;gap:var(--s-1);margin-top:2px;font-size:var(--t-sm);font-weight:600}
.wd-o svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wd-done{color:var(--color-success-ink)}
.wd-again{color:var(--color-warning-ink)}
.wd-note{display:block;font-size:var(--t-sm);color:var(--color-body)}
.wd-h{margin:0 0 var(--s-3)}
.wd .course-list{box-shadow:none}
.wd .course-list .mo{font-size:var(--t-sm);font-weight:700;letter-spacing:0;color:var(--color-body)}
.wd .crow.mine{background:var(--color-accent-wash)}
.wd .crow .what h4{font-weight:600}
.wd .crow .what .meta{color:var(--color-body)}
.wd-state{flex:0 0 auto;font-size:var(--t-sm);color:var(--color-body)}
.wd-state.is-mine{font-weight:700;color:var(--color-ink)}
.wd .hook{margin-top:var(--s-7)}
.wd-log{margin:0 0 var(--s-7)}