/* ============================================================
   SafeResponse app: "Daylight" (app scale)
   Tokens and core components are copied from the marketing site
   (safe-response-marketing/assets/css/main.css) so both read as one
   brand. The app layer below tightens the type scale and spacing
   for screens people work in, not pages people scroll.
   Light only, by design: the brand is a daylight system.
   Layout: sticky header + content column; course player is its own
   shell (course bar, contents rail, reading column, action bar).
   ============================================================ */
:root{
  --ink:#1D1A1B; --ink-900:#141213; --ink-800:#1c1a1b; --ink-700:#3a3536;
  --amber:#FCB040; --amber-600:#E8971F; --amber-700:#8F5A00; --amber-100:#FFF4DE; --amber-50:#FFF9EE;
  --red:#BF1E2E; --red-100:#FCECEE;
  --blue:#1799CE; --blue-700:#0F6E96; --blue-100:#E5F3FA; --blue-50:#F2F9FD;
  --gray:#E7E8E9; --gray-100:#F4F2EE; --gray-200:#E9E5DE; --gray-300:#D6D1C8;
  --gray-500:#8C8780; --gray-600:#69645E; --gray-700:#4A4642;
  --paper:#FBFAF7; --white:#fff;
  --ok:#1F6B38; --ok-100:#E3F4E8; --ok-border:#BFE3C9;
  --amber-border:#F6E0B5; --blue-border:#CFE7F3; --red-border:#F2C4CA;
  --ff-display:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-body:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1200px; --read:720px;
  --r:10px; --r-lg:18px; --r-xl:28px;
  --shadow:0 1px 2px rgba(29,26,27,.04),0 6px 20px rgba(29,26,27,.06);
  --shadow-lg:0 2px 6px rgba(29,26,27,.05),0 24px 60px rgba(29,26,27,.10);
  --t:220ms cubic-bezier(.3,.7,.2,1);
  --hdr:64px; --bar:72px; --rail:320px;
  color-scheme:light;
}

/* ---------- base ---------- */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--ff-body);font-size:16px;line-height:1.6;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}
a{color:var(--blue-700);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.1;letter-spacing:-.03em;
  margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(1.75rem,3.2vw,2.4rem);letter-spacing:-.04em}
h2{font-size:clamp(1.25rem,2vw,1.5rem)}
h3{font-size:1.12rem;letter-spacing:-.02em}
p{margin:0}
::selection{background:var(--amber-100)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico--sm{width:16px;height:16px}
.mono{font-family:var(--ff-mono)}
.num{font-variant-numeric:tabular-nums}

/* ---------- labels ---------- */
.eyebrow{font-family:var(--ff-mono);font-weight:600;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-700);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:.55em;height:.55em;background:var(--amber);transform:rotate(45deg);flex:none;border-radius:1px}
.eyebrow--plain::before{display:none}
.label{font-family:var(--ff-mono);font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-600)}
.lede{font-size:1.06rem;line-height:1.55;color:var(--gray-700);max-width:62ch}
.muted{color:var(--gray-600)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;
  font-family:var(--ff-body);font-weight:600;font-size:.98rem;letter-spacing:-.005em;
  padding:.7em 1.3em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform var(--t),background var(--t),box-shadow var(--t),color var(--t),border-color var(--t);
  text-decoration:none;line-height:1.15;text-align:center;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:none}
.btn--primary{background:var(--amber);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 18px rgba(232,151,31,.28)}
.btn--primary:hover{background:#FFBC57;box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 26px rgba(232,151,31,.38)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-700)}
.btn--ghost{background:var(--white);color:var(--ink);border-color:var(--gray-300)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--quiet{background:transparent;color:var(--ink);padding-inline:.9em}
.btn--quiet:hover{background:rgba(29,26,27,.05);transform:none}
.btn--sm{font-size:.9rem;min-height:38px;padding:.5em 1em}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* ---------- chips & pills ---------- */
.chip{display:inline-flex;align-items:center;gap:.35em;font-family:var(--ff-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.03em;padding:.35em .75em;border-radius:99px;line-height:1.3;
  background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-200);white-space:nowrap}
.chip--amber{background:var(--amber-50);color:var(--amber-700);border-color:var(--amber-border)}
.chip--blue{background:var(--blue-50);color:var(--blue-700);border-color:var(--blue-border)}
.chip--popular{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip--popular .ico{color:var(--amber);fill:currentColor}
.chip--ok{background:var(--ok-100);color:var(--ok);border-color:var(--ok-border)}
.chip--red{background:var(--red-100);color:var(--red);border-color:var(--red-border)}

/* ---------- surfaces ---------- */
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:1.5rem}

/* modal: <dialog class="modal"><div class="modal__panel">, opened by the
   dialog Stimulus controller. The <dialog> is the backdrop-sized box, so a
   click outside the panel lands on it and closes it. */
.modal{width:min(100% - 2rem,520px);max-height:calc(100dvh - 2rem);padding:0;border:0;border-radius:var(--r-lg);
  background:#fff;color:var(--ink);box-shadow:var(--shadow-lg);overflow:auto}
.modal::backdrop{background:rgba(29,26,27,.45)}
.modal[open]{animation:drop .2s var(--t) both}
.modal__panel{display:grid;gap:1rem;padding:clamp(1.25rem,4vw,1.75rem)}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.modal__head h2{font-size:1.3rem;margin:0}
.modal__x{display:inline-grid;place-items:center;width:36px;height:36px;margin:-.35rem -.35rem 0 0;border:0;border-radius:999px;
  background:transparent;color:var(--gray-600);cursor:pointer}
.modal__x:hover{background:var(--gray-100);color:var(--ink)}
.modal p{margin:0;color:var(--gray-700)}
.modal .form-actions{padding-top:.25rem}
.notice{display:flex;gap:.9rem;align-items:flex-start;background:var(--blue-50);border:1px solid var(--blue-border);
  padding:1rem 1.25rem;border-radius:var(--r-lg);color:var(--ink)}
.notice .ico{color:var(--blue-700);margin-top:.15rem}
.notice strong{display:block;margin-bottom:.15rem}
.notice p{color:var(--gray-700);font-size:.95rem}
.notice--amber{background:var(--amber-50);border-color:var(--amber-border)}
.notice--amber .ico{color:var(--amber-700)}
.notice--red{background:var(--red-100);border-color:var(--red-border)}
.notice--red .ico{color:var(--red)}
.notice__act{margin-left:auto;align-self:center}

/* progress meter */
.meter{height:8px;border-radius:99px;background:var(--gray-200);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:inherit;background:var(--blue)}
.meter--amber>i{background:var(--amber)}
.meter--thin{height:4px}

/* ---------- forms ---------- */
.field{display:grid;gap:.4rem}
.field label{font-weight:600;font-size:.92rem}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.75rem 1rem;font:inherit;font-size:1rem;
  border:1px solid var(--gray-300);border-radius:var(--r);background:#fff;color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(23,153,206,.15)}
.field__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.check{display:flex;gap:.6rem;align-items:center;font-size:.95rem}
.check input{width:20px;height:20px;accent-color:var(--blue-700)}

/* ---------- tables ---------- */
.table-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gray-200);border-radius:var(--r-lg);background:#fff}
.tbl{border-collapse:collapse;width:100%;font-size:.95rem}
.tbl th,.tbl td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.tbl th{font-family:var(--ff-mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-600);background:var(--gray-100);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl td.act{text-align:right;white-space:nowrap}
.tbl a.name{font-weight:600;color:var(--ink)}

/* ---------- forms: SimpleForm output (div.field) ---------- */
.field__hint{font-size:.85rem;color:var(--gray-600)}
.field__error{font-size:.85rem;font-weight:600;color:var(--red)}
.field--error input,.field--error select,.field--error textarea{border-color:var(--red)}
.field--error input:focus,.field--error select:focus,.field--error textarea:focus{box-shadow:0 0 0 4px var(--red-100)}
.field abbr[title="required"]{color:var(--red);text-decoration:none;margin-left:.15em}
.field input[type=checkbox],.field input[type=radio]{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--blue-700);flex:none}
.field.boolean label,.field .choice,.field span.radio,.field span.checkbox{display:flex;align-items:center;gap:.6rem;font-weight:500}
.field.boolean label{font-weight:500}
.field input[type=file]{min-height:0;padding:.6rem;background:var(--paper)}
.field textarea{min-height:140px;resize:vertical}
.field select[multiple]{min-height:140px}
.form{display:grid;gap:1.25rem;max-width:720px}
.form--wide{max-width:none}
.form-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.form-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding-top:.5rem}
.form-section{display:grid;gap:1.1rem;padding-top:1.5rem;border-top:1px solid var(--gray-200)}
.form-section:first-child{border-top:0;padding-top:0}
.form-section>h2,.form-section>h3{margin-bottom:-.25rem}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
input,select,textarea,button{font:inherit}
.notice ul{margin:.35rem 0 0;padding-left:1.2rem;font-size:.95rem;color:var(--gray-700)}

/* plain tables in older views get the Daylight table look */
.app-main table:not(.tbl):not([class*="ui-"]){border-collapse:collapse;width:100%;font-size:.95rem;background:#fff}
.app-main table:not(.tbl):not([class*="ui-"]) th,.app-main table:not(.tbl):not([class*="ui-"]) td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.app-main table:not(.tbl):not([class*="ui-"]) th{font-family:var(--ff-mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-600);background:var(--gray-100)}

/* empty states */
.empty{display:grid;gap:.75rem;justify-items:start;background:#fff;border:1px dashed var(--gray-300);border-radius:var(--r-lg);padding:1.5rem}
.empty>.ico{width:28px;height:28px;color:var(--gray-500)}
.empty p{color:var(--gray-700);max-width:60ch}
.empty p strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:.15rem}
.empty--small{padding:1.1rem;gap:.5rem}
.empty--small>.ico{width:22px;height:22px}
.back-link{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;font-weight:600;color:var(--gray-700)}
.reading{max-width:var(--read)}
.progress-card{display:grid;gap:.6rem;max-width:var(--read)}
.pager__gap{border:0!important;background:transparent!important;min-width:24px!important}
.form-section>.btn,.form>.btn{justify-self:start}
/* shared form refinements */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]){line-height:1.25}
.form-grid{align-items:start}
.form>input[type=hidden]:first-child+.form-section,.form>.form-section:first-of-type{border-top:0;padding-top:0}
.field.boolean{display:flex;flex-direction:column;gap:.3rem}
.field.boolean .checkbox,.field.boolean label:has(input){display:flex;align-items:center;gap:.6rem;font-weight:500}
.field.hidden{display:none}