/* UnifyPortal.Web. The look of reference/islands-customer-portal-mockup.html, with every colour and font taken from the theme
   block the layout renders from /config/public (docs/06). Bootstrap 5 supplies the grid, forms and utilities; its variables
   are pointed at the theme here so a brand change is a database update. */

:root {
  --font: var(--font-body);
  --font-head: var(--font-heading);
  --line-2: #EEF3F5;
  --green: #127A5C; --green-bg: #E3F6EF;
  --amber: #8A5A00; --amber-bg: #FFF1D6; --amber-line: #E4A11B;
  --red: #B4232C; --red-bg: #FCE8E9;
  --grey-bg: #EEF2F5;
  --r-lg: 20px; --r-md: 12px; --r-sm: 8px;
  --shadow-pop: 0 16px 40px rgba(14, 43, 61, .18);
  --shadow-panel: 0 1px 2px rgba(14, 43, 61, .04), 0 12px 32px -20px rgba(14, 43, 61, .22);
  --shadow-lift: 0 8px 24px -12px rgba(14, 43, 61, .28);

  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: .9375rem;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--background);
  --bs-heading-color: var(--heading);
  --bs-link-color: var(--slate);
  --bs-link-hover-color: var(--heading);
  --bs-link-color-rgb: 45, 105, 123;
  --bs-border-color: var(--line);
  --bs-border-radius: var(--r-md);
  --bs-focus-ring-color: var(--accent-soft);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: .9375rem; line-height: 1.5; color: var(--ink); background: var(--background); -webkit-font-smoothing: antialiased; }
body:not(.auth-body) { background: linear-gradient(180deg, var(--accent-soft) 0, var(--background) 360px) no-repeat, var(--background); }
h1, h2, h3, h4 { margin: 0; color: var(--heading); line-height: 1.2; font-family: var(--font-heading); }
h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 600; font-family: var(--font-body); }
p { margin: 0; }
a { color: var(--slate); }
a:hover { color: var(--heading); }
button { font: inherit; }
img, svg { display: block; }
code { font-size: .95em; color: var(--heading); background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
@media (min-width: 1500px) { .wrap { max-width: 1360px; } }
.sub { color: var(--slate); }
.meta { color: var(--slate); font-size: .8125rem; }
.empty { display: flex; align-items: center; gap: 12px; color: var(--slate); padding: 16px 18px; background: var(--background); border-radius: var(--r-md); }
.empty > .bi { color: var(--accent); font-size: 1.25rem; flex: none; }
.hidden { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--heading); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .9375rem; border: 1px solid transparent; line-height: 1.2; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.btn-primary:hover { box-shadow: 0 8px 20px -10px var(--primary); transform: translateY(-1px); }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: 0, 181, 242; }
.btn-secondary { --bs-btn-bg: #fff; --bs-btn-border-color: var(--primary); --bs-btn-color: var(--primary); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: var(--primary); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-color: var(--primary); --bs-btn-active-border-color: var(--primary); }
.btn-lg { padding: 13px 20px; font-size: 1rem; }
.btn-sm { padding: 7px 14px; font-size: .875rem; --bs-btn-padding-y: 7px; --bs-btn-padding-x: 14px; --bs-btn-font-size: .875rem; }
.btn-ghost { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--primary); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--primary); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-color: var(--primary); --bs-btn-active-border-color: transparent; padding-left: 10px; padding-right: 10px; }
.btn-ghost .bi { font-size: .9em; transition: transform .15s; }
.btn-ghost:hover .bi-arrow-right { transform: translateX(3px); }
.btn-block { width: 100%; }
.btn.loading { opacity: .75; pointer-events: none; }
.btn.loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.textlink { background: none; border: 0; padding: 0; color: var(--slate); font-weight: 600; text-decoration: underline; cursor: pointer; }
.textlink:hover { color: var(--heading); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .875rem; color: var(--ink); }
.field .hint { font-size: .8125rem; color: var(--slate); }
.input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font: inherit; font-size: .9375rem; color: var(--ink); background: #fff; min-height: 42px; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.input[readonly] { background: var(--background); color: var(--slate); }
.input.input-validation-error { border-color: var(--red); }
.err { color: var(--red); font-size: .8125rem; font-weight: 600; }
.err:empty { display: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.code-input { letter-spacing: .35em; font-size: 1.5rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--heading); background: var(--accent-soft); }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--heading); flex: none; }
.choice .title { font-weight: 700; color: var(--heading); }
.choice .grow { flex: 1; }

/* ---------- Notices ---------- */
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #fff; margin-bottom: 20px; }
.notice > .bi { flex: none; font-size: 1.25rem; line-height: 1.4; }
.notice p { margin: 0; }
.notice .reference { margin-top: 6px; font-size: .875rem; }
.notice-danger { background: var(--red-bg); color: var(--red); }
.notice-danger p { color: var(--red); }
.notice-info { background: var(--accent-soft); color: var(--heading); }
.notice-success { background: var(--green-bg); color: var(--green); }

/* ---------- Shell ---------- */
.topbar { background: #fff; position: sticky; top: 0; z-index: 30; transition: box-shadow .2s; }
.topbar::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--heading), var(--primary)); }
.topbar.scrolled { box-shadow: 0 8px 24px -12px rgba(14, 43, 61, .25); }
.topbar-inner { display: flex; align-items: center; gap: 28px; height: 66px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 26px; width: auto; }
.brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--heading); }
.auth-hero .brand img { height: 40px; }
.auth-hero .brand-name { color: #fff; }
.mainnav { display: flex; gap: 2px; padding: 4px; background: var(--background); border-radius: 999px; }
.mainnav a { padding: 7px 14px; border-radius: 999px; color: var(--slate); font-weight: 600; text-decoration: none; font-size: .9rem; transition: background .15s, color .15s; }
.mainnav a:hover { color: var(--heading); }
.mainnav a.active { color: var(--heading); background: #fff; box-shadow: 0 1px 2px rgba(14, 43, 61, .08); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.horizon { height: 1px; background: var(--line); opacity: .7; }
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.usermenu summary::-webkit-details-marker { display: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--slate), var(--heading)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; box-shadow: 0 0 0 3px var(--accent-soft); }
.usermenu .menu { position: absolute; right: 0; top: calc(100% + 10px); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-pop); min-width: 240px; padding: 8px; z-index: 40; }
.usermenu .menu-name { padding: 10px 12px 12px; font-weight: 700; color: var(--heading); border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.usermenu .menu a, .usermenu .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); background: none; border: 0; cursor: pointer; text-align: left; font-weight: 600; }
.usermenu .menu a:hover, .usermenu .menu button:hover { background: var(--background); }
main.page { padding: 36px 28px 72px; min-height: calc(100vh - 220px); }
.site-footer { background: #fff; padding: 24px 0 28px; color: var(--slate); font-size: .8125rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.site-footer a { color: var(--slate); }
.site-footer .version { margin-left: auto; color: var(--muted); font-size: .75rem; }
.tabbar { display: none; }

/* ---------- Layout blocks ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.page-head .sub { margin-top: 6px; max-width: 60ch; font-size: 1rem; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; margin-bottom: 20px; box-shadow: var(--shadow-panel); }
.panel-head .btn-ghost { margin-right: -10px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { margin: 0; font-size: 1.2rem; }
.panel-help .sub { margin-bottom: 10px; }
.field-group + .field-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.field-group h3 { margin-bottom: 4px; color: var(--slate); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.two-col > .panel { margin-bottom: 0; }
.two-col { margin-bottom: 20px; }
.contact-us p { margin: 6px 0; }
.contact-us .meta { margin-left: 8px; }
.unavailable h1 { margin-bottom: 8px; }
.unavailable .reference { margin: 16px 0; }
.unavailable .actions { margin-top: 20px; }

/* ---------- Sign in, register, forgot password ---------- */
.auth-body { background: var(--background); }
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-hero { position: relative; color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(160deg, var(--accent) 0%, var(--heading) 70%); overflow: hidden; }
.auth-hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 65%); pointer-events: none; }
.auth-hero h2 { color: #fff; font-size: 2.1rem; font-weight: 800; line-height: 1.15; max-width: 15ch; letter-spacing: -.02em; font-family: var(--font-heading); }
.auth-hero p { color: rgba(255, 255, 255, .86); max-width: 44ch; margin-top: 14px; font-size: 1.05rem; }
.auth-hero .islands-line { margin-top: 34px; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--background); }
.auth-form .inner-wrap { width: 100%; max-width: 440px; }
.auth-form .inner { width: 100%; background: #fff; border-radius: 16px; padding: 32px; }
.auth-version { margin: 14px 0 0; text-align: center; font-size: .75rem; color: var(--muted); }
.auth-form h1 { font-size: 1.6rem; margin-bottom: 6px; }
.auth-form .sub { margin-bottom: 24px; }
.auth-form form { margin-top: 8px; }
.auth-foot { margin-top: 24px; font-size: .9rem; color: var(--slate); }
.auth-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.auth-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; font-size: .78rem; color: var(--muted); font-weight: 600; }
.auth-steps li { display: flex; flex-direction: column; gap: 6px; }
.auth-steps li::before { content: ""; height: 5px; border-radius: 3px; background: var(--line-2); }
.auth-steps li.done::before { background: var(--accent); }
.auth-steps li.current::before { background: var(--heading); }
.auth-steps li.current { color: var(--heading); }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--slate); text-decoration: none; font-weight: 600; font-size: .875rem; margin-bottom: 16px; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.back:hover { color: var(--heading); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  main.page { padding: 20px 16px 96px; }
  .mainnav { display: none; }
  .btn-quote { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); z-index: 30; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; text-decoration: none; color: var(--muted); font-size: .68rem; font-weight: 700; border-radius: 8px; }
  .tabbar a.active { color: var(--heading); }
  .site-footer { display: none; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .btn { width: 100%; }
  h1 { font-size: 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .panel { padding: 18px; }
  .auth { grid-template-columns: 1fr; min-height: auto; }
  .auth-hero { min-height: 200px; padding: 20px 20px 22px; justify-content: space-between; }
  .auth-hero h2 { font-size: 1.4rem; }
  .auth-hero p, .auth-hero .islands-line { display: none; }
  .auth-form { padding: 16px 16px 40px; align-items: flex-start; }
  .auth-form .inner { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Read pages: lists, key values, cards, timeline ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-blue { background: var(--accent-soft); color: var(--slate); }
.pill-red { background: var(--red-bg); color: var(--red); }
.pill-grey { background: var(--grey-bg); color: var(--slate); }
.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: .72rem; font-weight: 700; vertical-align: middle; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.summary .k { font-size: .8125rem; color: var(--slate); }
.summary .v { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.two-col.wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.kvs { margin: 0; display: grid; gap: 0; }
.kvs > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.kvs > div:last-child { border-bottom: 0; }
.kvs dt { color: var(--slate); font-size: .875rem; font-weight: 400; }
.kvs dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.kvs.tight > div { padding: 7px 0; }
.kvs.cols2 { grid-template-columns: 1fr 1fr; column-gap: 56px; }
.kvs.cols2 > div { grid-template-columns: minmax(120px, 42%) 1fr; }
.list { margin: 0; padding: 0; list-style: none; }
.list > li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .title { font-weight: 700; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.list .meta { font-size: .8125rem; color: var(--slate); }
.rowlink .meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 2px; }
.rowlink .meta > span + span::before { content: "\00b7"; margin: 0 8px; color: var(--muted); }
.list > li.rowitem { padding: 0; }
.rowlink { display: flex; align-items: center; gap: 14px; width: calc(100% + 24px); margin: 0 -12px; text-decoration: none; color: inherit; padding: 14px 12px; border-radius: var(--r-md); transition: background .15s; }
.rowlink:hover { background: var(--background); }
.rowlink .chev { color: var(--muted); transition: transform .15s, color .15s; }
.rowlink:hover .chev { transform: translateX(3px); color: var(--heading); }
.rowlink:hover .title { color: var(--slate); }
.rowlink .right { text-align: right; font-size: .8125rem; color: var(--slate); white-space: nowrap; }
.rowlink .right strong { display: block; color: var(--ink); font-variant-numeric: tabular-nums; }
.rowlink .right.premium { min-width: 90px; }
.rowlink .right.premium strong { color: var(--heading); font-size: 1.05rem; font-family: var(--font-heading); }
.panel-head h2 .count { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--slate); font-size: .78rem; font-weight: 700; vertical-align: middle; }
.folder-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--slate); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--heading); }
.chip.active { background: var(--heading); border-color: var(--heading); color: #fff; }
.chip .count { font-weight: 700; opacity: .8; }
.doc-folder + .doc-folder { margin-top: 18px; }
.doc-folder .folder-name { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.doc-folder .folder-name i { color: var(--accent); }
.doc-ic { color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 1.2rem; }
.doc-ic.mine { color: var(--green); }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--slate); text-decoration: none; }
.iconbtn:hover { background: var(--background); color: var(--heading); }
.product-ic { color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), #fff); box-shadow: inset 0 0 0 1px var(--accent-soft); width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 1.2rem; }
.product-ic.lg { width: 60px; height: 60px; font-size: 1.7rem; }
.claim-card { position: relative; background: #fff; border-radius: 14px; padding: 18px 20px 18px 24px; margin-bottom: 0; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.claim-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.claim-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.panel .claim-card { background: var(--background); padding: 16px 18px 16px 22px; }
.claim-card .top { display: flex; gap: 14px; align-items: flex-start; }
.claim-card .top .grow { flex: 1; min-width: 0; }
.claim-card h3 { font-size: 1.05rem; }
.claim-card .meta { color: var(--slate); font-size: .875rem; margin-top: 2px; }
.claim-card .what { margin: 12px 0 0; color: var(--ink); font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.claim-card .figures { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; }
.claim-card .figures > div { display: flex; flex-direction: column; gap: 1px; }
.claim-card .figures dt { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.claim-card .figures dd { margin: 0; font-family: var(--font-heading); font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.claim-card.needs-you::before { background: var(--primary); }
.claim-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: .875rem; color: var(--slate); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--line-2); margin-left: 7px; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.timeline li:first-child::before { border-color: var(--heading); background: var(--heading); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline .when { font-size: .78rem; color: var(--muted); font-weight: 600; }
.timeline .what { font-weight: 700; color: var(--ink); }
.timeline .detail { font-size: .875rem; color: var(--slate); }
.detail-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.detail-head .grow { flex: 1; min-width: 0; }
.detail-head h1 { font-size: 1.6rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 10px; color: var(--slate); font-size: .875rem; }
.table-scroll { overflow-x: auto; }
.risk-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.risk-table th { text-align: left; font-size: .8125rem; color: var(--slate); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.risk-table td { padding: 12px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.risk-table tfoot td { border-bottom: 0; font-weight: 700; color: var(--heading); }
.risk-table .num, .risk-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.risk-table .title { font-weight: 700; color: var(--ink); text-decoration: none; }
.risk-table .title:hover { color: var(--slate); }
.section-unavailable { margin-bottom: 20px; }
.panel .section-unavailable { margin-bottom: 0; }
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .kvs.cols2 { column-gap: 28px; }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .two-col, .two-col.wide { grid-template-columns: 1fr; }
  .kvs.cols2 { grid-template-columns: 1fr; }
  .kvs > div { grid-template-columns: 1fr; gap: 2px; }
  .rowlink .right { display: none; }
  .detail-head { flex-wrap: wrap; }
}

/* Write flows: request a change and my details edits */
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 20px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.context-line { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--background); border-radius: var(--r-md); margin-bottom: 18px; font-weight: 600; color: var(--ink); }
.context-line .bi { color: var(--primary); font-size: 1.1rem; }
textarea.input { min-height: 130px; resize: vertical; line-height: 1.5; }
select.input { appearance: auto; }
.pending { color: var(--amber); font-size: .8125rem; font-weight: 600; margin: 8px 0 0; }
.fineprint { color: var(--slate); font-size: .8125rem; margin: 12px 0 0; }
@media (max-width: 760px) {
  .detail-actions .btn, .form-actions .btn { width: 100%; }
}

/* Uploads */
.field label .optional { font-weight: 400; color: var(--slate); margin-left: 6px; font-size: .8125rem; }
.dropzone { border: 2px dashed var(--line); border-radius: var(--r-md); padding: 22px 18px; text-align: center; background: #fff; transition: border-color .15s, background .15s; }
.dropzone > i { display: none; font-size: 1.8rem; color: var(--accent); }
.dropzone > p { display: none; margin: 6px 0 10px; color: var(--slate); }
.dropzone > p .link { color: var(--heading); text-decoration: underline; cursor: pointer; font-weight: 600; }
.dropzone.enhanced > i, .dropzone.enhanced > p { display: block; }
.dropzone.enhanced > input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone.enhanced { position: relative; }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.has-files { border-style: solid; }
.file-list { list-style: none; margin: 8px 0 0; padding: 0; text-align: left; }
.file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-2); font-size: .875rem; }
.file-list .name { overflow-wrap: anywhere; color: var(--ink); font-weight: 600; }
.file-list .size { color: var(--slate); white-space: nowrap; }
.progress { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 4px 0 16px; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
input[type=file].input { padding: 10px 12px; }
.doc-ic.off { color: var(--red); }
.upload-results .meta { color: var(--ink); }

/* Register a claim (fnol.md) */
.stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; list-style: none; margin: 0 0 6px; padding: 0; }
.stepper li { display: flex; flex-direction: column; gap: 8px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.stepper li::before { content: ""; height: 5px; border-radius: 3px; background: var(--line); }
.stepper li.done::before { background: var(--accent); }
.stepper li.current::before { background: var(--heading); }
.stepper li.current { color: var(--heading); }
.stepper li.done { color: var(--slate); }
.step-count { font-size: .8125rem; color: var(--slate); margin-bottom: 14px; }
.wizard-panel h2 { font-size: 1.35rem; margin-bottom: 6px; }
.wizard-panel .lead { color: var(--slate); margin-bottom: 22px; max-width: 62ch; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.wizard-nav .btn .bi { margin: 0 0 0 6px; }
.wizard-nav .btn-secondary .bi { margin: 0 6px 0 0; }
.context-line .textlink { margin-left: auto; }
.address-offers { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.address-search { padding: 12px 14px; background: var(--background); border-radius: var(--r-md); margin-bottom: 14px; }
.address-search .lbl { display: block; font-weight: 600; margin-bottom: 6px; }
.address-search-host gmp-place-autocomplete {
  width: 100%; display: block; color-scheme: light;
  --gmp-mat-color-surface: #fff; --gmp-mat-color-on-surface: var(--heading); --gmp-mat-color-primary: var(--primary); --gmp-mat-font-family: var(--font-body);
}
.address-map { display: block; width: 100%; height: auto; margin-top: 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); }
.choice.off { opacity: .6; cursor: not-allowed; }
.choices.inline { grid-template-columns: repeat(2, minmax(0, 160px)); }
.choice.small { padding: 8px 12px; }
.q-group { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.q-group legend { font-weight: 700; color: var(--heading); font-size: 1rem; margin-bottom: 10px; padding: 0; }
.review-block { background: var(--background); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 14px; }
.review-block .rb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review-block h3 { font-size: .95rem; margin: 0; }
.review-block .plain { white-space: pre-wrap; font-weight: 400; }
.plainlist { margin: 0; padding-left: 18px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; cursor: pointer; font-weight: 400; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--heading); flex: none; }
.done-hero { text-align: center; padding: 40px 24px; }
.done-hero .big-check { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: var(--green-bg); color: var(--green); align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 12px; }
.done-hero .ref { font-family: var(--font-heading, inherit); font-size: 2rem; font-weight: 700; color: var(--heading); margin: 6px 0 12px; letter-spacing: .02em; }
.next-steps { text-align: left; max-width: 560px; margin: 20px auto 0; padding-left: 22px; }
.next-steps li { margin-bottom: 10px; }
.form-actions.centre { justify-content: center; margin-top: 22px; }
.inline-form { display: inline; }
.filelist { margin-top: 14px; }
@media (max-width: 760px) {
  .wizard-panel { padding: 20px 18px; }
  .stepper .lbl { display: none; }
  .stepper li.current .lbl { display: inline; }
  .wizard-nav { flex-direction: column-reverse; align-items: stretch; }
  .choices.inline { grid-template-columns: 1fr 1fr; }
}

/* Get a quote (quote-links.md): product cards that open the client's quote pages in a new tab */
.quote-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.quote-card:hover { box-shadow: var(--shadow-pop); color: inherit; }
.quote-grid { margin-bottom: 24px; }
.quote-card .card-top { margin-bottom: 14px; }
.quote-card h3 { color: var(--heading); }
.quote-card .sub { font-size: .875rem; margin: 4px 0 14px; min-height: 3.9em; }

/* ---------- Home: at a glance tiles and the two column layout on wide screens ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; text-decoration: none; color: inherit; box-shadow: var(--shadow-panel); transition: box-shadow .15s, transform .15s; }
.stat:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); color: inherit; }
.stat-ic { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-soft), #fff); box-shadow: inset 0 0 0 1px var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.stat-n { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; color: var(--heading); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-l { font-size: .8125rem; color: var(--slate); font-weight: 600; }
.dash { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dash-main, .dash-side { min-width: 0; }
.dash .panel:last-child { margin-bottom: 0; }
.dash-side .panel { margin-bottom: 20px; }
.dash-side .panel:last-child { margin-bottom: 0; }
.dash-main .panel { margin-bottom: 20px; }
.dash-main .panel:last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-main .panel:last-child { margin-bottom: 20px; }
}
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { grid-template-columns: 1fr; padding: 12px 10px; text-align: center; justify-items: center; row-gap: 2px; }
  .stat-ic { grid-row: auto; width: 36px; height: 36px; font-size: 1.1rem; margin-bottom: 4px; }
  .stat-n { font-size: 1.3rem; }
  .stat-l { font-size: .72rem; }
}

/* ---------- Busy indicator (Theme.Loading, docs/06). Hidden until shell.js has waited the configured delay ---------- */
.busy[hidden] { display: none; }
.busy-bar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; overflow: hidden; background: var(--accent-soft); }
.busy-bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 0 3px 3px 0; animation: busy-slide 1.1s ease-in-out infinite; }
@keyframes busy-slide { 0% { transform: translateX(-100%); } 60% { transform: translateX(150%); } 100% { transform: translateX(260%); } }
.busy-overlay { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .6); backdrop-filter: blur(1.5px); animation: busy-fade .2s ease-out; }
@keyframes busy-fade { from { opacity: 0; } to { opacity: 1; } }
.busy-card { display: flex; align-items: center; justify-content: center; }
.busy-card .busy-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.spinner { width: 56px; height: 56px; border: 5px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; flex: none; box-shadow: 0 0 0 8px rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .7); }
.busy.style-spinner .busy-bar, .busy.style-bar .busy-overlay { display: none; }
@media (prefers-reduced-motion: reduce) {
  .busy-bar span { width: 100%; opacity: .7; }
  .spinner { border-top-color: var(--accent-soft); border-right-color: var(--accent); }
}

/* ---------- Panels answer to their own width, so a narrow column keeps rows and cards readable (home page right column, phones) ---------- */
.panel { container-type: inline-size; }
@container (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
  .rowlink .right:not(.premium) { display: none; }
}
@container (max-width: 480px) {
  .grid-3 { grid-template-columns: 1fr; }
  .kvs.cols2 { grid-template-columns: 1fr; }
  .rowlink .right { display: none; }
  .rowlink .meta { flex-direction: column; }
  .rowlink .meta > span + span::before { content: none; }
  .claim-card .top .pill { margin-top: 2px; }
  .claim-card .top { flex-wrap: wrap; }
  .claim-card .top::after { content: ""; flex-basis: 100%; order: 2; height: 0; }
  .claim-card .top .pill { order: 3; margin: 6px 0 0 56px; }
}