/* Design tokens measured from unisuper.com.au (Oct 2026) */
:root {
  --navy: #112C5C;          /* headings, logo */
  --navy-deep: #14274F;     /* footer */
  --blue: #0E71F2;          /* buttons, links, results titles */
  --blue-dark: #0B5FCC;
  --blue-hero: #0E71F2;
  --teal: #22828F;          /* campus marker */
  --teal-light: #38BDAD;
  --text: #696969;          /* body copy */
  --text-strong: #333333;
  --label: #000000;         /* form labels */
  --line: #E5E5E5;
  --line-strong: #CCCCCC;
  --panel: #F9F9F9;         /* search panel */
  --page: #F5F5F5;
  --white: #FFFFFF;
  --green: #2E7D32;
  --amber-bg: #FFF4D6;
  --amber-line: #F2B705;
  --amber-text: #5C4300;
  --red: #B3261E;
  --radius: 4px;
  --font: 'Source Sans 3', SourceSansPro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Tiempos, Georgia, Times, serif;
  --container: 1170px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.43; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; color: var(--navy); font-family: var(--serif); font-weight: 400; }
p { margin: 0; }
a { color: var(--blue); }
button { font: inherit; color: inherit; }
code { font-size: .92em; background: #eee; padding: 1px 4px; border-radius: 3px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--white); padding: 8px 12px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }

.icon { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.icon-xs { width: 13px; height: 13px; vertical-align: -2px; }
.icon-lg { width: 36px; height: 36px; }
.muted { color: var(--text); }
.small { font-size: 13px; }

/* ── Buttons (site: 4px radius, 40px tall, 14px/600) ───────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border: 1px solid var(--blue); border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-primary:disabled { background: var(--line-strong); border-color: var(--line-strong); cursor: not-allowed; }
.btn-outline { background: var(--white); color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--white); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.link { background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; cursor: pointer; font-size: inherit; display: inline-flex; align-items: center; gap: 6px; }
.link:hover { color: var(--blue-dark); }
.link-plain { text-decoration: none; }
.link-plain:hover { text-decoration: underline; }
.icon-btn { background: none; border: 0; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--text); border-radius: var(--radius); }
.icon-btn:hover { color: var(--navy); background: var(--page); }

/* ── Prototype bar (not part of the UniSuper design) ───────────────── */
.proto-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 24px; background: #2b2b2b; color: #bbb; font-size: 12.5px; position: relative; z-index: 45; }
.proto-views { display: flex; align-items: center; gap: 12px; min-width: 0; overflow-x: auto; }
.proto-settings { display: inline-flex; align-items: center; gap: 6px; flex: none; background: none; border: 1px solid #555; color: #ddd; border-radius: 3px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.proto-settings:hover { color: #fff; border-color: #888; }
.proto-settings svg { width: 15px; height: 15px; }
.proto-bar-label { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 11px; white-space: nowrap; }
.proto-switch { display: flex; gap: 2px; }
.proto-switch button { background: none; border: 0; color: #ccc; padding: 4px 10px; border-radius: 3px; cursor: pointer; white-space: nowrap; font-size: 13px; }
.proto-switch button:hover { color: #fff; }
.proto-switch button.is-on { background: #fff; color: #222; font-weight: 600; }

/* ── Header ────────────────────────────────────────────────────────── */
.us-header { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.us-header-top { display: flex; align-items: center; gap: 28px; height: 64px; }
.us-logo { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--navy); font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.2px; margin-right: auto; }
.us-logo svg { width: 26px; height: 21px; }
.us-logo:has(+ .us-brand-tag:not([hidden])) { margin-right: 0; }
.us-brand-tag { font-size: 14px; color: var(--text); border-left: 1px solid var(--line-strong); padding-left: 14px; margin-left: -14px; margin-right: auto; }
.us-brand-tag:not([hidden]) ~ .us-utility { display: none; }
.us-utility { display: flex; gap: 32px; }
.us-utility a { color: var(--text); text-decoration: none; font-size: 15px; }
.us-utility a:hover { color: var(--navy); }
.us-account { display: flex; align-items: center; gap: 10px; }
.us-account .btn { height: 40px; min-width: 112px; }
.us-icon-btn { background: none; border: 0; width: 32px; height: 32px; padding: 4px; cursor: pointer; color: var(--text); }
.us-icon-btn svg { width: 22px; height: 22px; }
.us-icon-btn:hover { color: var(--navy); }
.proto-gear { border-left: 1px dashed var(--line-strong); padding-left: 10px; width: 42px; margin-left: -12px; }
.us-burger { display: none; background: none; border: 0; width: 28px; height: 28px; cursor: pointer; padding: 0; position: relative; }
.us-burger span, .us-burger span::before, .us-burger span::after { position: absolute; left: 3px; right: 3px; height: 1.5px; background: var(--text); content: ''; }
.us-burger span { top: 13px; } .us-burger span::before { top: -7px; } .us-burger span::after { top: 7px; }
.us-mainnav { border-top: 1px solid var(--line); }
.us-mainnav .container { display: flex; gap: 6px; height: 56px; align-items: center; }
.us-mainnav a { color: var(--text); text-decoration: none; font-size: 15px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; height: 100%; }
.us-mainnav a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.us-mainnav a:hover { color: var(--navy); }
.member-chip { display: flex; align-items: center; gap: 12px; }
.member-chip-text { display: grid; line-height: 1.2; text-align: right; }
.member-chip-text strong { color: var(--navy); font-weight: 600; font-size: 14px; }
.member-chip-text small { font-size: 12.5px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.avatar-staff { background: var(--amber-line); color: #3a2a00; }

/* Consultant impersonation: the page is the member's page plus this bar and the notes box */
.impersonation { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--amber-bg); border-bottom: 1px solid var(--amber-line); color: var(--amber-text); font-size: 14px; }
.impersonation p { flex: 1; min-width: 0; }
.impersonation .imp-meta { opacity: .8; }
.impersonation .btn { border-color: var(--amber-text); color: var(--amber-text); background: transparent; }
.impersonation .btn:hover { background: var(--amber-text); color: var(--white); }

/* ── Hero (site: 200px blue band, white Tiempos 40/56) ─────────────── */
.us-hero { position: relative; overflow: hidden; height: 200px; display: flex; align-items: center; background: linear-gradient(105deg, #0A53C2 0%, #0E71F2 55%, #2F8BF7 100%); }
.us-hero::before, .us-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.us-hero::before { width: 900px; height: 900px; right: -320px; top: -620px; background: radial-gradient(closest-side, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0)); }
.us-hero::after { width: 1400px; height: 600px; left: -200px; bottom: -470px; border: 1px solid rgba(255, 255, 255, .12); }
.us-hero .container { width: 100%; position: relative; }
.us-hero h1 { color: var(--white); font-size: 40px; line-height: 56px; font-weight: 600; letter-spacing: .83px; }

/* ── Page ──────────────────────────────────────────────────────────── */
.page { padding: 48px 0 64px; }
.notice { display: flex; gap: 10px; padding: 12px 16px; margin-bottom: 24px; font-size: 14px; border-left: 3px solid var(--blue); background: var(--panel); color: var(--text-strong); }
.notice .icon { color: var(--blue); margin-top: 1px; }
.notice-warn { border-left-color: var(--amber-line); background: var(--amber-bg); color: var(--amber-text); }
.notice-warn .icon { color: var(--amber-text); }

.locator-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.locator-head h2 { font-size: 32px; line-height: 40px; letter-spacing: 1px; }
.locator-head .lede { margin-top: 6px; font-size: 16px; }

/* Map / List toggle */
.layout-toggle { display: inline-flex; border: 1px solid var(--blue); border-radius: var(--radius); overflow: hidden; flex: none; }
.layout-toggle button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border: 0; background: var(--white); color: var(--blue); font-weight: 600; font-size: 14px; cursor: pointer; }
.layout-toggle button + button { border-left: 1px solid var(--blue); }
.layout-toggle button.is-on { background: var(--blue); color: var(--white); }

/* Locator: map layout = panel + map; list layout = full width */
.locator { display: grid; grid-template-columns: 390px 1fr; height: 760px; border: 1px solid var(--line); }
.locator-panel { background: var(--panel); padding: 28px 28px 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#panel-body { flex: 1; overflow-y: auto; margin: 0 -28px; padding: 0 28px 24px; outline: none; }
.map-wrap { position: relative; background: #E5E3DF; min-height: 640px; }
.map { position: absolute; inset: 0; }
.map-placeholder { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px; color: var(--text); }
.map-placeholder .icon { color: var(--line-strong); }
.legend { position: absolute; left: 12px; bottom: 24px; background: var(--white); padding: 6px 12px; display: flex; gap: 14px; font-size: 12.5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); border-radius: 2px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.lg-office { background: linear-gradient(0deg, var(--navy), var(--blue)); }
.lg-campus { background: linear-gradient(0deg, var(--teal), var(--teal-light)); }
.lg-you { background: var(--blue); box-shadow: 0 0 0 3px rgba(14, 113, 242, .25); }

.locator[data-layout="list"] { grid-template-columns: 1fr; border: 0; height: auto; }
.locator[data-layout="list"] .map-wrap { display: none; }
.locator[data-layout="list"] .locator-panel { max-height: none; padding: 28px 32px; }
.locator[data-layout="list"] #panel-body { overflow: visible; margin: 0; padding: 0; }

/* ── Search ────────────────────────────────────────────────────────── */
.field-label { display: block; color: var(--label); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.search { position: relative; }
.search-field { display: flex; gap: 8px; }
.input-wrap { position: relative; flex: 1; min-width: 0; }
.input { width: 100%; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); padding: 0 12px; font: inherit; font-size: 14px; color: var(--text-strong); }
.input::placeholder { color: #9a9a9a; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
select.input { padding-right: 32px; appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23696969' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; }
textarea.input { height: auto; padding: 8px 12px; resize: vertical; }
.search-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: 13px; }
.search-help .link { white-space: nowrap; }
/* Logged in: the title already says what to search for, so only "Use my location" sits under the box */
.search-help-member { justify-content: flex-start; }
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30; list-style: none; margin: 0; padding: 4px 0; background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.suggestions li[role="option"] { padding: 8px 12px; cursor: pointer; display: grid; line-height: 1.3; }
.suggestions strong { color: var(--text-strong); font-weight: 600; }
.suggestions small { font-size: 12.5px; }
.suggestions li.is-active, .suggestions li[role="option"]:hover { background: var(--page); }
.suggestions .powered { font-size: 11px; text-align: right; padding: 4px 12px 2px; color: #999; }
.search-msg { font-size: 13px; margin-top: 8px; }
.search-msg-error { color: var(--red); }
.tabs { display: flex; gap: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 8px; color: var(--text); cursor: pointer; font-size: 14px; }
.tabs button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--blue); font-weight: 600; }
.privacy-note { margin-top: 12px; padding: 10px 12px; background: var(--amber-bg); color: var(--amber-text); font-size: 13px; border-left: 3px solid var(--amber-line); }
.login-prompt { margin-top: 14px; font-size: 13.5px; }

/* List layout: search + filter on one row */
/* List layout: search on the left, appointment type on the right. Top-aligned so both
   labels share a line, and the filter buttons match the search box's height so they
   share its row too; the hint and "Use my location" sit under the search box only. */
.locator[data-layout="list"] #search-area { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: start; gap: 12px 40px; padding-bottom: 20px; }
.locator[data-layout="list"] #search-area .tabs, .locator[data-layout="list"] #search-area .privacy-note { grid-column: 1 / -1; }
.locator[data-layout="list"] .filter legend { float: left; width: 100%; line-height: 20px; margin-bottom: 8px; }
.locator[data-layout="list"] .filter .radio-pills { clear: both; }
.locator[data-layout="list"] #search-form .field-label { line-height: 20px; }
.locator[data-layout="list"] .radio-pills span { height: 40px; padding: 0 16px; border-radius: 20px; }

/* ── Filter (appointment type) ─────────────────────────────────────── */
.filter { margin: 20px 0 16px; }
.locator[data-layout="list"] .filter { margin: 0; }
.radio-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-pills label { position: relative; cursor: pointer; }
.radio-pills input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.radio-pills span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--white); font-size: 13.5px; color: var(--text-strong); }
.radio-pills input:checked + span { border-color: var(--blue); background: var(--blue); color: var(--white); }
.radio-pills input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Origin & results ──────────────────────────────────────────────── */
.origin { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.origin-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.origin-row p { color: var(--text-strong); }
.origin-row small { display: block; color: var(--text); font-size: 12.5px; }
/* Logged-in default: home, stated as the starting point */
.origin-home { display: flex; align-items: center; gap: 12px; }
.origin-home > .icon { width: 22px; height: 22px; color: var(--blue); flex: none; }
.origin-home p { color: var(--text-strong); font-size: 15px; }
.origin-home small { display: block; color: var(--text); font-size: 12.5px; }
/* Logged-in member searching elsewhere: one line and one way back */
.origin-away { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.origin-away p { color: var(--text-strong); font-size: 15px; min-width: 0; }
.origin-home-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--blue); border-radius: 18px; background: var(--white); color: var(--blue); font-size: 14px; font-weight: 600; cursor: pointer; }
.origin-home-btn:hover { background: #EEF5FE; }
.origin-home-btn .icon { width: 16px; height: 16px; }
.results-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; padding: 10px 0; border-top: 1px solid var(--line); }
.results-meta strong { color: var(--text-strong); }
.loading { color: var(--blue); }

.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.result { background: var(--white); }
.result-btn { width: 100%; text-align: left; background: none; border: 0; padding: 18px 20px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.result-btn:hover .result-title { text-decoration: underline; }
.result.is-selected { box-shadow: inset 3px 0 0 var(--blue); }
.result-title { color: var(--blue); font-size: 15px; line-height: 1.35; }
.result-sub { grid-column: 1; font-size: 13.5px; }
.result-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin-top: 4px; }
.result-travel { grid-row: 1 / span 2; grid-column: 2; text-align: right; line-height: 1.3; }
.result-travel strong { display: block; color: var(--text-strong); font-weight: 600; font-size: 14px; white-space: nowrap; }
.result-travel small { font-size: 12.5px; white-space: nowrap; }
.tag-line { display: inline-flex; align-items: center; gap: 5px; }
.tag-line .icon { width: 14px; height: 14px; }
.kind { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.flagword { color: var(--navy); font-weight: 600; }
.status-open { color: var(--green); }
.status-open::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; }
.empty-hint { padding: 16px 0; font-size: 13.5px; border-top: 1px solid var(--line); }
.empty { padding: 32px 0; text-align: center; }
.show-all { margin: 16px 0 4px; }

/* List layout table */
.table { width: 100%; border-collapse: collapse; background: var(--white); margin-top: 20px; }
.table th { text-align: left; font-weight: 600; color: var(--label); font-size: 13.5px; padding: 12px 16px; border-bottom: 2px solid var(--navy); white-space: nowrap; }
.table td { padding: 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
.table tr:hover td { background: #FCFCFC; }
.table .col-dist { white-space: nowrap; }
.table .col-dist strong { color: var(--text-strong); font-weight: 600; display: block; }
.table .col-actions { text-align: right; white-space: nowrap; }
.table .col-actions .btn { margin-left: 6px; }
.table .loc-name { color: var(--blue); background: none; border: 0; padding: 0; font-size: 15px; cursor: pointer; text-align: left; }
.table .loc-name:hover { text-decoration: underline; }
.table .addr { font-size: 13.5px; margin-top: 2px; }
.table .rank { color: var(--navy); font-family: var(--serif); font-size: 18px; width: 36px; }

/* ── Detail ────────────────────────────────────────────────────────── */
.detail { padding: 8px 0 8px; display: grid; gap: 18px; }
.locator[data-layout="list"] .detail { background: var(--white); padding: 28px 32px; margin-top: 20px; max-width: 760px; }
.detail .back { justify-self: start; text-decoration: none; }
.detail-head { display: grid; gap: 6px; }
.detail-head h3 { font-size: 26px; line-height: 1.25; outline: none; }
.detail-head .addr { font-size: 14px; }
.mode-tiles { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--white); }
.mode-tile { display: grid; justify-items: center; gap: 2px; padding: 12px 4px; background: none; border: 0; cursor: pointer; color: var(--text); }
.mode-tile + .mode-tile { border-left: 1px solid var(--line); }
.mode-tile .icon { width: 20px; height: 20px; }
.mode-tile strong { color: var(--text-strong); font-size: 15px; font-weight: 600; }
.mode-tile small { font-size: 12px; }
.mode-tile.is-on { box-shadow: inset 0 -3px 0 var(--blue); color: var(--blue); }
.from-note { font-size: 12.5px; margin-top: -10px; }
.detail-section { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 6px; }
.detail-section h4 { margin: 0; color: var(--label); font-size: 14px; font-weight: 600; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.plain-list li::before { content: '–'; margin-right: 8px; color: var(--line-strong); }
.advice-callout { background: var(--white); border-left: 3px solid var(--navy); padding: 14px 16px; display: grid; gap: 6px; }
.advice-callout strong { color: var(--navy); font-family: var(--serif); font-weight: 600; font-size: 16px; }
.advice-callout p { font-size: 13.5px; }
.advice-callout .btn-row { margin-top: 6px; gap: 8px; }
.contact { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: 14px; }
.contact dt { color: var(--text); }
.contact dd { margin: 0; }
.contact a { color: var(--blue); font-weight: 600; text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.arrival { margin: 4px 0 0; display: grid; gap: 12px; }
.arrival > div { display: grid; grid-template-columns: 20px 1fr; gap: 0 10px; }
.arrival .icon { grid-row: span 2; color: var(--navy); width: 18px; height: 18px; margin-top: 1px; }
.arrival dt { color: var(--text-strong); font-weight: 600; font-size: 13.5px; }
.arrival dd { margin: 0; font-size: 13.5px; }
.sample-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-text); background: var(--amber-bg); padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; }
.choice small { font-weight: 400; color: var(--text); font-size: 12px; }
.choice { text-align: center; line-height: 1.3; }
.callout { padding: 12px 14px; border-left: 3px solid var(--blue); background: var(--white); font-size: 13.5px; color: var(--text-strong); }
.callout-warn { border-left-color: var(--red); color: var(--red); }
.callout-teal { border-left-color: var(--teal); }

/* ── Personal area (member / consultant) ───────────────────────────── */
#personal-area:empty { display: none; }
#personal-area { margin-bottom: 32px; }
.appt { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--teal); }
.appt > div { flex: 1; display: grid; }
.appt small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.appt strong { color: var(--navy); font-family: var(--serif); font-size: 20px; font-weight: 400; }
.snapshot { border: 1px solid var(--line); display: grid; grid-template-columns: 280px 1fr 280px; }
.snapshot > div { padding: 20px 24px; }
.snapshot > div + div { border-left: 1px solid var(--line); }
.snap-head { display: flex; gap: 12px; align-items: center; }
.snap-head h2 { font-size: 22px; }
.snap-grid { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.snap-grid dt { color: var(--text); }
.snap-grid dd { margin: 0; color: var(--text-strong); }
.snap-flag { margin-top: 12px; color: var(--red); font-size: 13px; display: flex; gap: 6px; }
.audit h4 { margin: 0 0 8px; color: var(--label); font-size: 13.5px; }
.audit ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; max-height: 150px; overflow: auto; }
.audit time { color: var(--text-strong); font-weight: 600; margin-right: 6px; }
.lookup-panel { background: var(--panel); padding: 28px 32px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px 24px; align-items: end; }
.lookup-panel h2 { grid-column: 1 / -1; font-size: 24px; }
.lookup-panel .note { grid-column: 1 / -1; font-size: 13px; }
.lookup-results { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.recent { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; }
.member-option { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--white); border: 0; padding: 12px 16px; cursor: pointer; }
.member-option:hover { background: #FCFCFC; }
.member-option:hover strong { text-decoration: underline; }
.member-option span:nth-child(2) { display: grid; line-height: 1.3; flex: 1; }
.member-option strong { color: var(--blue); font-weight: 400; font-size: 15px; }
.member-option small { font-size: 12.5px; }
.member-option .go { color: var(--blue); font-weight: 600; font-size: 13.5px; }

/* Virtual fallback */
.virtual { margin: 4px 0 14px; padding: 14px 16px; background: var(--white); border-left: 3px solid var(--blue); display: grid; gap: 6px; }
.virtual strong { color: var(--navy); font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.3; }
.virtual p { font-size: 13.5px; }
.virtual .btn-row { margin-top: 4px; }
.locator[data-layout="list"] .virtual { margin: 20px 0 0; max-width: 760px; }

/* ── Advice block (as on live page) ────────────────────────────────── */
/* "Contact UniSuper Advice" band, as on the member site's advice pages */
.advice-band { display: grid; justify-items: center; gap: 14px; padding: 44px 24px 48px; text-align: center; color: var(--white);
  background: linear-gradient(100deg, #12285A 0%, #123E8C 45%, #0E64DA 80%, #0E71F2 100%); }
.advice-band h2 { color: var(--white); font-size: 34px; line-height: 1.2; font-weight: 400; letter-spacing: .5px; }
.advice-band p { font-size: 15px; font-weight: 600; max-width: 60ch; }
.advice-band-btn { margin-top: 10px; min-width: 200px; background: transparent; color: var(--white); border-color: var(--white); }
.advice-band-btn:hover { background: var(--white); color: var(--navy); }

/* ── Logged-in account layout (member + consultant) ────────────────── */
.mol-header, .mol-side { display: none; }
body.is-signed-in .us-header { display: none; }
body.is-signed-in .mol-header { display: flex; align-items: stretch; height: 84px; background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.mol-logo { align-self: center; margin-left: 36px; font-size: 28px; gap: 8px; }
.mol-logo svg { width: 34px; height: 27px; }
.mol-burger { align-self: center; margin-left: 16px; }
.mol-actions { display: flex; align-items: stretch; margin-left: auto; }
.mol-action { display: inline-flex; align-items: center; gap: 8px; padding: 0 30px; background: none; border: 0; border-left: 1px solid var(--line); color: #4A4A4A; font-size: 15px; text-decoration: none; cursor: pointer; }
.mol-action:first-child { border-left: 0; }
.mol-action svg { width: 20px; height: 20px; }
.mol-action:hover { color: var(--navy); background: #FAFAFA; }
.mol-user { cursor: default; font-weight: 600; font-size: 14px; letter-spacing: .03em; color: #333; }
.mol-user:hover { background: none; color: #333; }
.mol-logout { font-weight: 600; }

.shell { display: block; }
body.is-signed-in .shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); background: var(--page); }
body.is-signed-in .mol-side { display: block; background: var(--white); border-right: 1px solid var(--line); }
.mol-side nav { position: sticky; top: 0; display: grid; }
.mol-side a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 28px; border-bottom: 1px solid var(--line); color: #3D3D3D; font-size: 15px; text-decoration: none; }
.mol-side a:hover { background: #F7F9FC; }
.mol-side a.has-sub::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid #333; border-bottom: 1.6px solid #333; transform: rotate(45deg) translateY(-3px); }
.mol-side a.has-sub.is-open::after { transform: rotate(-135deg) translate(-2px, -1px); }
.mol-side a.mol-sub { min-height: 50px; padding-left: 44px; font-size: 14.5px; background: #FBFBFC; }
.mol-side a.is-on { background: #E8F1FD; color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--blue); }
.mol-side a.mol-iconed svg { width: 20px; height: 20px; flex: none; }

/* Navy banner with fine line-work, as on the account site */
body.is-signed-in .us-hero { background-color: #13295A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='200' viewBox='0 0 1400 200' fill='none' stroke='%23ffffff' stroke-opacity='.09'%3E%3Cpath d='M380 210C620 150 860 40 1400 -10'/%3E%3Cpath d='M420 210C660 150 900 50 1400 10'/%3E%3Cpath d='M460 210C700 155 940 60 1400 30'/%3E%3Cpath d='M500 210C740 160 980 72 1400 50'/%3E%3Cpath d='M540 210C780 165 1020 85 1400 72'/%3E%3Cpath d='M580 210C820 170 1060 100 1400 95'/%3E%3Cpath d='M900 -10C1000 60 1150 140 1400 170'/%3E%3Cpath d='M940 -10C1040 55 1180 125 1400 150'/%3E%3Cpath d='M980 -10C1080 50 1210 110 1400 130'/%3E%3Cpath d='M1020 -10C1120 45 1240 95 1400 110'/%3E%3C/svg%3E");
  background-size: cover; background-position: right center; }
body.is-signed-in .us-hero::before, body.is-signed-in .us-hero::after { display: none; }
body.is-signed-in .page { background: var(--page); }
body.is-signed-in .locator { background: var(--white); }

/* ── Footer ────────────────────────────────────────────────────────── */
.us-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .75); padding: 36px 0; font-size: 13px; }
.us-footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 14px; }
.us-footer a { color: var(--white); text-decoration: none; font-size: 14px; }
.us-footer a:hover { text-decoration: underline; }

/* ── Popover & modal ───────────────────────────────────────────────── */
.popover { position: absolute; top: 40px; right: 16px; width: min(360px, calc(100vw - 32px)); background: var(--white); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); padding: 20px; z-index: 40; display: grid; gap: 16px; border-radius: var(--radius); }
.pop-head, .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pop-head h2 { font-size: 20px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; }
.check-row input { margin-top: 3px; accent-color: var(--blue); }
.check-row span { display: grid; gap: 2px; }
.check-row strong { color: var(--label); font-weight: 600; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.kv dt { color: var(--label); font-weight: 600; }
.kv dd { margin: 0; }

.modal { border: 0; padding: 0; width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); box-shadow: 0 16px 48px rgba(0, 0, 0, .25); color: var(--text); border-radius: var(--radius); }
/* Full-screen placeholder for advice booking links */
.modal.modal-takeover { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; background: linear-gradient(100deg, #12285A 0%, #123E8C 45%, #0E64DA 80%, #0E71F2 100%); color: var(--white); }
.modal-takeover .modal-inner { height: 100%; padding: 24px; display: grid; place-items: center; position: relative; }
.takeover-text { font-family: var(--serif); font-size: clamp(28px, 5vw, 56px); line-height: 1.15; font-weight: 600; letter-spacing: .04em; text-align: center; color: var(--white); max-width: 18ch; text-wrap: balance; }
.takeover-close { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--radius); font-size: 15px; font-weight: 600; cursor: pointer; }
.takeover-close:hover { background: var(--white); color: var(--navy); }
.takeover-close .icon { width: 18px; height: 18px; }
.modal::backdrop { background: rgba(17, 44, 92, .45); }
.modal-inner { padding: 28px 32px 32px; display: grid; gap: 18px; }
.modal-head h2 { font-size: 26px; line-height: 1.25; }
.pill { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--amber-bg); color: var(--amber-text); padding: 2px 6px; border-radius: 3px; vertical-align: 5px; margin-left: 6px; }
.member-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { color: var(--label); font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.choice-row.stack { grid-template-columns: 1fr; }
.choice { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; cursor: pointer; font-size: 14px; color: var(--text-strong); background: var(--white); }
.choice-row.stack .choice { justify-content: flex-start; padding: 10px 14px; }
.choice + .choice { border-left: 1px solid var(--line-strong); }
.choice-row.stack .choice + .choice { border-left: 0; border-top: 1px solid var(--line-strong); }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choice.is-on { background: #EEF5FE; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); font-weight: 600; }
.choice:focus-within { outline: 2px solid var(--blue); outline-offset: -2px; }
.slot-day { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.slot-day > span { color: var(--text-strong); font-weight: 600; font-size: 13.5px; }
.slot-times { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--white); border-radius: var(--radius); font-size: 13.5px; cursor: pointer; color: var(--text-strong); }
.slot:hover { border-color: var(--blue); color: var(--blue); }
.slot.is-on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; color: var(--label); font-weight: 600; font-size: 14px; }
.field .input { font-weight: 400; }
.booking-as { font-size: 13.5px; padding: 10px 14px; background: var(--panel); color: var(--text-strong); }
.booking-as.staff { background: var(--amber-bg); color: var(--amber-text); }
.message-preview { font-weight: 400; color: var(--text-strong); background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; font-size: 13.5px; line-height: 1.5; }
.confirm { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 4px 0; }
.confirm .icon-lg { color: var(--green); }
.confirm p strong { color: var(--text-strong); }

/* ── Phone first ───────────────────────────────────────────────────── */
/* Guest pages on phones only (shown in the ≤640px query): a single tap-to-call
   line in one style, so the prompt and the number read as one call to action. */
.call-strip { display: none; align-items: center; justify-content: center; gap: 10px; color: var(--blue); font-size: 16px; font-weight: 600; text-decoration: none; background: var(--white); border: 1px solid var(--blue); border-radius: var(--radius); }
.call-strip:hover, .call-strip:focus-visible { background: #EEF5FE; }
.call-strip-icon { width: 20px; height: 20px; flex: none; }
/* Location contact block: the advice line is the one primary action */
.advice-call { height: 52px; font-size: 17px; margin-top: 6px; }
.advice-call .icon { width: 20px; height: 20px; }
.advice-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }
.advice-more .link { font-size: 14px; }
.office-phone { font-size: 14px; color: var(--text-strong); }
.office-phone a { font-weight: 600; text-decoration: none; }
.office-phone a:hover { text-decoration: underline; }
.office-phone span { color: var(--text); }

/* ── Consultant notes (the small yellow box) ───────────────────────── */
.imp-notes { margin-bottom: 16px; padding: 10px 14px; background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--radius); color: var(--amber-text); font-size: 13.5px; }
.imp-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.imp-notes li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; }
.imp-notes .icon { width: 15px; height: 15px; margin-top: 2px; opacity: .8; }
.imp-notes li.is-warn { font-weight: 600; }
.imp-notes li.is-warn strong { font-weight: 700; }
.imp-notes .link { color: var(--amber-text); font-weight: 600; }
.session-ended { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--panel); border-left: 3px solid var(--line-strong); }

/* ── Device previews (outer page) ──────────────────────────────────── */
body.device-mode { background: #ECEDEF; }
body.device-mode > :not(.proto-bar):not(#device-stage):not(script) { display: none !important; }
body.device-mode .proto-settings { display: none; }
.device-stage { display: flex; justify-content: center; align-items: flex-start; gap: 56px; padding: 40px 24px 56px; flex-wrap: wrap; }
.device-caption { max-width: 300px; display: grid; gap: 12px; padding-top: 40px; }
.device-caption h1 { font-size: 30px; line-height: 1.2; }
.device-caption p { font-size: 15px; }
.phone { width: 414px; padding: 12px; background: #16181D; border-radius: 58px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25), inset 0 0 0 2px #2c2f36; flex: none; }
.phone-screen { height: 844px; border-radius: 46px; overflow: hidden; background: var(--white); display: flex; flex-direction: column; position: relative; }
.phone-status { height: 47px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 36px; font-weight: 600; font-size: 15px; color: #000; background: var(--white); position: relative; }
.phone-island { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 120px; height: 34px; border-radius: 20px; background: #000; }
.phone-icons { display: inline-flex; gap: 5px; align-items: center; color: #000; fill: currentColor; }
.phone-urlbar { flex: none; padding: 4px 14px 8px; background: var(--white); }
.phone-urlbar span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 12px; background: #EEF0F2; font-size: 14px; color: #333; }
.phone iframe { flex: 1; width: 100%; border: 0; display: block; }
.phone-browserbar { flex: none; height: 44px; display: flex; justify-content: space-around; align-items: center; background: #F7F7F8; border-top: 1px solid #E2E2E2; color: var(--blue); font-size: 20px; }
.phone-home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: #111; opacity: .85; pointer-events: none; }
/* App: the status bar sits on the same blue as the app header */
.phone-app .phone-status { background: #0E6BEA; color: var(--white); }
.phone-app .phone-icons { color: var(--white); }
.phone-app .phone-island { background: #000; }

/* ── App bottom sheet for a chosen location ────────────────────────── */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(17, 44, 92, .4); opacity: 0; transition: opacity .28s ease; }
.sheet-backdrop.is-open { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; display: flex; flex-direction: column; max-height: 84vh; max-height: 84dvh; background: var(--white); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(17, 44, 92, .2); transform: translateY(100%); transition: transform .32s cubic-bezier(.22, .8, .24, 1); }
.sheet.is-open { transform: translateY(0); }
.sheet.is-dragging { transition: none; }
.sheet-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 16px 10px 20px; touch-action: none; cursor: grab; user-select: none; border-bottom: 1px solid var(--line); }
.sheet.is-dragging .sheet-top { cursor: grabbing; }
.sheet-handle { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 48px; height: 5px; border-radius: 3px; background: #C9D0DA; }
.sheet-hint { font-size: 13px; color: var(--text); }
.sheet-close { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--white); color: var(--navy); font-size: 16px; font-weight: 600; cursor: pointer; }
.sheet-close:hover { border-color: var(--navy); }
.sheet-close .icon { width: 18px; height: 18px; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 40px; }
.sheet .detail .back { display: none; }
/* Sheet contact area: a plain line of context and one row of three equal actions */
.advice-note { font-size: 14.5px; color: var(--text-strong); }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qa { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 70px; padding: 8px 4px; border: 0; border-radius: 12px; background: #EEF5FE; color: var(--blue); font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.qa .icon { width: 22px; height: 22px; }
.qa small { font-size: 11.5px; font-weight: 400; }
.qa:hover { background: #E2EEFD; }
.qa-primary, .qa-primary:hover { background: var(--blue); color: var(--white); }
.callback-line { font-size: 14px; margin-top: -8px; }
body.sheet-open { overflow: hidden; }

/* ── Inside a frame ────────────────────────────────────────────────── */
body[data-embed] .proto-bar, body[data-embed] .proto-gear { display: none !important; }

/* App frame — modelled on the UniSuper app's More tab */
body[data-embed="app"] { --app-bg: #F5F6F8; --app-ink: #112C5C; --app-section: #4A5B78; background: var(--app-bg); padding-bottom: 92px; }
body[data-embed="app"] .us-header, body[data-embed="app"] .mol-header, body[data-embed="app"] .mol-side, body[data-embed="app"] .us-hero, body[data-embed="app"] .advice-band, body[data-embed="app"] .us-footer { display: none !important; }
body[data-embed="app"] .shell { display: block; }
body[data-embed="app"][data-app-screen="more"] .page { display: none; }
body[data-embed="app"]:not([data-app-screen="more"]) .app-more { display: none; }
body[data-embed="app"] .page { padding-top: 16px; background: var(--app-bg); }
body[data-embed="app"] .locator-head h2 { font-family: var(--font); font-weight: 600; color: var(--app-ink); font-size: 20px; line-height: 26px; letter-spacing: 0; }
body[data-embed="app"] .locator-panel, body[data-embed="app"] .locator[data-layout="list"] .locator-panel { background: var(--app-bg); }
body[data-embed="app"] .locator { border: 0; }
body[data-embed="app"] .appt, body[data-embed="app"] .result, body[data-embed="app"] .imp-notes { border-radius: 8px; }

.app-head { position: sticky; top: 0; z-index: 30; height: 56px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; color: var(--white); overflow: hidden;
  background: radial-gradient(120% 140% at 85% -40%, rgba(255, 255, 255, .12) 0 40%, transparent 41%), linear-gradient(180deg, #0E6BEA 0%, #0E71F2 100%); }
.app-head-title { grid-column: 2; text-align: center; font-size: 19px; font-weight: 600; letter-spacing: .1px; }
.app-head-back { grid-column: 1; grid-row: 1; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--white); cursor: pointer; }
.app-head-back .icon { width: 24px; height: 24px; stroke-width: 2.2; }
body[data-app-screen="more"] .app-head-back { visibility: hidden; }

.app-more { padding: 6px 24px 24px; }
.app-section { font-family: var(--font); font-weight: 600; font-size: 16px; color: var(--app-section); margin: 22px 0 12px; letter-spacing: 0; }
.app-list { scroll-margin-bottom: 104px; list-style: none; margin: 0; padding: 0; background: var(--white); border-radius: 8px; box-shadow: 0 1px 3px rgba(17, 44, 92, .07); overflow: hidden; }
.app-list li + li { border-top: 1px solid #E8EAEE; }
.app-row { width: 100%; display: grid; grid-template-columns: 32px 1fr auto 18px; align-items: center; gap: 0 16px; min-height: 54px; padding: 0 18px 0 20px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--app-ink); font-size: 15.5px; font-weight: 600; }
.app-row:active { background: #F0F4FA; }
.app-row-icon { width: 26px; height: 26px; stroke-width: 1.5; color: var(--app-ink); }
.app-chevron { grid-column: 4; width: 18px; height: 18px; color: var(--blue); stroke-width: 2; }
.app-new { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); background: #E7F0FE; padding: 2px 7px; border-radius: 10px; }
.app-row.is-new { background: linear-gradient(90deg, #F2F7FF, var(--white) 70%); }

.app-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border-radius: 14px 14px 0 0; box-shadow: 0 -2px 10px rgba(17, 44, 92, .08); padding-bottom: 20px; overflow: hidden; }
.app-tabs a { display: grid; justify-items: center; align-content: center; gap: 4px; height: 64px; font-size: 12.5px; color: var(--app-ink, #112C5C); text-decoration: none; border-top: 3px solid transparent; }
.app-tabs a .icon { width: 24px; height: 24px; stroke-width: 1.5; }
.app-tabs a.is-on { color: var(--blue); background: #EEF5FE; border-top-color: var(--blue); }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .us-utility { display: none; }
  .snapshot { grid-template-columns: 1fr 1fr; }
  .snapshot > .audit { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .us-mainnav { display: none; }
  .us-burger { display: block; }
  .us-header-top { gap: 14px; }
  .us-account .btn-primary { display: none; }
  body.is-signed-in .shell { grid-template-columns: 1fr; }
  body.is-signed-in .mol-side { display: none; }
  body.is-signed-in .mol-header { height: 64px; }
  .mol-logo { margin-left: 10px; font-size: 24px; }
  .mol-logo svg { width: 28px; height: 22px; }
  .mol-action { padding: 0 14px; }
  .mol-user span, .mol-logout span { display: none; }
  .locator { grid-template-columns: 1fr; height: auto; }
  /* Phones: search first, then the map, then results. The panel's children join the
     locator's grid so the map can sit between them. */
  .locator-panel { display: contents; }
  #search-area { order: 1; background: var(--panel); padding: 20px 20px 4px; }
  .locator[data-layout="map"] .map-wrap { order: 2; min-height: 42vh; }
  #panel-body { order: 3; background: var(--panel); margin: 0; padding: 4px 20px 20px; overflow: visible; }
  .input { height: 52px; font-size: 17px; }
  .search-field .btn { height: 52px; padding: 0 18px; font-size: 16px; }
  .search-help { flex-direction: column; align-items: stretch; gap: 10px; }
  .search-help .link { justify-content: center; height: 48px; border: 1px solid var(--blue); border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 15px; background: var(--white); }
  .locator[data-layout="list"] #search-area { grid-template-columns: 1fr; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .table td { border: 0; padding: 4px 16px; }
  .table .rank { display: none; }
  .table .col-actions { text-align: left; padding-top: 10px; }
  .table .col-actions .btn { margin: 0 6px 0 0; }
  .lookup-panel { grid-template-columns: 1fr; padding: 20px; }
  .member-chip-text { display: none; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .proto-bar { padding: 6px 16px; }
  .proto-bar-label { display: none; }
  .us-hero { height: 112px; }
  .us-hero h1 { font-size: 30px; line-height: 40px; }
  .page { padding: 28px 0 48px; }
  .locator-head { flex-direction: column; align-items: stretch; }
  .locator-head h2 { font-size: 26px; line-height: 32px; }
  .layout-toggle button { flex: 1; justify-content: center; }
  .snapshot { grid-template-columns: 1fr; }
  .snapshot > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .appt { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .appt > div { flex-basis: 100%; }
  .appt strong { font-size: 18px; }
  .session-ended { flex-direction: column; align-items: flex-start; }
  .field-row, .slot-day { grid-template-columns: 1fr; }
  .modal-inner { padding: 22px 20px 24px; }
  .us-account .btn { min-width: 0; }
  .impersonation { padding: 10px 16px; flex-wrap: wrap; }
  .impersonation .imp-meta { display: none; }
  body[data-view="guest"] .call-strip { display: flex; min-height: 50px; padding: 0 14px; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }