/* MedNet – Arida Medical Services. Colours, type and spacing match the MedNet design canvas. */
:root {
  --bg: #0B1220;
  --panel: #111A2E;
  --panel-2: #16213A;
  --panel-3: #0F182A;
  --line: #22304D;
  --line-2: #2F3F60;
  --text: #E6E8EC;
  --text-2: #D5D8DE;
  --text-3: #C9CDD5;
  --muted: #9AA1AD;
  --white: #FFFFFF;
  --red: #D23A45;
  --red-dark: #B23A3A;
  --link: #FF7A84;
  --link-hover: #FFB8BE;
  --green: #2E8B57;
  --green-dot: #3FC27A;
  --sel-bg: #2B1520;
  --display: 'Barlow Condensed', sans-serif;
  --body: Inter, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* `hidden` always hides, even on elements styled display: flex or grid (search filters rely on it) */
[hidden] { display: none !important; }
html { background: var(--bg); }
/* A column, so the footer sits at the bottom of short pages */
body { display: flex; flex-direction: column; margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.6; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--link-hover); outline-offset: 2px; }
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wrap { max-width: 1640px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }

/* ----- Header ----- */
.site-header { background: var(--panel); border-bottom: 1px solid var(--line); }
.site-header .wrap { padding-top: 12px; padding-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--white); }
.brand:hover { text-decoration: none; color: var(--white); }
.brand img { width: 34px; height: 40px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .5px; }
.brand-sub { font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.main-nav { display: flex; flex-wrap: nowrap; gap: 4px 22px; font-weight: 500; font-size: 14px; white-space: nowrap; }
.main-nav a { color: var(--text-3); }
.main-nav a[aria-current="page"] { color: var(--white); }
.main-nav { align-items: center; }
.nav-group { position: relative; }
.nav-group > summary { list-style: none; cursor: pointer; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.nav-group[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-group > summary:hover, .nav-group[open] > summary, .nav-group.here > summary { color: var(--white); }
.nav-menu { position: absolute; top: calc(100% + 10px); left: -12px; z-index: 50; min-width: 220px; display: flex; flex-direction: column; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.nav-menu a { padding: 8px 12px; border-radius: 6px; color: var(--text-3); white-space: nowrap; display: flex; flex-direction: column; gap: 1px; }
.nav-menu { min-width: 260px; }
.nav-label { color: var(--white); font-weight: 600; font-size: 14px; }
.nav-desc { color: var(--muted); font-size: 12px; font-weight: 400; }
.nav-menu a[aria-current="page"] .nav-label { color: #FF9AA2; }
.nav-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--red); }
.nav-menu a:hover { background: #16213A; color: var(--white); text-decoration: none; }
.nav-menu a[aria-current="page"] { color: var(--white); background: #16213A; }
.site-header { position: relative; z-index: 40; }
.mobile-nav { display: none; }
@media (max-width: 1200px) {
  .main-nav { display: none; }
  .mobile-nav { display: block; order: 2; }
  .site-header .brand { order: 1; }
  .header-tools { order: 3; }
  .mobile-nav > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--white); font-weight: 600; }
  .mobile-nav > summary::-webkit-details-marker { display: none; }
  .mobile-nav[open] > summary { background: #16213A; }
  .burger { display: inline-flex; flex-direction: column; gap: 3px; }
  .burger span { width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .15s, opacity .15s; }
  .mobile-nav[open] .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .mobile-nav[open] .burger span:nth-child(2) { opacity: 0; }
  .mobile-nav[open] .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .mobile-menu { position: absolute; left: 12px; right: 12px; margin-top: 8px; z-index: 60; max-height: calc(100vh - 120px); overflow-y: auto; display: flex; flex-direction: column; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
  .mobile-menu a { padding: 9px 12px; border-radius: 8px; color: var(--text-3); font-size: 16px; display: flex; flex-direction: column; gap: 1px; }
  .mobile-menu .nav-desc { font-size: 12px; }
  .mobile-menu a:hover, .mobile-menu a[aria-current="page"] { background: #16213A; color: var(--white); text-decoration: none; }
  .mobile-group { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; }
  .mobile-head { padding: 6px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
}
@media (max-width: 760px) {
  .mobile-nav { margin-left: auto; }
  .header-tools { flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .header-tools > .user-menu { display: none; }
  .mobile-logout { display: block; border-top: 1px solid var(--line); margin-top: 6px; padding: 8px 4px 2px; }
}
.mobile-logout { display: none; }
/* Your name next to the avatar only where there's room */
@media (max-width: 1440px) { .user-chip > span:last-child { display: none; } }
.header-tools { flex: 1 1 220px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.btn-clock { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 8px; background: var(--green); color: var(--white); font-size: 14px; font-weight: 600; white-space: nowrap; }
.btn-clock:hover { color: var(--white); text-decoration: none; filter: brightness(1.08); }
.btn-clock .dot { width: 8px; height: 8px; border-radius: 50%; background: #B8F5D0; }
.btn-clock.on { background: #123322; color: #7FE0A8; border: 1px solid #1F5A3A; }
.site-search { width: 100%; max-width: 300px; height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font-size: 14px; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--text-3); }
.bell:hover { color: var(--white); text-decoration: none; border-color: #3B4F7A; }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: var(--white); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.user-chip { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-3); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #5865F2; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 600; font-size: 13px; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-menu a { font-size: 13px; }
.dev-banner { background: #3A2E12; color: #F5D27A; font-size: 13px; text-align: center; padding: 6px 16px; border-bottom: 1px solid #5A4A1A; }

/* ----- Page banners ----- */
.hero-home { position: relative; height: 320px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
.hero-home picture, .hero picture { display: contents; }
.hero-home img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero-home::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.85) 100%); }
.hero { position: relative; height: 150px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
.hero > img, .hero > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,18,32,.94) 0%, rgba(11,18,32,.7) 50%, rgba(11,18,32,.25) 100%); }
.hero .wrap { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; gap: 16px; }
.hero .patch { width: 56px; height: 66px; object-fit: contain; flex: none; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--link-hover); }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1.05; color: var(--white); }

body > * { flex-shrink: 0; }
main.page { width: 100%; max-width: 1640px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 40px) 64px; }
main.page.home { padding-top: 24px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.subline { font-size: 14px; color: var(--muted); margin-top: 4px; }
.lead { margin: 0 0 16px; font-size: 16px; color: var(--text-2); }
.prose { color: var(--text-2); }
.prose strong { color: var(--white); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ----- Type ----- */
.h-display { font-family: var(--display); font-weight: 700; color: var(--white); line-height: 1.1; }
h2.section { margin: 0 0 14px; font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--white); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
h2.block { margin: 0 0 4px; font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--white); }
h2.block + p, .block-note { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
h3.card-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--white); }

/* ----- Surfaces ----- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.card.pad { padding: 18px 20px; }
.card-head { padding: 14px 18px; background: var(--panel-2); font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--white); }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.tile .label { font-size: 13px; color: var(--muted); }
.tile .value { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1.1; color: var(--white); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.lift { transition: border-color .15s ease, transform .15s ease; }
.lift:hover { border-color: #3B4F7A !important; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .lift { transition: none; } .lift:hover { transform: none; } }
.row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.grow { flex: 999 1 520px; min-width: 0; }
.side { flex: 1 1 340px; min-width: 0; }
.stack-v { display: flex; flex-direction: column; gap: 16px; }
.mt { margin-top: 32px; }
.mb { margin-bottom: 32px; }

/* ----- Pills and chips ----- */
.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-sample { padding: 1px 8px; border-radius: 999px; background: #26324F; color: var(--text-3); font-size: 12px; font-weight: 600; }
.pill-amber { background: #3A2E12; color: #F5D27A; }
.pill-green { background: #123322; color: #7FE0A8; }
.pill-red { background: #3A1A1A; color: #FF9A9A; }
.pill-blue { background: #13283A; color: #9CC8FF; }
.pill-grey { background: #26324F; color: var(--text-3); }
.away { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #3A2E12; color: #F5D27A; font-size: 11px; font-weight: 600; letter-spacing: .3px; vertical-align: middle; white-space: nowrap; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-size: 14px; }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.on { border-color: var(--red); background: var(--sel-bg); color: var(--white); font-weight: 700; box-shadow: inset 0 0 0 1px var(--red); }
.chip:hover { border-color: #4A5E86; }
.chip.sm { min-height: 34px; padding: 0 10px; font-size: 13px; }
.chip-round { border-radius: 999px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.seg a, .seg button { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; background: transparent; color: var(--text-3); text-decoration: none; }
.seg a:hover { text-decoration: none; color: var(--white); }
.seg .on, .seg [aria-selected="true"], .seg [aria-current="page"] { background: var(--red); color: var(--white); }

/* ----- Buttons ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 10px; border: 0; font-weight: 600; font-size: 15px; background: var(--red); color: var(--white); text-decoration: none; }
.btn:hover { color: var(--white); text-decoration: none; filter: brightness(1.08); }
.btn:disabled, .btn[aria-disabled="true"] { background: #34425F; color: var(--muted); cursor: not-allowed; filter: none; }
/* Outlined buttons: a clear border and a fill on hover, so they read as buttons. */
.btn-ghost { background: rgba(255,255,255,0.03); border: 1px solid #44567C; color: var(--white); font-weight: 600; }
.btn-ghost:hover { background: #1B2945; border-color: #6A7FA8; filter: none; }
.btn-outline { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn-outline.on { background: var(--red); color: var(--white); }
.btn-green { background: var(--green); }
.btn-out { background: var(--red-dark); }
.btn-danger-ghost { background: transparent; border: 1px solid #7A3434; color: #FF9A9A; font-weight: 600; }
.btn-danger-ghost:hover { background: #2A1414; }
.btn-big { min-width: 240px; min-height: 56px; border-radius: 12px; font-size: 18px; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-ok { min-height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid #1F5A3A; background: #123322; color: #BFF0D4; font-size: 13px; font-weight: 600; }
.btn-esc { min-height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid #7A3434; background: transparent; color: #FF9A9A; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-esc:hover { background: #2A1414; }
.btn-ok:hover { filter: brightness(1.12); }
.btn-ok { cursor: pointer; }

/* ----- Forms ----- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label, .field > .label { font-size: 13px; color: var(--muted); }
.input, .textarea, .select { min-height: 42px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font-size: 14px; width: 100%; }
.textarea { padding: 10px 12px; resize: vertical; min-height: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.alert { padding: 12px 16px; border-radius: 10px; font-size: 14px; }
.alert-ok { background: #123322; border: 1px solid #1F5A3A; color: #BFF2D6; }
.alert-bad { background: #3A1A1A; border: 1px solid #6A2A2A; color: #FFD0D0; }
.alert-info { background: #13283A; border: 1px solid #23435E; color: #CFE4FF; }
.alert-warn { background: #3A2E12; border: 1px solid #5A4A1A; color: #F5D27A; }
.error-text { font-size: 13px; color: #FF9A9A; }

/* ----- Tables ----- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
/* Long tables scroll inside their own box, so the header row stays at the top (sticky needs the box that scrolls). */
.table-wrap.tall { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow: auto; }
.table-wrap.tall thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); box-shadow: inset 0 -1px 0 var(--line); }
@media (min-width: 1280px) { .table-wrap.tall { max-height: none; overflow: visible; } }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data thead tr { background: var(--panel-2); text-align: left; }
table.data th { padding: 10px 14px; color: var(--white); font-weight: 600; }
table.data td { padding: 9px 14px; color: var(--text-3); vertical-align: middle; }
table.data tbody tr { border-top: 1px solid var(--line); }
table.data .strong { color: var(--white); font-weight: 600; }
table.data .num { font-variant-numeric: tabular-nums; }
table.data .cs { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .insig { display: block; height: 24px; width: auto; max-width: 56px; object-fit: contain; }
table.data th.group { padding: 8px 14px; text-align: left; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 640px) {
  table.stack { min-width: 0 !important; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td, table.stack th { display: block; width: auto !important; }
  table.stack tr { padding: 6px 0; }
  table.stack td { display: flex !important; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 6px 14px !important; text-align: right; }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: left; flex: none; }
  table.stack td[data-label=""]::before { display: none; }
}

/* ----- Bars ----- */
.bar { position: relative; height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--red); }
.bar.thin { height: 8px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-row .bar { flex: 1; }

/* ----- Footer ----- */
.site-footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--panel); padding: 28px 0; }
.site-footer .inner { max-width: 1640px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-footer { padding: 14px 0; }
.site-footer .inner { gap: 8px 24px; font-size: 13px; }
.foot-who { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.foot-who img { width: 22px; height: 26px; object-fit: contain; }
.foot-who strong { color: var(--white); font-weight: 600; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--white); }
.foot-discord { display: flex; gap: 6px; }
.foot-dc { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: #5865F2; color: #FFFFFF; font-size: 12px; font-weight: 600; white-space: nowrap; }
.foot-dc:hover { color: #FFFFFF; text-decoration: none; filter: brightness(1.1); }
@media (max-width: 760px) {
  .site-footer { padding: 14px 0 12px; }
  .site-footer .inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot-who > span > .muted { display: none; }
  .foot-links { gap: 2px 14px; }
  .foot-links a { line-height: 30px; }
}

/* ----- Home ----- */
.home-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.home-title h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.05; color: var(--white); }
.sync-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.sync-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-dot); }
.sync-line .dot.warn { background: #E8B64A; }
.toc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 36px; max-width: 340px; }
.toc ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.tier { background: var(--panel-3); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.tier-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tier-head img { width: 52px; height: 60px; object-fit: contain; flex: none; }
.tier-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.tier-arrow { display: flex; flex-direction: column; align-items: center; height: 36px; }
.tier-arrow span { width: 2px; flex: 1; background: var(--line-2); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.person { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.person-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 26px; margin-bottom: 10px; }
.person-top img { display: block; height: 24px; width: auto; max-width: 96px; object-fit: contain; }
.person .title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.person .name { font-weight: 600; font-size: 16px; }
.vacant { color: var(--muted); font-style: italic; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.grid-cards.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.div-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.div-card .head { padding: 12px 16px; background: var(--panel-2); }
.div-card .dept { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.div-card .dept img { width: 44px; height: 52px; object-fit: contain; flex: none; }
.mem-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background: var(--panel-2); }
.mem-head img { width: 30px; height: 36px; object-fit: contain; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.step .n { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--red); }
.sidebar-col { flex: 1 1 300px; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.onduty-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: #12261B; }
.onduty-row { padding: 9px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.onduty-row.lead { background: #1A1810; }
.onduty-row img { width: 22px; height: 22px; object-fit: contain; }
.region-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.region-mini span { padding: 3px 8px; border-radius: 8px; background: var(--panel-2); color: var(--text-3); }
.region-mini span.gap { background: #2A1414; border: 1px solid #5A2222; color: #FFB0B0; }
.infobox dl { margin: 0; font-size: 14px; }
.infobox dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 9px 16px; border-top: 1px solid var(--line); }
.infobox dt { color: var(--muted); }
.infobox dd { margin: 0; }
.infobox-head { padding: 12px 16px; background: linear-gradient(135deg, #9E1B2C, #1E2F5E); color: var(--white); font-family: var(--display); font-weight: 700; font-size: 22px; text-align: center; }
.btn-apply { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; background: linear-gradient(135deg, #1E2F5E, #9E1B2C); color: var(--white); font-weight: 600; }
.btn-apply:hover { color: var(--white); text-decoration: none; filter: brightness(1.1); }

/* ----- Duty clock ----- */
.clock-id { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.clock-id .insig { width: 52px; height: 52px; object-fit: contain; }
.clock-id .patch { width: 44px; height: 52px; object-fit: contain; }
.clock-state { padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.clock-big { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.region-btn { min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 14px; text-align: left; border: 2px solid var(--line-2); background: var(--panel-2); color: var(--white); }
.region-btn[aria-checked="true"] { border-color: var(--red); background: var(--sel-bg); }
label.region-btn, label.type-btn, label.chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
label.type-btn { display: block; }
label.region-btn:has(input:checked), label.type-btn:has(input:checked), label.chip:has(input:checked) { border-color: var(--red); background: var(--sel-bg); color: var(--white); font-weight: 700; box-shadow: inset 0 0 0 1px var(--red); }
label.region-btn:has(input:focus-visible), label.type-btn:has(input:focus-visible), label.chip:has(input:focus-visible) { outline: 2px solid var(--link-hover); outline-offset: 2px; }
label.region-btn input, label.type-btn input, label.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Every pickable chip shows a tick box, so "selected" never relies on colour alone */
label.region-btn::before, label.chip::before { content: ''; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid var(--muted); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; line-height: 1; color: #FFFFFF; }
label.region-btn:has(input[type="radio"])::before, label.chip:has(input[type="radio"])::before { border-radius: 50%; }
label.region-btn:has(input:checked)::before, label.chip:has(input:checked)::before { content: '✓'; border-color: var(--red); background: var(--red); }
label.region-btn:has(input:disabled), label.chip:has(input:disabled) { cursor: default; opacity: .75; }
label.type-btn { position: relative; padding-right: 34px; }
label.type-btn::before { content: ''; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid var(--muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; line-height: 1; color: #FFFFFF; }
label.type-btn:has(input[type="checkbox"])::before { border-radius: 4px; }
label.type-btn:has(input:checked)::before { content: '✓'; border-color: var(--red); background: var(--red); }
.chip[aria-pressed="true"]::before, .chip[aria-checked="true"]::before, .chip.on::before { content: '✓ '; font-weight: 800; color: var(--red); }
.flash { margin-bottom: 18px; }
.region-btn .hint { font-size: 12px; color: var(--muted); }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.type-btn { min-height: 56px; padding: 10px 14px; text-align: left; border-radius: 10px; border: 2px solid var(--line-2); background: var(--panel-2); color: var(--white); }
.type-btn[aria-pressed="true"] { border-color: var(--red); background: var(--sel-bg); }
.type-btn .hint { font-size: 12px; color: var(--muted); }
/* Units & Map drag and drop */
[data-drag] { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -130%); padding: 3px 10px; border-radius: 999px; background: #0B1220; border: 2px solid #E8B64A; color: #FFFFFF; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 14px #0009; }
.drop-ok { outline: 3px dashed #E8B64A !important; outline-offset: 2px; border-radius: 8px; }
.coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cov { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.cov.gap { border-color: #5A2222; }
.cov .n { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--white); }
.cov.gap .n { color: #FF9A9A; }
.list-row { padding: 10px 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }

/* ----- Leaderboard ----- */
.winner { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; margin-bottom: 32px; padding: 24px; border-radius: 16px; background: #1A1610; border: 1px solid #4A3A1A; }
.winner .medal { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; background: #2A2212; border: 3px solid #E8B64A; flex: none; }
.winner .medal img { width: 64px; height: 64px; object-fit: contain; }
.winner .stat { min-width: 110px; padding: 12px 16px; border-radius: 12px; background: #221C10; }
.winner .stat .k { font-size: 12px; color: #C9B48A; }
.winner .stat .v { font-family: var(--display); font-weight: 700; font-size: 32px; color: var(--white); line-height: 1.1; }
.top-row { display: grid; grid-template-columns: 28px minmax(120px, 190px) minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.top-row .pos { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.top-row .bar { height: 14px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- Codes ----- */
.code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.code-card { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.code-card .code { flex: none; min-width: 64px; padding: 4px 8px; border-radius: 8px; background: var(--panel-2); color: var(--link-hover); font-family: var(--display); font-weight: 700; font-size: 22px; text-align: center; line-height: 1.2; }
.code-card.urgent { border-color: #5A2222; }
.code-card.urgent .code { background: #3A1A1A; color: #FF9A9A; }
.region-dot { width: 28px; height: 28px; border-radius: 50%; color: var(--white); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.search-big { flex: 1 1 320px; min-height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: 16px; }

/* ----- Training ----- */
.week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.day-col { min-width: 0; background: var(--panel-3); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
.day-col.today { border-color: var(--red); }
.day-col .head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); }
.sess { border-radius: 10px; background: var(--panel-2); border-top: 3px solid var(--red); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.btn-sign { min-height: 32px; cursor: pointer; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid var(--line-2); background: transparent; color: var(--text); }
.btn-sign[aria-pressed="true"] { background: #123322; color: #7FE0A8; border-color: #1F5A3A; }
.btn-sign:hover { border-color: #4A5F8F; background: rgba(255,255,255,.04); }
.btn-sign[aria-pressed="true"]:hover { background: #164029; }
.post-session .invite-box { display: none; }
.post-session:has(input[name="visibility"][value="private"]:checked) .invite-box { display: block; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ----- Command / reports ----- */
.review-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--panel); }
.review-row:first-child { border-top: 0; }
.review-row.done { background: #0F1729; }
.region-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.region-tile { padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.region-tile.gap { border-color: #5A2222; }
.region-tile .n { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--white); }
.region-tile.gap .n { color: #FF9A9A; }
.lead-card { flex: 1 1 280px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; }
.lead-card.on { border-color: #8A6A1F; }
.lead-tag { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .5px; background: #3A2E12; color: #F5D27A; }
.debrief-row > button { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 14px; font: inherit; text-align: left; border: 0; background: transparent; color: var(--text); }
.debrief-row { border-top: 1px solid var(--line); background: var(--panel); }
.debrief-row:first-child { border-top: 0; }
.debrief-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--text-2); }
.cmd-group { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cmd-group .row-cmd { padding: 9px 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cmd-group code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--link-hover); }
.check-btn { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 8px; text-align: left; border: 1px solid var(--line); background: transparent; color: var(--text); width: 100%; }
.check-btn .box-mark { flex: none; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: var(--line-2); color: var(--bg); }
.check-btn[aria-pressed="true"] { border-color: #1F5A3A; }
.check-btn[aria-pressed="true"] .box-mark { background: var(--green-dot); }
.rule { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 14px; }
.rule .mark { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--bg); }
.tri { min-width: 54px; text-align: center; padding: 4px 8px; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tri-1 { background: #2A1414; color: #FFB0B0; }
.tri-2 { background: #2A2410; color: #F5D27A; }
.tri-3 { background: #122A1A; color: #7FE0A8; }
.tri-b { background: #141C2C; color: var(--text-3); }

/* ----- Handbook and documents ----- */
.doc-nav { flex: 1 1 260px; max-width: 320px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-size: 14px; }
/* Only keep the contents in view when it sits in its own column beside the documents. On narrower
   screens it stacks above them and must scroll away, or it covers the section you jumped to. */
@media (min-width: 900px) {
  .doc-nav { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
}
@media (max-width: 899px) {
  .doc-nav { max-width: none; }
}
.doc-nav ol, .doc-nav ul { margin: 0 0 14px; padding-left: 20px; line-height: 1.9; color: var(--muted); }
details.doc { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; }
details.doc > summary { display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; }
details.doc > summary::-webkit-details-marker { display: none; }
details.doc > summary .chev { color: var(--link); font-size: 18px; transition: transform .15s; }
details.doc[open] > summary .chev { transform: rotate(90deg); }
details.doc > summary img { width: 40px; height: 48px; object-fit: contain; flex: none; }
.doc-title { display: block; font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--white); line-height: 1.15; }
.doc-body { padding: 0 0 20px; color: var(--text-2); font-size: 14px; display: flex; flex-direction: column; gap: 12px; }
.doc-body h2, .doc-body h3, .doc-body h4 { margin: 8px 0 0; color: var(--white); }
.doc-body h2 { font-family: var(--display); font-size: 24px; }
.doc-body h3 { font-size: 16px; }
.doc-body p { margin: 0; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-body .table-wrap { border-radius: 10px; }
.doc-body th { background: var(--panel-2); color: var(--white); text-align: left; padding: 9px 12px; }
.doc-body td { padding: 8px 12px; border-top: 1px solid var(--line); }
.design-doc details > summary { cursor: pointer; list-style: none; }
.design-doc details > summary::-webkit-details-marker { display: none; }
.design-doc details[open] > summary .chev { transform: rotate(90deg); }
details.doc-section { border-top: 1px solid var(--line); }
details.doc-section > summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--white); }
details.doc-section > summary::-webkit-details-marker, details.debrief-row > summary::-webkit-details-marker, details.note-form > summary::-webkit-details-marker { display: none; }
details.doc-section > summary .chev { color: var(--link); font-size: 16px; transition: transform .15s; }
details.doc-section[open] > summary .chev { transform: rotate(90deg); }
.doc-section-body { padding: 0 0 16px 26px; display: flex; flex-direction: column; gap: 10px; }
.doc-body ul, .doc-body ol { margin: 0; padding-left: 22px; }
.doc-body li { margin: 2px 0; }
.doc-body .doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-body .doc-table td, .doc-body .doc-table th { vertical-align: top; border-top: 1px solid var(--line); }
.doc-body .doc-table tr:first-child td, .doc-body .doc-table tr:first-child th { border-top: 0; }
.doc-img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; }
.db-name { color: var(--white); font-weight: 600; border-bottom: 1px dotted var(--muted); }
.doc-locked { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: #0F1729; border: 1px dashed var(--line-2); border-radius: 14px; }
.doc-locked img { width: 40px; height: 48px; object-fit: contain; flex: none; opacity: .45; }
.notice { padding: 10px 14px; border-radius: 10px; background: #2A1414; border: 1px solid #5A2222; color: #FFD0D0; }
.notice strong { color: var(--white); }
.notice-info { background: #13283A; border-color: #23435E; color: #CFE4FF; }
.command-strip { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 14px; border-radius: 10px; background: var(--panel-2); font-size: 13px; color: var(--text-3); }
.command-strip strong { color: var(--white); }
.dashed { padding: 14px 18px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 14px; }

/* ----- Departments ----- */
.dept-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.dept-card .head { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: var(--panel-2); }
.dept-card .head img { width: 56px; height: 66px; object-fit: contain; }
.dept-card .body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.dept-card .foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.dept-card ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 14px; }

/* ----- Login ----- */
.login-card { max-width: 520px; margin: 40px auto; }
.btn-discord { background: #5865F2; }

/* ----- HR & Training ----- */
.pipe { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: pipe; }
.pipe li { counter-increment: pipe; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-3); font-size: 13px; }
.pipe li::before { content: counter(pipe); font-weight: 700; }
.pipe li.done { border-color: #2E5A3E; color: #7FE0A8; }
.pipe li.done::before { content: '✓'; }
.pipe li.now { border-color: var(--red); background: var(--sel-bg); color: var(--white); }
.qa { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 16px; margin: 12px 0 0; font-size: 14px; }
.qa dt { color: var(--muted); }
.qa dd { margin: 0; color: var(--text); }
@media (max-width: 600px) { .qa { grid-template-columns: 1fr; } .qa dd { margin-bottom: 6px; } }
/* Application answers: each question above its answer, full width. */
.qa.answers { grid-template-columns: 1fr; gap: 4px; }
.qa.answers dt { color: var(--muted); font-weight: 600; }
.qa.answers dd { margin: 0 0 12px; padding-left: 12px; border-left: 2px solid #22304D; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { padding: 10px 0 10px 14px; border-left: 2px solid var(--line-2); margin-left: 4px; }
.timeline li.pub { border-left-color: #2F5D8A; }
.stage-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.stage { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stage.done strong { color: #7FE0A8 !important; }
.answers { display: flex; flex-direction: column; gap: 6px; }
.answer-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; color: var(--text); }
.answer-opt:has(input:checked) { border-color: var(--red); background: var(--sel-bg); }
.answer-opt input { margin-top: 3px; accent-color: var(--red); }
.answer { white-space: pre-wrap; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: #0F1A2E; color: var(--text); font-size: 14px; }
.exam-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: #16213A; border: 1px solid var(--line-2); color: var(--white); }
.exam-bar.low { border-color: var(--red); background: #3A1A1A; }
main.design-doc { width: 100%; }

/* ----- Ask MedNet: the help chat ----- */
.ask { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ask-fab { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid #3B4F7A; background: #1B2B4A; color: var(--white); font: 600 15px var(--body); cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.ask-fab:hover { background: #22365C; }
.ask.open .ask-fab { background: var(--red); border-color: var(--red); }
.ask-panel { order: -1; width: min(420px, calc(100vw - 32px)); height: min(600px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.6); overflow: hidden; }
.ask-panel[hidden] { display: none; }
.ask-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.ask-title { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--white); line-height: 1.1; }
.ask-sub { font-size: 12px; color: var(--muted); }
.ask-close { border: 0; background: none; color: var(--text-3); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ask-close:hover { color: var(--white); }
.ask-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ask-msg { max-width: 92%; font-size: 14px; }
.ask-msg p { margin: 0 0 8px; }
.ask-me { align-self: flex-end; background: #1B2B4A; border: 1px solid #2F4570; color: var(--white); padding: 8px 12px; border-radius: 12px 12px 2px 12px; }
.ask-bot { align-self: flex-start; color: var(--text-2); }
.ask-wait { color: var(--muted); font-style: italic; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chips .chip { min-height: 32px; font-size: 13px; cursor: pointer; }
.ask-card { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.ask-src { display: block; font-size: 12px; font-weight: 600; color: var(--link-hover); margin-bottom: 4px; }
.ask-text { color: #E6E8EC; white-space: pre-line; }
.ask-text mark { background: #3A2E12; color: #FFE3A3; border-radius: 3px; padding: 0 2px; }
.ask-more { font-size: 12px; }
.ask-foot, .ask-lead { font-size: 12px; color: var(--muted); }
.ask-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--panel-2); }
.ask-form .input { min-height: 40px; }
@media (max-width: 760px) {
  .ask { right: 12px; bottom: 12px; }
  .ask-fab span { display: none; }
  .ask-fab { width: 48px; padding: 0; justify-content: center; }
  .ask.open { left: 12px; top: 12px; }
  .ask-panel { width: 100%; height: auto; flex: 1; }
}
@media print { .ask { display: none; } }

/* ----- Handbook: search bar, numbered sections, section links ----- */
.hb-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: sticky; top: 0; z-index: 5; padding: 10px 0; background: var(--bg, #0B1220); }
.doc-section > summary { display: flex; align-items: center; gap: 8px; }
.sec-n { min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: #1B2945; color: #9CC8FF; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sec-link { color: #5A6A8A; font-weight: 700; padding: 0 6px; text-decoration: none; opacity: 0; }
.doc-section > summary:hover .sec-link, .sec-link:focus { opacity: 1; }
.doc-section.cover > summary { color: #9AA1AD; font-style: italic; }
  

/* ----- The newer look, everywhere (27 Oct) -----
   Section headings carry the red accent from the menu; "nothing here yet" lines become calm panels; form
   cards get a titled header; tiles and cards lift a little on hover when they're links. */
h2.block { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2.block::before { content: ''; width: 4px; height: 0.85em; border-radius: 2px; background: var(--red); flex: none; }
.form-card { border-top: 3px solid var(--red); background: linear-gradient(180deg, #16213A 0, var(--panel) 120px); }
.form-card > .h-display:first-child, .form-card > div:first-child > .h-display:first-child { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
details.form-card > summary, details.card > summary { list-style: none; }
details.form-card > summary::-webkit-details-marker, details.card > summary::-webkit-details-marker { display: none; }
/* Empty states: a muted line straight after a heading or note shows as a soft panel. */
h2.block + p.muted, .block-note + p.muted, h3 + p.muted, section > p.muted:only-of-type, div:empty + p.muted,
.box > .list-row:only-child > .small.muted:only-child { display: block; padding: 14px 18px; border-radius: 12px; border: 1px dashed var(--line-2); background: rgba(255,255,255,0.015); }
.box > .list-row:only-child > .small.muted:only-child { border: 0; background: none; padding: 4px 0; }
a.tile { transition: border-color .15s ease, transform .15s ease; }
a.tile:hover { border-color: #3B4F7A; transform: translateY(-2px); text-decoration: none; }
.lede { font-size: 15px; color: var(--text-3); max-width: 900px; }
.card-head { border-bottom: 1px solid var(--line); }
.box { border-radius: 12px; }
.list-row:hover { background: rgba(255,255,255,0.02); }
.pill { font-weight: 600; }

/* ----- Your shift strip (home) ----- */
.your-shift { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 22px; align-items: center; padding: 16px 20px; margin-top: 18px; border-left: 4px solid var(--red); background: linear-gradient(90deg, #1A2540, var(--panel) 40%); }
@media (max-width: 760px) { .your-shift { grid-template-columns: auto 1fr; } }

/* ----- Each area's banner colour (layout.js tags the page with its area) ----- */
.hero .wrap { z-index: 2; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: color; opacity: .55; background: transparent; }
.area-duty .hero::before { background: #1F8A55; }
.area-handbook .hero::before { background: #2F6FDB; }
.area-people .hero::before { background: #C08A2E; }
.area-training-jobs .hero::before { background: #3B6FD6; }
.area-help .hero::before { background: #2BB3A3; }
.area-manage .hero::before { background: #B8892A; }
.area-hr .hero::before { background: #7A4FD6; }
.area-ia .hero::before { background: #B7323C; }
.area-duty .hero::after { background: linear-gradient(90deg, rgba(8,26,18,.94) 0%, rgba(8,26,18,.7) 50%, rgba(8,26,18,.2) 100%); }
.area-handbook .hero::after, .area-training-jobs .hero::after { background: linear-gradient(90deg, rgba(8,16,36,.94) 0%, rgba(8,16,36,.7) 50%, rgba(8,16,36,.2) 100%); }
.area-manage .hero::after, .area-people .hero::after { background: linear-gradient(90deg, rgba(28,20,8,.94) 0%, rgba(28,20,8,.7) 50%, rgba(28,20,8,.2) 100%); }
.area-hr .hero::after { background: linear-gradient(90deg, rgba(20,12,36,.94) 0%, rgba(20,12,36,.7) 50%, rgba(20,12,36,.2) 100%); }
.area-ia .hero::after { background: linear-gradient(90deg, rgba(32,8,12,.94) 0%, rgba(32,8,12,.7) 50%, rgba(32,8,12,.2) 100%); }
.area-help .hero::after { background: linear-gradient(90deg, rgba(6,26,26,.94) 0%, rgba(6,26,26,.7) 50%, rgba(6,26,26,.2) 100%); }
.hero .wrap::after { content: ''; position: absolute; left: 0; bottom: 18px; width: 64px; height: 3px; border-radius: 2px; background: var(--red); opacity: .9; }
.area-duty .hero .wrap::after { background: #3FC27A; } .area-hr .hero .wrap::after { background: #9B6BFF; } .area-manage .hero .wrap::after, .area-people .hero .wrap::after { background: #E8B64A; }
.area-handbook .hero .wrap::after, .area-training-jobs .hero .wrap::after { background: #4C8DFF; } .area-help .hero .wrap::after { background: #2BB3A3; }

/* ----- Phone bottom bar ----- */
.bottom-bar { display: none; }
@media (max-width: 760px) {
  .bottom-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(13,21,38,.97); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
  .bb-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; padding: 4px 6px; border-radius: 10px; color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none; }
  .bb-item[aria-current="page"] { color: var(--white); background: #16213A; }
  .bb-item[aria-current="page"] svg { color: #FF7A84; }
  body { padding-bottom: 72px; }
  .ask { bottom: 84px; }
}

/* ----- Pop-up confirmations ----- */
.toasts { position: fixed; top: 76px; right: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.45); font-size: 14px; animation: toast-in .25s ease-out; }
.toast.ok { background: #123322; border: 1px solid #2B7A50; color: #D7F7E5; }
.toast.bad { background: #3A1A1A; border: 1px solid #8A3A3A; color: #FFE0E0; }
.toast button { margin-left: auto; background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .7; }
.toast.out { animation: toast-out .3s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }
@media (max-width: 760px) { .toasts { top: auto; bottom: 84px; left: 16px; right: 16px; max-width: none; } }

/* ----- The map: units on a call pulse in their status colour ----- */
.unit-badge { position: relative; transition: transform .15s ease; }
.unit-badge:hover { transform: scale(1.08); z-index: 3; }
.unit-badge.st-enroute::after, .unit-badge.st-onscene::after, .unit-badge.st-transporting::after { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid var(--st); animation: unit-pulse 1.6s ease-out infinite; pointer-events: none; }
@keyframes unit-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.map-legend { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 12px; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 10px; background: #0B1220DD; border: 1px solid #22304D; font-size: 11px; color: #D5D8DE; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.map-legend i.pulse { box-shadow: 0 0 0 0 currentColor; animation: legend-pulse 1.6s ease-out infinite; }
@keyframes legend-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 100% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .unit-badge::after, .map-legend i.pulse { animation: none !important; } }

/* ----- The live map: regions tinted by coverage over the plain map ----- */
.map-region { position: absolute; inset: 1px; border-radius: 11px; background: var(--tint); opacity: .30; pointer-events: none; z-index: 0;
  -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; transition: background-color .4s, opacity .4s; }
.map-region.gap { opacity: .36; animation: region-gap 2.4s ease-in-out infinite; }
@keyframes region-gap { 50% { opacity: .22; } }
.map-borders { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 11px; opacity: .8; pointer-events: none; z-index: 0; }
.map-label { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; z-index: 1; pointer-events: none; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: clamp(10px, 2.1cqw, 19px); letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF;
  text-shadow: 0 1px 2px #0B1220, 0 0 6px #0B1220CC; }
.map-label b { display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--tint); border: 2px solid #FFFFFF; font-size: .8em; text-shadow: none; box-shadow: 0 1px 4px #0008; }
.map-label.sm { font-size: 10px; gap: 3px; }
.map-legend .cov i { border-radius: 3px; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .map-region.gap { animation: none; } }
.unit-map { container-type: inline-size; }

/* ----- New-hire journey strip (views/journey.js) ----- */
.journey { display: flex; align-items: flex-start; gap: 0; width: 100%; }
.j-step { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.j-step::before { content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: #22304D; z-index: 0; }
.j-step:first-child::before { display: none; }
.j-step.done::before, .j-step.cur::before { background: #3FC27A; }
.j-step i { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #3A4A6B; background: #0B1220; }
.j-step.done i { background: #3FC27A; border-color: #3FC27A; }
.j-step.cur i { border-color: #9CC8FF; box-shadow: 0 0 0 3px #9CC8FF33; }
.j-step.cur.stuck i { border-color: #FF7A84; box-shadow: 0 0 0 3px #FF7A8433; }
.j-step small { margin-top: 6px; font-size: 10px; line-height: 1.2; color: #8A93A5; text-align: center; padding: 0 2px; overflow-wrap: anywhere; }
.j-step.done small { color: #C9CDD5; }
.j-step.cur small { color: #FFFFFF; font-weight: 600; }
.j-step small b { color: #9CC8FF; font-weight: 700; }
.journey-row { gap: 14px; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .journey.with-labels .j-step small { display: none; } .journey.with-labels .j-step.cur small { display: block; position: absolute; top: 18px; white-space: nowrap; } .journey.with-labels { padding-bottom: 22px; } }

/* ----- Building blocks (views/ui.js): intro strip, card grid, link cards, tags, list rows ----- */
.ui-intro { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 0% 0%, rgba(210,58,69,.16) 0%, rgba(210,58,69,0) 55%), linear-gradient(135deg, #131D33 0%, #0F182A 100%); }
.ui-intro-title { font-family: var(--display); font-size: 26px; font-weight: 700; color: #FFFFFF; line-height: 1.1; margin-bottom: 4px; }
.ui-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-stats span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 13px; color: #C9CDD5; }
.ui-stats b { color: #FFFFFF; font-size: 15px; margin-right: 2px; }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 12px; }
.ui-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 14px; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, #141F36 0%, #101A2D 100%); border: 1px solid var(--line); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; overflow: hidden; }
.ui-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--red); opacity: .8; }
.ui-card.closed::before { background: #3A4A6B; }
.ui-card:hover { transform: translateY(-2px); border-color: #3A4D78; box-shadow: 0 10px 28px rgba(0,0,0,.35); text-decoration: none; }
.ui-card:focus-visible { outline: 2px solid #9CC8FF; outline-offset: 2px; }
.ui-card-top { display: flex; gap: 12px; align-items: flex-start; }
.ui-patch { width: 40px; height: 46px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.ui-title { color: #FFFFFF; font-weight: 700; font-size: 17px; line-height: 1.25; }
.ui-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ui-tag { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: #C9CDD5; border: 1px solid rgba(255,255,255,.06); }
.ui-tag.tone-amber { background: rgba(232,182,74,.12); color: #F5D27A; border-color: rgba(232,182,74,.25); }
.ui-tag.tone-blue { background: rgba(76,141,255,.12); color: #9CC8FF; border-color: rgba(76,141,255,.25); }
.ui-tag.tone-purple { background: rgba(155,107,255,.12); color: #C9B2FF; border-color: rgba(155,107,255,.25); }
.ui-state { flex: none; font-size: 11px; font-weight: 700; color: #8A93A5; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ui-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3A4A6B; }
.ui-state.on { color: #7FE0A8; }
.ui-state.on::before { background: #3FC27A; box-shadow: 0 0 0 3px rgba(63,194,122,.18); }
.ui-who { font-size: 13px; color: #AEB5C2; flex: 1; }
.ui-go { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; padding: 7px 14px; border-radius: 9px; background: var(--red); color: #FFFFFF; font-weight: 700; font-size: 13px; transition: background .15s ease, gap .15s ease; }
.ui-card:hover .ui-go { background: #E5434E; gap: 9px; }
.ui-sent { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ui-sent-row { display: flex; gap: 10px; align-items: center; padding: 10px 14px; text-decoration: none; color: inherit; background: var(--panel); }
.ui-sent-row + .ui-sent-row { border-top: 1px solid var(--line); }
.ui-sent-row:hover { background: #16213A; text-decoration: none; }
.ui-sent-title { flex: 1; min-width: 0; color: #FFFFFF; font-weight: 600; }

/* ----- Join AMS ----- */
.join-welcome { position: relative; display: flex; gap: 20px; align-items: center; padding: 24px 26px; margin-bottom: 16px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, rgba(210,58,69,.22) 0%, rgba(210,58,69,0) 60%), linear-gradient(135deg, #15203A 0%, #0E1628 100%); }
.join-welcome-text { flex: 1; min-width: 0; }
.join-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FF8A93; }
.join-title { font-family: var(--display); font-size: clamp(30px, 5vw, 42px); line-height: 1.05; color: #FFFFFF; margin: 6px 0 8px; }
.join-welcome p { margin: 0 0 14px; color: #C9CDD5; max-width: 560px; }
.join-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.join-facts span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #E6E8EC; }
.join-welcome-patch { width: 120px; height: auto; flex: none; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
@media (max-width: 600px) { .join-welcome-patch { display: none; } .join-welcome { padding: 20px; } }
.join-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: none; }
.join-step { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 14px 0; }
.join-step + .join-step { padding-left: 16px; }
.join-step::after { content: ''; position: absolute; top: 31px; left: 46px; right: 0; height: 2px; background: var(--line); }
.join-step + .join-step::after { left: 62px; }
.join-step:last-child::after { display: none; }
.join-step.done::after { background: #3FC27A; }
.join-num { position: relative; z-index: 1; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--panel-2); border: 2px solid var(--line-2); color: #C9CDD5; }
.join-step.cur .join-num { background: var(--red); border-color: var(--red); color: #FFFFFF; box-shadow: 0 0 0 5px rgba(210,58,69,.2); }
.join-step.done .join-num { background: #3FC27A; border-color: #3FC27A; color: #0B1220; }
.join-step > div { position: relative; z-index: 1; padding-top: 4px; background: var(--bg, #0B1220); padding-right: 8px; }
.join-step-title { font-weight: 700; color: #FFFFFF; }
.join-step-text { font-size: 13px; color: #AEB5C2; }
@media (max-width: 640px) {
  .join-steps { grid-template-columns: 1fr; }
  .join-step, .join-step + .join-step { padding: 8px 0; }
  .join-step::after, .join-step + .join-step::after { top: 42px; left: 16px; right: auto; width: 2px; height: calc(100% - 34px); }
}
.join-reqs { padding: 14px 18px; margin-bottom: 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.join-reqs-title { font-weight: 700; color: #FFFFFF; margin-bottom: 8px; }
.join-reqs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 6px 18px; }
.join-reqs li { position: relative; padding-left: 24px; color: #D5D8DE; font-size: 14px; }
.join-reqs li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; background: rgba(63,194,122,.15); color: #3FC27A; font-size: 11px; font-weight: 800; display: grid; place-items: center; margin-top: 2px; }
.join-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; margin-bottom: 12px; }
.join-pick-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 44px; position: relative; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: inherit; transition: border-color .15s ease, background .15s ease; }
.join-pick-card::before { content: ''; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); }
.join-pick-card:hover { border-color: #3A4D78; text-decoration: none; }
.join-pick-card.on { border-color: var(--red); background: linear-gradient(180deg, rgba(210,58,69,.12) 0%, rgba(210,58,69,.04) 100%); }
.join-pick-card.on::before { border-color: var(--red); background: radial-gradient(circle, var(--red) 0 4px, transparent 5px); }
.join-pick-title { font-weight: 700; color: #FFFFFF; }
.join-pick-text { font-size: 13px; color: #AEB5C2; }
.join-form { gap: 14px; }
.join-form-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.join-submit { align-self: stretch; min-height: 50px; font-size: 16px; }

/* =====================================================================================================
   House style (from the Applications and Join AMS redesign): depth from a soft top-down gradient, a
   14px radius, quiet borders that brighten on hover, tags with a tinted border, and red as the one
   action colour. Shared by every page; new pages use views/ui.js, which builds on these.
   ===================================================================================================== */
:root { --card-grad: linear-gradient(180deg, #141F36 0%, #101A2D 100%); --card-hover: #3A4D78; --shadow-lift: 0 10px 28px rgba(0,0,0,.35); }
.card, .box, .tile { background: var(--card-grad); border-color: var(--line); }
.card, .box { border-radius: 14px; }
.box { overflow: hidden; }
.tile { border-radius: 14px; position: relative; overflow: hidden; }
.tile .label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A93A5; }
.tile .value { margin-top: 2px; }
a.tile, a.card { color: inherit; text-decoration: none; }
a.tile, a.card, .lift { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
a.tile:hover, a.card:hover, .lift:hover { transform: translateY(-2px); border-color: var(--card-hover) !important; box-shadow: var(--shadow-lift); text-decoration: none; }
a.tile:focus-visible, a.card:focus-visible { outline: 2px solid #9CC8FF; outline-offset: 2px; }
.list-row { transition: background .12s ease; }
a.list-row { color: inherit; text-decoration: none; }
a.list-row:hover, .list-row:hover { background: rgba(255,255,255,.035); text-decoration: none; }
.box > .list-row:first-child, .box > .review-row:first-child { border-top: 0; }
.review-row { background: transparent; }
.card-head { background: rgba(255,255,255,.03); }
/* Tags: a tint, a matching hairline border. */
.pill { border: 1px solid rgba(255,255,255,.07); letter-spacing: .01em; }
.pill-amber { background: rgba(232,182,74,.12); color: #F5D27A; border-color: rgba(232,182,74,.28); }
.pill-green { background: rgba(63,194,122,.12); color: #7FE0A8; border-color: rgba(63,194,122,.28); }
.pill-red { background: rgba(229,83,75,.13); color: #FF9A9A; border-color: rgba(229,83,75,.3); }
.pill-blue { background: rgba(76,141,255,.12); color: #9CC8FF; border-color: rgba(76,141,255,.28); }
.pill-grey { background: rgba(255,255,255,.05); color: #C9CDD5; border-color: rgba(255,255,255,.09); }
/* Tabs and alerts. */
.seg { border-radius: 12px; background: rgba(255,255,255,.025); }
.seg a, .seg button { border-radius: 9px; transition: background .12s ease, color .12s ease; }
.seg a:not(.on):not([aria-current="page"]):hover { background: rgba(255,255,255,.05); }
.alert { border-radius: 12px; border-left-width: 4px; }
/* Buttons: a touch of depth. */
.btn:not(.btn-ghost):not(.btn-outline):not(.btn-danger-ghost):not(:disabled) { box-shadow: 0 2px 10px rgba(210,58,69,.18); }
.btn-ghost { border-color: #3A4D78; }
.form-card { border-radius: 14px; }
.ui-tag.tone-green { background: rgba(63,194,122,.12); color: #7FE0A8; border-color: rgba(63,194,122,.25); }
.ui-tag.tone-red { background: rgba(229,83,75,.13); color: #FF9A9A; border-color: rgba(229,83,75,.3); }
.ui-icon { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.ui-card[style*="--accent"]::before { background: var(--accent); }
.ui-card.quiet::before { background: #3A4A6B; }
.ui-section { display: flex; flex-direction: column; gap: 0; }
.ui-empty { padding: 18px 20px; border-radius: 14px; border: 1px dashed var(--line-2); background: rgba(255,255,255,.015); color: var(--muted); font-size: 14px; }
.ui-row-meta { font-size: 13px; color: var(--muted); }
.ui-sent-row .pill { flex: none; }
.pill-purple { background: rgba(155,107,255,.14); color: #C9B2FF; border-color: rgba(155,107,255,.32); }
.phase-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.phase-tags .pill { font-size: 11px; padding: 0 7px; }

/* Exam result: where to review */
.exam-review { border: 1px solid rgba(240, 180, 60, .35); background: linear-gradient(180deg, rgba(240, 180, 60, .10), rgba(240, 180, 60, .04)); border-radius: 12px; padding: 12px 14px; }
.exam-review-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.exam-review-head strong { color: #FFD38A; font-size: 15px; }
.exam-review ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.exam-review li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(10, 16, 28, .55); }
.exam-review li a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
.exam-review li a::before { content: '📖 '; }
.exam-review li a:hover { text-decoration: underline; }

/* Guide: Command on MedNet */
.cmd-topic { padding: 16px 18px; scroll-margin-top: 90px; }
.cmd-topic h3 { margin: 0 0 8px; font-size: 17px; color: #FFFFFF; }
.cmd-topic ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #D5D8DE; font-size: 14px; line-height: 1.5; }
.cmd-topic:target { outline: 2px solid #E8B64A; outline-offset: 2px; }
.cmd-table { margin-top: 10px; font-size: 13px; }
.cmd-table td:first-child { white-space: nowrap; color: #FFFFFF; font-weight: 600; }
.cmd-topic.cmd-wide { grid-column: 1 / -1; }
.cmd-table th { text-align: left; }
.cmd-table td { vertical-align: top; }

/* About AMS: hours per region */
.about-bar { display: grid; grid-template-columns: 110px 1fr 70px; gap: 10px; align-items: center; padding: 4px 0; color: #E6E8EC; font-size: 14px; }
.about-track { height: 10px; border-radius: 999px; background: #1B2540; overflow: hidden; }
.about-track > span { display: block; height: 100%; border-radius: 999px; min-width: 3px; }

/* ===================== Phones (760px and under) =====================
   One slim header row (the bottom bar has Duty, Search and Menu), the menu as a sheet above the bottom
   bar, slimmer banners, swipeable tab and filter rows, two-up stat tiles, and 16px inputs so phones
   don't zoom in on forms. Many views set sizes inline, hence the !important on a few of these. */
@media (max-width: 760px) {
  body { font-size: 15px; -webkit-text-size-adjust: 100%; }
  /* Solid, not blurred: a backdrop-filter would make the fixed menu sheet position itself inside the header */
  .site-header { position: sticky; top: 0; background: var(--panel); }
  .site-header .wrap { padding-top: 8px; padding-bottom: 8px; flex-wrap: nowrap; gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand img { width: 28px; height: 32px; }
  .brand-name { font-size: 22px; }
  .brand-sub { display: none; }
  .header-tools { flex: 1 1 auto; flex-basis: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; min-width: 0; }
  .bell { width: 38px; height: 38px; border-radius: 10px; }
  .user-chip .avatar { width: 34px; height: 34px; }
  body.with-bb .header-tools .btn-clock, body.with-bb .header-tools a[href="/search"] { display: none; }
  body.with-bb .mobile-nav > summary { display: none; }
  body.with-bb .mobile-nav[open]::before { content: ''; position: fixed; inset: 0; z-index: 58; background: rgba(4,8,16,.6); animation: fade-in .15s ease-out; }
  body.with-bb .mobile-menu { position: fixed; left: 0; right: 0; top: auto; bottom: calc(62px + env(safe-area-inset-bottom)); margin: 0; max-height: min(74vh, 640px); padding: 6px 10px 12px;
    border-radius: 20px 20px 0 0; border-bottom: 0; box-shadow: 0 -16px 40px rgba(0,0,0,.5); animation: sheet-in .2s ease-out; }
  body.with-bb .mobile-menu::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 4px auto 6px; }
  .mobile-menu a { padding: 10px 12px; min-height: 44px; }
  .mobile-head { padding-top: 10px; }

  /* Banners */
  .hero { height: 88px; }
  .hero .wrap { gap: 12px; }
  .hero .patch { width: 34px; height: 40px; }
  .hero h1 { font-size: 28px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  .hero .wrap::after { bottom: 8px; width: 40px; height: 2px; }
  .hero-home { height: 140px; }

  /* Page spacing and type */
  main.page { padding: 16px 14px 32px; }
  main [style*="font-size: 44px"] { font-size: 32px !important; }
  main [style*="font-size: 40px"], main [style*="font-size: 36px"] { font-size: 28px !important; }
  h2.block { font-size: 22px; margin-top: 18px; }
  .lead { font-size: 15px; }
  .card.pad, .form-card { padding: 16px !important; }
  .row { gap: 16px !important; }

  /* Tabs and filter chips: one row you swipe along, instead of wrapping onto several lines */
  .seg { display: flex !important; flex-wrap: nowrap !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .seg::-webkit-scrollbar { display: none; }
  .seg a, .seg button { flex: none; white-space: nowrap; min-height: 38px; padding: 0 14px; scroll-snap-align: start; }
  .chips:has(> a.chip) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-right: -14px; padding-right: 14px; }
  .chips:has(> a.chip)::-webkit-scrollbar { display: none; }
  .chips:has(> a.chip) > a.chip { flex: none; white-space: nowrap; display: inline-flex; align-items: center; }

  /* Stat tiles: two to a row, compact */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .tile { padding: 10px 12px !important; border-radius: 12px; }
  .tile .label { font-size: 10.5px; letter-spacing: .05em; }
  .tile .value { font-size: 24px !important; line-height: 1.15; overflow-wrap: anywhere; }
  .tile .small { font-size: 12px; }

  /* Forms: 16px text so iOS doesn't zoom in, and finger-sized controls */
  .input, .select, .textarea, input[type="text"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea { font-size: 16px !important; }
  .btn, .btn-ok, .btn-esc { min-height: 44px; }
  .btn.btn-sm { min-height: 38px; }
  .fields { grid-template-columns: 1fr !important; }

  /* Dropdowns with long options never push the page sideways */
  select, .select { max-width: 100%; }
  /* Long words and links never push the page sideways */
  main { overflow-wrap: anywhere; }
  pre, code { white-space: pre-wrap; }


  /* Tall tables scroll with the page, not inside their own box */
  .table-wrap.tall { max-height: none; overflow: auto visible; }
  /* The unit map: the key under the map is enough on a phone, so the one over the map goes; labels stay inside */
  .unit-map { overflow: clip; }
  .unit-map .map-legend { display: none; }
  /* Duty clock and profile headers: compact, one row */
  .clock-id { flex-wrap: nowrap; gap: 12px; padding: 14px 16px; }
  .clock-id .insig { width: 40px; height: 40px; }
  .clock-id .patch { width: 34px; height: 40px; }
  main section.card > div[style*="padding: 22px 24px"] { padding: 16px !important; gap: 12px !important; }
  main section.card > div[style*="padding: 22px 24px"] > div[style*="width: 96px"] { width: 64px !important; height: 64px !important; }
  main section.card > div[style*="padding: 22px 24px"] > div[style*="width: 96px"] img { max-width: 42px !important; max-height: 42px !important; }
  main section.card > div[style*="padding: 22px 24px"] img[src*="patch"] { width: 52px !important; height: 60px !important; }
  /* Handbook contents: a short scrolling box, so the documents start on the first screen */
  .doc-nav { max-height: 240px; overflow: auto; padding: 12px 14px; }
  details.doc { padding: 0 14px; }
  /* The Ask button sits clear of the bottom bar and is a bit smaller */
  .ask { right: 12px; }
  body.with-bb:has(.mobile-nav[open]) .ask { display: none; }
}
.phone-only { display: none; }
@media (max-width: 760px) { .wide-only { display: none; } .phone-only { display: inline; } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Join the AMS Discord, then log in (Join AMS, Ride along) */
.dc-steps { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dc-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; text-decoration: none; }
.dc-step:hover { border-color: #5865F2; text-decoration: none; color: inherit; }
.dc-step.hot { border-color: #5865F2; box-shadow: 0 0 0 3px rgba(88,101,242,.25); }
.dc-step > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-step strong { color: #FFFFFF; }
.dc-step small { color: #AEB5C2; font-size: 13px; }
.dc-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #5865F2; color: #FFFFFF; font-weight: 800; }
.dc-go { flex: none; color: #9AA6FF; font-weight: 700; font-size: 14px; }
@media (max-width: 760px) { .dc-go { display: none; } }
.ptr { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 95; padding: 6px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--white); font-size: 13px; font-weight: 600; pointer-events: none; }

/* Rate your care */
.fb-code { font-family: ui-monospace, monospace; font-size: 22px !important; letter-spacing: .15em; text-transform: uppercase; max-width: 220px; }
.stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 38px; line-height: 1; color: #3A4560; cursor: pointer; transition: color .1s; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #F5C451; }
.stars input:focus-visible + label { outline: 2px solid var(--link-hover); outline-offset: 2px; border-radius: 4px; }
.fb-avg { font-family: var(--display); font-size: 30px; font-weight: 700; color: #F5C451; }

/* Remind me later (notifications) */
.snooze { position: relative; }
.snooze > summary { list-style: none; padding: 4px 8px; }
.snooze > summary::-webkit-details-marker { display: none; }
.snooze-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #101A2E; border: 1px solid #22304D; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); min-width: 170px; }
.snooze-menu .btn { justify-content: flex-start; }

/* First weeks checklist */
.meter { height: 6px; border-radius: 3px; background: #22304D; overflow: hidden; }
.meter > span { display: block; height: 100%; background: #3FC27A; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.checklist li { color: #E6E8EC; }
.checklist li.done { color: #8C94A3; text-decoration: line-through; }
.checklist li > span { display: inline-block; width: 18px; color: #3FC27A; }

/* Media library */
.media-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; margin-bottom: 8px; background: var(--bg, #0B1220); }
.media-bar > .input { flex: 0 1 280px; }
.media-bar > .chips { flex: 1 1 100%; gap: 6px; }
.media-upload { margin-bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.media-drop { flex: 2 1 320px; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border: 2px dashed #2E3E60; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.media-drop:hover, .media-drop.over { border-color: var(--link-hover, #7FB2FF); background: #121D33; }
.media-drop.busy { opacity: .7; pointer-events: none; }
.media-group { margin-bottom: 28px; scroll-margin-top: 130px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.media-tile { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: #101A2E; border: 1px solid #1E2B47; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; min-width: 0; }
.media-tile:hover, .media-tile:focus-visible { transform: translateY(-2px); border-color: #3A5287; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.media-tile:focus-visible { outline: 2px solid var(--link-hover, #7FB2FF); outline-offset: 2px; }
.media-thumb { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; padding: 10px; background: radial-gradient(circle at 50% 40%, #1C2A47 0%, #0E1729 75%); }
.media-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.media-name { color: #FFFFFF; font-weight: 600; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.media-meta { color: #8C94A3; font-size: 12px; }
.media-view { width: min(980px, 94vw); max-height: 92vh; padding: 0; border: 1px solid #22304D; border-radius: 16px; background: #0E1729; color: #E6E8EC; }
.media-view[open] { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.media-view::backdrop { background: rgba(4, 8, 16, .78); backdrop-filter: blur(3px); }
.media-view-img { display: grid; place-items: center; padding: 28px; min-height: 320px; background: radial-gradient(circle at 50% 45%, #1C2A47 0%, #0A1222 80%); }
.media-view-img img { max-width: 100%; max-height: 74vh; object-fit: contain; filter: drop-shadow(0 10px 28px rgba(0,0,0,.5)); }
.media-view-side { padding: 22px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid #1E2B47; }
.media-view-name { font-family: var(--display); font-size: 22px; font-weight: 700; color: #FFFFFF; }
.media-edit { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #1E2B47; padding-top: 12px; margin-top: auto; }
@media (max-width: 760px) {

  .media-bar > .input { flex: 1 1 100%; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .media-tile { padding: 8px; }
  .media-name { font-size: 13px; }
  .media-view[open] { grid-template-columns: 1fr; overflow: auto; }
  .media-view-side { border-left: 0; border-top: 1px solid #1E2B47; padding: 16px; }
  .media-view-img { min-height: 220px; padding: 18px; }
}

/* Qualification badges */
.qual-badge { width: 52px; height: 52px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.qual-badge.sm { width: 26px; height: 26px; }
.media-season { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #1E2B47; padding-top: 10px; }

/* Seasonal: the hidden pumpkin or present, bats and snow (season.js) */
body[class*="season-"] { position: relative; }
.hunt-item { position: absolute; z-index: 6; width: 30px; height: 30px; padding: 0; border: 0; background: none; font-size: 22px; line-height: 30px; text-align: center; cursor: pointer; opacity: .5; transform: translate(-50%, -50%) rotate(-8deg); transition: opacity .2s, transform .2s; }
.hunt-item:hover, .hunt-item:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1.5) rotate(8deg); }
.hunt-item.got { animation: hunt-got .7s ease-out forwards; }
@keyframes hunt-got { to { opacity: 0; transform: translate(-50%, -160%) scale(2.2) rotate(30deg); } }
.hunt-toast { position: fixed; left: 50%; bottom: 90px; z-index: 60; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: #1A1206; border: 1px solid #F28C28; color: #FFE2C2; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
body.season-christmas .hunt-toast { background: #08170F; border-color: #3FC27A; color: #D9F7E5; }
.foot-season { text-decoration: none; margin-left: 6px; }
.season-bats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.season-bats span { position: absolute; font-size: 18px; opacity: .8; animation: bat-fly 14s linear infinite; }
.season-bats span:nth-child(2) { top: 30%; animation-delay: -5s; animation-duration: 18s; font-size: 14px; }
.season-bats span:nth-child(3) { top: 60%; animation-delay: -10s; animation-duration: 22s; font-size: 12px; }
@keyframes bat-fly { 0% { left: -5%; transform: translateY(0); } 25% { transform: translateY(-12px); } 50% { transform: translateY(6px); } 75% { transform: translateY(-8px); } 100% { left: 105%; transform: translateY(0); } }
.season-snow { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.season-snow i { position: absolute; top: -10px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.75); animation: snow-fall linear infinite; }
@keyframes snow-fall { to { transform: translate(20px, 105vh); } }
.season-ghost { position: fixed; z-index: 70; top: 30%; left: -80px; font-size: 56px; pointer-events: none; animation: ghost 3.5s ease-in-out forwards; }
@keyframes ghost { 30% { transform: translateY(-30px); opacity: .9; } 60% { transform: translateY(20px); } 100% { left: 110vw; opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .season-bats, .season-snow { display: none; } .hunt-item.got, .season-ghost { animation-duration: .01s; } }

/* ===== Halloween week (body.season-halloween; decorations added by js/season.js) ===== */
body.season-halloween { --red: #E8731A; }
body.season-halloween .site-header { border-bottom-color: #4A2A10; box-shadow: 0 1px 0 rgba(232,115,26,.25), 0 6px 24px rgba(232,115,26,.06); }
body.season-halloween .btn:not(.btn-ghost):not(.btn-outline) { background: linear-gradient(180deg, #F08A2C 0%, #D9650F 100%); box-shadow: 0 0 0 1px rgba(255,170,90,.25) inset, 0 4px 14px rgba(232,115,26,.25); }
/* Banners: a moonlit orange-purple sky */
body.season-halloween .hero::after { background: linear-gradient(90deg, rgba(14,8,22,.95) 0%, rgba(40,16,48,.72) 50%, rgba(90,36,8,.35) 100%); }
body.season-halloween .hero-home::after { background: linear-gradient(180deg, rgba(40,12,50,.25) 0%, rgba(14,8,22,.92) 100%); }
body.season-halloween .hero > picture > img, body.season-halloween .hero > img, body.season-halloween .hero-home img { filter: sepia(.35) hue-rotate(-18deg) saturate(1.3) brightness(.8); }
.season-moon { position: absolute; z-index: 1; top: 14px; right: 9%; width: 70px; height: 70px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 38%, #FFF6D8 0%, #F7D98B 55%, #D9A84E 100%); box-shadow: 0 0 40px 12px rgba(255,214,130,.35), 0 0 120px 40px rgba(255,170,60,.15); }
.hero-home .season-moon { width: 110px; height: 110px; top: 30px; }
.season-moon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 60%, rgba(160,110,40,.35) 0 8%, transparent 9%), radial-gradient(circle at 40% 70%, rgba(160,110,40,.25) 0 6%, transparent 7%), radial-gradient(circle at 60% 30%, rgba(160,110,40,.2) 0 5%, transparent 6%); }
.season-bats { z-index: 2; }
.season-spider { position: absolute; z-index: 2; top: 0; right: 22%; width: 2px; pointer-events: none; background: linear-gradient(#999, #ccc); animation: spider-drop 7s ease-in-out infinite; }
.season-spider::after { content: '🕷️'; position: absolute; bottom: -14px; left: -10px; font-size: 20px; }
@keyframes spider-drop { 0%, 100% { height: 18px; } 45%, 60% { height: 80px; } }
.season-greeting { position: absolute; z-index: 2; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: 1px; color: #FFB561;
  text-shadow: 0 0 18px rgba(255,140,30,.65), 0 2px 0 #3A1A05; pointer-events: none; }
.hero .season-greeting { display: none; }
/* Boxes: orange edges, candle glow on hover, cobwebs in some corners */
body.season-halloween :is(.card, .box, .tile, .form-card, .ui-card, .ui-intro, .media-tile, .spooky-box) { border-color: #3B2A2A; }
body.season-halloween :is(.card, .tile, .ui-card, .ui-intro, .form-card, .media-tile) { position: relative; }
body.season-halloween :is(.card, .tile, .ui-card, .form-card, .media-tile, .spooky-box):hover { border-color: #8A4A18; box-shadow: 0 0 0 1px rgba(232,115,26,.25), 0 10px 30px rgba(232,115,26,.12); animation: candle 2.4s ease-in-out infinite; }
@keyframes candle { 0%, 100% { box-shadow: 0 0 0 1px rgba(232,115,26,.25), 0 10px 30px rgba(232,115,26,.12); } 40% { box-shadow: 0 0 0 1px rgba(232,115,26,.35), 0 10px 34px rgba(232,115,26,.2); } 70% { box-shadow: 0 0 0 1px rgba(232,115,26,.2), 0 10px 26px rgba(232,115,26,.09); } }
body.season-halloween .ui-intro { background: radial-gradient(120% 140% at 0% 0%, rgba(232,115,26,.18) 0%, rgba(232,115,26,0) 55%), radial-gradient(80% 120% at 100% 100%, rgba(120,50,160,.14) 0%, rgba(120,50,160,0) 60%), linear-gradient(135deg, #171427 0%, #0F1222 100%); }
.season-web { position: absolute; z-index: 1; top: 0; right: 0; width: 64px; height: 64px; pointer-events: none; opacity: .32; }
.season-web.left { right: auto; left: 0; transform: scaleX(-1); }
/* The pumpkin patch above the footer, and mist along the bottom of the screen */
/* Lanterns standing on the footer's top edge, which glows faintly orange. */
.season-patch { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; max-width: 760px; box-sizing: border-box; margin: 28px auto -4px; padding: 0 24px; pointer-events: none; position: relative; z-index: 1; }
.season-patch span { font-size: 24px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255,140,30,.5)); animation: lantern 3s ease-in-out infinite; }
.season-patch span:nth-child(even) { animation-delay: -1.3s; }
.season-patch span:nth-child(4) { font-size: 28px; animation-delay: -2.1s; }
body.season-halloween .site-footer { border-top: 1px solid rgba(232,115,26,.35); box-shadow: 0 -10px 30px -18px rgba(232,115,26,.55); }
@keyframes lantern { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255,140,30,.45)); } 50% { filter: drop-shadow(0 0 16px rgba(255,150,40,.8)); } 75% { filter: drop-shadow(0 0 6px rgba(255,120,20,.4)); } }
.season-mist { position: fixed; left: -10%; right: -10%; bottom: 0; height: 120px; z-index: 2; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent);
  background: radial-gradient(40% 70% at 20% 100%, rgba(190,170,220,.10), transparent 70%), radial-gradient(35% 60% at 70% 100%, rgba(190,170,220,.08), transparent 70%); animation: mist 24s ease-in-out infinite alternate; }
@keyframes mist { to { transform: translateX(6%); } }
@media (max-width: 760px) { body.with-bb .season-mist { bottom: 56px; } }
@media (max-width: 760px) {
  .season-moon { width: 46px; height: 46px; right: 6%; top: 10px; }
  .hero-home .season-moon { width: 64px; height: 64px; }
  .season-greeting { font-size: 24px; bottom: 12px; }
  .season-web { width: 44px; height: 44px; }
  .season-spider { right: 30%; }
}
@media (prefers-reduced-motion: reduce) { .season-spider, .season-mist, .season-patch span, body.season-halloween :is(.card, .tile, .ui-card, .form-card, .media-tile, .spooky-box):hover { animation: none; } }

/* About: Meet the team */
.team { display: flex; flex-direction: column; gap: 14px; }
.team-hc { position: relative; padding: 20px 22px; border-radius: 16px; border: 1px solid #3A3220; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(224,178,58,.14), transparent 55%), linear-gradient(180deg, #141C2E, #0F1626); }
.team-hc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.team-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.team-hc .team-person { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(224,178,58,.18); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.team-dept { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dept) 28%, #1E2A44);
  background: radial-gradient(100% 120% at 0% 0%, color-mix(in srgb, var(--dept) 16%, transparent), transparent 60%), linear-gradient(180deg, #131B2D, #0F1626);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.team-dept::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--dept); opacity: .85; }
.team-dept:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--dept) 55%, #1E2A44); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.team-dept-top { display: flex; gap: 14px; align-items: center; }
.team-patch { width: 60px; height: 60px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.team-name { font-family: var(--display); font-size: 21px; color: #FFFFFF; line-height: 1.15; }
.team-division { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dept); margin-top: 3px; }
.team-blurb { margin: 0; color: #B9BFCB; font-size: 14px; line-height: 1.5; }
.team-hc .team-blurb { margin-top: 3px; color: #D9C48A; }
.team-dept-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.team-person { display: flex; gap: 10px; align-items: center; min-width: 0; }
.team-rank { width: 34px; height: 34px; object-fit: contain; flex: none; }
.team-rank.sm { width: 28px; height: 28px; }
.team-person-name { color: #FFFFFF; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-person-rank { color: #8F98AA; font-size: 12.5px; }
.team-person.vacant .team-person-name { color: #8F98AA; font-style: italic; font-weight: 500; }
.team-person.vacant .team-rank { opacity: .35; filter: grayscale(1); }
.team-count { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; flex: none; }
.team-count strong { font-family: var(--display); font-size: 26px; color: #FFFFFF; }
.team-count span { font-size: 12px; color: #8F98AA; margin-top: 3px; }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } .team-people { grid-template-columns: 1fr 1fr; } }

/* Test site */
.test-banner { position: sticky; top: 0; z-index: 60; background: #F2C230; color: #1A1406; font-size: 13.5px; text-align: center; padding: 7px 16px; border-bottom: 1px solid #B8901A; }
.test-banner strong { letter-spacing: .04em; }
.test-reset { margin-left: 8px; font: inherit; font-weight: 600; color: #1A1406; background: rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.35); border-radius: 99px; padding: 2px 10px; cursor: pointer; }
.test-reset:hover { background: rgba(0,0,0,.16); }

/* Back to the top (handbook): bottom right, just above the Ask button (and the phone's bottom bar). */
.to-top { position: fixed; right: 20px; bottom: 80px; z-index: 79; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #3B4F7A; background: #1B2B4A; color: #FFFFFF; font: 600 14px var(--body); cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.to-top:hover { background: #22365C; }
.to-top:focus-visible { outline: 2px solid #9CC8FF; outline-offset: 2px; }
.to-top span { font-size: 17px; line-height: 1; }
@media (max-width: 760px) { .to-top { right: 12px; bottom: 72px; } body.with-bb .to-top { bottom: 144px; } }
@media print { .to-top { display: none; } }

/* A drop-down in a row of controls may shrink to fit its box (otherwise its longest option sets its width). */
.chips > select, .chips > .select { min-width: 0; max-width: 100%; }