/* ============================================================================
   LifeLinkr directory portal — unified stylesheet
   Serves /doctors/ and /art-clinics/.

   Palette and typeface are taken from lifelinkr-brand-guideline.pdf:
     #0650A2  dark blue   (guideline, "Color Code")   -> --accent  / --brand-dark
     #33AAE1  light blue  (guideline, "Color Code")   -> --brand-2 / --brand-light
     Manrope, Regular + Bold (guideline, "Typography")

   Neutrals, spacing, radii and the component set below come from the directory
   design export. Two blues are in play and they are NOT interchangeable:
     --brand-2  #33AAE1  brand identity: the wordmark LINK, and link hover.
     --accent-2 #0E6FB8  a decorative export value (bundle 3), kept only on the alternate
                         avatar monogram, which nobody reads as a brand claim.
   The two soft tints follow their own parent: --brand-2-soft is regenerated
   from #33AAE1 (its own hue and saturation, at the tint lightness of 91.6%),
   --accent-2-soft stays the tint that the monogram sits on (bundle 3: #CFE1F6).
   ========================================================================== */
:root{
  /* --- surfaces & ink --- */
  --bg-0:#FFFFFF;          /* cards, header, surfaces */
  --bg-1:#F4F6F9;          /* page background, inset fields */
  --bg-2:#E9EDF3;          /* chips, muted fills, bar tracks */
  --border:#DEE3EA;
  --fg-1:#14181F;          /* primary text (navy) */
  --fg-2:#3D4553;          /* secondary text */
  --fg-3:#5F6877;          /* tertiary / labels */
  --footer-bg:#23242F;     /* site footer ground (unchanged) */
  /* --- brand --- */
  --accent:#0A56A8;        /* primary brand blue — CTAs, links, active (bundle LL-3 value, AB 2026-09-17) */
  --brand-2:#33AAE1;       /* secondary brand blue — wordmark LINK, link hover */
  --brand-2-soft:#DAEFF9;  /* tint of #33AAE1 */
  --accent-2:#0E6FB8;      /* decorative only — alternate avatar monogram */
  --accent-2-soft:#CFE1F6; /* tint of #0E6FB8 */
  --accent-soft:#E6F0FB;
  --accent-deep:#043B78;   /* pressed/hover on solid brand fills */
  --on-accent:#FFFFFF;
  --success:#15803D;  --success-soft:#E6F4EA;
  --warning:#B45309;  --warning-soft:#FBF3E9;  --warning-line:#EED9BE;
  /* --- radii & shadow --- */
  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-pill:999px;
  /* bundle 3 amber ramp: missing information reads as "attention", not "disabled" */
  --amber:#8A6410; --amber-soft:#FFF9EC; --amber-fill:#FBEBC4; --amber-border:#E8D5A6;
  /* LL-3 semantic ramps */
  --teal:#0F766E; --teal-soft:#E0F2F0;
  --violet:#6D28D9; --violet-soft:#EFE9FC;
  --rose:#BE185D; --rose-soft:#FCE7F1;
  --green:#15803D; --green-soft:#E3F5EA;
  --rating:#D97706;
  --shadow-1:0 1px 2px rgba(16,24,40,0.04);
  --shadow-2:0 12px 32px -14px rgba(16,20,24,0.16);
  --font:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* back-compat aliases: older markup (the claim form) reads these names */
  --brand-dark:var(--accent);
  --brand-deep:var(--accent-deep);
  --brand-light:var(--brand-2);
  --brand-soft:var(--accent-soft);
  --brand-light-soft:var(--brand-2-soft);
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}   /* the design export's reset: adopted 2026-09-17 in place of patching .fee-card .note; measured to move nothing else on any page type */
body{margin:0;background:var(--bg-1);color:var(--fg-1);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--brand-2)}
h1,h2,h3{letter-spacing:-0.015em;text-wrap:pretty}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}
.mt{margin-top:24px}

/* ---------- shared components ---------- */
.microlabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-3)}
.card{background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:var(--r-sm);padding:11px 20px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-align:center}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn-outline{background:var(--bg-0);color:var(--accent);border:1px solid var(--border)}
.btn-outline:hover{background:var(--bg-0);border-color:var(--accent);color:var(--accent)}
.btn-ghost{background:transparent;color:var(--fg-2);border:1px solid var(--border)}
.btn-ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--bg-0);border-radius:var(--r-pill);padding:5px 13px;font-size:13px;font-weight:600;color:var(--fg-2)}
a.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip-tint{background:var(--bg-2);border-color:transparent}
.badge-verified{display:inline-flex;align-items:center;gap:5px;background:var(--success-soft);color:var(--success);border-radius:var(--r-pill);padding:3px 11px;font-size:12px;font-weight:700;white-space:nowrap}
.badge-basic{display:inline-flex;align-items:center;gap:5px;background:var(--bg-2);color:var(--fg-3);border-radius:var(--r-pill);padding:3px 11px;font-size:12px;font-weight:700;white-space:nowrap}
.avatar{display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);font-weight:800}
.avatar.alt{background:var(--accent-2-soft);color:var(--accent-2)}
.avatar.neutral{background:var(--bg-2);color:var(--fg-3)}

/* The one treatment for every missing field: a soft block that says what would
   appear and why it is not there, so a sparse listing reads as intentional. */
.empty{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;color:var(--fg-3);font-size:13.5px;line-height:1.55;margin:0}
.empty strong{color:var(--fg-2);font-weight:700}
.empty-inline{color:var(--fg-3);font-size:13.5px;margin:12px 0 0}
.src-note{font-size:12.5px;color:var(--fg-3);line-height:1.65;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border)}
.soft{color:var(--fg-3);font-weight:600}

/* ---------- site chrome: header ---------- */
.util{background:var(--accent);color:#fff}
.util .wrap{display:flex;align-items:center;justify-content:flex-end;gap:20px;height:34px;overflow-x:auto;scrollbar-width:none}
.util .wrap::-webkit-scrollbar{display:none}
.util a{color:#D8EAF8;font-size:12.5px;font-weight:500;white-space:nowrap}
.util a:hover{color:#fff}
.util a.cta{color:#fff;font-weight:700}
header.site{position:sticky;top:0;z-index:40;background:var(--bg-0);border-bottom:1px solid var(--border)}
header.site .in{min-height:68px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mark{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.glyph{height:26px;width:auto;display:block}
.glyph .gl{fill:var(--brand-2)}
.glyph .gd{fill:var(--accent)}
.wm{font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.wm .a{color:var(--accent)}    /* LIFE and R */
.wm .b{color:var(--brand-2)}   /* LINK */
.sub-brand,.sub{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);border-left:1px solid var(--border);padding-left:12px}
nav.main{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
nav.main a{font-size:13.5px;font-weight:600;color:var(--fg-2);padding:7px 10px;border-radius:var(--r-pill);white-space:nowrap}
nav.main a:hover{background:var(--accent-soft);color:var(--accent)}
nav.main a.on{background:var(--accent-soft);color:var(--accent)}
nav.main a.cta{background:var(--accent);color:#fff;padding:8px 15px}
nav.main a.cta:hover{background:var(--accent-deep);color:#fff}

/* ---------- site chrome: footer ---------- */
footer.site{background:var(--footer-bg);color:#C9CAD4;font-size:13px;margin-top:56px;padding:0}
footer.site a{color:#C9CAD4}
footer.site a:hover{color:var(--brand-2)}
.f-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:26px 24px;padding:38px 0 30px}
.f-col h3{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.f-col li{line-height:1.45}
.f-brand{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.f-brand .glyph{height:24px}
.f-brand .wm .a{color:#fff}
.f-brand .wm .b{color:var(--brand-2)}
.f-brand .glyph .gd{fill:#fff}  /* brand blue is 1.96:1 on the footer ground - match the wordmark override */
.f-brand .f-tag{color:#9A9BA8;font-size:12.5px}
.f-legal{border-top:1px solid rgba(255,255,255,.12);padding:16px 0 26px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:#9A9BA8}
.f-legal a{color:#9A9BA8}
.f-legal .copy{width:100%;margin-bottom:4px}

/* ---------- breadcrumbs ---------- */
.crumb,.crumbs{font-size:13px;color:var(--fg-3);padding:20px 0 0}
.crumb a,.crumbs a{color:var(--fg-3)}
.crumb a:hover,.crumbs a:hover{color:var(--accent)}
.crumb .cur,.crumbs span{color:var(--fg-1);font-weight:700}

/* ---------- screen: directory hub ---------- */
.hub-hero{background:var(--bg-0);border-bottom:1px solid var(--border);padding:56px 0 48px}
.hub-hero h1{font-size:46px;font-weight:800;line-height:1.06;max-width:820px;margin:16px 0 0}
.hub-hero p{color:var(--fg-2);font-size:17px;margin:14px 0 24px;max-width:720px}
.searchbar{display:grid;grid-template-columns:1fr 1fr auto;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-2);overflow:hidden;max-width:760px}
.searchbar .cell{padding:12px 18px;border-right:1px solid var(--border)}
.searchbar label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-3);margin:0 0 2px}
.searchbar select{border:0;outline:0;font:inherit;font-size:14px;font-weight:600;color:var(--fg-1);width:100%;background:transparent}
.searchbar .go{border:0;border-radius:0;padding:0 30px;font-size:15px}
.hub-stats{display:flex;gap:40px;margin-top:24px;flex-wrap:wrap}
.hub-stats div b{display:block;font-size:22px;font-weight:800}
.hub-stats div span{font-size:13px;color:var(--fg-3)}
.section{padding:44px 0 8px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.section-head h2{font-size:28px;font-weight:800;margin:0}
.section-head p{color:var(--fg-3);font-size:13.5px;margin:0}
.city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.city-card{padding:18px 20px;display:block;color:inherit}
a.city-card:hover{border-color:var(--accent);box-shadow:var(--shadow-2);color:inherit}
.city-card b{font-size:17px;font-weight:800;display:block}
.city-card span{font-size:13px;color:var(--fg-2);display:block}
.city-card .v{font-size:12px;color:var(--success);font-weight:700;margin-top:4px}
.city-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.city-card .chip{font-size:12px;padding:4px 10px}
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dept-card{padding:20px;display:block;color:inherit;transition:transform .15s}
.dept-card:hover{border-color:var(--accent);box-shadow:var(--shadow-2);transform:translateY(-3px);color:inherit}
.dept-card .glyph{width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;margin-bottom:12px}
.dept-card b{font-size:16px;font-weight:800;display:block}
.dept-card p{font-size:13px;color:var(--fg-2);margin:4px 0 10px}
.dept-card .foot{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--fg-3);border-top:1px solid var(--border);padding-top:10px}
.dept-card .foot .book{color:var(--accent)}
.hub-note{background:var(--accent-soft);border:1px solid var(--brand-2-soft);border-radius:var(--r-md);padding:16px 20px;font-size:14px;color:var(--fg-2)}

/* ---------- screen: listing (doctors by city, and ART clinic pages) ---------- */
.listing-head{padding:14px 0 22px}
.listing-head h1{font-size:32px;font-weight:800;margin:0}
.listing-head p{color:var(--fg-2);font-size:14px;margin:4px 0 0}
.listing-body{display:grid;grid-template-columns:276px 1fr;gap:24px;align-items:start;padding-bottom:24px}
.filters{position:sticky;top:82px;padding:18px}
.filters h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-3);margin:16px 0 8px}
.filters h3:first-child{margin-top:0}
.filters .chips{display:flex;flex-wrap:wrap;gap:6px}
.filters .chip{font-size:12.5px;padding:4px 11px}
.filters .chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.filters .clear{font-size:13px;font-weight:700;margin-top:18px;display:inline-block}
/* row-gap is deliberately 10px, NOT the design export's 18px, and this is not drift.
   The design legend has short labels and fits on ONE row at 1440, so its row-gap never
   renders; live's legend carries the longer evidence copy and wraps to two rows on every
   listing page, where 18px reads as a gap between unrelated lines. Column gap IS the
   design's 18px. Measured 2026-09-17: taking 18px both ways made the block 8px TALLER
   than the design instead of closer to it (city listing 60.4 -> 68.4 against design 25.2).
   A pixel-register pass will flag this row as a departure; leave it. */
.legend{display:flex;gap:18px;row-gap:10px;font-size:12.5px;color:var(--fg-3);margin:0 0 14px;align-items:center;flex-wrap:wrap}
.legend>span{display:inline-flex;align-items:center;gap:7px}
.legend span b{font-weight:700;color:var(--fg-2)}
.doc-list{display:flex;flex-direction:column;gap:14px}
.doc-card{display:grid;grid-template-columns:84px minmax(0,1fr) 200px;gap:18px;padding:20px}
.doc-card .avatar{width:84px;height:84px;font-size:26px}
.doc-card h3{font-size:19px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-card h3 a{color:var(--fg-1)}
.doc-card h3 a:hover{color:var(--accent)}
.doc-card .spec{color:var(--accent);font-size:13.5px;font-weight:700;margin:2px 0}
.doc-card .meta{color:var(--fg-2);font-size:13.5px}
.doc-rail{border-left:1px solid var(--border);padding-left:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.doc-rail .why{font-size:12px;color:var(--fg-3);line-height:1.5}
.doc-rail .btn,.doc-rail .btn-outline{width:100%;padding:9px 12px;font-size:13.5px}

/* ---------- screen: profile ---------- */
.profile-body{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:24px;align-items:start;padding-bottom:24px;margin-top:14px}
.p-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.p-hero{padding:26px;display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px}
.p-hero .avatar{width:132px;height:132px;font-size:40px;border-radius:var(--r-lg)}
.p-hero h1{font-size:30px;font-weight:800;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.p-hero .spec{color:var(--accent);font-weight:700;font-size:14.5px;margin-top:6px}
.p-hero .reg{color:var(--fg-3);font-size:13px;margin-top:4px}
.p-hero .actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);margin-top:20px;grid-column:1/-1}
.statstrip.one{grid-template-columns:1fr}
.statstrip>div{padding:14px 18px 2px;border-right:1px solid var(--border)}
.statstrip>div:last-child{border-right:0}
.statstrip span{font-size:12px;color:var(--fg-3)}
/* 2026-09-09: the two values below were tuned for the ONE-cell unclaimed explainer,
   not for the four-tile strip, and the base rule had drifted 10px from the design.
   Base rule restored to the design; the tuned values scoped to .statstrip.one. */
.statstrip.one>div{padding-bottom:12px}
.statstrip.one span{font-size:12.5px;line-height:1.6}
.claim-band{background:var(--accent-soft);border:1px solid var(--brand-2-soft);border-radius:var(--r-md);padding:16px 20px;display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}
.claim-band p{font-size:14px;color:var(--fg-2);max-width:640px;margin:0}
.claim-band p b{color:var(--fg-1)}
.p-section{padding:22px 26px}
.p-section h2{font-size:19px;font-weight:800;margin:0 0 12px}
.p-section h2.mt{margin-top:24px}
.p-section h2 small{font-weight:600;font-size:12px;color:var(--fg-3);margin-left:8px;text-transform:uppercase;letter-spacing:0.08em}
.p-section .pa-name{margin:0 0 8px;font-size:16px;font-weight:800}
.p-section .pa-name+.kv{margin-bottom:18px}
.p-section .addr-lg{margin:6px 0 16px;font-size:16px;line-height:1.65;color:var(--fg-1);font-weight:600}
.p-section .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.prose p{margin:0 0 10px;font-size:13.5px;color:var(--fg-2);line-height:1.7}
.prose p:last-child{margin-bottom:0}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 20px;font-size:14px}
.kv .k{color:var(--fg-3)}
.kv .v{font-weight:700;text-align:right;overflow-wrap:anywhere}
.p-stack{display:flex;flex-direction:column;gap:16px;margin-top:4px}   /* gap is the design rule; margin-top 4px is the design export's own inline value on all four profile templates */
.peer-row{display:flex;gap:14px;align-items:center}
.peer-row .avatar{width:52px;height:52px;font-size:18px;flex:0 0 auto}
.peer-row .pr-t{flex:1;min-width:0}
.peer-row .pr-t b{display:block;font-size:14.5px}
.peer-row .pr-t span{font-size:13px;color:var(--fg-2)}
.peer-row .btn-outline{padding:8px 14px;font-size:13px}
.side{position:sticky;top:82px;display:flex;flex-direction:column;gap:16px}
.completeness{padding:16px 20px}
.completeness .track{height:8px;border-radius:var(--r-pill);background:var(--bg-2);margin:10px 0 6px}
.completeness .fill{height:8px;border-radius:var(--r-pill);background:var(--accent)}
.completeness p{font-size:12.5px;color:var(--fg-3);margin:0}
.enq{padding:20px}
.enq h3{font-size:16px;font-weight:800;margin:0}
.enq p{font-size:12.5px;color:var(--fg-3);margin:3px 0 12px}
.enq .btn{width:100%}
.enq .privacy{font-size:11.5px;color:var(--fg-3);margin:8px 0 0}
.help-card{padding:16px 20px;font-size:13.5px}
.help-card b{display:block;font-size:15px}

/* ---------- ART clinic cards ---------- */
.doc-card.clinic{scroll-margin-top:96px}  /* the header is sticky; a #c-<id> jump must clear it */
.doc-card.clinic h3{font-size:16.5px}
.doc-card.clinic .spec{color:var(--fg-3);font-weight:700}
.doc-card .docs{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);line-height:1.7;color:var(--fg-2)}
.doc-card .docs strong{color:var(--fg-1)}
.doc-card .docs .pending{display:block;margin-top:4px;font-size:11.5px;color:var(--fg-3)}

/* ---------- claim form (/doctors/claim/) ---------- */
.sec{margin-top:24px;padding:22px 26px}
.sec h2{margin:0 0 14px;font-size:19px;font-weight:800;color:var(--fg-1)}
main{padding-bottom:32px}
h2{color:var(--fg-1)}
.pending{color:var(--fg-3)}
.hp{position:absolute!important;left:-5000px!important}
label{display:block;font-size:13.5px;margin:12px 0 4px;font-weight:600;color:var(--fg-2)}
input[type=text],input[type=email],textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-sm);font:inherit;background:var(--bg-0);color:var(--fg-1)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand-2);outline-offset:1px;border-color:var(--brand-2)}
.prompt{margin:12px 0 0;background:var(--accent-soft);border:1px solid var(--brand-2-soft);border-radius:var(--r-sm);padding:12px}
.badge{display:inline-block;background:var(--accent-2-soft);color:var(--accent);border:1px solid var(--brand-2-soft);border-radius:var(--r-pill);padding:2px 10px;font-size:12px;font-weight:700}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .sub-brand{display:none}
  nav.main{width:100%;margin:0 0 10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  header.site{position:static}
  .side,.filters{top:14px}
}
@media(max-width:1000px){
  .city-grid{grid-template-columns:repeat(2,1fr)}
  .dept-grid{grid-template-columns:repeat(2,1fr)}
  .listing-body,.profile-body{grid-template-columns:minmax(0,1fr)}
  .filters,.side{position:static}
  .doc-card{grid-template-columns:64px minmax(0,1fr)}
  .doc-card .avatar{width:64px;height:64px;font-size:20px}
  .doc-rail{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:14px}
  .searchbar{grid-template-columns:1fr}
  .searchbar .cell{border-right:0;border-bottom:1px solid var(--border)}
  .searchbar .go{padding:14px 30px}
  .hub-hero h1{font-size:34px}
  .p-hero{grid-template-columns:88px minmax(0,1fr)}
  .p-hero .avatar{width:88px;height:88px;font-size:28px}
  .p-hero h1{font-size:26px}
  .kv{grid-template-columns:1fr}
  .kv .v{text-align:left}
}
@media(max-width:760px){
  .util{display:none}
  .city-grid,.dept-grid{grid-template-columns:1fr}
  .wrap{padding:0 18px}
  .p-section,.p-hero{padding:18px}
  .listing-head h1{font-size:26px}
}

/* ============================================================================
   DORMANT: the claimed-profile branch.
   0 of 614 listings are claimed, so nothing on the live site emits this markup
   today. The rules are carried here anyway, verbatim from the directory design
   export, so that handling the first real claim is a matter of emitting the
   markup — not of recovering a stylesheet from an archive. The reference markup
   these rules were written against is
   /home2/lifelinkr/dirfix-20260905/preview-archive/profile-claimed-dormant.html.
   ⚠️ That template's body copy has NOT had the truthfulness pass: it carries
   invented ratings, fee tables and cycle counts. Style is safe to reuse; copy
   is not.
   ========================================================================== */

/* claimed hero: degrees line, the four-metric stat strip, section tabs */
.p-hero .deg{color:var(--fg-2);font-size:14px;margin-top:2px}
.statstrip b{font-size:20px;font-weight:800;display:block}
.rating{display:inline-flex;align-items:center;gap:5px;background:var(--success-soft);color:var(--success);border-radius:8px;padding:3px 9px;font-size:13.5px;font-weight:800}
.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:20px 0 0;overflow-x:auto}
.tabbar a,.tabbar label{padding:12px 18px;font-size:14px;font-weight:700;color:var(--fg-3);border-bottom:2.5px solid transparent;white-space:nowrap;margin:0;cursor:pointer}
.tabbar a.on,.tabbar label.on{color:var(--accent);border-color:var(--accent)}

/* claimed body: expertise bars, condition cloud, price table, timeline, reviews */
.exp-bar{margin-bottom:12px}
.exp-bar .row{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;margin-bottom:5px}
.exp-bar .track{height:8px;border-radius:var(--r-pill);background:var(--bg-2)}
.exp-bar .fill{height:8px;border-radius:var(--r-pill);background:var(--accent)}
.cloud{display:flex;flex-wrap:wrap;gap:8px}
.price-table{width:100%;border-collapse:collapse;font-size:14px}
.price-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-3);padding:8px 12px;border-bottom:1px solid var(--border)}
.price-table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top}
.price-table td:last-child{text-align:right;font-weight:800;white-space:nowrap}
.price-table small{display:block;color:var(--fg-3);font-size:12.5px;font-weight:400}
.caveat{background:var(--warning-soft);border:1px solid var(--warning-line);border-radius:var(--r-sm);padding:12px 16px;font-size:13px;color:var(--warning);margin-top:14px}
.timeline{list-style:none}
.timeline li{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:8px 0;border-left:2px solid var(--bg-2);margin-left:26px;padding-left:18px;position:relative}
.timeline li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);position:absolute;left:-5.5px;top:16px}
.timeline .yr{font-weight:800;font-size:14px}
.timeline b{font-size:14.5px}
.timeline span{display:block;font-size:13px;color:var(--fg-2)}
.review{border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:10px}
.review .who{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.review .who .avatar{width:34px;height:34px;font-size:13px;border-radius:var(--r-sm)}
.review .who b{font-size:14px}
.review .who span{font-size:12px;color:var(--fg-3);display:block}
.review .stars{color:var(--success);font-weight:800;font-size:13px}
.review p{font-size:14px;color:var(--fg-2)}

/* claimed location block: schematic map + a timings grid */
.mapbox{height:180px;border-radius:var(--r-sm);background:
  linear-gradient(var(--bg-2) 1px,transparent 1px),
  linear-gradient(90deg,var(--bg-2) 1px,transparent 1px);
  background-size:24px 24px;background-color:var(--bg-1);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.mapbox .pin{background:var(--fg-1);color:#fff;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:6px 14px}
.timing-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.timing-grid>div{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;font-size:13px}
.timing-grid b{display:block;font-size:13.5px}

/* claimed sidebar: fee card, and the enquiry form fields the claim CTA replaces */
.fee-card{padding:20px}
.fee-card .big{font-size:26px;font-weight:800}
.fee-card .big small{font-size:13px;font-weight:600;color:var(--fg-3)}
.fee-card .row{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--border)}
.fee-card .row:last-of-type{border-bottom:0}
.fee-card .btn{width:100%;margin-top:12px}
.fee-card .note{font-size:12px;color:var(--fg-3);text-align:center;margin-top:8px}
.enq input,.enq textarea{width:100%;font:inherit;font-size:14px;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:10px;background:var(--bg-1);color:var(--fg-1)}
.enq textarea{resize:vertical;min-height:64px}
.enq .btn-outline{width:100%}

/* claimed/unclaimed listing card pair. The muting is deliberately NOT emitted
   while every listing is unclaimed - it would grey all 614 - but it is what
   distinguishes the two states once one card carries a fee and availability. */
.doc-card .stats{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.doc-card .stat{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 12px;font-size:12px;color:var(--fg-3)}
.doc-card .stat b{display:block;font-size:13.5px;color:var(--fg-1);font-weight:800}
.doc-rail .fee{font-size:18px;font-weight:800}
.doc-rail .fee small{font-size:12px;font-weight:600;color:var(--fg-3)}
.doc-rail .avail{font-size:12.5px;color:var(--success);font-weight:700}
.doc-card.unclaimed .avatar{background:var(--bg-2);color:var(--fg-3)}
.doc-card.unclaimed h3{color:var(--fg-2)}

/* the banner the dormant template carries, so it can never be mistaken for live */
.dormant{background:var(--warning-soft);border:1px solid var(--warning-line);color:var(--warning);padding:14px 18px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;margin:16px 0}

/* ---------- footer "See all" disclosure (Flinque pattern) ----------
   Applied only to a column that overflows: five links stay visible and the
   summary line is the sixth row, which levels the column with the tallest
   plain column in the grid. Native <details> - no JavaScript - and every link
   stays in the markup open or closed, because the links are the point. */
.f-more{margin-top:7px}
.f-more__sum{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:700;line-height:1.45;padding:2px 0;cursor:pointer;list-style:none;user-select:none}
.f-more__sum::-webkit-details-marker{display:none}
.f-more__sum::marker{content:''}
.f-more__sum:hover{color:var(--brand-2)}
.f-more__sum:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:4px}
.f-more__ico{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.f-more__v{transform-origin:12px 12px;transition:transform .18s ease}
.f-more[open] .f-more__v{transform:scaleY(0)}   /* the plus loses its stem and reads as a minus */
.f-more__hide{display:none}
.f-more[open] .f-more__show{display:none}
.f-more[open] .f-more__hide{display:inline}
.f-more__list{margin-top:7px}
@media (prefers-reduced-motion:reduce){.f-more__v{transition:none}}

/* ============================================================================
   Profile tabs - real tabs, no JavaScript.
   Five radios open `.p-main.tabbed`; the tab bar's <label>s drive them; the
   :checked general-sibling selector shows exactly one pane.  Every pane stays
   in the HTML at all times - only its `display` changes - because the
   registration and affiliation panes are the differentiated content on these
   pages.  Default is Overview (the first radio ships `checked`).

   The whole block is gated on `.p-main.tabbed`.  A profile that has not been
   rewritten has no radios to un-hide a pane, so nothing here may match it,
   and this stylesheet can go out ahead of the HTML rewrite.
   ========================================================================== */
/* .tabbar KEEPS `border-bottom:1px solid var(--border)`, which the design export does
   not put on the bar.  Correction, not drift: the design hero card is `padding:22px 26px 0`
   and the bar is its last child, so it sits flush on the CARD border and that is what the
   active tab underline rests on.  `.p-hero` here is `padding:26px` (18px mobile), which
   insets the bar, so without this line the active underline floats over blank card.
   Needed with one pane or five - nothing to do with the tabs.  Item padding is the
   design`s 12px 18px and hover is its var(--fg-1), both reconciled 2026-09-09. */
.p-main.tabbed{position:relative}
.p-main.tabbed>.tabin{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0}
.tabbar a:hover,.tabbar label:hover{color:var(--fg-1)}
.p-main.tabbed>#pc-overview,.p-main.tabbed>#pc-pricing,.p-main.tabbed>#pc-exp,.p-main.tabbed>#pc-reviews,.p-main.tabbed>#pc-location{display:none}
#pct-overview:checked~#pc-overview,#pct-pricing:checked~#pc-pricing,#pct-exp:checked~#pc-exp,#pct-reviews:checked~#pc-reviews,#pct-location:checked~#pc-location{display:block}
#pct-overview:checked~.p-hero .tabbar label[for="pct-overview"],
#pct-pricing:checked~.p-hero .tabbar label[for="pct-pricing"],
#pct-exp:checked~.p-hero .tabbar label[for="pct-exp"],
#pct-reviews:checked~.p-hero .tabbar label[for="pct-reviews"],
#pct-location:checked~.p-hero .tabbar label[for="pct-location"]{color:var(--accent);border-color:var(--accent)}
#pct-overview:focus-visible~.p-hero .tabbar label[for="pct-overview"],
#pct-pricing:focus-visible~.p-hero .tabbar label[for="pct-pricing"],
#pct-exp:focus-visible~.p-hero .tabbar label[for="pct-exp"],
#pct-reviews:focus-visible~.p-hero .tabbar label[for="pct-reviews"],
#pct-location:focus-visible~.p-hero .tabbar label[for="pct-location"]{outline:2px solid var(--brand-2);outline-offset:-3px;border-radius:4px 4px 0 0}
/* on paper there is nothing to click, so print every pane and drop the bar */
@media print{.p-main.tabbed>#pc-overview,.p-main.tabbed>#pc-pricing,.p-main.tabbed>#pc-exp,
.p-main.tabbed>#pc-reviews,.p-main.tabbed>#pc-location{display:block}.p-main.tabbed .tabbar{display:none}}


/* ============================================================================
   Profile v2 - one template, three presence-keyed evidence blocks (2026-09-17)
   Blocks: registration, clinic_published, art_clinic. Each renders either the
   block + its .src provenance, or a .lock notice. Styling is fixed by the six
   reference renderings in "Doctor's Portal Design - 2" (profile-plain,
   -registration, -clinic, -full, -claimed, -unclaimed); values are the export's
   tokens resolved to literals. Everything below is scoped to classes no earlier
   markup uses (checked across all 813 pages before adding).
   accent-2 rule unchanged: the only --accent-2 use here is .avatar.alt on the
   Practises-at clinic monogram, which is decoration.
   ========================================================================== */
:root{--border-dashed:#C9CFD8;--ink:#14181F;--ink-fg:#FFFFFF;--ink-fg-muted:#C9CFD9;--ink-label:#9AA3B2}
.ic{width:1em;height:1em;flex:none;vertical-align:-0.12em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic--12{width:12px;height:12px}
.lk{display:inline-block;width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;vertical-align:-1px}
.lock-pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:var(--bg-2);color:var(--fg-3);border-radius:var(--r-pill);padding:3px 10px 3px 8px;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;vertical-align:middle;margin-left:8px}
.h3 .lock-pill{margin-left:0}
.lock{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;background:var(--bg-1);border:1px dashed var(--border-dashed);border-radius:var(--r-sm);padding:18px 20px}
.lock .ico{width:44px;height:44px;border-radius:50%;background:var(--bg-2);color:var(--fg-2);display:flex;align-items:center;justify-content:center}
.lock .ico .lk{width:18px;height:18px}
.lock b{display:block;font-size:14.5px;color:var(--fg-1)}
.lock p{font-size:14px;color:var(--fg-3);line-height:1.5;margin:2px 0 0;max-width:560px}
.lock .btn{padding:9px 16px;font-size:13px;white-space:nowrap}
.lock-inline{display:inline-flex;align-items:center;gap:6px;color:var(--fg-3);font-weight:600}
.evidence{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ev{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;font-weight:700;border:1px solid transparent}
.ev.is-on{background:var(--success-soft);color:var(--success)}
.ev.is-off{background:var(--bg-1);color:var(--fg-3);border-color:var(--border)}
.src{display:flex;gap:10px;align-items:flex-start;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;color:var(--fg-3);line-height:1.5;margin-top:14px}
.src b{color:var(--fg-2)}
.src .tag{flex:none;background:var(--bg-0);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-3);margin-top:1px}
div.facts{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px 20px;font-size:14px}
div.facts .k{color:var(--fg-3)}
div.facts .v{font-weight:700;overflow-wrap:anywhere}
.h3{font-size:15px;font-weight:800;margin:22px 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p-section .h3 .chip{font-size:12px;padding:3px 10px}
.fl-label{display:block;margin:14px 0 6px}
.fact-list{margin:0;padding-left:18px;font-size:14px;color:var(--fg-1);display:flex;flex-direction:column;gap:4px}
.lvl{display:inline-flex;align-items:center;white-space:nowrap;background:var(--bg-2);color:var(--fg-2);border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:700}
.pa-card{display:flex;gap:14px;align-items:flex-start}
.pa-card+.pa-card{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.pa-card .avatar{width:52px;height:52px;font-size:17px;flex:none}
.pa-body{flex:1;min-width:0}
.pa-link{font-size:17px;font-weight:800;color:var(--fg-1)}
.pa-badges{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.pa-body div.facts{margin-top:12px}
.loc-kv{grid-template-columns:1fr 1fr;gap:8px 20px;margin-bottom:16px}
.loc-kv .lock-inline{justify-content:flex-end}
.p-hero .btn{padding:11px 20px}
.statstrip.one b{display:inline;font-size:inherit;font-weight:800;color:var(--fg-2)}
.fee-card .row span{color:var(--fg-3)}
.fee-card .row:first-of-type{margin-top:8px}
.fee-card .row b.off{color:var(--fg-3)}
.completeness p.num{margin-bottom:12px}
.ck{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.ck li{display:flex;gap:10px;align-items:center;color:var(--fg-2)}
.ck li::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--fg-3);flex:none}
.ck li.is-done::before{background:var(--success);border-color:var(--success)}
.ck li.is-done{color:var(--fg-1);font-weight:600}
.doc-cta{background:var(--ink);color:var(--ink-fg);border-radius:var(--r-md);padding:20px}
.doc-cta .microlabel{color:var(--ink-label)}
.doc-cta h3{font-size:17px;font-weight:800;margin:6px 0 4px;color:var(--ink-fg)}
.doc-cta p{font-size:13px;color:var(--ink-fg-muted);line-height:1.5;margin:0}
.doc-cta .btn{width:100%;margin-top:14px;background:var(--ink-fg);color:var(--ink);border-color:var(--ink-fg)}
.doc-cta .btn:hover{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--ink)}

/* v2 tab set: overview, cred, services, location, clinic (old ids kept above for
   any page still cached on the previous markup) */
.p-main.tabbed>#pc-cred,.p-main.tabbed>#pc-services,.p-main.tabbed>#pc-clinic{display:none}
#pct-cred:checked~#pc-cred,#pct-services:checked~#pc-services,#pct-clinic:checked~#pc-clinic{display:block}
#pct-cred:checked~.p-hero .tabbar label[for="pct-cred"],
#pct-services:checked~.p-hero .tabbar label[for="pct-services"],
#pct-clinic:checked~.p-hero .tabbar label[for="pct-clinic"]{color:var(--accent);border-color:var(--accent)}
#pct-cred:focus-visible~.p-hero .tabbar label[for="pct-cred"],
#pct-services:focus-visible~.p-hero .tabbar label[for="pct-services"],
#pct-clinic:focus-visible~.p-hero .tabbar label[for="pct-clinic"]{outline:2px solid var(--brand-2);outline-offset:-3px;border-radius:4px 4px 0 0}
@media print{.p-main.tabbed>#pc-cred,.p-main.tabbed>#pc-services,.p-main.tabbed>#pc-clinic{display:block}}

/* claim form (/doctors/claim/), ported from the design's claim-form screen */
.claim-page .listing-head h1{font-size:32px;font-weight:800;margin:0}
.claim-page .profile-body{grid-template-columns:minmax(0,1fr) 380px}
.trust{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--fg-2);margin-top:14px}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust span::before{content:"\2713";color:var(--success);font-weight:800}
.form{padding:26px}
.form label{display:block;font-size:12.5px;font-weight:700;color:var(--fg-2);margin:14px 0 6px}
.form label.first{margin-top:0}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%;font:inherit;font-size:14px;border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 12px;background:var(--bg-0);color:var(--fg-1)}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent-soft);outline-offset:0;border-color:var(--accent)}
.form textarea{min-height:110px;resize:vertical}
.form .hint{font-size:12px;color:var(--fg-3);margin:5px 0 0}
.form .btn{margin-top:20px;min-width:220px}
.form .req{color:#DC2626}
.form .ro{display:flex;gap:14px;align-items:center;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px}
.form .ro .avatar{width:44px;height:44px;font-size:15px;flex:none}
.form .ro b{font-size:15px}
.form .ro small{display:block;font-size:13px;color:var(--fg-2)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.form .seg label{margin:0;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--fg-1)}
.form .seg label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.seg label input{width:auto;margin:3px 0 0}
.seg label small{display:block;font-weight:500;color:var(--fg-3);font-size:12px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:13.5px;color:var(--fg-2)}
.steps li b{display:block;color:var(--fg-1)}
.steps .n{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.claim-page .completeness .ck{margin-top:10px}

@media(max-width:1000px){
  div.facts,.loc-kv{grid-template-columns:minmax(0,1fr)}
  .loc-kv .v{text-align:left}
  .loc-kv .lock-inline{justify-content:flex-start}
  .lock{grid-template-columns:44px minmax(0,1fr)}
  .lock .btn{grid-column:1/-1;justify-self:start}
  .claim-page .profile-body{grid-template-columns:minmax(0,1fr)}
  .grid-2,.seg{grid-template-columns:1fr}
}


/* ============================================================================
   The four bundle-2 screens built 2026-09-17: ART hub, ART state, ART city and
   the specialty index. Components copied from the export's own stylesheets
   (art-hub/art-state/art-city/specialty-index.css), tokens resolved to literals.
   Controls with no data behind them were not built — see build4.py DROPPED.
   ========================================================================== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 22px}
.kpi{padding:14px 18px;display:block;color:inherit}
.kpi b{display:block;font-size:24px;font-weight:800;line-height:1.1}
.kpi span{font-size:12.5px;color:var(--fg-3)}
.rank{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.rank a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;padding:11px 0 10px;border-bottom:1px solid var(--border);color:inherit}
.rank a:hover,.rank a:hover b{color:var(--accent)}
.rank b{font-size:14.5px;font-weight:700;color:var(--fg-1);overflow-wrap:anywhere}
.rank b small{font-size:12px;font-weight:500;color:var(--fg-3);margin-left:4px}
.rank .n{font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.rank .bar{grid-column:1/-1;height:3px;background:var(--bg-2);border-radius:2px;overflow:hidden}
.rank .bar i{display:block;height:3px;background:var(--accent);border-radius:2px}
.alpha{display:inline-flex;flex:none;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-0);overflow:hidden}
.alpha a{width:26px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--fg-2);border-right:1px solid var(--border)}
.alpha a:last-child{border-right:0}
.alpha a:hover{background:var(--bg-1);color:var(--accent)}
.alpha a.is-dim{color:var(--fg-3);opacity:.35;pointer-events:none}
.listbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.listbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.flag{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border-radius:var(--r-pill);padding:5px 12px 5px 8px;font-size:12.5px;color:var(--fg-2)}
.flag b{background:var(--ink);color:var(--ink-fg);border-radius:var(--r-pill);padding:1px 8px;font-size:11.5px;font-variant-numeric:tabular-nums}
.data-note{padding:20px 24px}
.data-note h2{font-size:17px;font-weight:800;margin:0 0 4px}
.data-note p{font-size:13.5px;color:var(--fg-2);margin:8px 0 0}
.data-note p.mt2{margin-top:12px}
.data-note p b{color:var(--fg-1)}
.regno-anatomy{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.regno-anatomy span{display:flex;flex-direction:column;gap:4px;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-xs,8px);padding:8px 10px;min-width:64px}
.regno-anatomy b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.regno-anatomy small{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:28px}
.two-1{margin-top:28px}
.cloud{display:flex;flex-wrap:wrap;gap:8px}
.cloud .chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hub-note--flex{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hub-note--flex .btn{flex:none}
/* clinic-row: the design's ART listing row, replacing .doc-card.clinic */
.clinic-row{display:grid;grid-template-columns:56px minmax(0,1fr) 220px;gap:18px;padding:20px;scroll-margin-top:96px}
.clinic-row .avatar{width:56px;height:56px;font-size:18px}
.clinic-row h3{font-size:17px;font-weight:800;margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;overflow-wrap:anywhere}
.clinic-row .addr{color:var(--fg-2);font-size:13.5px;margin-top:4px;overflow-wrap:anywhere}
.clinic-row .regno{font-size:12.5px;color:var(--fg-3);margin-top:8px;overflow-wrap:anywhere}
.clinic-row .regno b{color:var(--fg-1);font-weight:700}
.clinic-row .lvl.soft{background:transparent;border:1px solid var(--border);color:var(--fg-3)}
.cr-body{min-width:0}
.clinic-rail{border-left:1px solid var(--border);padding-left:18px;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.clinic-rail .btn{padding:9px 12px;font-size:13px;width:100%}
.clinic-rail .why{font-size:12px;color:var(--fg-3);line-height:1.5;text-align:center}
.match{background:var(--accent-soft);border:1px solid var(--brand-2-soft);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;color:var(--fg-2);margin-top:10px;line-height:1.6}
.match strong{color:var(--fg-1)}
.match .pending{display:block;margin-top:4px;font-size:11.5px;color:var(--fg-3)}
.az{display:block;position:relative;top:-96px;height:0;visibility:hidden}
.city-break{margin:14px 0 -4px}
.city-break:first-child{margin-top:6px}
.lg-match{color:var(--accent);font-weight:700}
.rail-note{font-size:12px;color:var(--fg-3);margin:16px 0 0;line-height:1.5}
.legend>span{display:inline-flex;align-items:center;gap:7px}

@media(max-width:1000px){
  .alpha{flex-wrap:wrap;max-width:100%}
  .listbar{align-items:flex-start}
  .alpha a{border-bottom:1px solid var(--border)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .rank{grid-template-columns:repeat(2,1fr);gap:0 24px}
  .two{grid-template-columns:1fr}
  .clinic-row{grid-template-columns:56px minmax(0,1fr)}
  .clinic-rail{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:14px}
}
@media(max-width:760px){
  .kpis{grid-template-columns:1fr}
  .rank{grid-template-columns:1fr}
  .data-note{padding:18px}
}


/* ============================================================================
   BUNDLE 3 (v3 visual refresh) — 2026-09-18
   Palette, shadows, hero, headings, amber "missing information" treatment and
   the .loc address & precision panel (MAP-REGION.md). Values are the bundle's
   own, with two held back on the brand guideline (lifelinkr-brand-guideline.pdf
   names exactly two colours, #0650A2 and #33AAE1):
     --accent stays #0650A2   RULING (AB, 2026-09-17): the bundle renders #0A56A8, which is
                              designer drift, not a decision - the same call as #1583C7 on the
                              wordmark. Live is not behind the bundle here; it is holding the
                              guideline. A register pass will flag accent surfaces: leave them.
     --brand-2 stays #33AAE1  (wordmark LINK and a:hover — identity, not decoration)
   ========================================================================== */
.btn{box-shadow:0 1px 2px rgba(10,86,168,.25)}
.btn-outline,.btn-ghost{box-shadow:none}
/* hero: tinted top, solid brand avatar, bigger name */
.p-hero{background:linear-gradient(180deg,var(--accent-soft) 0,var(--bg-0) 170px);border-color:var(--accent-2-soft)}
.p-hero .avatar,.p-hero .avatar.neutral{background:var(--accent);color:#fff;box-shadow:0 12px 28px -14px rgba(10,86,168,.55)}
.p-hero h1{font-size:34px;letter-spacing:-0.02em;line-height:1.1}
.p-hero .spec{font-size:15px}
.p-hero .reg{font-size:14px}
/* section headings carry a rule so every card has a clear top */
.p-section h2{font-size:21px;letter-spacing:-0.01em;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.p-section h2.mt{margin-top:24px}
.p-section h2 .lock-pill{margin-left:0}
.p-section h2 small{flex:none;white-space:nowrap}
.h3{font-size:16px}
.helpline{white-space:nowrap}
.tabbar{scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
/* missing information reads as "attention", not "disabled" */
.lock{background:var(--amber-soft);border:1px dashed var(--amber-border)}
.lock .ico{background:var(--amber-fill);color:var(--amber)}
.lock b{font-size:15px}
.lock-pill,.badge-basic{background:var(--amber-fill);color:var(--amber)}
.lock-inline{color:var(--amber)}
.ev.is-on{background:#E3F5EA;color:#15803D}
.ev.is-off{background:var(--bg-0)}
/* sidebar */
.completeness .fill{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.doc-cta{background:linear-gradient(160deg,var(--accent) 0%,#083F7D 100%)}
.doc-cta .microlabel{color:#B9D3F1}
.doc-cta p{color:#D6E5F7}
.doc-cta .btn{background:#fff;color:var(--accent);border-color:#fff;box-shadow:none}
/* listing + directory pages */
.listing-head h1,.hub-hero h1{letter-spacing:-0.02em}
.kpi.on{background:var(--accent-soft)}

/* ---------- LOCATION REGION (.loc): address + precision panel, never a map ----------
   States derived without geocoding per MAP-REGION.md: --good (names a building or
   plot) · --area (locality only) · --none (record too short) · plus .shared. */
.loc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 20px;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-sm)}
.loc .ico{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.loc--none .ico{background:var(--bg-2);color:var(--fg-3)}
.loc--area .ico{background:var(--amber-fill);color:var(--amber)}
.loc-body{min-width:0}
.loc .addr{font-size:16px;font-weight:700;color:var(--fg-1);line-height:1.4;overflow-wrap:anywhere}
.loc .lm{font-size:14px;color:var(--fg-2);margin-top:2px}
.loc .prec{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;font-weight:700;border-radius:999px;padding:4px 10px}
.loc .prec .dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.prec--good{background:#E3F5EA;color:#15803D}
.prec--area{background:var(--amber-fill);color:var(--amber)}
.prec--none{background:var(--bg-2);color:var(--fg-3)}
.loc p{font-size:14px;color:var(--fg-2);line-height:1.55;margin:8px 0 0;max-width:620px}
.loc .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.loc .acts .btn{font-size:13.5px;padding:9px 14px}
.loc .shared{grid-column:1/-1;border-top:1px solid var(--border);padding-top:14px;margin-top:2px}
.loc .shared .microlabel{display:block;margin-bottom:8px}
.loc .shared ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.loc .shared li a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--bg-0);border:1px solid var(--border);border-radius:999px;padding:4px 12px 4px 4px;font-size:13px;font-weight:700;color:var(--fg-1)}
.loc .shared li a:hover{border-color:var(--accent);color:var(--accent)}
.loc .shared li .avatar{width:26px;height:26px;font-size:10px;border-radius:50%}
.loc .shared p{margin-top:8px;font-size:13px}
.loc .shared p.more{margin-top:8px;font-size:12.5px;color:var(--fg-3)}
.loc-timings{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;flex-wrap:wrap}
.loc-timings .k{color:var(--fg-3)}

/* ---------- claim form: error and success states ---------- */
.alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;border-radius:var(--r-sm);padding:12px 16px;font-size:13.5px;margin-bottom:16px}
.alert b{display:block;margin-bottom:2px}
.alert ul{margin:6px 0 0;padding-left:18px}
.alert--error{background:#FDECEC;border:1px solid var(--danger);color:var(--danger)}
.alert--success{background:var(--success-soft);border:1px solid var(--success);color:var(--success)}
.alert--success a{color:inherit;font-weight:700;text-decoration:underline}
.field .err{display:none;font-size:12.5px;color:var(--danger);font-weight:600;margin-top:4px}
.field.is-invalid .err{display:block}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--danger);box-shadow:0 0 0 3px #FDECEC}

@media(max-width:1000px){
  .loc{grid-template-columns:minmax(0,1fr)}
  .loc .ico{display:none}
  .loc .prec{border-radius:12px}
  .p-hero h1{font-size:26px}
}


/* ============================================================================
   LL-3: clinic pages, visit row, prep card, same-name strip, banners
   One page per registered clinic at /art-clinics/{state}/{slug}/ — every absent
   block renders its lock, so a registry-only clinic still gets a complete page.
   ========================================================================== */
.c-hero{background:linear-gradient(180deg,var(--teal-soft) 0,var(--bg-0) 170px);border-color:#C7E5E1;grid-template-columns:96px minmax(0,1fr)}
.p-hero .avatar.clinic{background:var(--teal);color:#fff;width:96px;height:96px;font-size:30px;border-radius:var(--r-lg);box-shadow:0 12px 28px -14px rgba(15,118,110,.55)}
.c-intro{font-size:14.5px;color:var(--fg-2);line-height:1.6;margin:14px 0 0;max-width:720px}
.c-reg{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.c-reg .lvl.soft{background:transparent;border:1px solid var(--border);color:var(--fg-3)}
.gallery-lock{grid-column:1/-1;margin-top:18px;display:flex;align-items:center;gap:14px;border:1px dashed var(--amber-border);background:var(--amber-soft);border-radius:var(--r-sm);padding:14px 18px;font-size:13.5px;color:var(--fg-2)}
.gallery-lock .ico{width:40px;height:40px;border-radius:50%;background:var(--amber-fill);color:var(--amber);display:flex;align-items:center;justify-content:center;flex:none}
.gallery-lock b{display:block;color:var(--fg-1)}
.gallery-lock .btn{margin-left:auto;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;grid-column:1/-1;margin-top:18px}
.tile{display:flex;gap:12px;align-items:center;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px}
.tile .ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.tile b{display:block;font-size:15px;line-height:1.2;color:var(--fg-1)}
.tile span{font-size:12px;color:var(--fg-3)}
.tile.is-locked b{color:var(--fg-3);font-weight:600}
.t-green{background:var(--green-soft);color:var(--green)}
.t-teal{background:var(--teal-soft);color:var(--teal)}
.t-violet{background:var(--violet-soft);color:var(--violet)}
.t-grey{background:var(--bg-2);color:var(--fg-3)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.two-col .facts{grid-template-columns:140px minmax(0,1fr)}
.lock--tight{padding:14px 16px}
.lock--tight p{font-size:13.5px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.team a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border:1px solid var(--border);border-radius:var(--r-md);padding:18px 14px;color:var(--fg-1);background:var(--bg-0)}
.team a:hover{border-color:var(--accent);box-shadow:var(--shadow-2)}
.team .avatar{width:56px;height:56px;font-size:18px;border-radius:50%}
.team b{font-size:14.5px;line-height:1.2}
.team span{font-size:12.5px;color:var(--fg-2)}
.foot-src{font-size:12.5px;color:var(--fg-3);margin-top:12px;display:flex;gap:6px;align-items:flex-start;line-height:1.55}
.foot-src b{color:var(--fg-2);font-weight:700;white-space:nowrap}
.rights{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rights div{display:flex;gap:10px;align-items:flex-start;background:var(--green-soft);border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;color:var(--fg-2)}
.rights .ico{color:var(--green);margin-top:1px;flex:none}
.rights b{color:var(--fg-1);display:block}
.faq details{border-bottom:1px solid var(--border)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:12px 0;font-weight:700;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--fg-3);font-weight:400;font-size:18px}
.faq details[open] summary::after{content:"\2013"}
.faq p{font-size:14px;color:var(--fg-2);line-height:1.6;padding:0 0 14px;margin:0}
.sources{padding:18px 22px}
.sources h2{font-size:15px;margin:0 0 8px;border-bottom:0;padding-bottom:0}
.sources ol{padding-left:18px;font-size:13px;color:var(--fg-2);line-height:1.6;margin:0}
.sources li{margin-bottom:4px}
.c-cta{background:linear-gradient(160deg,var(--teal) 0%,#0B5A54 100%)}
.c-cta .microlabel{color:#B7E3DE}
.c-cta p{color:#D6F0ED}
.c-cta .btn{background:#fff;color:var(--teal);border-color:#fff}
.loc.one{grid-template-columns:minmax(0,1fr)}
/* plan-your-visit row (Call is never rendered: no phone number is held for any listing) */
.visit{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--shadow-1)}
.visit .lbl{width:100%;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:-2px}
.visit a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 14px;font-size:13.5px;font-weight:700;color:var(--fg-1);background:var(--bg-0);white-space:nowrap}
.visit a:hover{border-color:var(--accent);color:var(--accent)}
.visit a.wa{color:#0B7A43;border-color:#BFE5D0;background:#F0FAF4}
.visit a.wa:hover{border-color:#0B7A43;color:#0B7A43}
.prep{padding:18px 20px}
.prep h3{font-size:15px;font-weight:800;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.prep ol{padding-left:18px;font-size:13.5px;color:var(--fg-2);line-height:1.55;display:flex;flex-direction:column;gap:6px;margin:0}
.prep li b{color:var(--fg-1)}
.same{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 16px;font-size:13.5px;color:var(--fg-2)}
.same b{color:var(--fg-1)}
.same a.chip{background:var(--bg-0)}
.banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;border-radius:var(--r-md);padding:16px 20px;border:1px solid var(--border);background:var(--bg-0);position:relative}
.banner .tag{position:absolute;top:-9px;left:16px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--bg-0);color:var(--fg-3);padding:1px 8px;border:1px solid var(--border);border-radius:999px}
.banner .ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.banner b{display:block;font-size:15px;color:var(--fg-1)}
.banner span.t{font-size:13.5px;color:var(--fg-2)}
.banner .btn{white-space:nowrap}
.banner--teal{background:var(--teal-soft);border-color:#C7E5E1}
.banner--teal .ico{background:#fff;color:var(--teal)}
.banner--slot{border-style:dashed;grid-template-columns:minmax(0,1fr);background:var(--bg-1)}
.banner--slot b{color:var(--fg-2);font-size:13.5px}
@media(max-width:1000px){
  .tiles{grid-template-columns:1fr 1fr}
  .two-col,.rights,.team{grid-template-columns:minmax(0,1fr)}
  .c-hero{grid-template-columns:minmax(0,1fr)}
  .gallery-lock{flex-wrap:wrap}
  .gallery-lock .btn{margin-left:0}
}
@media(max-width:760px){ .tiles{grid-template-columns:1fr} }