/* The insurance chart and the plan pages (Felix, 2026-11-02).
   Owns: .ins (the chart on /insurance, _ins-chart.php) and .iplan (the plan
   pages, insurance-plan.php). Phone first: the chart is cards until 720px,
   then the table; print always gets the table. The group tints are the
   clinic's chart bands (sage, blue-grey, peach, grey) mixed from the theme's
   tokens onto --cream, solid so the pinned name column stays opaque. */

.ins{--ins-sage:#DAE1D5;--ins-peri:#E0E4EA;--ins-peach:#F0E1CF;--ins-stone:#E4E2D9;--ins-paper:var(--paper);--ins-deep:#8A5424;
  padding-top:56px;padding-bottom:72px;border-top:1px solid var(--line-strong)}
.ins-t-sage{--ins-tint:var(--ins-sage)}
.ins-t-peri{--ins-tint:var(--ins-peri)}
.ins-t-peach{--ins-tint:var(--ins-peach)}
.ins-t-stone{--ins-tint:var(--ins-stone)}
.ins-t-paper{--ins-tint:var(--ins-paper)}

.ins-head{display:grid;gap:6px;margin-bottom:18px}
.ins-head h2{margin:0;font-size:1.7rem;font-size:clamp(1.7rem,6vw,2.3rem)}
.ins-when{margin:0;color:var(--muted);font-size:.95rem}
.ins-edit{margin:0}
.ins-edit a{display:inline-flex;align-items:center;min-height:44px;color:var(--olive);text-decoration:underline;text-underline-offset:3px;font-weight:500}

/* the jump to the chart under the insurance page's title (page.php) */
.phead-jump{margin:18px 0 0}
.phead-jump .chip{gap:8px}

/* the marks: shapes first, colour second */
.ins-m{display:inline-block;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ins-m-y{color:var(--olive);stroke-width:2.6}
.ins-m-n{color:var(--muted);stroke-width:1.6;opacity:.8}
.ins-m-p{color:var(--ins-deep);stroke-width:2}

.ins-legend{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0 0 26px;padding:0;font-size:.95rem;color:var(--ink-2)}
.ins-legend li{display:inline-flex;align-items:center;gap:8px;min-height:32px}
.ins-legend-aside{color:var(--muted)}

/* ---------- phones: cards ---------- */
.ins-cards{display:grid;gap:18px}
.ins-cg{background:var(--ins-tint);border-radius:var(--r-sm);padding:16px 16px 6px}
.ins-cg-h{margin:0 0 4px;font:600 .78rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.ins-card-list{list-style:none;margin:0;padding:0}
.ins-card{padding:12px 0 10px;border-top:var(--hair) solid var(--line-strong)}
.ins-card:first-child{border-top:0}
.ins-card-name{margin:0;font:500 1.15rem/1.3 var(--display);color:var(--olive)}
.ins-card-name a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.2em}
.ins-card-name a:hover .ins-who-n,.ins-who a:hover .ins-who-n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ins-card-name > span,.ins-who > span:first-child{display:inline-flex;align-items:center;min-height:44px}
/* the portrait is the link's first flex item, so the link and the letters after it meet in the middle, not on a baseline the image sets */
.ins-card-name > a,.ins-card-name > span,.ins-who > a,.ins-who > span:first-child,.ins-card-name .ins-cred,.ins-who .ins-cred{vertical-align:middle}
/* the round portrait before each name: her photo (tile preset) or her initials */
.ins-face{flex:0 0 auto;width:32px;height:32px;margin-right:10px;border-radius:50%;object-fit:cover;background:var(--paper);box-shadow:0 0 0 1.5px rgba(249,246,238,.95)}
.ins-face-ini{display:grid;place-items:center;font:500 .72rem/1 var(--body);letter-spacing:.04em;color:var(--muted)}
.ins-cred{font:400 .88rem/1 var(--body);color:var(--muted);margin-left:2px}
.ins-jump{margin:0 0 22px}
.ins-jump-h{margin:0 0 10px;font:500 1.05rem/1.3 var(--body);color:var(--ink-2)}
.ins-jump ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
/* a card's plans: a two-column checklist, every row a 44px link */
.ins-plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;list-style:none;margin:0;padding:0}
.ins-plist a,.ins-pl-plain{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.98rem;line-height:1.2;color:var(--ink-2);text-decoration:none}
.ins-plist a > span{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(60,60,50,.35);text-underline-offset:3px}
.ins-plist a:hover > span{text-decoration-color:currentColor}
.ins-plist .ins-m{width:18px;height:18px}
.ins-pl-aside{margin-left:-2px;font-style:normal;font-size:.88rem;color:var(--ins-deep)}
.ins-plist.ins-plist-wait{grid-template-columns:minmax(0,1fr)}
.ins-card-out{margin:4px 0 8px;font-size:.9rem;line-height:1.45;color:var(--muted)}
.ins-card-k{display:inline-flex;align-items:center;gap:5px;margin-right:4px;font-weight:600}
.ins-card-k .ins-m{width:14px;height:14px}
@media (min-width:560px){.ins-plist{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- 720px and up: the table ---------- */
.ins-scroll,.ins-scroll-hint{display:none}
@media (min-width:720px){
  .ins-cards,.ins-jump{display:none}
  .ins-scroll{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:var(--r-sm)}
  .ins-scroll:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
  .ins-scroll-hint{display:block;margin:10px 0 0;font-size:.85rem;color:var(--muted)}
}
/* the hint hides once the table fits (a few lines of script in _ins-chart.php) */
.ins-scroll.ins-fits + .ins-scroll-hint{display:none}
/* every plan column keeps at least 6.5rem: below that the table scrolls
   sideways inside .ins-scroll instead of squeezing the heads (--ins-n is
   the number of plans, set on the table) */
.ins-table{width:100%;min-width:calc(var(--ins-corner) + var(--ins-n, 9) * 6.5rem);table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:.95rem;--ins-corner:220px}
.ins-corner{width:var(--ins-corner)}
/* pinned with the name column, so plan heads scrolled sideways pass under it */
.ins-table thead .ins-corner{position:-webkit-sticky;position:sticky;left:0;z-index:2}
.ins-table th,.ins-table td{padding:0;text-align:center;vertical-align:middle}
.ins-table thead th{padding:0 4px 12px;vertical-align:bottom;font:500 .95rem/1.2 var(--display);color:var(--olive);background:var(--cream);
  overflow-wrap:anywhere;hyphens:manual}   /* the last resort: a head breaks before it ever runs into the next one */
.ins-table thead th > a,.ins-table thead th > span:first-child{max-width:100%}
.ins-table thead a{display:inline-flex;align-items:flex-end;justify-content:center;min-height:44px;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ins-plan-note{display:block;margin-top:2px;font:400 .74rem/1.25 var(--body);color:var(--muted)}
.ins-corner{text-align:left!important;font:600 .74rem/1 var(--body)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)!important}
.ins-gh th{padding:22px 0 8px;text-align:left;background:var(--cream)}
.ins-gh span{position:-webkit-sticky;position:sticky;left:0;font:600 .78rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.ins-table tbody tr:not(.ins-gh) > *{background:var(--ins-tint);border-top:var(--hair) solid rgba(249,246,238,.9)}
.ins-table tbody tr:not(.ins-gh) > * + *{border-left:var(--hair) solid rgba(249,246,238,.9)}
.ins-who{position:-webkit-sticky;position:sticky;left:0;z-index:1;min-width:220px;padding:0 14px!important;text-align:left!important;font:400 1rem/1.25 var(--body);color:var(--olive)}
.ins-who a,.ins-who > span:first-child{display:inline-flex;align-items:center;min-height:48px;color:inherit;text-decoration:none}
.ins-who .ins-cred{margin-left:6px}
.ins-c{height:48px;min-width:64px}
@media (min-width:1100px){.ins-table{font-size:1rem;--ins-corner:250px}}

/* save the chart */
.ins-save{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:22px 0 0}
.ins-save-a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;color:var(--olive);font:500 .95rem/1 var(--ui);text-decoration:none}
.ins-save-a:hover{border-color:var(--olive)}
.ins-save-a svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ins-save-or{color:var(--muted);font-size:.92rem}
.ins-save-or a{display:inline-flex;align-items:center;min-height:44px;color:var(--olive);text-decoration:underline;text-underline-offset:3px}
.ins-note{margin-top:14px}

@media print{
  .ins{padding:24px 0 0;border-top:0}
  .ins-cards,.ins-jump,.ins-save,.ins-edit,.ins-scroll-hint,.phead-jump{display:none!important}
  .ins-corner{width:22%}
  .ins-scroll{display:block!important;overflow:visible}
  .ins-table{min-width:0;font-size:9pt}
  .ins-who,.ins-table thead .ins-corner{position:static}
  .ins-who{min-width:0;padding:0 6px!important}
  .ins-table thead th{font-size:8.5pt}
  .ins-table thead a{text-decoration:none;min-height:0}
  .ins-c{height:22pt;min-width:0}
  .ins-table tbody{-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
}

/* ---------- the plan pages ---------- */
.iplan-head{padding-bottom:8px}
.iplan-lede{max-width:40em;margin:14px 0 0;font-size:1.1rem;line-height:1.55;color:var(--ink-2)}
.iplan-caveat{max-width:40em;margin:12px 0 0;color:var(--muted);font-size:.98rem;line-height:1.55}
.iplan-caveat a,.iplan-back a{color:var(--olive);text-decoration:underline;text-underline-offset:3px}
.iplan-back{margin:4px 0 0}
.iplan-back a{display:inline-flex;align-items:center;min-height:44px}
.iplan-group{padding-top:36px}
.iplan-group h2{display:flex;align-items:baseline;gap:12px;font-size:1.5rem;font-size:clamp(1.5rem,5vw,2rem);padding-top:16px;margin:0 0 20px;border-top:1px solid var(--line-strong)}
.iplan-n{font:500 .85rem/1 var(--body);color:var(--muted)}
.iplan-cards{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.iplan-card{display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 16px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.35)}
.iplan-photo{grid-row:span 4;display:block;width:84px;aspect-ratio:4/5;border-radius:calc(var(--r-sm) - 2px);overflow:hidden;background:var(--paper)}
.iplan-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.iplan-photo .mono{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:500 1.3rem/1 var(--display);color:var(--muted)}
.iplan-name{margin:0;font:500 1.15rem/1.3 var(--display);color:var(--olive)}
.iplan-name a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.iplan-cred{font:400 .88rem/1 var(--body);color:var(--muted);margin-left:4px}
.iplan-wait{display:inline-block;margin-left:6px;font:500 .82rem/1.2 var(--body);color:#8A5424}
.iplan-book{margin:6px 0 0}
.iplan-book a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--olive);color:var(--cream);font:500 .92rem/1 var(--ui);text-decoration:none}
.iplan-none{max-width:40em;margin:28px 0 0;font-size:1.05rem}
.iplan-others{padding:48px 0 80px}
.iplan-others h2{font-size:1.3rem;margin:0 0 12px}
.iplan-others ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
@media (min-width:720px){
  .iplan-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .iplan-card{grid-template-columns:104px minmax(0,1fr);padding:16px}
  .iplan-photo{width:104px}
}
@media (min-width:1100px){.iplan-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}