/* WestCoast Charts showcase (Copyright (c) 2026 West Coast Software, MIT) */
:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --side: #fbfbfc;
  --surface: #ffffff;
  --text: #0c1424;
  --muted: #5d6779;
  --faint: #687183; /* AA 4.5:1 on --bg, --side, --surface */
  --line: rgba(12, 20, 36, .075);
  --line-strong: rgba(12, 20, 36, .13);
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, .09);
  --amber: #8f5100;
  --amber-soft: rgba(217, 119, 6, .11);
  --shadow: 0 1px 2px rgba(12, 20, 36, .04), 0 8px 24px -12px rgba(12, 20, 36, .12);
  --shadow-hover: 0 1px 2px rgba(12, 20, 36, .05), 0 18px 40px -18px rgba(12, 20, 36, .22);
  --top-bg: rgba(245, 246, 248, .82);
  --skeleton: #eef0f4;
  --radius: 16px;
  --side-w: 276px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
}
html[data-mode='dark'] {
  color-scheme: dark;
  --bg: #070b13;
  --side: #090e18;
  --surface: #0e1626;
  --text: #e7ebf2;
  --muted: #98a3b5;
  --faint: #8690a5; /* AA 4.5:1 on the dark --bg, --side, --surface */
  --line: rgba(255, 255, 255, .065);
  --line-strong: rgba(255, 255, 255, .12);
  --accent: #6aa8ff;
  --accent-soft: rgba(106, 168, 255, .12);
  --amber: #f2b45a;
  --amber-soft: rgba(242, 180, 90, .12);
  --shadow: 0 0 0 1px rgba(255, 255, 255, .02);
  --shadow-hover: 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 40px -18px rgba(0, 0, 0, .8);
  --top-bg: rgba(7, 11, 19, .78);
  --skeleton: #121b2c;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01"; font-variant-numeric: tabular-nums;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- sidebar ---- */
.side {
  position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 30;
  background: var(--side); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 22px 14px; color: inherit; text-decoration: none; }
.brand .logo { display: block; width: 196px; height: auto; }
.brand .logo-dark { display: none; }
html[data-mode='dark'] .brand .logo-light { display: none; }
html[data-mode='dark'] .brand .logo-dark { display: block; }
.brand-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding-left: 2px; }
#nav { flex: 1; overflow-y: auto; padding: 4px 12px 24px; scrollbar-width: thin; }
.nav-group { margin-top: 14px; }
.nav-group > button {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; cursor: pointer; padding: 6px 10px;
  font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.nav-group > button svg { width: 12px; height: 12px; transition: transform .2s; }
.nav-group[data-closed] > button svg { transform: rotate(-90deg); }
.nav-group[data-closed] .nav-items { display: none; }
.nav-items a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5.5px 10px; border-radius: 8px; text-decoration: none;
  color: var(--muted); font-size: 13.5px; line-height: 1.35;
}
.nav-items a:hover { background: var(--line); color: var(--text); }
.nav-items a[aria-current='true'] { background: var(--accent-soft); color: var(--accent); font-weight: 560; }
.nav-items a span { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.nav-items a[aria-current='true'] span { color: inherit; opacity: .75; }
.nav-items a[data-hidden] { display: none; }
.side-foot { padding: 12px 22px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--faint); }

/* ---- top bar ---- */
.main-col { margin-left: var(--side-w); min-width: 0; }
.top {
  position: sticky; top: 0; z-index: 20; height: 60px;
  display: flex; align-items: center; gap: 14px; padding: 0 28px;
  background: var(--top-bg); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.crumb { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb b { color: var(--text); font-weight: 600; }
.crumb i { font-style: normal; color: var(--faint); margin: 0 7px; }
.search {
  display: flex; align-items: center; gap: 8px; height: 36px; width: 280px; padding: 0 10px 0 11px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { font: 11px/1 var(--font); color: var(--faint); border: 1px solid var(--line-strong); border-radius: 5px; padding: 3px 6px; }
.seg { display: flex; padding: 3px; gap: 2px; background: var(--line); border-radius: 10px; }
.seg button {
  border: 0; background: none; cursor: pointer; height: 30px; padding: 0 11px; border-radius: 7.5px;
  font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed='true'] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px var(--line-strong); font-weight: 560; }
.seg.mode button { width: 34px; padding: 0; justify-content: center; }
.seg svg, .icon-btn svg { width: 16px; height: 16px; }
.seg i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.icon-btn { border: 0; background: none; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); }
.icon-btn:hover { background: var(--line); color: var(--text); }
.menu { display: none; }

/* ---- content ---- */
main { padding: 0 28px 40px; outline: 0; }
.hero { max-width: 980px; padding: 56px 0 34px; }
.eyebrow { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.hero h1 { margin: 0; font: 700 44px/1.06 var(--font-display); letter-spacing: -.032em; }
.lede { margin: 16px 0 0; max-width: 64ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 30px 0 0; }
.stats div { min-width: 0; }
.stats dt { font-size: 12px; color: var(--faint); order: 2; }
.stats dd { margin: 0; font: 650 26px/1.15 var(--font-display); letter-spacing: -.02em; }
.stats dd small { font-size: 14px; font-weight: 500; color: var(--faint); letter-spacing: 0; }

.group-head { margin: 46px 0 0; padding-top: 30px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; }
.group-head h2 { margin: 0; font: 650 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.group-head span { font-size: 12.5px; color: var(--faint); }
.cat { padding-top: 26px; }
.cat-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.cat-head h3 { margin: 0; font: 650 24px/1.2 var(--font-display); letter-spacing: -.022em; }
.cat-head .n { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cat-blurb { margin: 2px 0 0; max-width: 72ch; color: var(--muted); font-size: 14px; }
.cards {
  display: grid; gap: 18px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.card:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.card[data-wide] { grid-column: 1 / -1; }
.card[data-hidden] { display: none; }
.card-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 0; }
.card-title { flex: 1; min-width: 0; }
.card h4 { margin: 0; font: 600 15px/1.3 var(--font-display); letter-spacing: -.008em; }
.card p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.badge {
  flex: none; margin-top: 1px; font-size: 11px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 99px;
  background: var(--line); color: var(--muted); white-space: nowrap; cursor: default;
}
.badge[data-k='better'] { background: var(--accent-soft); color: var(--accent); }
.badge[data-k='partial'] { background: var(--amber-soft); color: var(--amber); }
/* card actions: always visible (no hover reveal, touch has no hover), icon + word so the two are
   never confused: "Fullscreen" (corner brackets) and "Open page" (external-link square) */
.card-tools { flex: none; display: flex; gap: 6px; margin: -3px -4px 0 0; }
.card-tools .act {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer;
  font-size: 12px; font-weight: 550; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.card-tools .act:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); }
.card-tools .act:focus-visible { outline-offset: 1px; }
.card-tools svg { width: 15px; height: 15px; flex: none; }
.card-note { margin: 6px 12px 0; padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; background: var(--amber-soft); border-left: 3px solid var(--amber); color: var(--text); }
#presets button:disabled { opacity: .45; cursor: not-allowed; }
.frame { position: relative; margin: 8px 8px 8px; border-radius: 10px; overflow: hidden; min-height: 120px; }
.frame iframe { display: block; width: 100%; border: 0; background: transparent; color-scheme: normal; }
.frame::before {
  content: ''; position: absolute; inset: 6px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%) var(--skeleton);
  background-size: 220% 100%; animation: shimmer 1.6s linear infinite; transition: opacity .35s ease;
}
html[data-mode='dark'] .frame::before { background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .035) 50%, transparent 80%); }
.frame[data-state='ready']::before { opacity: 0; animation: none; }
.frame iframe { opacity: 0; transition: opacity .35s ease; }
.frame[data-state='ready'] iframe { opacity: 1; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.card-foot { margin-top: auto; padding: 0 18px 14px; font-size: 12px; color: var(--faint); display: flex; gap: 8px; align-items: center; }
.card-foot:empty { display: none; }
.why { display: none; }
.card[data-open-why] .why { display: block; margin: 8px 18px 0; padding: 8px 10px; border-radius: 8px; background: var(--amber-soft); color: var(--text); font-size: 12.5px; }
.empty { margin: 60px 0; text-align: center; color: var(--muted); }
.foot { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }

/* ---- zoom dialog ---- */
/* fullscreen view: fills the whole window (and the screen when the browser grants fullscreen) */
dialog#zoom {
  position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: none; max-width: none;
  padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--text); overflow: hidden;
}
dialog#zoom:fullscreen { width: 100%; height: 100%; }
dialog#zoom[open] { display: flex; flex-direction: column; }
dialog#zoom::backdrop { background: rgba(7, 11, 19, .42); backdrop-filter: blur(3px); }
.zoom-bar { display: flex; align-items: center; gap: 14px; padding: 14px 14px 12px 22px; border-bottom: 1px solid var(--line); }
.zoom-bar > div { flex: 1; min-width: 0; }
.zoom-bar b { font: 600 16px/1.3 var(--font-display); display: block; }
.zoom-bar > div > span { font-size: 13px; color: var(--muted); }
.zoom-bar a, .zoom-bar #zoom-close { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 550; text-decoration: none; white-space: nowrap; cursor: pointer; }
.zoom-bar a { color: var(--accent); }
.zoom-bar a:hover { background: var(--accent-soft); }
.zoom-bar #zoom-close { width: auto; border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.zoom-bar #zoom-close:hover { background: var(--line); }
.zoom-bar svg { width: 15px; height: 15px; flex: none; }
#zoom-frame { flex: 1; width: 100%; border: 0; background: transparent; }

/* ---- small screens ---- */
@media (max-width: 1100px) { .search { width: 200px; } #presets button span { display: none; } #presets button { padding: 0 9px; } }
@media (max-width: 860px) {
  .side { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 60px rgba(0, 0, 0, .25); }
  body[data-nav-open] .side { transform: none; }
  .main-col { margin-left: 0; }
  .menu { display: grid; }
  .crumb { display: none; }
  /* the search field gives way, not the light/dark switch: min-width 0 on the label and the
     input (whose intrinsic ~200 px width pushed the switch 51 px off a 390 px screen) */
  .search { flex: 1 1 auto; width: auto; min-width: 0; }
  .search input { width: 100%; }
  .search kbd { display: none; }
  .top { gap: 10px; }
  .top > .icon-btn, .top > .seg { flex: none; }
  .top, main { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 34px; }
  #presets { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* Website: a paired utilization row, intentional interaction and fullscreen tools. */
.chart-interaction{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:8px 18px 0;color:var(--muted);font-size:11px}
.chart-interact,.zoom-controls button,.zoom-controls select{font:inherit;color:var(--text);border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;padding:5px 9px;cursor:pointer}
.chart-interact[aria-pressed=true],.zoom-controls button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.chart-interact:disabled{opacity:.55;cursor:wait}
.chart-interact:focus-visible,.zoom-controls :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.utilization-grid{grid-template-columns:minmax(0,1fr) 340px}
.utilization-grid>.utilization-card{grid-column:auto}
.utilization-card .card-head{box-sizing:border-box;display:grid;grid-template-columns:1fr auto;align-content:space-between;align-items:center;gap:8px;padding:16px 14px 0}
.utilization-card .card-title{grid-column:1/-1}
.utilization-card .badge{justify-self:start}
.utilization-card .card-tools{justify-self:end;margin:0;gap:4px}
.utilization-card[data-id='medical/util-calendar'] .frame{width:calc(100% - 16px);max-width:324px;align-self:center}
.utilization-card .chart-interaction{min-height:52px;box-sizing:border-box;align-content:center}
.utilization-grid:has(>.utilization-card[data-hidden])>.utilization-card:not([data-hidden]){grid-column:1/-1}
/* Lock the catalog behind the modal, including browsers without native fullscreen.
   The chart frame keeps its own legitimate scrolling at enlarged drawing sizes. */
html:has(dialog#zoom[open]),body:has(dialog#zoom[open]){overflow:hidden}
.zoom-bar{flex-wrap:wrap;gap:12px;padding:12px 20px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.zoom-bar>.zoom-controls{flex:0 1 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:var(--site-control-font,500 14px/20px var(--font))}
.zoom-controls .zoom-size{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--muted);white-space:nowrap;font:var(--site-control-font,500 14px/20px var(--font))}
.zoom-controls button,.zoom-controls select,.zoom-bar #zoom-open,.zoom-bar #zoom-close{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:var(--site-control-height,44px);min-height:var(--site-control-height,44px);padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--site-control-radius,5px);font:var(--site-control-font,500 14px/20px var(--font))}
.zoom-controls select{appearance:none;-webkit-appearance:none;min-width:96px;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23839196' stroke-width='1.5'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat}
.zoom-bar #zoom-open{border-color:transparent}
.zoom-controls .zoom-status{font:var(--site-control-font,500 14px/20px var(--font));color:var(--muted);max-width:240px}
#zoom-frame{display:block;min-height:0;min-width:0;flex:1 1 0%}
@media(max-width:1199px){.utilization-grid{grid-template-columns:minmax(0,1fr)}.utilization-card .card-head{min-height:0!important}}
@media(max-width:700px){.zoom-bar{gap:8px;padding:12px 16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.zoom-bar>div:first-child{flex-basis:100%}.zoom-bar>.zoom-controls{flex-basis:100%}.chart-interact-hint{font-size:10px}}

/* Website licence navigation: Core first; all paid examples live under Premium. */
.catalog-tier{scroll-margin-top:0}
.tier-head{display:flex;justify-content:space-between;gap:28px;align-items:end;padding:34px 0 26px;border-top:1px solid var(--line-strong);margin-top:22px}
.tier-head h2{font:650 32px/1.15 var(--font-display);letter-spacing:-.025em;margin:8px 0 12px}
.tier-head p{max-width:70ch;margin:0;color:var(--muted);font-size:15px;line-height:1.65}.tier-head .tier-licence{font-size:13px;font-weight:600;color:var(--accent)}
.catalog-tier[data-tier=premium]>.tier-head .tier-licence{color:var(--amber)}
.tier-head>a{flex:none;color:var(--accent);font-size:14px;text-underline-offset:4px}
.catalog-tier>.group-head{margin-top:18px;padding-top:22px}.group-head>p{margin:0;font:650 12px/1.4 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.tier-shortcuts{position:sticky;top:-4px;z-index:2;display:flex;gap:8px;padding:10px 6px;background:var(--side);border-bottom:1px solid var(--line)}
.tier-shortcuts a{flex:1;text-align:center;padding:8px 6px;text-decoration:none;border-radius:6px;font-size:13px;font-weight:600;color:var(--muted)}
.tier-shortcuts a:hover,.tier-shortcuts a[aria-current=true]{background:var(--accent-soft);color:var(--accent)}
.nav-tier{padding:18px 0 12px}.nav-tier+.nav-tier{border-top:1px solid var(--line-strong)}
.nav-tier-title{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;text-decoration:none;font-size:17px;font-weight:650}.nav-tier-title small{font-size:11px;font-weight:600;color:var(--muted)}.nav-tier[data-tier=premium]>.nav-tier-title small{color:var(--amber)}
.nav-tier .nav-group{margin-top:10px}.card-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:8px}.card-kicker .badge{margin:0}
.licence-badge{display:inline-block;font-size:11.5px;font-weight:650;line-height:1.35;color:var(--accent)}.licence-badge[data-tier=premium]{color:var(--amber)}
.scope-intro-links{display:flex;flex-wrap:wrap;gap:16px 26px;margin-top:22px}.scope-intro-links a{font-size:14px;font-weight:600;text-underline-offset:4px;color:var(--accent)}
.catalog-tier[hidden],.nav-tier[hidden]{display:none!important}
@media(max-width:700px){.tier-head{align-items:start;flex-direction:column;gap:16px}.tier-head h2{font-size:28px}.tier-head p{font-size:14px}.tier-head>a{flex:auto}.card-kicker{gap:5px 8px}}