/* RITE4SITE Bookings — shared styles. The layout and components began as a copy of the HMC training booking
   portal's; the RITE4SITE look is the block at the very end of this file (white header, the lilac of the RITE4SITE
   swirl, black type, as the logo on hmcgroupsolutions.com.au/occupational-screening, read 7 Oct 2026). */
:root {
  --teal: #02a0b0; --teal-d: #02a0b0; --teal-l: #e5f6f7; --btn-hover: #333333; --btn-hover-line: #414345;
  --btn-shadow: 0 3px 11px rgba(0, 0, 0, .25);
  --header: #333333;
  --ink: #111111; --muted: #5a5f63; --line: #dcdfe1; --bg: #eeeeee; --card: #fff;
  --red: #b3261e; --red-l: #fdeceb; --amber: #8a5300; --amber-l: #fff3df; --green: #1f6b36; --green-l: #e6f4ea;
  --r: 10px;
  color-scheme: light;
  font-family: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
}
h1, h2, h3 { font-weight: 700; }
.brand-logo { display: block; height: 28px; width: auto; }
.brand-name { border-left: 1px solid #6b6b6b; padding-left: 12px; font-weight: 600; letter-spacing: .01em; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-size: 15px; line-height: 1.45; color: var(--ink); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .6em; }
a { color: var(--teal-d); }
small { font-size: .82rem; }
.muted { color: var(--muted); }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 3px solid #0a66b0; outline-offset: 2px; }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  background: var(--teal); color: #fff; border: 1px solid transparent; border-radius: 50px;
  padding: .55em 1.5em; min-height: 44px; font-weight: 400; font-size: 15px;
  text-decoration: none; box-shadow: var(--btn-shadow);
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover-line); color: #fff; }
.btn:disabled { background: #c5ccd1; border-color: #c5ccd1; color: #fff; cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: #fff; color: var(--teal); border-color: var(--teal); }
.btn.ghost:hover { background: var(--btn-hover); border-color: var(--btn-hover-line); color: var(--teal); }
.btn.ghost:disabled { color: #9aa4aa; border-color: #d5dadd; background: #fff; }
.btn.danger { background: #fff; color: var(--red); border-color: var(--red); }
.btn.danger:hover { background: var(--red-l); }
.btn.small { min-height: 34px; padding: .3em .9em; font-size: .75rem; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--teal-d); text-decoration: underline; font-weight: 600; }
.eyebrow { margin: 0 0 2px; color: var(--teal-d); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }

/* ---------- forms */
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px 4px; margin: 0 0 14px; background: #fff; min-width: 0; }
legend { font-weight: 700; padding: 0 6px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; }
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  padding: .55em .7em; min-height: 44px; border: 1px solid #aeb8bf; border-radius: 8px;
}
.field input[type=file] { padding: .45em; }
.field textarea { min-height: 76px; resize: vertical; }
.field.has-err input, .field.has-err select, .field.has-err textarea { border-color: var(--red); background: var(--red-l); }
.err { display: block; color: var(--red); font-size: .82rem; margin-top: 3px; font-weight: 600; }
.hint { display: block; color: var(--muted); font-size: .8rem; margin-top: 3px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--teal); }
.check.has-err > span { color: var(--red); }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.radio-cards label { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; gap: 10px; cursor: pointer; background: #fff; }
.radio-cards label:has(input:checked) { border-color: var(--teal); background: var(--teal-l); }
.radio-cards input { accent-color: var(--teal); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.alert { border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; background: var(--amber-l); color: #5f3a00; }
.alert.err { background: var(--red-l); color: var(--red); }
.info-box { background: #fafbfb; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin-bottom: 12px; }
.info-box ul, .info-box ol { margin: .2em 0 .6em; padding-left: 1.2em; }
.empty { background: #fff; border: 1px dashed #c6cdd2; border-radius: var(--r); padding: 20px; text-align: center; }
.pill { display: inline-block; border-radius: 50px; padding: .1em .65em; font-size: .75rem; font-weight: 600; background: #eceff1; color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--green-l); color: var(--green); }
.pill.warn { background: var(--amber-l); color: var(--amber); }
.pill.bad { background: var(--red-l); color: var(--red); }

/* ---------- booking panel (sits inside the course page) */
body.widget { background: #fff; }
.w { max-width: 900px; margin: 0 auto; padding: 8px 12px 16px; }
/* Inside the HMC website the panel fills the page's column, so it lines up with what's around it. */
.embedded .w, .embedded .w.wide { max-width: none; padding-left: 1px; padding-right: 1px; }
.w-head { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.w-head h1 { font-size: 1.2rem; margin: 0; }
.tabs { display: inline-flex; background: #edf0f2; border-radius: 50px; padding: 4px; flex-wrap: wrap; }
.tabs button { border: 0; background: none; border-radius: 50px; padding: .45em 1.05em; min-height: 40px; font-weight: 600; color: var(--muted); }
.tabs button[aria-selected=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
/* The employer option stands out on every page (Harrison, 15 Sep 2026). */
.tabs button.tab-employer { background: var(--teal); color: #fff; box-shadow: var(--btn-shadow); }
.tabs button.tab-employer:hover { background: var(--btn-hover); }
.tabs button.tab-employer[aria-selected=true] { background: var(--btn-hover); color: #fff; box-shadow: var(--btn-shadow); }
select[multiple] { min-height: 220px; padding: 6px; }
.info-box.privacy p { font-size: .85rem; color: var(--muted); margin: 0 0 .5em; }
.info-box.privacy p:last-child { margin-bottom: 0; }
.code-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.code-row input { flex: 1 1 200px; text-transform: uppercase; }
.discount-box .ok-note { margin: 8px 0 0; color: var(--green); font-weight: 600; }
.discount-box .err { margin: 8px 0 0; color: var(--red); font-weight: 600; }
.field.wide { grid-column: 1 / -1; }
fieldset.also { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px 14px; margin: 0 0 14px; }
fieldset.also legend { font-weight: 700; padding: 0 6px; }
.also-row { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; background: #fafbfb; }
.also-row .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.also-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.also-foot .days-field { max-width: 180px; }
@media (max-width: 600px) { .also-row .grid3 { grid-template-columns: 1fr; } }
.weekdays { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 2px; }
.check.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .9rem; }
.date-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0; }
.date-add input { flex: 0 1 190px; }
ul.picked { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
ul.picked li { display: inline-flex; align-items: center; gap: 8px; background: var(--teal-l); border-radius: 50px; padding: 3px 12px; font-size: .85rem; }
ul.picked li.muted { background: none; padding-left: 0; }

.employer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; background: var(--teal-l); border: 2px solid var(--teal); border-radius: var(--r); padding: 12px 16px; margin: 0 0 14px; }
.employer-cta p { margin: 0; flex: 1 1 280px; }
.stepper { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 4px solid var(--line); font-size: .85rem; color: var(--muted); min-width: 0; }
.stepper li span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--line); font-size: .72rem; font-weight: 700; }
.stepper li.on { border-color: var(--teal); color: var(--ink); font-weight: 600; }
.stepper li.on span { background: var(--teal); color: #fff; }
.stepper li.done { border-color: var(--teal); }
.stepper li.done span { background: var(--teal-l); color: var(--teal-d); }
@media (max-width: 520px) { .stepper li:not(.on) b { display: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { border: 1px solid #c6cdd2; background: #fff; border-radius: 50px; padding: .35em .95em; min-height: 38px; }
.chip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }

.sessions { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 12px 20px -14px rgba(64,89,111,.45); }
.session { display: grid; grid-template-columns: 1.7fr 1fr 1fr auto 104px; grid-template-areas: "when where price seats act"; gap: 8px 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.session:first-child { border-top: 0; }
.session:nth-child(even) { background: #f9fafa; }
.s-when { grid-area: when; } .s-where { grid-area: where; } .s-price { grid-area: price; } .s-seats { grid-area: seats; } .session .btn { grid-area: act; }
.s-when strong { display: block; }
.s-when span, .s-price small { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }
.s-price { font-weight: 700; }
.session.is-full { color: var(--muted); }
.badge { display: inline-block; padding: .2em .65em; border-radius: 50px; background: var(--green-l); color: var(--green); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge.low { background: var(--amber-l); color: var(--amber); }
.badge.full { background: #eceff1; color: var(--muted); }
@media (max-width: 640px) {
  .session { grid-template-columns: 1fr auto; grid-template-areas: "when price" "where seats" "act act"; }
  .s-price, .s-seats { text-align: right; }
  .session .btn { width: 100%; }
}
.request-link { margin: 14px 0 0; text-align: center; color: var(--muted); }
.picked { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; background: var(--teal-l); border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; }
.person { position: relative; }
.person .remove { position: absolute; top: 10px; right: 14px; }
.add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -2px 0 16px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.actions .totals { margin-left: auto; }
.totals strong { font-size: 1.25rem; margin-left: 6px; }
.summary { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin-bottom: 12px; }
.summary dl, dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dt { color: var(--muted); } dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.acks { margin: 6px 0 0; }
.stripe-sim { border: 2px dashed #635bff; border-radius: var(--r); padding: 20px; background: #f7f6ff; text-align: center; }
.stripe-sim .eyebrow { color: #4f46e5; }
.stripe-sim .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.finish { text-align: center; padding: 20px 4px; }
.tick { width: 56px; height: 56px; border-radius: 50%; background: var(--green-l); color: var(--green); display: grid; place-items: center; margin: 0 auto 10px; font-size: 28px; font-weight: 700; }
.finish .info-box { text-align: left; max-width: 540px; margin: 16px auto; }
/* Inside a course page the panel resizes itself, so it never needs its own scroll bars. */
html.embedded, html.embedded body { overflow: hidden; }
.proto { font-size: .78rem; color: var(--muted); text-align: center; margin-top: 12px; }
.rto { font-size: .78rem; color: var(--muted); text-align: center; margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
details.entry { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 10px 14px; margin: 0 0 14px; text-align: left; }
details.entry summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details.entry ul, .entry-box ul { margin: 8px 0 0; padding-left: 1.2em; }
details.entry li, .entry-box li { margin: 4px 0; overflow-wrap: anywhere; }
details.entry p { margin: 8px 0 0; }
.entry .source, .entry-box .source { font-size: .78rem; color: var(--muted); margin: 10px 0 0; }
.step-title { font-size: 1rem; margin: 18px 0 8px; }
.unit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.unit-card { display: flex; gap: 10px; align-items: center; border: 2px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--card); cursor: pointer; }
.unit-card:has(input:checked) { border-color: var(--teal); background: #e8f7f8; }
.unit-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.unit-card strong, .unit-card small { display: block; }
.unit-card small { color: var(--muted); font-size: .75rem; }
.price-ladder { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: .85rem; color: var(--muted); }
.price-ladder .on { color: var(--ink); font-weight: 600; }
.price-ladder small { color: var(--teal); font-weight: 600; }
.session.is-chosen { outline: 2px solid var(--teal); outline-offset: -2px; }
.split { display: grid; gap: 8px; }
.split-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--card); }
label.inline { margin-left: 14px; white-space: nowrap; cursor: pointer; }

/* ---------- staff calendar */
body.staff { min-height: 100vh; }
.topbar { background: var(--header); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.logo { background: var(--teal); color: #fff; border-radius: 6px; padding: 2px 8px; letter-spacing: .06em; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.topbar nav a { color: #cfd8dc; text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: .9rem; }
.topbar nav a[aria-current] { background: #4a4a4a; color: #fff; }
.flag { background: #ffcf4d; color: #111; border-radius: 50px; padding: 1px 10px; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.wrap { padding: 16px 20px; max-width: 1440px; margin: 0 auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 10px; }
.toolbar h1 { font-size: 1.35rem; margin: 0 6px; min-width: 9.5em; }
.monthnav { display: flex; align-items: center; gap: 6px; }
.iconbtn { border: 1px solid #c6cdd2; background: #fff; border-radius: 8px; min-width: 40px; min-height: 40px; padding: 0 10px; }
.iconbtn:hover { background: var(--teal-l); }
.seg { display: inline-flex; border: 1px solid #c6cdd2; border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; padding: .45em .95em; min-height: 40px; }
.seg button[aria-pressed=true] { background: var(--ink); color: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters input, .filters select { font: inherit; padding: .4em .6em; min-height: 40px; border: 1px solid #aeb8bf; border-radius: 8px; background: #fff; color: var(--ink); max-width: 100%; }
.filters label { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.spacer { flex: 1; }
.subbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; font-size: .85rem; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.legend span { white-space: nowrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.25); }

.month { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
.month-inner { min-width: 760px; }
.month-head, .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head div { padding: 6px 8px; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.day { min-height: 118px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.week:last-child .day { border-bottom: 0; }
.week .day:last-child { border-right: 0; }
.day.out { background: #f8f9fa; }
.day.out .dnum span { color: #a3adb3; }
.day.past:not(.out) { background: #fbfbfc; }
.dnum { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 600; padding: 0 2px; }
.day.today .dnum span { background: var(--teal); color: #fff; border-radius: 50px; padding: 0 7px; }
.add-day { border: 0; background: none; color: var(--muted); border-radius: 4px; width: 26px; height: 22px; opacity: 0; }
.day:hover .add-day, .add-day:focus-visible { opacity: 1; }
.add-day:hover { background: var(--teal-l); color: var(--teal-d); }
@media (hover: none) { .add-day { opacity: .6; } }
.day ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ev { width: 100%; display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; font-size: .72rem; line-height: 1.3; padding: 3px 6px; border: 0; border-left: 3px solid var(--c); border-radius: 4px; background: color-mix(in srgb, var(--c) 13%, #fff); }
.ev:hover { background: color-mix(in srgb, var(--c) 24%, #fff); }
.ev .l1 { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ev .l2 { display: flex; justify-content: space-between; gap: 4px; font-size: .66rem; }
.ev .t { color: var(--muted); font-weight: 500; white-space: nowrap; }
.ev .loc { color: var(--muted); }
.ev .left { font-weight: 700; color: var(--green); white-space: nowrap; }
.ev .left.low { color: var(--amber); } .ev .left.full { color: var(--red); }
.ev.private { background: repeating-linear-gradient(135deg, #fff 0 4px, #eef1f3 4px 8px); }
.ev.cancelled { opacity: .55; } .ev.cancelled .n { text-decoration: line-through; }
.more { border: 0; background: none; font-size: .72rem; color: var(--teal-d); text-align: left; padding: 0 5px; font-weight: 600; }

.agenda { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.agenda h3 { margin: 0; padding: 7px 14px; background: #f0f3f4; font-size: .82rem; border-top: 1px solid var(--line); }
.agenda h3:first-child { border-top: 0; }
.row { width: 100%; display: grid; grid-template-columns: minmax(0, 2.4fr) 1.1fr 1fr 1.2fr .7fr .9fr; grid-template-areas: "title when loc places price status"; gap: 4px 14px; align-items: center; padding: 10px 14px; text-align: left; background: #fff; border: 0; border-top: 1px solid var(--line); border-left: 4px solid var(--c); }
.agenda h3 + .row { border-top: 0; }
.row:hover { background: #f7fbfb; }
.row small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row strong { display: block; }
.c-title { grid-area: title; min-width: 0; } .c-when { grid-area: when; } .c-loc { grid-area: loc; } .c-places { grid-area: places; } .c-price { grid-area: price; font-weight: 600; } .c-status { grid-area: status; }
.row.cancelled strong { text-decoration: line-through; color: var(--muted); }
.bar { display: block; height: 6px; background: #e8ecee; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; background: var(--teal); }
@media (max-width: 820px) {
  .row { grid-template-columns: 1fr auto; grid-template-areas: "title price" "when status" "loc places"; }
  .c-price, .c-status { text-align: right; }
}

.requests { margin-top: 22px; }
.requests h2 { display: flex; align-items: center; gap: 10px; }
.req { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; }
.req.handled { opacity: .65; }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 24px 60px rgba(0,0,0,.3); color: var(--ink); }
dialog::backdrop { background: rgba(15,22,26,.5); }
dialog form { display: contents; }
.dlg { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dlg-head { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px 12px; border-top: 6px solid var(--c, var(--teal)); border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; }
.dlg-body { padding: 16px 20px; overflow: auto; }
.dlg-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line); background: #f8f9fa; }
.dlg-foot .spacer { flex: 1; }
.x { margin-left: auto; border: 0; background: none; font-size: 1.6rem; line-height: 1; width: 40px; height: 40px; border-radius: 8px; flex: none; }
.x:hover { background: #eef1f2; }
.dlg-body h3 { margin-top: 18px; }
.table-wrap { overflow-x: auto; }
table.bk { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 560px; }
.bk th, .bk td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bk th { color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; }
.bk tr.cancelled td { color: var(--muted); }
.bk td .person + .person { margin-top: 6px; }
.bk .acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
details.embed { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; }
details.embed summary { cursor: pointer; font-weight: 600; }
pre.code { background: #15191c; color: #dff6f7; padding: 12px; border-radius: 8px; overflow-x: auto; font-size: .8rem; white-space: pre; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #15191c; color: #fff; padding: 10px 18px; border-radius: 50px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
.proto-note { max-width: 1440px; margin: 10px auto 0; padding: 0 20px 28px; color: var(--muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }

/* ---------- landing + course page mock */
.landing { max-width: 920px; margin: 0 auto; padding: 32px 20px 48px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 18px 0 28px; }
.card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--teal); box-shadow: 0 6px 18px -8px rgba(2,160,176,.5); }
.card h2 { color: var(--teal-d); }
.course-list { columns: 2 280px; padding-left: 1.1em; }
.course-list li { margin-bottom: 4px; break-inside: avoid; }

/* ---------- staff sign-in and signed-in pages */
.signin { max-width: 440px; margin: 48px auto; padding: 0 16px; }
.signin .card { padding: 24px; }
.signin h1 { font-size: 1.35rem; margin-bottom: .3em; }
.signin .field input { font-size: 1.05rem; }
.signin .code-input { letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; font-size: 1.4rem !important; }
.signin .actions { border-top: 0; padding-top: 0; }
.signin .btn { width: 100%; }
.signin .alt { margin-top: 14px; text-align: center; }
.signin .codes { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; background: #f4f6f7; border-radius: 8px; padding: 12px 16px; margin: 12px 0; font-size: 1.05rem; }

/* ---------- public course calendar and employer form */
.w.wide { max-width: 1240px; }
.back-link { display: inline-block; margin: 0 0 12px; font-weight: 600; color: var(--teal-d); text-decoration: none; }
.back-link:hover { text-decoration: underline; }
a.ev, a.row { color: inherit; text-decoration: none; }
.ev.is-full { opacity: .7; }
.cal-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.range { font-size: 1.15rem; margin: 0 6px; min-width: 9em; text-align: center; }
.iconbtn:disabled { opacity: .4; cursor: default; background: #fff; }
.w .legend { margin-bottom: 10px; font-size: .8rem; color: var(--muted); }
.row .c-status .btn { pointer-events: none; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tag { display: inline-flex; align-items: center; gap: 6px; background: var(--teal-l); border: 1px solid #bfe6ea; border-radius: 50px; padding: .2em .3em .2em .9em; font-weight: 600; font-size: .88rem; }
.tag small { color: var(--muted); font-weight: 500; }
.tag button { border: 0; background: none; width: 28px; height: 28px; border-radius: 50%; font-size: 1.15rem; line-height: 1; }
.tag button:hover { background: #cdeef1; }
/* Staff calendar: who is signed in, and sign out, in the top bar */
.topbar .who { color: #cfd4d6; font-size: .85rem; }
.topbar nav .linkbtn { color: #fff; }

/* Paying by card: Stripe's form sits inside the booking panel */
.pay-box h2 { margin: 16px 0 4px; }
.checkout { min-height: 320px; margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; }

/* Course picker: tick boxes, A to Z, no course types (Harrison, 15 Sep 2026) */
.course-search { width: 100%; margin: 4px 0 8px; }
.course-checks { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: #fff; display: grid; gap: 2px; }
.course-check { display: flex; gap: 8px; align-items: flex-start; padding: 5px 2px; cursor: pointer; }
.course-check input { margin-top: 3px; flex: none; }
.course-check span, .field .course-check span { display: inline; font-weight: 400; margin: 0; }
.course-check[hidden] { display: none; }
.has-err .course-checks { border-color: #b3261e; }
/* The general .field input style (full width, 44px tall) must not reach the course tick boxes. */
.field .course-checks input[type=checkbox] {
  -webkit-appearance: auto; appearance: auto; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 2px 0 0;
  border: 0; border-radius: 3px; box-shadow: none; background: none; flex: none; accent-color: var(--teal);
}
.field .course-checks .course-check { align-items: center; padding: 6px 4px; border-radius: 6px; font-size: .92rem; line-height: 1.35; }
.field .course-checks .course-check:hover { background: #f3f6f7; }
.field .course-checks .course-check span { display: block; flex: 1; font-weight: 400; font-size: .92rem; margin: 0; }

/* ---------- Full pages, the standard for every public page (Harrison, 15 Sep 2026). Opened directly, a page marked has-site
   shows the HMC header, footer and (has-hero) intro band, with the form in a white card. Inside the HMC website
   (html.embedded) all of that stays hidden. Used by the employer form, course calendar and course booking form. */
.site-header, .site-hero, .site-footer { display: none; }
html:not(.embedded) body.has-site { background: #eeeeee; }
html:not(.embedded) .has-site .site-header { display: block; background: var(--header); }
.site-header .in { max-width: 1040px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.site-header img { display: block; height: 46px; width: auto; }
.site-call { display: inline-flex; align-items: center; background: var(--teal); color: #fff; text-decoration: none; font-weight: 600; border-radius: 50px; padding: .6em 1.25em; font-size: .9rem; }
.site-call:hover { background: var(--teal-d); color: #fff; }
html:not(.embedded) .has-site .site-hero { display: block; background: #2d2d2d; color: #fff; border-top: 4px solid var(--teal); }
.site-hero .in { max-width: 1040px; margin: 0 auto; padding: 34px 20px 58px; }
.site-hero .eyebrow { color: #7fd3db; }
.site-hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.2; margin: 4px 0 10px; color: #fff; }
.site-hero p { margin: 0; max-width: 46em; color: #d9dee0; }
.site-hero ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.site-hero li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; }
.site-hero li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-size: .72rem; flex: none; }
html:not(.embedded) .has-site main#app { max-width: 1040px; margin: 28px auto 0; padding: 0 20px 40px; position: relative; }
html:not(.embedded) .has-site.has-hero main#app { margin-top: -34px; }
html:not(.embedded) .has-site main#app > .w { max-width: none; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.10); padding: 26px 28px 20px; }
/* The intro band already says what the page is: hide the form's own title (hide-title keeps the rest of that row). */
html:not(.embedded) .has-site.hide-head main#app > .w > .w-head { display: none; }
html:not(.embedded) .has-site.hide-title main#app > .w > .w-head > div:first-child { display: none; }
html:not(.embedded) .has-site.hide-title main#app > .w > .w-head { justify-content: flex-end; }
/* The calendar needs more room. */
html:not(.embedded) .has-site.wide-page main#app { max-width: 1280px; }
.wide-page .site-header .in, .wide-page .site-hero .in, .wide-page .site-footer .in, .wide-page .site-footer .legal { max-width: 1280px; }
html:not(.embedded) .has-site .site-footer { display: block; background: var(--header); color: #cfd4d6; }
.site-footer .in { max-width: 1040px; margin: 0 auto; padding: 30px 20px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 32px; font-size: .9rem; }
.site-footer h2 { color: #7fd3db; font-size: 1rem; margin: 0 0 8px; }
.site-footer p { margin: 0 0 6px; }
.site-footer a { color: #fff; }
.site-footer .legal { max-width: 1040px; margin: 0 auto; padding: 12px 20px 22px; border-top: 1px solid #4a4a4a; font-size: .8rem; color: #aab1b4; }
@media (max-width: 560px) {
  .site-header img { height: 38px; }
  .site-hero .in { padding: 26px 16px 50px; }
  html:not(.embedded) .has-site main#app { padding: 0 12px 30px; }
  html:not(.embedded) .has-site main#app > .w { padding: 18px 14px 14px; border-radius: 12px; }
}


/* ---------- RITE4SITE look (7 Oct 2026) ----------
   The brand is the lilac swirl, black lettering and grey small print on white. Buttons are lilac with white
   lettering, as they are on the RITE4SITE website pages. Lilac is too pale to be read as text itself, so black does
   the work teal does on the HMC pages (links, outlines), and small marks on lilac (the step number) stay black. */
:root {
  --lilac: #d6b5ef; --lilac-l: #f3eafa;
  --teal: #111111; --teal-d: #111111; --teal-l: var(--lilac-l);
  --btn-hover: #111111; --btn-hover-line: #111111;
  --header: #ffffff;
}
a { text-decoration-color: var(--lilac); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.eyebrow { color: var(--muted); }
/* White lettering on lilac, as on the "Book Screening" buttons on the RITE4SITE website pages (Harrison, 7 Oct 2026). */
.btn { background: var(--lilac); color: #fff; font-weight: 600; }
.btn:hover { background: #111; border-color: #111; color: #fff; }
.btn.ghost { background: #fff; color: #111; border-color: #111; }
.btn.ghost:hover { background: #111; border-color: #111; color: #fff; }
.tabs button.tab-employer { background: var(--lilac); color: #fff; }
.tabs button.tab-employer:hover { background: #111; color: #fff; }
.tabs button.tab-employer[aria-selected=true] { background: #111; color: #fff; }
.stepper li.on, .stepper li.done { border-color: var(--lilac); }
.stepper li.on span { background: var(--lilac); color: #111; }
.stepper li.done span { background: var(--lilac-l); color: #111; }
.chips.times { margin: 0 0 14px; }
.chips.times .chip { min-width: 84px; font-weight: 600; }
.chips.times .chip:hover { background: var(--lilac); border-color: var(--lilac); color: #fff; }
.session { grid-template-columns: 2.2fr 1fr 104px; grid-template-areas: "when price act"; }
@media (max-width: 640px) { .session { grid-template-columns: 1fr auto; grid-template-areas: "when price" "act act"; } }
.s-when { grid-area: when; } .s-price { grid-area: price; } .session > .btn { grid-area: act; }
.person + .person { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* Full page (opened directly, not inside a website page): a white header with the logo over a lilac rule. */
html:not(.embedded) .has-site .site-header { background: #fff; border-bottom: 4px solid var(--lilac); }
.site-call { background: var(--lilac); color: #fff; }
.site-call:hover { background: #111; color: #fff; }
html:not(.embedded) .has-site .site-footer { background: #111; color: #d9d9d9; }
.site-footer h2 { color: var(--lilac); }   /* "Contact us", "Where we are", "Links": lilac, not the HMC blue (Harrison, 7 Oct 2026) */
.site-footer a { color: #fff; }
.site-footer .legal { border-top-color: #333; color: #a8a8a8; }

/* Staff pages. */
.topbar { background: #fff; color: #111; border-bottom: 4px solid var(--lilac); }
.brand-logo { height: 34px; }
.brand-name { border-left-color: #c9c9c9; }
.topbar nav a { color: #444; }
.topbar nav a[aria-current] { background: var(--lilac); color: #111; }
.topbar nav .linkbtn, .topbar .who { color: #444; }
.daygroup { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 14px; overflow: hidden; }
.daygroup > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; padding: 10px 14px; background: var(--lilac-l); font-size: 1rem; }
.daygroup > h2 small { font-weight: 400; color: var(--muted); }
.daygroup.today > h2 { background: var(--lilac); }
.daygroup.closed > h2 { background: #f1f1f1; color: var(--muted); }
.slot { display: grid; grid-template-columns: 150px 1fr auto; gap: 4px 14px; align-items: center; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
button.slot:hover { background: #faf6fd; }
.slot .when { font-weight: 600; }
.slot small { color: var(--muted); display: block; }
.slot.cancelled { color: var(--muted); text-decoration: line-through; }
.slot.block { background: repeating-linear-gradient(135deg, #f6f6f6, #f6f6f6 8px, #efefef 8px, #efefef 16px); }
.slot.none { color: var(--muted); grid-template-columns: 1fr; }
@media (max-width: 560px) { .slot { grid-template-columns: 1fr auto; } .slot .when { grid-column: 1 / -1; } }
.hours-grid { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px 12px; align-items: center; }
.hours-grid .err { grid-column: 2 / -1; }