/*
 * Home command centre and the LEARN → FIND → PROVE training screens.
 */

/* ---------- home ---------- */
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.home-head__text { min-width: 0; }
.home-head__avatar { flex: none; border-radius: 50%; }
.worker-head__id { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--weight-medium); }

.status-card { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); overflow: hidden; }
.status-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, var(--color-primary-soft), transparent 70%); pointer-events: none; }
.status-card__text { min-width: 0; display: flex; flex-direction: column; }
.status-card__text .eyebrow { margin: 0; }
.status-card__pct { margin: 0; font-size: 2.75rem; font-weight: var(--weight-bold); line-height: 1; letter-spacing: -0.03em; }
.status-card__label { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); }
.status-card__ring-text { color: var(--color-primary-text); }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.check-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.check-line__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: var(--color-text-muted); background: var(--color-surface-sunken); }
.check-line.is-ok { color: var(--color-text); }
.check-line.is-ok .check-line__mark { color: #fff; background: var(--color-success); }

.continue-card { gap: var(--space-4); }
.continue-card__top { display: flex; align-items: center; gap: var(--space-4); }
.continue-card--done { flex-direction: row; align-items: center; gap: var(--space-4); }
.continue-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; color: var(--tone-text); background: var(--tone-soft); }
.continue-card__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.continue-card__body .eyebrow { margin: 0; }
.continue-card__title { font-size: var(--text-h3); font-weight: var(--weight-bold); line-height: 1.25; }
.continue-card__sub { font-size: var(--text-sm); color: var(--color-text-secondary); }
.continue-card__bar { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; }
.continue-card__fill { display: block; height: 100%; min-width: 8px; border-radius: inherit; background: var(--tone); }

.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.quick {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center;
  padding: var(--space-3) var(--space-1); border-radius: var(--radius-md); color: var(--color-text);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.quick:hover { background: var(--color-surface-hover); }
.quick:active { transform: scale(.95); }
.quick__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; color: var(--tone-text); background: var(--tone-soft); box-shadow: var(--shadow-sm); }
.quick--sos .quick__icon { color: #fff; background: var(--gradient-danger); box-shadow: var(--shadow-danger); }
.quick__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.25; }

.retention { gap: var(--space-2); }
.retention__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.retention__head .badge { margin-left: auto; }
.retention__title { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-semibold); }
.retention__body { display: flex; align-items: center; gap: var(--space-3); }
.retention__risk { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.retention__meter { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; }
.retention__meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--tone); }
.retention__line { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.retention__due { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); color: var(--color-danger-text); }

.today-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.today { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); color: var(--color-text); min-width: 0; }
a.today { transition: transform var(--dur) var(--ease); }
a.today:active { transform: scale(.98); }
.today__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; margin-bottom: var(--space-2); color: var(--tone-text); background: var(--tone-soft); }
.today__label { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--weight-medium); }
.today__value { font-weight: var(--weight-bold); overflow-wrap: anywhere; }

.coach-card { background: linear-gradient(135deg, var(--color-primary-soft), transparent 60%), var(--color-surface); }
.coach-card__head { display: flex; align-items: center; gap: var(--space-3); }
.coach-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: var(--gradient-brand); }
.coach-card__tip { margin: 0; color: var(--color-text); }

.tile-link { gap: var(--space-2); padding: var(--space-4); }
.tile-link__title { font-weight: var(--weight-bold); }
.tile-link__sub { font-size: var(--text-sm); color: var(--color-text-secondary); }
.home-links { margin-top: var(--space-2); }

/* ---------- briefing (LEARN) ---------- */
.module-head { display: flex; align-items: center; gap: var(--space-4); }
.module-head__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; color: var(--tone-text); background: var(--tone-soft); }
.module-head__text { min-width: 0; }
.card-head { display: flex; align-items: center; gap: var(--space-3); }
.hazard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.hazard { display: flex; gap: var(--space-3); align-items: flex-start; }
.hazard__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-primary-text); background: var(--color-primary-soft); }
.hazard.is-done .hazard__n { color: #fff; background: var(--color-success); }
.hazard__body { display: flex; flex-direction: column; }
.hazard__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); }
.hazard__text { font-weight: var(--weight-medium); }
.briefing__hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.briefing-modes .gcard { gap: var(--space-2); }
.mini-title { margin: var(--space-1) 0 0; font-size: var(--text-body); font-weight: var(--weight-bold); }
.mini-text { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.briefing__status:empty { display: none; }
.ar-launch { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary-text); font-weight: var(--weight-semibold); }
.ar-launch__pulse { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); animation: pulse 1.2s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--color-primary-soft); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- assessment (FIND) ---------- */
.assess-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.assess-head__module, .assess-head__step { margin: 0; }
.assess-head__step { font-weight: var(--weight-bold); color: var(--color-text-secondary); }
.progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.progress__seg { height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-secondary); background: var(--color-surface-sunken); }
.progress__seg.is-current { color: #fff; background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.progress__seg.is-correct { color: #fff; background: var(--color-success); }
.progress__seg.is-wrong { color: #fff; background: var(--color-danger); }
.prompt { margin: var(--space-2) 0 0; font-size: var(--text-h2); line-height: 1.3; font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.options { display: flex; flex-direction: column; gap: var(--space-3); }
.option {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  min-height: 72px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  font-size: var(--text-body-lg); font-weight: var(--weight-semibold); text-align: left; color: var(--color-text);
  background: var(--color-surface); border: 1.5px solid var(--color-border); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease), opacity var(--dur);
}
.option:not([disabled]):hover { border-color: var(--color-primary); }
.option:not([disabled]):active { transform: scale(.985); }
.option[disabled] { cursor: default; }
.option__letter { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; font-weight: var(--weight-bold); color: var(--color-primary-text); background: var(--color-primary-soft); }
.option__text { display: flex; flex-direction: column; gap: 4px; }
.option__tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.option.is-correct { border-color: var(--color-success); background: var(--color-success-soft); }
.option.is-correct .option__letter { color: #fff; background: var(--color-success); }
.option.is-correct .option__tag { color: var(--color-success-text); }
.option.is-wrong { border-color: var(--color-danger); background: var(--color-danger-soft); border-style: dashed; }
.option.is-wrong .option__letter { color: #fff; background: var(--color-danger); }
.option.is-wrong .option__tag { color: var(--color-danger-text); }
.option.is-dim { opacity: .45; }
.feedback { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid transparent; animation: sheet-in var(--dur-slow) var(--ease-spring) both; }
.feedback--correct { background: var(--color-success-soft); }
.feedback--wrong { background: var(--color-danger-soft); }
.feedback__title { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-h3); font-weight: var(--weight-bold); }
.feedback__icon { display: inline-flex; }
.feedback--correct .feedback__icon { color: var(--color-success-text); }
.feedback--wrong .feedback__icon { color: var(--color-danger-text); }
.feedback__why { margin: 0; }

/* ---------- result (PROVE) ---------- */
.result { align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-5); }
.result .eyebrow { margin: 0; }
.result .ring { margin: var(--space-2) 0; }
.result__score { display: flex; align-items: baseline; }
.result__score-num { font-size: 3.25rem; font-weight: var(--weight-bold); line-height: 1; letter-spacing: -0.03em; }
.result__score-max { font-size: var(--text-body); color: var(--color-text-secondary); font-weight: var(--weight-semibold); }
.result__headline { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.result__verdict { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); }
.result--pass .result__verdict { color: var(--color-success-text); background: var(--color-success-soft); }
.result--fail .result__verdict { color: var(--color-danger-text); background: var(--color-danger-soft); }
.result__passmark { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.result-metrics .metric__value { font-size: 1.4rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.facts dt { color: var(--color-text-secondary); font-size: var(--text-sm); }
.facts dd { margin: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }