/* Design Direction — product layer styles (Projects screen, session bar, notices).
   Uses the same colour variables as the assessment (css/app.css) so light/dark mode and the look stay identical. */

/* slim bar above the assessment: way back to Projects + autosave status */
.sessionbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-8px 0 14px;min-height:28px;}
.sessionbar .skip{padding:4px 0;font-size:13px;}
.saveind{font-size:12px;color:var(--muted);text-align:right;}
.saveind.saved{color:var(--good);}
.saveind.error{color:#B23A3A;font-weight:600;}
:root[data-theme="dark"] .saveind.error{color:#E58A8A;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .saveind.error{color:#E58A8A;} }

/* notices and status cards */
.notice{display:flex;justify-content:space-between;align-items:center;gap:14px;border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:13.5px;line-height:1.5;border:1px solid var(--line);background:var(--surface);color:var(--ink);}
.notice > span{flex:1;min-width:0;}
.notice.ok{background:#E7F0E6;border-color:#C9DEC8;color:#25402A;}
.notice.warn{background:#F8ECD6;border-color:#EAD3A5;color:#5E3E10;}
.notice.error{background:#F6E1DF;border-color:#E6BDB9;color:#6E2420;}
.notice.info{background:var(--accent-soft);border-color:var(--line);}
.notice .skip{flex:none;}
.notice .bar{display:block;height:4px;background:rgba(0,0,0,.12);border-radius:3px;margin-top:8px;overflow:hidden;}
.notice .bar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s ease;}
.card.status{margin:0 0 16px;}
.card.status.warn{background:#F8ECD6;border-color:#EAD3A5;}
.card.status.ok{background:#E7F0E6;border-color:#C9DEC8;}
.card.status.info{background:var(--accent-soft);}
.card.status.warn .kicker{color:#7A4D14;}
.card.status.ok .kicker{color:#2F5233;}
.card.status p{color:var(--ink);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .notice.ok,:root:not([data-theme="light"]) .card.status.ok{background:#1F3022;border-color:#2F4A33;color:#CFE6CF;}
  :root:not([data-theme="light"]) .notice.warn,:root:not([data-theme="light"]) .card.status.warn{background:#3B2D14;border-color:#5A4521;color:#F0D6A8;}
  :root:not([data-theme="light"]) .notice.error{background:#3B1F1D;border-color:#5C3330;color:#F1C9C6;}
  :root:not([data-theme="light"]) .card.status.warn .kicker{color:#E8BC73;}
  :root:not([data-theme="light"]) .card.status.ok .kicker{color:#9CCB9F;}
}

/* buttons */
.btn.sm{padding:8px 16px;font-size:13.5px;}
.btn.danger{background:#B23A3A;color:#fff;}
a.btn, button.btn{text-decoration:none;}

/* project rows */
.proj-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;}
.proj-actions .minor{display:flex;gap:14px;flex-basis:100%;justify-content:flex-end;}
.proj-actions .minor .skip{font-size:12.5px;padding:2px 0;}
.confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;}
.confirm span{flex-basis:100%;color:var(--ink);}
@media (max-width:760px){
  .dash-row > div:last-child{grid-column:1 / -1;}
  .proj-actions{justify-content:flex-start;}
  .proj-actions .minor{justify-content:flex-start;}
}