/* The kit around the course: pocket card, certificate, manager's roster, policy template and draft sign.
   Same Seabright theme as the course (see the end of style.css), plain pages that print cleanly.
   Headings use Barlow from Google Fonts when it loads, with system fallbacks. */
:root {
  --bg: #EDF0F5; --card: #FFFFFF; --ink: #0F1B2D; --ink-2: #475569; --line: #DBE1EB; --line-2: #B9C4D6;
  --navy: #12284A; --signal: #F5B301; --signal-ink: #6B4500; --signal-tint: #FFF4D0;
  --danger: #C2362B; --danger-tint: #FDECEA; --safe: #0C7A5C; --safe-tint: #E5F5EE; --sea: #1F5FA8; --sea-tint: #E7F0FB;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.5; overflow-wrap: break-word; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
a { color: var(--sea); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; 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; }
.skip-link { position: absolute; left: 0.75rem; top: -4rem; background: var(--navy); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700; z-index: 5; }
.skip-link:focus { top: 0.75rem; }

.bar { background: #fff; border-bottom: 1px solid var(--line); }
.bar-in { max-width: 64rem; margin: 0 auto; padding: 0.6rem 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.bar .brand { font-weight: 800; color: var(--ink); text-decoration: none; display: inline-flex; gap: 0.55rem; align-items: center; }
.bar .brand svg { width: 1.9rem; height: 1.9rem; flex: none; }
.bar .acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn { font: inherit; font-weight: 700; font-size: 0.95rem; min-height: 44px; padding: 0.5rem 0.95rem; border: 1.5px solid var(--navy); border-radius: 10px; background: var(--navy); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.btn.alt { background: #fff; color: var(--navy); }
.btn.sig { background: var(--signal); border-color: #E0A200; color: var(--ink); }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

main { max-width: 64rem; margin: 0 auto; padding: 1rem 1rem 2.5rem; }
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 18px 40px -18px rgba(15, 27, 45, 0.25); padding: 1.2rem 1.25rem 1.3rem; }
.eyebrow { display: inline-block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-ink); background: var(--signal-tint); border-radius: 999px; padding: 0.2rem 0.65rem; }
h1 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem); line-height: 1.12; letter-spacing: -0.01em; margin-top: 0.4rem; }
h2 { font-size: 1.1rem; line-height: 1.25; }
.lead { margin-top: 0.4rem; color: var(--ink-2); font-size: 1.05rem; }
.note { font-size: 0.9rem; color: var(--ink-2); }
.draft { margin-top: 0.8rem; border: 1.5px dashed var(--signal-ink); background: var(--signal-tint); border-radius: 12px; padding: 0.6rem 0.85rem; font-size: 0.95rem; }
.draft b { color: var(--signal-ink); }
.stack > * + * { margin-top: 0.9rem; }
.mini { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.foot { margin-top: 1rem; font-size: 0.82rem; color: var(--ink-2); }
.foot a { color: var(--ink-2); }

/* ---------- pocket card ---------- */
.pc-grid { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.pc-row { display: grid; gap: 0.4rem; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.7rem; }
.pc-row > h2 { font-size: 1rem; display: flex; gap: 0.5rem; align-items: center; }
.pc-row > h2 i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--c, var(--signal)); flex: none; }
.pc-cell { font-size: 0.9rem; }
.pc-cell b { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 44rem) {
  .pc-row { grid-template-columns: 9rem repeat(3, minmax(0, 1fr)); align-items: start; }
}
.pc-two { display: grid; gap: 0.6rem; margin-top: 0.7rem; }
@media (min-width: 44rem) { .pc-two { grid-template-columns: 1fr 1fr; } }
.box { border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.8rem 0.7rem; font-size: 0.92rem; }
.box h2 { font-size: 1rem; margin-bottom: 0.25rem; }
.box.red { border-color: var(--danger); background: var(--danger-tint); }
.box.red h2 { color: var(--danger); }
.box.calls { border-color: var(--navy); }
.box ul { padding-left: 1.1rem; display: grid; gap: 0.12rem; }
.calls dl { display: grid; gap: 0.3rem; }
.calls dl div { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 0.25rem; }
.calls dt { font-weight: 600; }
.calls dd { font-weight: 800; font-family: var(--mono); font-size: 0.95rem; text-align: right; }
.calls a { color: var(--ink); text-decoration: none; }
.who { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; margin-top: 0.55rem; }
.who label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.who input { width: 100%; font: inherit; padding: 0.35rem 0.1rem 0.15rem; border: 0; border-bottom: 2px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0; min-height: 40px; }
.who input:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ---------- certificate ---------- */
.cert { text-align: center; padding: 2.2rem 1.4rem; border: 2px solid var(--navy); border-radius: 18px; background: #fff; position: relative; }
.cert::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-2); border-radius: 12px; pointer-events: none; }
.cert .seal { width: 4.2rem; height: 4.2rem; margin: 0 auto 0.6rem; }
.cert h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
.cert .name { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem); font-weight: 800; margin: 0.9rem 0 0.2rem; border-bottom: 2px solid var(--signal); display: inline-block; padding: 0 0.6rem 0.2rem; }
.cert .what { margin-top: 0.6rem; font-size: 1.05rem; }
.cert dl { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 1.3rem auto 0; max-width: 44rem; text-align: left; }
.cert dl div { border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.7rem; }
.cert dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.cert dd { font-weight: 700; }
.cert .small { margin-top: 1.2rem; font-size: 0.82rem; color: var(--ink-2); }

/* ---------- roster ---------- */
.ro-tools { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: end; margin-top: 0.9rem; }
.ro-tools label { display: block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.ro-tools input[type="date"], .ro-tools select { font: inherit; min-height: 44px; padding: 0.35rem 0.6rem; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); }
.ro-sum { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin-top: 0.9rem; }
.ro-sum div { border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.8rem; background: #fff; }
.ro-sum b { display: block; font-size: 1.6rem; line-height: 1.1; }
.ro-sum span { font-size: 0.85rem; color: var(--ink-2); }
.ro-sum .s-over b { color: var(--danger); } .ro-sum .s-soon b { color: var(--signal-ink); } .ro-sum .s-ok b { color: var(--safe); }
.tbl-wrap { overflow-x: auto; margin-top: 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
table.ro { border-collapse: collapse; width: 100%; min-width: 46rem; font-size: 0.92rem; }
.ro caption { text-align: left; padding: 0.6rem 0.8rem; font-weight: 700; }
.ro th, .ro td { text-align: left; padding: 0.5rem 0.7rem; border-top: 1px solid var(--line); vertical-align: top; }
.ro thead th { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); background: var(--bg); }
.ro .tag { display: inline-block; font-size: 0.72rem; font-weight: 800; border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; }
.tag.over { background: var(--danger-tint); color: var(--danger); }
.tag.soon { background: var(--signal-tint); color: var(--signal-ink); }
.tag.ok { background: var(--safe-tint); color: var(--safe); }
.tag.wait { background: var(--sea-tint); color: var(--sea); }
.tag.sample { background: var(--bg); color: var(--ink-2); }
.howto { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
@media (min-width: 44rem) { .howto { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- policy and sign ---------- */
.doc h2 { margin-top: 1.1rem; }
.doc p, .doc ul, .doc ol { margin-top: 0.4rem; }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li + li { margin-top: 0.2rem; }
.sign { text-align: center; border: 3px solid var(--navy); border-radius: 18px; padding: 1.6rem 1.2rem; background: #fff; }
.sign h1 { font-size: clamp(1.8rem, 1.3rem + 2.6vw, 3rem); }
.sign .big { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; font-family: var(--mono); margin-top: 0.3rem; }
.sign .bar911 { margin-top: 1rem; background: var(--danger); color: #fff; font-weight: 800; border-radius: 12px; padding: 0.6rem; font-size: 1.2rem; }
.sign .langs { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.8rem; font-size: 0.95rem; color: var(--ink-2); }

@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 10.5pt; }
  .bar, .skip-link, .no-print { display: none !important; }
  main { padding: 0; max-width: none; }
  .sheet { box-shadow: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .who input { border-bottom: 1px solid #000; }
  .pc-row { break-inside: avoid; }
  .pc-row { grid-template-columns: 8rem repeat(3, minmax(0, 1fr)); }
  .pc-two { grid-template-columns: 1fr 1fr; }
  .cert { border-width: 2px; }
  /* the pocket card fits one page */
  .pc h1 { font-size: 17pt; margin-top: 0.15rem; }
  .pc .lead { font-size: 9.5pt; margin-top: 0.15rem; }
  .pc .eyebrow { font-size: 7pt; }
  .pc .pc-grid { gap: 0.25rem; margin-top: 0.4rem; }
  .pc .pc-row { padding: 0.3rem 0.5rem; gap: 0.35rem; }
  .pc .pc-row > h2 { font-size: 10pt; }
  .pc .pc-cell, .pc .box { font-size: 8.5pt; line-height: 1.3; }
  .pc .box { padding: 0.35rem 0.55rem 0.4rem; }
  .pc .box h2 { font-size: 10pt; }
  .pc .pc-two { gap: 0.4rem; margin-top: 0.4rem; }
  .pc .stack > * + * { margin-top: 0.4rem; }
  .pc .calls dl { gap: 0.15rem; }
  .pc .calls dd { font-size: 9pt; }
  .pc .who { margin-top: 0.3rem; }
  .pc .who input { min-height: 24px; padding-top: 0.1rem; }
  .pc .foot { font-size: 7.5pt; margin-top: 0.35rem; }
}


/* ---------- the Seabright theme, version 2: hotel wayfinding signs (matches the course) ---------- */
:root {
  --chrome: #1E2B40; --bg: #F1ECE2; --card: #FFFFFF; --paper: #FBF8F2; --ink: #1E2B40; --ink-2: #4A5468; --line: #D6CDBB; --line-2: #6B7486;
  --navy: #1E2B40; --signal: #E3A23B; --signal-ink: #6E450F; --signal-tint: #F8E8CA;
  --danger: #A33A25; --danger-tint: #F9E2DA; --safe: #1E6B4A; --safe-tint: #DDEEE4; --sea: #2B5C8A; --sea-tint: #E4ECF4;
  --display: "Barlow", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --cond: "Barlow Semi Condensed", "Arial Narrow", "Avenir Next Condensed", system-ui, sans-serif;
}
body { background: var(--chrome); }
h1, h2, .cert .name, .sign .big { font-family: var(--display); }
h1, h2 { font-weight: 700; letter-spacing: 0; }
.eyebrow, .logo, .mini, .pc-cell b, .who label, .ro thead th, .ro-tools label, .cert dt, .tag { font-family: var(--cond); }
:focus-visible { border-radius: 2px; }
.bar :focus-visible { outline-color: #F3C46B; box-shadow: 0 0 0 2px var(--chrome); }
.bar { background: var(--chrome); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.bar .brand { gap: 0.7rem; color: #fff; }
.logo { display: inline-flex; align-items: center; min-height: 1.95rem; padding: 0 0 0 0.55rem; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; border: 2px solid #fff; line-height: 1; }
.logo b { align-self: stretch; display: inline-flex; align-items: center; background: var(--signal); color: var(--navy); font-size: 0.78rem; letter-spacing: 0.1em; padding: 0 0.45rem; margin-left: 0.55rem; }
.btn { border-radius: 2px; border: 1.5px solid var(--navy); background: var(--navy); color: #fff; }
.btn:hover { filter: none; background: #2E4262; }
.btn.alt { background: transparent; color: var(--navy); }
.btn.alt:hover { background: var(--bg); }
.bar .btn { background: #fff; color: var(--navy); border-color: #fff; }
.bar .btn:hover { background: #E6EAF0; }
.bar .btn.alt { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.sheet { background: var(--paper); border: 0; border-top: 10px solid var(--signal); border-radius: 0; box-shadow: none; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 700; color: var(--navy); background: var(--signal); border-radius: 0; padding: 0.28rem 0.65rem; }
.draft { background: var(--signal-tint); border: 0; border-left: 6px solid var(--signal); border-radius: 0; }
.draft b { color: var(--navy); }
.box { border: 1px solid var(--line); background: var(--card); border-radius: 0; }
.box.calls { border: 2px solid var(--navy); }
.box.red { border-color: var(--line); border-left: 6px solid var(--danger); background: var(--card); }
.pc-row { border: 1px solid var(--line); border-left: 8px solid var(--c, var(--signal)); border-radius: 0; background: var(--card); }
.pc-row > h2 i { border-radius: 0; background: var(--c, var(--signal)); }
.pc-alone, .pc-you { font-size: 0.9rem; margin-top: 0.35rem; }
.pc-you { border-left: 4px solid var(--safe); padding-left: 0.5rem; }
.calls dl div { border-bottom-color: var(--line); }
.who input { border-bottom-color: var(--navy); }
.cert { border: 2px solid var(--navy); border-radius: 0; box-shadow: inset 0 10px 0 var(--signal); background: var(--card); }
.cert::before { border-color: var(--line); border-radius: 0; }
.cert .name { border-bottom-color: var(--signal); }
.cert dl div, .ro-sum div, .howto .box { border: 1px solid var(--line); border-radius: 0; background: var(--card); }
.ro-sum div { border-top: 5px solid var(--navy); }
.ro-sum .s-over { border-top-color: var(--danger); } .ro-sum .s-soon { border-top-color: var(--signal); } .ro-sum .s-ok { border-top-color: var(--safe); }
.tbl-wrap { border: 1px solid var(--line); border-radius: 0; background: var(--card); }
.ro thead th { background: var(--navy); color: #fff; }
.ro th, .ro td { border-top-color: var(--line); }
.ro-tools input[type="date"], .ro-tools select { border-radius: 2px; border-color: var(--line-2); background: var(--card); }
.ro .tag { border-radius: 0; }
.tag.sample { background: var(--bg); color: var(--navy); }
.sign { border: 3px solid var(--navy); border-radius: 0; box-shadow: inset 0 14px 0 var(--signal); background: var(--card); }
/* text that sits straight on the navy page, outside a sheet */
main > .foot { color: #C3CCDA; } main > .foot a { color: #FFFFFF; }
.sign .bar911 { background: var(--danger); border-radius: 0; }

/* on a phone, the pocket card opens on the numbers: that is what people open it for */
@media screen and (max-width: 44rem) {
  .sheet.pc { display: flex; flex-direction: column; }
  .sheet.pc > .eyebrow { align-self: flex-start; }
  .sheet.pc > h1 { order: 1; } .sheet.pc > .pc-two { order: 2; } .sheet.pc > .lead { order: 3; margin-top: 0.9rem; }
  .sheet.pc > .pc-grid { order: 4; } .sheet.pc > .foot { order: 5; }
}
@media print {
  body { background: #fff; }
  .sheet, .cert, .sign { box-shadow: none; }
  .sheet { border-top: 0; }
  main > .foot, main > .foot a { color: var(--ink-2); }
  .cert, .sign { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pc .pc-alone, .pc .pc-you { font-size: 8.5pt; margin-top: 0.15rem; }
}
.calls dl div.local dt { font-weight: 500; }
@media print { .pc .calls dl div.local dt { font-size: 7.5pt; } }

/* critique fixes (Impeccable, 2026-10-09): readable labels and a capped line length on screen */
@media screen {
  .pc-cell b, .who label { font-size: 0.75rem; }
  .pc .lead, .pc .foot, .doc p, .doc li { max-width: 75ch; }
}

/* the manager guide (added 2026-10-15): what the manager on duty does after a staff report */
.box.now { margin-top: 0.9rem; border: 2px solid var(--danger); border-left-width: 2px; background: var(--danger-tint); }
.box.now h2 { color: var(--danger); }
.mg-steps h2 { margin-top: 0.2rem; }
.mg-steps .note { margin-top: 0.4rem; }
.mg .pc-two { margin-top: 0.9rem; }
.mg-ladder { margin-top: 0.9rem; }
.mg-ladder dl { display: grid; gap: 0.35rem; margin-top: 0.2rem; }
.mg-ladder dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.4rem 0.9rem; border-bottom: 1px solid var(--line); padding-bottom: 0.35rem; }
.mg-ladder dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.mg-ladder dt { font-weight: 700; }
.mg-ladder dd { margin: 0; }
.mg-fill { margin-top: 0.9rem; border: 2px solid var(--navy); }
.mg-fill .who { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.mg-fill .who input { min-height: 44px; }
.mg .box ol, .mg .box ul { margin-top: 0.2rem; }
.mg .box > h2, .mg-steps h2 { margin-top: 0; }
@media screen and (max-width: 44rem) {
  .mg-ladder dl div { grid-template-columns: 1fr; gap: 0.15rem; }
}
@media print {
  .mg h1 { font-size: 17pt; margin-top: 0.15rem; }
  .mg .eyebrow { font-size: 7pt; }
  .mg .lead, .mg .draft { font-size: 9pt; margin-top: 0.25rem; }
  .mg .draft { padding: 0.3rem 0.5rem; }
  .mg p, .mg li, .mg dt, .mg dd, .mg .box { font-size: 8.5pt; line-height: 1.25; }
  .mg h2 { font-size: 10pt; margin-top: 0; }
  .mg .box > h2 { margin-bottom: 0.15rem; }
  .mg .box { padding: 0.35rem 0.55rem 0.4rem; break-inside: avoid; }
  .mg .box.now, .mg-ladder, .mg-fill, .mg .pc-two { margin-top: 0.35rem; }
  .mg h1 { font-size: 16pt; }
  .mg .lead, .mg .draft { line-height: 1.25; }
  .mg-steps .note { margin-top: 0.2rem; }
  .mg-fill .who label { line-height: 1.15; }
  .mg .pc-two { gap: 0.45rem; }
  .mg li + li { margin-top: 0.1rem; }
  .mg-ladder dl { gap: 0.2rem; }
  .mg-ladder dl div { padding-bottom: 0.2rem; }
  .mg-fill .who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.2rem; }
  .mg-fill .who input { min-height: 22px; }
  .mg-fill .who label { font-size: 7pt; }
  .mg .foot { font-size: 7.5pt; margin-top: 0.4rem; }
  .box.now { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}