/*
 * Visual layer for the shared ws-* blocks (assets/components.js), step 5.
 * Built on the design-system tokens (--ds-*) so the blocks match design.html /
 * the scorecard. Status color lives on .ds-badge in design-system.css; the
 * rubric scale mirrors the scorecard's sc-chip ramp. Existing .person-card /
 * .avatar / .btn-* are reused and not restyled here.
 */

/* card primitive ----------------------------------------------------------- */
.ws-card { border: 1px solid var(--ds-n200); border-radius: var(--ds-r); background: var(--ds-n0); padding: var(--ds-4); box-shadow: var(--ds-e1); }
.ws-card-eyebrow { font-size: var(--ds-fs-eyebrow); font-weight: var(--ds-fw-black); letter-spacing: .6px; text-transform: uppercase; color: var(--ds-n500); margin: 0 0 var(--ds-1); }
.ws-card-title { margin: 0 0 var(--ds-2); font-size: var(--ds-fs-h3); color: var(--ds-n900); }
.ws-card-body { color: var(--ds-n600); font-size: var(--ds-fs-sm); }
.ws-card-actions { display: flex; gap: var(--ds-2); margin-top: var(--ds-3); flex-wrap: wrap; }

/* section header ----------------------------------------------------------- */
.ws-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-3); margin: var(--ds-5) 0 var(--ds-3); }
.ws-section-title { margin: 0; font-size: var(--ds-fs-eyebrow); font-weight: var(--ds-fw-black); letter-spacing: 1px; text-transform: uppercase; color: var(--ds-n500); }
.ws-section-link { border: 0; background: none; color: var(--ds-navy); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-sm); cursor: pointer; padding: 0; }
.ws-section-link:hover { color: var(--ds-teal-700); }

/* person card / chip ------------------------------------------------------- */
.ws-person { display: flex; align-items: flex-start; gap: var(--ds-3); border: 1px solid var(--ds-n200); border-radius: var(--ds-r); background: var(--ds-n0); padding: var(--ds-3) var(--ds-4); box-shadow: var(--ds-e1); }
.ws-person .avatar { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--ds-navy), var(--ds-teal)); color: #fff; font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-sm); }
.ws-person-body { display: flex; flex-direction: column; gap: 1px; }
.ws-person-body strong { font-weight: var(--ds-fw-bold); color: var(--ds-n900); }
.ws-person-body .person-title { font-size: var(--ds-fs-xs); color: var(--ds-n600); }
.ws-person-teaches { font-size: var(--ds-fs-xs); color: var(--ds-n500); margin-top: 3px; }
.ws-person-actions { display: flex; gap: var(--ds-2); margin-left: auto; }
.ws-person-actions .btn-ghost { padding: 5px 12px; font-size: var(--ds-fs-xs); }
.ws-person-chip { display: inline-flex; align-items: center; gap: var(--ds-2); border: 1px solid var(--ds-n200); border-radius: var(--ds-r-pill); background: var(--ds-n0); padding: 4px 14px 4px 4px; cursor: pointer; box-shadow: var(--ds-e1); transition: border-color .15s, box-shadow .2s; }
.ws-person-chip:hover { border-color: var(--ds-navy); box-shadow: var(--ds-e2); }
.ws-person-chip .avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--ds-navy), var(--ds-teal)); color: #fff; font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-xs); }
.ws-chip-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ws-chip-text strong { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); }
.ws-chip-text span { font-size: var(--ds-fs-eyebrow); color: var(--ds-n500); }
.ws-people-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* list row (items / queue rows / scored calls / resources) ----------------- */
.ws-row { display: flex; align-items: center; gap: var(--ds-3); width: 100%; text-align: left; padding: 12px 16px; border: 1px solid var(--ds-n200); border-radius: var(--ds-r); background: var(--ds-n0); color: var(--ds-n900); font: inherit; }
button.ws-row { cursor: pointer; transition: transform .1s ease, box-shadow .2s, border-color .2s; }
button.ws-row:hover { transform: translateY(-1px); box-shadow: var(--ds-e2); border-color: var(--ds-navy); }
.ws-row + .ws-row { margin-top: var(--ds-2); }
.ws-row-icon { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--ds-n100); color: var(--ds-n600); font-size: var(--ds-fs-sm); }
.ws-row-main { display: flex; flex-direction: column; flex: 1; gap: 1px; min-width: 0; }
.ws-row-label { font-weight: var(--ds-fw-bold); }
.ws-row-meta { font-size: var(--ds-fs-xs); color: var(--ds-n600); }
.ws-row-done { background: var(--ds-success-bg); border-color: #cfe9d8; }
.ws-row-done .ws-row-icon { background: var(--ds-success); color: #fff; }
.ws-row-done .ws-row-label { color: var(--ds-n600); }

/* hero / up-next ----------------------------------------------------------- */
.ws-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-4); border: 1px solid var(--ds-n200); border-radius: var(--ds-r-lg); padding: 20px 24px; box-shadow: var(--ds-e1); background: radial-gradient(140% 140% at 0% 0%, rgba(0,170,108,.10), transparent 55%), var(--ds-n0); }
.ws-hero-eyebrow { margin: 0 0 var(--ds-1); font-size: var(--ds-fs-eyebrow); font-weight: var(--ds-fw-black); letter-spacing: .8px; text-transform: uppercase; color: var(--ds-teal-700); }
.ws-hero-title { margin: 0 0 var(--ds-1); font-size: var(--ds-fs-h2); letter-spacing: -.3px; color: var(--ds-n900); }
.ws-hero-blurb { margin: 0; color: var(--ds-n600); }
.ws-hero-meta { margin: var(--ds-2) 0 0; font-size: var(--ds-fs-xs); color: var(--ds-n500); font-weight: var(--ds-fw-med); }

/* help row ----------------------------------------------------------------- */
.ws-help { display: flex; flex-wrap: wrap; gap: var(--ds-2) var(--ds-4); padding: var(--ds-3) 0; }
.ws-help-link { border: 0; background: none; padding: 0; color: var(--ds-navy); font-weight: var(--ds-fw-bold); cursor: pointer; text-decoration: none; font-size: var(--ds-fs-sm); }
.ws-help-link:hover { color: var(--ds-teal-700); text-decoration: underline; }

/* queue -------------------------------------------------------------------- */
.ws-queue-tabs { display: flex; gap: var(--ds-2); margin-bottom: var(--ds-3); flex-wrap: wrap; }
.ws-queue-tab { border: 1px solid var(--ds-n300); background: var(--ds-n0); border-radius: var(--ds-r-pill); padding: 6px 16px; font: inherit; font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-sm); color: var(--ds-n600); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ws-queue-tab:hover { border-color: var(--ds-navy); color: var(--ds-navy); }
.ws-queue-tab.active { background: var(--ds-navy); color: #fff; border-color: var(--ds-navy); }
.ws-queue-count { font-size: var(--ds-fs-eyebrow); opacity: .85; margin-left: 2px; }
.ws-empty { color: var(--ds-n500); font-style: italic; padding: 22px; text-align: center; border: 1px dashed var(--ds-n300); border-radius: var(--ds-r); }

/* rubric (mirrors the scorecard sc-* treatment) ---------------------------- */
.ws-rubric { display: flex; flex-direction: column; gap: 12px; }
.ws-crit { border: 1px solid var(--ds-n200); border-radius: var(--ds-r); background: var(--ds-n0); padding: 16px 18px; transition: border-color .2s, box-shadow .2s; }
.ws-crit-flag { border-color: var(--ds-danger); box-shadow: 0 0 0 3px var(--ds-danger-bg); }
.ws-crit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-4); }
.ws-crit-name { font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-body); }
.ws-crit-desc { font-size: var(--ds-fs-xs); color: var(--ds-n600); margin-top: 3px; max-width: 56ch; }
.ws-crit-feeds { font-size: var(--ds-fs-eyebrow); color: var(--ds-n500); font-weight: var(--ds-fw-bold); letter-spacing: .4px; text-transform: uppercase; margin-top: 6px; }
.ws-crit-note { font-size: var(--ds-fs-sm); color: var(--ds-n700); margin: 10px 0 0; padding-left: 12px; border-left: 3px solid var(--ds-n200); }
.ws-rate { display: flex; gap: 6px; flex-shrink: 0; }
.ws-chip { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ds-n300); background: var(--ds-n0); color: var(--ds-n600); font: inherit; font-weight: var(--ds-fw-bold); cursor: pointer; transition: transform .1s, border-color .15s, background .15s, color .15s; }
.ws-chip:hover { transform: translateY(-1px); border-color: var(--ds-navy); }
span.ws-chip { cursor: default; }
span.ws-chip:hover { transform: none; border-color: var(--ds-n300); }
.ws-chip.sel { color: #fff; border-color: transparent; }
.ws-chip.sel.s1, .ws-chip.sel.s2 { background: var(--ds-danger); }
.ws-chip.sel.s3 { background: var(--ds-warning); }
.ws-chip.sel.s4, .ws-chip.sel.s5 { background: var(--ds-success); }
.ws-crit-ta { width: 100%; margin-top: 12px; min-height: 40px; border: 1px solid var(--ds-n200); background: var(--ds-n50); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: var(--ds-fs-sm); color: var(--ds-n900); resize: vertical; transition: background .15s; }
.ws-crit-ta:focus { outline: 2px solid var(--ds-teal); outline-offset: -1px; background: #fff; }

/* --- trainee in-app shell: top nav + role switch ------------------------- */
.app-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--ds-n200); margin-bottom: 22px; }
.app-nav-tabs { display: flex; gap: 2px; }
.app-tab { border: 0; background: none; padding: 12px 16px; font: inherit; font-weight: 600; color: var(--ds-n600); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.app-tab:hover { color: var(--ds-navy); }
.app-tab.active { color: var(--ds-navy); border-bottom-color: var(--ds-teal); }
.app-roleswitch { border: 1px solid var(--ds-n300); background: var(--ds-n0); border-radius: var(--ds-r-pill); padding: 6px 14px; font: inherit; font-weight: 600; font-size: var(--ds-fs-sm); color: var(--ds-navy); cursor: pointer; }
.app-roleswitch:hover { border-color: var(--ds-navy); box-shadow: var(--ds-e1); }

/* --- module 3-pane ------------------------------------------------------- */
.mod3-head { margin-bottom: 16px; }
.mod3-head h2 { margin: 0 0 4px; font-size: var(--ds-fs-h2); }
.mod3-owner { color: var(--ds-teal-700); font-weight: 600; }
.mod3-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; gap: 18px; align-items: start; }
.mod3-cols-2 { grid-template-columns: minmax(0, 1fr) 260px; }
@media (max-width: 900px) { .mod3-cols, .mod3-cols-2 { grid-template-columns: 1fr; } }
.mod3-left { display: flex; flex-direction: column; gap: 6px; }
.mod3-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--ds-n200); border-radius: 10px; background: var(--ds-n0); padding: 10px 12px; font: inherit; color: var(--ds-n900); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mod3-item:hover { border-color: var(--ds-navy); }
.mod3-item.active { border-color: var(--ds-navy); box-shadow: 0 0 0 2px rgba(16,36,66,.08); }
.mod3-item.done .mod3-item-label { color: var(--ds-n600); }
.mod3-item-ic { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--ds-n100); color: var(--ds-n600); font-weight: 700; font-size: .8rem; }
.mod3-item.done .mod3-item-ic { background: var(--ds-success); color: #fff; }
.mod3-item-label { font-weight: 600; font-size: .9rem; }
.mod3-center { border: 1px solid var(--ds-n200); border-radius: var(--ds-r-lg); background: var(--ds-n0); padding: 18px; box-shadow: var(--ds-e1); }
.mod3-right { display: flex; flex-direction: column; gap: 18px; }
.mod3-rail-title { font-size: var(--ds-fs-eyebrow); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-n500); margin: 0 0 8px; }
.mod3-res { display: block; color: var(--ds-navy); font-weight: 600; font-size: var(--ds-fs-sm); text-decoration: none; padding: 4px 0; }
.mod3-res:hover { color: var(--ds-teal-700); text-decoration: underline; }

/* --- bold hero (Journey up-next) ----------------------------------------- */
.ws-hero-bold { border-color: transparent; color: #fff;
  background: radial-gradient(130% 150% at 100% 0%, rgba(0,170,108,.38), transparent 55%), linear-gradient(120deg, var(--ds-navy-700), var(--ds-navy)); box-shadow: var(--ds-e2); }
.ws-hero-bold .ws-hero-eyebrow { color: #fff; opacity: .72; }
.ws-hero-bold .ws-hero-title { color: #fff; }
.ws-hero-bold .ws-hero-blurb { color: rgba(255,255,255,.92); }
.ws-hero-bold .ws-hero-meta { color: rgba(255,255,255,.78); }
.ws-hero-bold .btn-primary { background: #fff; color: var(--ds-navy); }
.ws-hero-bold .btn-primary:hover { background: var(--ds-green-40); }

/* --- home: ramp marker · up-next preview · getting-started --------------- */
.ramp-day { display: inline-block; margin: 6px 0 0; font-size: var(--ds-fs-xs); font-weight: 700; color: var(--ds-teal-700); background: var(--ds-green-40); padding: 3px 10px; border-radius: var(--ds-r-pill); }
.up-next-preview { margin: 10px 2px 0; font-size: var(--ds-fs-sm); color: var(--ds-n500); font-weight: 600; }
.gs-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gs-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--ds-n200); border-radius: 10px; background: var(--ds-n0); padding: 11px 13px; font: inherit; color: var(--ds-n900); cursor: pointer; transition: border-color .15s; }
.gs-item:hover:not(.done) { border-color: var(--ds-navy); }
.gs-item.done { color: var(--ds-n500); cursor: default; }
.gs-ic { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--ds-n100); color: var(--ds-n600); font-weight: 700; font-size: .78rem; }
.gs-item.done .gs-ic { background: var(--ds-success); color: #fff; }

/* --- module: rich center item + footer/celebration ----------------------- */
.mod3-progress { font-size: var(--ds-fs-xs); color: var(--ds-n500); font-weight: 700; margin: 6px 0 0; text-transform: uppercase; letter-spacing: .04em; }
.mi-kick { font-size: var(--ds-fs-eyebrow); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-teal-700); margin: 0 0 6px; }
.mi-title { margin: 0 0 14px; font-size: var(--ds-fs-h3); line-height: 1.3; }
.mi-open { display: inline-block; text-decoration: none; margin-bottom: 6px; }
.mi-placeholder { color: var(--ds-n500); font-style: italic; margin: 0 0 10px; }
.mi-done-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ds-n200); display: flex; align-items: center; gap: 12px; }
.mi-optional { color: var(--ds-n500); font-style: italic; }
.mod3-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 14px 18px; border: 1px solid var(--ds-n200); border-radius: var(--ds-r); background: var(--ds-n50); flex-wrap: wrap; }
.mod3-foot.is-complete { background: var(--ds-success-bg); border-color: #cfe9d8; }
.mod3-foot-msg { font-size: var(--ds-fs-sm); color: var(--ds-n700); }