/* Caretaker dashboard, reference layout (Claude, 2026-11-09). Loaded after
   dashboard-blueprint.css. Presentation only: no data, thresholds, units or
   freshness rules change here. Icons: locally bundled Lucide (ICON_SYSTEM.md). */

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* New icons (see ICON_SYSTEM.md) */
.icon-apple{--icon:url('./icons/apple.svg')}.icon-arrow-down-right{--icon:url('./icons/arrow-down-right.svg')}.icon-arrow-down{--icon:url('./icons/arrow-down.svg')}.icon-arrow-right{--icon:url('./icons/arrow-right.svg')}.icon-arrow-up-right{--icon:url('./icons/arrow-up-right.svg')}.icon-arrow-up{--icon:url('./icons/arrow-up.svg')}.icon-bell{--icon:url('./icons/bell.svg')}.icon-chevron-down{--icon:url('./icons/chevron-down.svg')}.icon-chevron-right{--icon:url('./icons/chevron-right.svg')}.icon-chevrons-down{--icon:url('./icons/chevrons-down.svg')}.icon-chevrons-up{--icon:url('./icons/chevrons-up.svg')}.icon-circle-help{--icon:url('./icons/circle-help.svg')}.icon-clock{--icon:url('./icons/clock.svg')}.icon-divide{--icon:url('./icons/divide.svg')}.icon-droplet{--icon:url('./icons/droplet.svg')}.icon-external-link{--icon:url('./icons/external-link.svg')}.icon-footprints{--icon:url('./icons/footprints.svg')}.icon-gauge{--icon:url('./icons/gauge.svg')}.icon-heart{--icon:url('./icons/heart.svg')}.icon-info{--icon:url('./icons/info.svg')}.icon-layers{--icon:url('./icons/layers.svg')}.icon-list-checks{--icon:url('./icons/list-checks.svg')}.icon-lock-keyhole{--icon:url('./icons/lock-keyhole.svg')}.icon-message-square-text{--icon:url('./icons/message-square-text.svg')}.icon-moon{--icon:url('./icons/moon.svg')}.icon-notebook-pen{--icon:url('./icons/notebook-pen.svg')}.icon-qr-code{--icon:url('./icons/qr-code.svg')}.icon-sliders-horizontal{--icon:url('./icons/sliders-horizontal.svg')}.icon-syringe{--icon:url('./icons/syringe.svg')}.icon-target{--icon:url('./icons/target.svg')}.icon-trending-up{--icon:url('./icons/trending-up.svg')}.icon-x{--icon:url('./icons/x.svg')}.icon-zap{--icon:url('./icons/zap.svg')}.icon-chart-no-axes-column-increasing{--icon:url('./icons/chart-no-axes-column-increasing.svg')}

/* Tones: each label is written out; color only adds recognition. */
#person-detail,dialog.dash-soon{--tone-blue:#1f5fd1;--tone-cyan:#0b7f9e;--tone-violet:#6d3fd1;--tone-purple:#8a2fc4;--tone-orange:#b4520b;--tone-red:#bf2a3a;--tone-green:#177a3e;--tone-teal:#0d766d;--tone-slate:#4b5868;--tone-amber:#a8650a;--dash-shadow:0 1px 2px #0f172a0d,0 8px 24px #0f172a0a}
:root:not([data-theme=light]) #person-detail,:root:not([data-theme=light]) dialog.dash-soon{--tone-blue:#86b4ff;--tone-cyan:#6fd3ec;--tone-violet:#c3a8ff;--tone-purple:#d3a6f5;--tone-orange:#f9ad69;--tone-red:#ff8d95;--tone-green:#5fd895;--tone-teal:#5fd6c9;--tone-slate:#b4bfcc;--tone-amber:#f3c26b;--dash-shadow:0 1px 0 #ffffff08}
#person-detail .tone-blue{--tone:var(--tone-blue)}#person-detail .tone-cyan{--tone:var(--tone-cyan)}#person-detail .tone-violet{--tone:var(--tone-violet)}#person-detail .tone-purple{--tone:var(--tone-purple)}#person-detail .tone-orange{--tone:var(--tone-orange)}#person-detail .tone-red{--tone:var(--tone-red)}#person-detail .tone-green{--tone:var(--tone-green)}#person-detail .tone-teal{--tone:var(--tone-teal)}.tone-slate{--tone:var(--tone-slate)}

/* ---------------- Page grid ---------------- */
#person-detail{grid-template-columns:206px minmax(0,1fr) 364px;gap:24px;padding:20px 26px 32px 0}

/* ---------------- Sidebar ---------------- */
#person-detail .person-rail{display:flex;flex-direction:column;gap:0;padding:0 14px 24px 18px}
#person-detail .person-rail>.person-brand{order:1;margin:0 0 26px 4px}
#person-detail .person-rail>.person-people-group{order:2}
#person-detail .person-rail>.person-rail-actions{order:3}
#person-detail .person-rail>.person-rail-help{order:4}
#person-detail .person-people-group>summary{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:750;color:var(--text);padding:6px 4px 10px;cursor:pointer;list-style:none}
#person-detail .person-people-group>summary::-webkit-details-marker{display:none}
#person-detail .person-people-group>summary::before{content:"";width:0;height:0;border:5px solid transparent;border-top:6px solid currentColor;border-bottom:0}
#person-detail .person-people-group:not([open])>summary::before{transform:rotate(-90deg)}
#person-detail .person-search{padding:8px 10px;border-radius:11px;margin-bottom:8px}
#person-detail .person-roster{max-height:224px;gap:2px;padding-right:2px;scrollbar-width:thin}
#person-detail .person-roster-button{min-height:44px;padding:6px 8px;border-radius:11px;font-size:13.5px;font-weight:650;line-height:1.2}
#person-detail .person-roster-button[aria-current=true]{background:var(--selected);border-color:color-mix(in srgb,var(--action) 22%,transparent)}
#person-detail .person-roster .avatar.person-initial{width:30px;height:30px}
#person-detail .person-rail-actions,#person-detail .person-rail-help{display:grid;gap:3px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--border-soft)}
#person-detail .person-rail .person-nav-button{position:relative;display:flex;align-items:center;gap:11px;min-height:42px;padding:9px 10px;margin:0;border:0;border-radius:11px;font-size:14px;font-weight:600;color:var(--text);background:transparent;text-decoration:none;text-align:left;width:100%}
#person-detail .person-rail .person-nav-button .care-icon{width:21px;height:21px;color:var(--secondary)}
#person-detail .person-rail .person-nav-button:hover{background:var(--surface-soft)}
#person-detail .person-rail .person-rail-actions>.person-nav-button:first-child{background:var(--selected);color:var(--action);font-weight:750}
#person-detail .person-rail .person-rail-actions>.person-nav-button:first-child .care-icon{color:var(--action)}
#person-detail .person-rail .nav-external{width:14px!important;height:14px!important;margin-left:auto;color:var(--tertiary)!important}
#person-detail .person-rail .person-back{border-top:0;margin:0}
#person-detail .soon-tag,dialog .soon-tag{margin-left:auto;font-size:10.5px;font-weight:750;letter-spacing:.02em;padding:2px 7px;border-radius:999px;color:var(--secondary);background:var(--surface-soft);border:1px solid var(--border)}
#person-detail .person-nav-button.is-soon>span:not(.soon-tag){color:var(--secondary)}

/* ---------------- Header, person, tabs ---------------- */
#person-detail .person-toolbar{margin-bottom:0;min-height:44px}
#person-detail .person-toolbar h1{font-size:34px;font-weight:800;letter-spacing:-.045em}
#person-detail .person-heading{margin:4px 0 18px}
#person-detail .person-heading .avatar{width:56px;height:56px}
#person-detail .person-heading .detail-name{font-size:28px}
#person-detail .person-scope{margin:-14px 0 0 72px}
#person-detail .person-main>.section-tabs{margin-bottom:18px}
#person-detail .person-main>.section-tabs button{min-height:42px}

/* ---------------- Overview composition ---------------- */
#person-detail .person-overview.dash-overview{display:flex;flex-direction:column;gap:16px;padding:0;border:0;background:transparent}
#person-detail .person-overview.dash-overview[hidden]{display:none}
#person-detail .dash-overview #person-history,#person-detail .dash-overview .dashboard-chart-layout{display:block;margin:0}
#person-detail .dash-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.15fr) minmax(0,.85fr);gap:16px;align-items:stretch}
#person-detail .dash-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

/* Current glucose card (existing nodes; only placement and style change) */
#person-detail .dash-top .detail-hero{position:relative;margin:0;padding:18px 20px 52px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--dash-shadow);overflow:hidden;min-height:176px;display:flex;flex-direction:column;justify-content:center}
#person-detail .dash-top .detail-stats{min-height:0;height:auto;gap:8px;margin:0;align-content:start;position:relative;z-index:1}
#person-detail .dash-top .detail-reading{font-size:clamp(54px,4.6vw,76px);line-height:1;gap:10px}
#person-detail .dash-top .detail-reading small{font-size:15px;font-weight:600;color:var(--secondary)}
#person-detail .dash-top .detail-arrow{font-size:30px}
#person-detail .dash-top .person-reading-status{gap:8px}
#person-detail .dash-top .detail-freshness{font-size:13px}
#person-detail .dash-reading-spark-wrap{position:absolute;left:0;right:0;bottom:0;height:52px;pointer-events:none;color:var(--green)}
#person-detail .detail-hero.range-high .dash-reading-spark-wrap,#person-detail .detail-hero.range-urgent-high .dash-reading-spark-wrap{color:var(--orange)}
#person-detail .detail-hero.range-low .dash-reading-spark-wrap,#person-detail .detail-hero.range-urgent-low .dash-reading-spark-wrap{color:var(--red)}
#person-detail .dash-reading-spark{width:100%;height:100%;display:block}
#person-detail .dash-reading-spark .dash-spark-area{fill:currentColor;opacity:.13;stroke:none}
#person-detail .dash-reading-spark .dash-spark-line{fill:none;stroke:currentColor;stroke-width:2;opacity:.55;vector-effect:non-scaling-stroke}

/* ---------------- Card system ---------------- */
#person-detail .dash-card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:128px;padding:14px 15px 12px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--dash-shadow)}
#person-detail .dash-card-head{display:flex;align-items:center;gap:10px;padding-right:26px;min-width:0}
#person-detail .dash-badge,dialog.dash-soon .dash-badge{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;color:var(--tone);background:color-mix(in srgb,var(--tone) 13%,var(--surface))}
#person-detail .dash-badge .care-icon,dialog.dash-soon .dash-badge .care-icon{width:19px;height:19px}
#person-detail .dash-card-head h3{display:grid;gap:1px;min-width:0;margin:0;font-size:14px;font-weight:750;line-height:1.2;color:var(--text)}
#person-detail .dash-card-head h3>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#person-detail .dash-card-head h3>small{font-size:11.5px;font-weight:550;color:var(--secondary)}
#person-detail .dash-value{display:flex;align-items:baseline;gap:5px;margin:2px 0 0;min-width:0;color:var(--text)}
#person-detail .dash-value strong{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
#person-detail .dash-value .dash-unit{font-size:13px;font-weight:650;color:var(--secondary)}
#person-detail .dash-value>.care-icon{align-self:center;width:24px;height:24px;color:var(--tone)}
#person-detail .dash-value-xl strong{font-size:40px}
#person-detail .dash-foot{display:flex;align-items:center;gap:8px;margin-top:auto;min-height:20px}
#person-detail .dash-meta{font-size:12px;color:var(--secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
#person-detail .dash-tag{margin-left:auto;flex:none;font-size:10.5px;font-weight:750;letter-spacing:.02em;padding:2px 7px;border-radius:999px;border:1px dashed currentColor}
#person-detail .dash-tag.is-simulated{color:var(--tone-amber)}
#person-detail .dash-tag.is-estimate{color:var(--tone-teal)}
#person-detail .dash-status{margin:4px 0 0}
#person-detail .dash-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;color:var(--secondary);background:var(--surface-soft);border:1px solid var(--border)}
#person-detail .dash-status.is-not_connected .dash-pill,#person-detail .dash-status.is-stale .dash-pill{color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 40%,var(--border));background:color-mix(in srgb,var(--yellow) 9%,var(--surface))}
#person-detail .dash-status.is-not_connected .dash-pill::before{content:"";width:7px;height:7px;border-radius:50%;border:2px solid currentColor}
#person-detail .dash-status.is-stale .dash-pill::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor}
#person-detail .dash-card[data-state=unavailable] .dash-badge,#person-detail .dash-card[data-state=not_connected] .dash-badge{filter:saturate(.55)}
#person-detail .dash-placeholder{display:block;height:2px;margin:8px 2px 2px;border-top:2px dashed var(--border);opacity:.8}

/* Visuals (decorative; values and labels carry the meaning) */
#person-detail .dash-spark{display:block;width:100%;height:30px;color:var(--tone)}
#person-detail .dash-spark .dash-spark-area{fill:currentColor;opacity:.12;stroke:none}
#person-detail .dash-spark .dash-spark-line{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
#person-detail .dash-bars{display:flex;align-items:flex-end;gap:4px;height:30px}
#person-detail .dash-bars>span{flex:1;max-width:12px;border-radius:3px 3px 1px 1px;background:color-mix(in srgb,var(--tone) 40%,var(--surface))}
#person-detail .dash-bars>span:last-child{background:var(--tone)}
#person-detail .dash-progress{display:block;height:7px;border-radius:999px;background:var(--surface-soft);overflow:hidden;margin:10px 0 4px}
#person-detail .dash-progress>span{display:block;height:100%;border-radius:inherit;background:var(--tone)}

/* About toggle: an "i" in the corner; the text opens inside the card. */
#person-detail .dash-about{position:static}
#person-detail .dash-about>summary{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--tertiary);list-style:none}
#person-detail .dash-about>summary::-webkit-details-marker{display:none}
#person-detail .dash-about>summary .care-icon{width:16px;height:16px}
#person-detail .dash-about>summary:hover{background:var(--surface-soft);color:var(--text)}
#person-detail .dash-about>summary:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
#person-detail .dash-about[open]>summary{color:var(--action);background:var(--selected)}
#person-detail .dash-about-text{position:absolute;z-index:3;left:8px;right:8px;top:44px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised,var(--surface));box-shadow:0 10px 30px #0f172a24;font-size:12.5px;line-height:1.45;color:var(--text)}
#person-detail .dash-about-text p{margin:0}#person-detail .dash-about-text p+p{margin-top:6px;color:var(--secondary)}

/* Time in range */
#person-detail .dash-tir{display:flex;align-items:center;gap:14px;min-width:0}
#person-detail .dash-donut-wrap{position:relative;flex:none;width:92px;height:92px}
#person-detail .dash-donut{width:100%;height:100%;transform:rotate(-90deg)}
#person-detail .dash-donut circle{fill:none;stroke-width:6.2}
#person-detail .dash-donut-track{stroke:var(--surface-soft)}
#person-detail .dash-donut-in{stroke:var(--green)}#person-detail .dash-donut-high{stroke:var(--tone-amber)}#person-detail .dash-donut-low{stroke:var(--red)}
#person-detail .dash-donut-value{position:absolute;inset:0;display:grid;place-items:center;font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
#person-detail .dash-tir-legend{display:grid;gap:7px;margin:0;flex:1;min-width:0}
#person-detail .dash-tir-legend>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
#person-detail .dash-tir-legend dt{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:12.5px;font-weight:650}
#person-detail .dash-tir-legend dt small{font-size:11px;font-weight:500;color:var(--secondary);white-space:nowrap}
#person-detail .dash-tir-legend dd{margin:0;font-size:13px;font-weight:800}
#person-detail .dash-swatch{width:9px;height:9px;flex:none;border-radius:3px;align-self:center}
#person-detail .is-in .dash-swatch{background:var(--green)}#person-detail .is-high .dash-swatch{background:var(--tone-amber)}#person-detail .is-low .dash-swatch{background:var(--red)}

/* GMI estimate: 14 day-coverage segments */
#person-detail .dash-days{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;margin:4px 0 2px}
#person-detail .dash-days>span{height:8px;border-radius:2px;background:var(--surface-soft)}
#person-detail .dash-days>span.is-on{background:var(--tone)}

/* ---------------- Chart card ---------------- */
#person-detail .dash-overview .glucose-chart{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--dash-shadow);padding:16px 18px 14px}
#person-detail .dash-overview .chart-heading{font-size:16px;font-weight:750;margin-bottom:6px}
#person-detail .dash-overview .dashboard-metrics{margin:4px 0 8px}
#person-detail .dash-overview .dashboard-metrics .chart-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
#person-detail .dash-overview .chart-summary-item{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:9px 12px;min-height:0;border-radius:13px}
#person-detail .dash-overview .chart-summary-item dt{grid-row:1/3;display:contents;font-size:12.5px;font-weight:700}
#person-detail .dash-overview .chart-summary-item dt .metric-symbol{grid-row:1/3;grid-column:1;width:32px;height:32px;margin:0;border-radius:10px}
#person-detail .dash-overview .chart-summary-item dt .metric-symbol .care-icon{width:17px;height:17px}
#person-detail .dash-overview .chart-summary-item dd:not(.chart-summary-note){grid-column:2;font-size:22px;font-weight:800;margin:0;line-height:1.1}
#person-detail .dash-overview .chart-summary-item dd small{font-size:11px;font-weight:600}
#person-detail .dash-overview .chart-summary-note{grid-column:1/-1;font-size:11px;margin:4px 0 0}
#person-detail .dash-overview .chart-summary-item dd.is-empty{font-size:13px!important;font-weight:650!important}
/* The label text sits in the second column, above the value. */
#person-detail .dash-overview .chart-summary-item dt{display:flex;flex-direction:row;align-items:center;gap:10px;grid-column:1/-1;grid-row:1}
#person-detail .dash-overview .chart-summary-item{grid-template-columns:1fr;row-gap:2px}
#person-detail .dash-overview .chart-summary-item dd:not(.chart-summary-note){grid-column:1;padding-left:42px}
#person-detail .dash-overview .chart-plot-wrap svg{display:block;width:100%;height:auto}
#person-detail .dash-overview .chart-label{font-size:11px}
#person-detail .dash-overview .chart-inspection{padding:8px 12px;font-size:13px}
#person-detail .dash-overview .chart-legend{gap:6px;margin-top:8px}
#person-detail .dash-overview .chart-legend li{font-size:11.5px;padding:3px 8px}
#person-detail .dash-overview .chart-notes .chart-caption{font-size:12px;line-height:1.45;margin:6px 0 0;color:var(--secondary)}
/* Metric colors: Average BG purple, Highest orange, Lowest red (labels always shown). */
#person-detail .chart-summary-item .metric-symbol .care-icon{width:16px;height:16px;color:var(--metric-accent)}

/* ---------------- Care summary ---------------- */
#person-detail .person-summary{padding:16px;border-radius:22px;margin-top:0;background:var(--surface);box-shadow:var(--dash-shadow)}
#person-detail .person-summary>h2{font-size:24px;margin:2px 0 14px;gap:10px}
#person-detail .person-summary>h2>.care-icon{width:24px;height:24px;padding:8px;box-sizing:content-box;border-radius:50%;background-color:var(--green);color:var(--green)}
#person-detail .person-summary-card{min-height:72px;padding:11px 12px;gap:12px;border-radius:15px}
#person-detail .summary-text strong{font-size:16px}
#person-detail .summary-text>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#person-detail .summary-chevron{margin-left:auto;display:grid;place-items:center;color:var(--tertiary)}
#person-detail .summary-chevron .care-icon{width:18px;height:18px}
#person-detail .summary-allergies .summary-text{flex:1;min-width:0}
#person-detail .allergy-detail>summary{display:flex;align-items:flex-start;gap:8px;list-style:none;cursor:pointer;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--text)}
#person-detail .allergy-detail>summary::-webkit-details-marker{display:none}
#person-detail .allergy-preview{flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600}
#person-detail .allergy-chevron{width:18px!important;height:18px!important;flex:none;color:var(--tertiary)}
#person-detail .allergy-detail[open] .allergy-chevron{transform:rotate(180deg)}
#person-detail .allergy-detail[open] .allergy-preview{display:none}
#person-detail .allergy-detail[open]>summary{justify-content:flex-end;margin-top:-22px}
#person-detail .allergy-detail>p{margin:4px 0;font-size:13.5px;line-height:1.45;font-weight:600}
#person-detail .allergy-detail>small{font-size:11.5px;color:var(--secondary)}
#person-detail .person-profile-link{min-height:96px;margin-top:14px;padding:18px 16px}
#person-detail .person-profile-link .profile-chevron{width:20px!important;height:20px!important;background-color:#fff!important;color:#fff;margin-left:auto}

/* ---------------- Quick actions ---------------- */
#person-detail .person-quick{margin-top:14px;padding:14px;border-radius:18px;background:var(--surface)}
#person-detail .person-quick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
#person-detail .person-quick-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:19px;font-weight:750;color:var(--text)}
#person-detail .person-quick-head h3 .care-icon{width:20px;height:20px;color:var(--tone-green);background:currentColor}
#person-detail .quick-customize{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:4px 8px;border:0;border-radius:9px;background:transparent;color:var(--action);font-size:13px;font-weight:650}
#person-detail .quick-customize .care-icon{width:15px;height:15px;color:inherit;background:currentColor}
#person-detail .quick-customize:hover{background:var(--selected)}
#person-detail .quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#person-detail .quick-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:84px;padding:12px 6px 10px;border:1px solid color-mix(in srgb,var(--tone) 26%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--tone) 9%,var(--surface));color:var(--text);text-align:center;font-size:12.5px;font-weight:700;line-height:1.2}
#person-detail .quick-tile-icon .care-icon{width:24px;height:24px;color:var(--tone);background:currentColor}
#person-detail .quick-tile-label{color:color-mix(in srgb,var(--tone) 55%,var(--text))}
#person-detail .quick-tile:hover{border-color:var(--tone)}
#person-detail .quick-tile.is-soon{border-style:dashed;background:var(--surface)}
#person-detail .quick-tile.is-soon .quick-tile-label{color:var(--secondary)}
#person-detail .quick-tile.is-soon .soon-tag{position:absolute;top:5px;right:5px;margin:0;font-size:9.5px;padding:1px 6px}
@media(prefers-reduced-motion:no-preference){
 #person-detail .dash-card,#person-detail .quick-tile,#person-detail .person-rail .person-nav-button{transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
 #person-detail .dash-card:hover{box-shadow:0 2px 4px #0f172a12,0 12px 28px #0f172a12}
}

/* ---------------- Coming soon panel ---------------- */
dialog.dash-soon{width:min(400px,calc(100vw - 32px));padding:24px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 30px 80px #0f172a45}
dialog.dash-soon::backdrop{background:#0b121c80}
dialog.dash-soon .dash-soon-kicker{margin:14px 0 2px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}
dialog.dash-soon h2{margin:0 0 8px;font-size:22px;letter-spacing:-.02em}
dialog.dash-soon p{margin:0 0 18px;line-height:1.5;color:var(--secondary);font-size:14.5px}
dialog.dash-soon .primary-button{width:100%;min-height:44px}

/* ================================================================
   Pass 4 (2026-11-09): metric cards laid out like the owner's picture,
   and a vibrant palette for every metric graphic in the app. Text colors
   keep their tested contrast; only graphics (lines, bars, rings, bands,
   badges) use the vivid tokens.
   ================================================================ */
:root{--vivid-green:#22c55e;--vivid-blue:#3b82f6;--vivid-violet:#8b5cf6;--vivid-orange:#f59e0b;--vivid-red:#ef4444;--vivid-teal:#14b8a6;--vivid-cyan:#06b6d4;--vivid-pink:#ec4899}
:root:not([data-theme=light]){--vivid-green:#4ade80;--vivid-blue:#60a5fa;--vivid-violet:#a78bfa;--vivid-orange:#fbbf24;--vivid-red:#f87171;--vivid-teal:#2dd4bf;--vivid-cyan:#22d3ee;--vivid-pink:#f472b6}
#person-detail .graphic-green{--graphic:var(--vivid-green)}#person-detail .graphic-blue{--graphic:var(--vivid-blue)}#person-detail .graphic-violet{--graphic:var(--vivid-violet)}#person-detail .graphic-orange{--graphic:var(--vivid-orange)}#person-detail .graphic-red{--graphic:var(--vivid-red)}#person-detail .graphic-cyan{--graphic:var(--vivid-cyan)}#person-detail .graphic-teal{--graphic:var(--vivid-teal)}
#person-detail .dash-badge.tone-blue{--vivid:var(--vivid-blue)}#person-detail .dash-badge.tone-cyan{--vivid:var(--vivid-cyan)}#person-detail .dash-badge.tone-violet{--vivid:var(--vivid-violet)}#person-detail .dash-badge.tone-orange{--vivid:var(--vivid-orange)}#person-detail .dash-badge.tone-red{--vivid:var(--vivid-red)}#person-detail .dash-badge.tone-green{--vivid:var(--vivid-green)}#person-detail .dash-badge.tone-teal{--vivid:var(--vivid-teal)}

/* Badges: round, tinted, vivid glyph */
#person-detail .dash-badge{width:38px;height:38px;border-radius:50%;color:var(--vivid,var(--tone));background:color-mix(in srgb,var(--vivid,var(--tone)) 15%,var(--surface))}
#person-detail .dash-badge .care-icon{width:20px;height:20px}

/* Metric card: header row, then value left + graphic right */
#person-detail .dash-metrics .dash-card{min-height:116px;gap:10px;padding:14px 14px 13px;border-radius:18px}
#person-detail .dash-metrics .dash-card-head{padding-right:18px;align-items:center}
#person-detail .dash-card-head h3>span{font-size:15px;font-weight:750;letter-spacing:-.01em}
#person-detail .dash-card-head h3>small{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:500;color:var(--secondary)}
#person-detail .dash-card-head h3>small>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#person-detail .dash-card-head .dash-tag{margin:0;flex:none;font-size:9.5px;padding:0 6px;line-height:1.6}
#person-detail .dash-about>summary{top:8px;right:8px;width:24px;height:24px}
#person-detail .dash-about>summary .care-icon{width:15px;height:15px}
#person-detail .dash-body{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-width:0;margin-top:auto}
#person-detail .dash-body.is-stacked{flex-direction:column;align-items:stretch;gap:8px}
#person-detail .dash-body .dash-value{margin:0;flex:none}
#person-detail .dash-metrics .dash-value strong{font-size:28px;font-weight:800;letter-spacing:-.03em}
#person-detail .dash-metrics .dash-value .dash-unit{font-size:17px;font-weight:700;color:var(--text);margin-left:2px}
#person-detail .dash-body .dash-spark{flex:0 1 96px;min-width:56px;width:96px;height:38px;color:var(--graphic)}
#person-detail .dash-spark .dash-spark-area{opacity:.2}
#person-detail .dash-spark .dash-spark-line{stroke-width:2.4}
#person-detail .dash-body .dash-bars{flex:0 1 84px;min-width:50px;height:38px;gap:4px}
#person-detail .dash-body .dash-bars>span{max-width:11px;border-radius:3px 3px 2px 2px;background:var(--graphic);opacity:.55}
#person-detail .dash-body .dash-bars>span:nth-last-child(-n+3){opacity:.8}
#person-detail .dash-body .dash-bars>span:last-child{opacity:1}
#person-detail .dash-body .dash-progress{height:10px;margin:0;background:color-mix(in srgb,var(--graphic) 18%,var(--surface))}
#person-detail .dash-body .dash-progress>span{background:linear-gradient(90deg,color-mix(in srgb,var(--graphic) 75%,#fff),var(--graphic))}
#person-detail .dash-arrow{flex:none;display:grid;place-items:center;color:var(--graphic)}
#person-detail .dash-card .dash-arrow .care-icon{width:30px;height:30px;color:inherit;background-color:currentColor}
/* styles.css gives every .care-icon its own grey; inside cards, icons take their container's color. */
#person-detail .dash-card :is(.dash-badge,.dash-about>summary,.dash-arrow) .care-icon{color:inherit}
#person-detail .dash-card[data-card=trend] .dash-body .dash-value{flex:1 1 auto;min-width:0}
#person-detail .dash-card[data-card=trend] .dash-body .dash-value strong{font-size:22px;white-space:normal;line-height:1.1}
#person-detail .dash-metrics .dash-meta{font-size:11.5px;margin-top:-4px}
/* Unavailable: the status on the left, a quiet dashed trace on the right */
#person-detail .dash-body .dash-status{margin:0;min-width:0}
#person-detail .dash-body .dash-placeholder{flex:0 1 84px;min-width:40px;height:26px;margin:0;border-top:0;border-bottom:2px dashed var(--border);opacity:.9}
#person-detail .dash-body .dash-pill{font-size:12px;padding:4px 9px;white-space:nowrap}

/* Vivid graphics elsewhere: time in range ring, GMI days, glucose mini line, summary chips */
#person-detail .dash-donut circle{stroke-width:6.8}
#person-detail .dash-donut-in{stroke:var(--vivid-green)}#person-detail .dash-donut-high{stroke:var(--vivid-orange)}#person-detail .dash-donut-low{stroke:var(--vivid-red)}
#person-detail .is-in .dash-swatch{background:var(--vivid-green)}#person-detail .is-high .dash-swatch{background:var(--vivid-orange)}#person-detail .is-low .dash-swatch{background:var(--vivid-red)}
#person-detail .dash-days>span.is-on{background:linear-gradient(90deg,var(--vivid-teal),var(--vivid-cyan))}
#person-detail .dash-reading-spark-wrap{color:var(--vivid-green)}
#person-detail .detail-hero.range-high .dash-reading-spark-wrap,#person-detail .detail-hero.range-urgent-high .dash-reading-spark-wrap{color:var(--vivid-orange)}
#person-detail .detail-hero.range-low .dash-reading-spark-wrap,#person-detail .detail-hero.range-urgent-low .dash-reading-spark-wrap{color:var(--vivid-red)}
#person-detail .dash-reading-spark .dash-spark-area{opacity:.22}#person-detail .dash-reading-spark .dash-spark-line{opacity:.9;stroke-width:2.4}
.chart-summary-item[data-metric=average]{--vivid-accent:var(--vivid-violet)}.chart-summary-item[data-metric=highest]{--vivid-accent:var(--vivid-orange)}.chart-summary-item[data-metric=lowest]{--vivid-accent:var(--vivid-red)}
#person-detail .chart-summary-item,.chart-summary-item{border-color:color-mix(in srgb,var(--vivid-accent,var(--metric-accent)) 38%,var(--border))}
#person-detail .chart-summary-item .metric-symbol,.chart-summary-item .metric-symbol{background:color-mix(in srgb,var(--vivid-accent,var(--metric-accent)) 18%,var(--surface))}
#person-detail .chart-summary-item .metric-symbol .care-icon,.chart-summary-item .metric-symbol .care-icon{color:var(--vivid-accent,var(--metric-accent))}
/* App-wide glucose charts: livelier in-range and low bands (same thresholds) */
.chart-target-band{fill:color-mix(in srgb,var(--vivid-green) 20%,transparent)}
.chart-low-band{fill:color-mix(in srgb,var(--vivid-red) 16%,transparent)}
.legend-target{background:color-mix(in srgb,var(--vivid-green) 38%,transparent)}
.legend-low{background:color-mix(in srgb,var(--vivid-red) 32%,transparent)}

/* ---------------- Laptop ---------------- */
@media(max-width:1350px){
 #person-detail{grid-template-columns:178px minmax(0,1fr) 312px;gap:18px;padding-right:18px}
 #person-detail .person-rail{padding-left:12px;padding-right:10px}
 #person-detail .dash-top{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.9fr);gap:12px}
 #person-detail .dash-metrics{gap:10px}
 #person-detail .dash-donut-wrap{width:72px;height:72px}#person-detail .dash-donut-value{font-size:17px}
 #person-detail .dash-tir{gap:10px}#person-detail .dash-tir-legend dt small{display:none}
 #person-detail .dash-card{padding:12px 12px 10px}
 #person-detail .dash-value strong{font-size:24px}
 #person-detail .dash-value-xl strong{font-size:34px}
 #person-detail .dash-top .detail-reading{font-size:58px}
 #person-detail .quick-tile{min-height:78px;font-size:12px}
}
@media(max-width:1350px){
 #person-detail .dash-top{grid-template-columns:minmax(0,1.15fr) minmax(0,1.2fr) minmax(0,.8fr)}
 #person-detail .dash-top .detail-reading{font-size:52px}
 #person-detail .dash-top .detail-arrow{font-size:24px}
}
@media(max-width:1350px){
 #person-detail .dash-metrics .dash-value strong{font-size:24px}
 #person-detail .dash-metrics .dash-value .dash-unit{font-size:14px}
 #person-detail .dash-card[data-card=trend] .dash-body .dash-value strong{font-size:18px}
 #person-detail .dash-body .dash-spark{width:72px}
 #person-detail .dash-metrics .dash-card{padding:12px 11px 11px}
}
/* Below 1280 the care summary moves under the dashboard (as on tablets). */
@media(max-width:1279px){
 #person-detail{grid-template-columns:182px minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start;gap:18px;padding-right:18px}
 #person-detail .person-toolbar{grid-column:2}
 #person-detail .person-rail{grid-row:1 / span 3}
 #person-detail .person-summary{grid-column:2;grid-row:3}
 #person-detail .person-summary-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 #person-detail .person-profile-link{max-width:none}
 #person-detail .dash-top .detail-reading{font-size:60px}
 #person-detail .dash-tir-legend dt small{display:inline}
}
/* ---------------- Tablet ---------------- */
@media(max-width:1100px){
 #person-detail{grid-template-columns:172px minmax(0,1fr);gap:18px}
 #person-detail .person-summary-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 #person-detail .person-quick{max-width:none}
 #person-detail .dash-tir-legend dt small{display:inline}
}
@media(max-width:900px){
 #person-detail .dash-top{grid-template-columns:repeat(2,minmax(0,1fr))}
 #person-detail .dash-top .detail-hero{grid-column:1/-1}
 #person-detail .dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 #person-detail .person-summary-cards{grid-template-columns:1fr}
}
/* ---------------- Phone ---------------- */
@media(max-width:700px){
 #person-detail{padding:14px 14px 28px;gap:14px}
 #person-detail .person-rail{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px}
 #person-detail .person-rail>.person-brand{display:flex;align-items:center;gap:10px;margin:0 0 4px 2px}
 #person-detail .person-brand .mr-logo{width:132px}
 #person-detail .person-people-group{width:100%}
 #person-detail .person-roster{max-height:150px}
 #person-detail .person-rail-actions,#person-detail .person-rail-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:10px 0 0}
 #person-detail .person-rail .person-nav-button{flex-direction:column;justify-content:center;gap:4px;min-height:58px;padding:8px 4px;font-size:12px;text-align:center;background:var(--surface-soft)}
 #person-detail .person-rail .nav-external{display:none}
 #person-detail .person-rail .person-nav-button.is-soon .soon-tag{position:absolute;top:3px;right:3px;margin:0;font-size:9px;padding:0 5px}
 #person-detail .person-toolbar h1{font-size:26px}
 #person-detail .person-scope{margin-left:0;margin-top:8px}
 #person-detail .dash-top{grid-template-columns:1fr}
 #person-detail .dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #person-detail .dash-card{min-height:118px}
 #person-detail .dash-value strong{font-size:22px}
 #person-detail .dash-overview .dashboard-metrics .chart-summary{gap:6px}
 #person-detail .dash-overview .chart-summary-item{padding:8px}
 #person-detail .dash-overview .chart-summary-item dt .metric-symbol{display:none}
 #person-detail .dash-overview .chart-summary-item dd:not(.chart-summary-note){padding-left:0;font-size:18px}
 #person-detail .dash-overview .chart-summary-note{display:none}
 #person-detail .dash-overview .glucose-chart{padding:12px}
 #person-detail .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
}

/* ---- Pass 2: compact chart strip, legend, sidebar, allergy row ---- */
#person-detail .dash-overview .chart-summary-item{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:2px;padding:8px 12px;grid-template-columns:none}
#person-detail .dash-overview .chart-summary-item dt{display:flex;flex:1;align-items:center;gap:9px;min-width:0;font-size:12.5px;font-weight:700;grid-column:auto;grid-row:auto}
#person-detail .dash-overview .chart-summary-item dt .metric-symbol{width:28px;height:28px;border-radius:9px;grid-row:auto}
#person-detail .dash-overview .chart-summary-item dd:not(.chart-summary-note){padding-left:0;font-size:21px;grid-column:auto}
#person-detail .dash-overview .chart-summary-note{flex-basis:100%;margin:0 0 0 37px;font-size:10.5px}
#person-detail .dash-tir-legend dt{display:grid;grid-template-columns:9px auto;column-gap:7px;row-gap:0;align-items:center}
#person-detail .dash-tir-legend dt small{grid-column:2;white-space:nowrap}
#person-detail .dash-tir-legend>div{align-items:flex-start}
#person-detail .dash-tir-label{white-space:nowrap}
#person-detail .person-rail .person-nav-button{font-size:13.5px;gap:10px;padding:8px 9px}
#person-detail .person-rail .person-nav-button .care-icon{width:20px;height:20px}
#person-detail .nav-stack{display:grid;line-height:1.2}
#person-detail .nav-soon{font-size:11px;font-weight:650;color:var(--tertiary)}
#person-detail .person-nav-button.is-soon .nav-stack>span{color:var(--secondary)}
#person-detail .person-rail .person-nav-link>span:not(.care-icon){white-space:nowrap}
#person-detail .allergy-detail>summary{background:none;border:0;padding:0;border-radius:0;font-size:13.5px;display:flex}
#person-detail .summary-allergies{align-items:flex-start}
#person-detail .dash-overview .dashboard-metrics .chart-summary-item{flex-direction:row;justify-content:flex-start}
#person-detail .dash-overview .dashboard-metrics .chart-summary-item dt{flex-direction:row;align-items:center}
#person-detail .dash-overview .dashboard-metrics .chart-summary-note{order:3}
#person-detail .dash-card[data-card=trend] .dash-value strong{font-size:22px;white-space:normal;line-height:1.15}
#person-detail .dash-card[data-card=trend] .dash-value{align-items:center}
#person-detail .dash-top .detail-hero:is(.range-unavailable,.range-pending) .detail-reading{font-size:44px;color:var(--tertiary);font-weight:600}
#person-detail .dash-overview .chart-empty{min-height:0;padding:28px 12px;margin:6px 0}
@media(max-width:700px){
 #person-detail .person-rail .person-nav-button{flex-direction:row;justify-content:center;min-height:44px;gap:6px;padding:6px 4px;font-size:12px}
 #person-detail .person-rail .person-nav-button .care-icon{width:17px;height:17px}
 #person-detail .person-rail .nav-stack{text-align:left}
 #person-detail .person-rail .nav-soon{font-size:10px}
 #person-detail .person-rail-actions,#person-detail .person-rail-help{padding-top:8px;gap:5px}
 #person-detail .person-summary{grid-row:auto}
}

/* Shared tweaks */
#person-detail .dash-foot .dash-meta{white-space:normal}
#person-detail .dash-overview .dashboard-metrics .chart-summary-item dt{flex:1 1 auto;min-width:fit-content}
@media(max-width:700px){#person-detail .dash-overview .chart-label{font-size:18px}}
@media(max-width:1100px){#person-detail .person-rail .nav-external{display:none}}
@media(prefers-reduced-motion:no-preference){#person-detail .person-people-group>summary::before,#person-detail .allergy-chevron{transition:transform .15s ease}}
#person-detail .person-nav-link:focus-visible,#person-detail .dash-about>summary:focus-visible,#person-detail .allergy-detail>summary:focus-visible{outline:2px solid var(--focus,var(--action));outline-offset:2px}