/* The Use Cases pages: an index with a switch between two sets of six
   studies, and one study board per case. Both sets use the same pages.

   Every color and font here is one of the site's own, from the tokens at
   the top of styles.css. Health plans sit on the navy ground and small
   businesses on the cream ground, the site's two section grounds. Each
   ground sets the --g-* values the page uses and points the charts' own
   variables (--paper, --ink, --c1 to --c5 and the rest) at site tokens:

     on navy:  c1 emerald, c2 red, c3 white, c4 amber, c5 muted gray
     on cream: c1 emerald, c2 amber, c3 navy, c4 navy dashed, c5 muted gray

   The brand has no fifth color that reads on cream, so there the fifth
   series is navy with a dashed line. Fonts: Manrope for headings, Public
   Sans for text and IBM Plex Mono for labels and equations. */

.uc-navy{
  --g-bg:var(--navy); --g-card:var(--card-navy); --g-ink:var(--on-navy);
  --g-muted:var(--muted-navy); --g-line:var(--line-navy);
  --g-inset:color-mix(in srgb,var(--navy) 70%,var(--card-navy));
  --g-sim-bg:color-mix(in srgb,var(--red-on-navy) 10%,var(--card-navy)); --g-sim-ink:var(--red-on-navy);
  --g-real-bg:color-mix(in srgb,var(--emerald) 18%,var(--card-navy)); --g-real-ink:var(--on-navy);
  --g-pill-bg:color-mix(in srgb,var(--emerald) 18%,var(--card-navy));
}
.uc-cream{
  --g-bg:var(--cream); --g-card:var(--card-cream); --g-ink:var(--on-cream);
  --g-muted:var(--muted-cream); --g-line:var(--line-cream);
  --g-inset:var(--cream);
  --g-sim-bg:color-mix(in srgb,var(--navy) 8%,var(--card-cream)); --g-sim-ink:var(--navy);
  --g-real-bg:var(--emerald-soft); --g-real-ink:var(--on-cream);
  --g-pill-bg:var(--emerald-soft);
}

/* the charts' variables, per ground */
.uc-navy .uc-chart,.uc-navy.uc-overlay .uc-chart{
  --paper:var(--g-inset); --sheet:var(--card-navy); --ink:var(--on-navy);
  --ink2:var(--muted-navy); --ink3:var(--muted-navy); --rule:var(--line-navy);
  --grid:color-mix(in srgb,var(--line-navy) 60%,var(--card-navy));
  --sting:var(--red-on-navy); --sting-bg:var(--g-sim-bg);
  --measure:var(--emerald); --measure-bg:var(--g-real-bg);
  --c1:var(--emerald); --c2:var(--red-on-navy); --c3:var(--on-navy); --c4:var(--amber-on-navy); --c5:var(--muted-navy);
}
.uc-cream .uc-chart,.uc-cream.uc-overlay .uc-chart{
  --paper:var(--cream); --sheet:var(--card-cream); --ink:var(--on-cream);
  --ink2:var(--muted-cream); --ink3:var(--muted-cream); --rule:var(--line-cream);
  --grid:color-mix(in srgb,var(--line-cream) 60%,var(--card-cream));
  --sting:var(--navy); --sting-bg:var(--g-sim-bg);
  --measure:var(--on-cream); --measure-bg:var(--emerald-soft);
  --c1:var(--emerald); --c2:var(--amber-on-cream); --c3:var(--navy); --c4:var(--navy); --c5:var(--muted-cream);
}
/* the fifth series on cream: navy, dashed */
.uc-cream .uc-chart [stroke="var(--c4)"]{stroke-dasharray:6 4}

.uc-chart{--body:"Public Sans",system-ui,sans-serif}
.uc-chart .t{font-family:var(--body);fill:var(--ink2)}
.uc-chart .tm{font-family:var(--mono);fill:var(--ink3)}
.uc-chart .tb{font-family:var(--body);fill:var(--ink);font-weight:600}
.uc-chart svg{width:100%;height:auto;display:block}

/* ------------------------------------------------------------ the page */

.uc-page{
  min-height:calc(100vh - var(--nav-h));
  background:var(--g-bg);
  color:var(--g-ink);
  padding:calc(var(--nav-h) + 48px) 24px var(--space-footer);
}
.uc-wrap{max-width:1220px;margin:0 auto}
.uc-page h1,.uc-page h2,.uc-page h3{text-wrap:balance}
.uc-page p{margin:0}
.uc-page a{color:inherit}
.uc-page b{font-weight:600;color:var(--g-ink)}

.uc-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g-muted);
}
.uc-pill{
  display:inline-block;font-family:var(--mono);font-size:12px;line-height:1.5;
  padding:3px 10px;border-radius:999px;background:var(--g-pill-bg);color:var(--g-ink);
}
.uc-tag{
  align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:6px;
}
.uc-tag--sim{background:var(--g-sim-bg);color:var(--g-sim-ink)}
.uc-tag--real{background:var(--g-real-bg);color:var(--g-real-ink)}

/* buttons: the back link, the previous and next links, Enlarge */
.uc-btn,.uc-zoom{
  font-family:var(--mono);font-size:13px;line-height:1.4;color:var(--g-ink);
  background:var(--g-card);border:1px solid var(--g-line);border-radius:10px;
  padding:7px 12px;text-decoration:none;white-space:nowrap;cursor:pointer;
}
.uc-btn:hover,.uc-zoom:hover{border-color:var(--emerald)}
.uc-zoom{margin-left:auto}

/* ------------------------------------------------------------ the index */

/* the switch: the site's pill of tabs, in the colors of the ground */
.uc-switch{margin:0 0 36px;max-width:100%;flex-wrap:wrap}
.uc-cream .uc-switch{
  --pill-line:var(--line-cream); --pill-bg:transparent; --pill-ink:var(--muted-cream);
  --pill-ink-hover:var(--on-cream); --pill-fill:var(--navy); --pill-ink-selected:var(--cream);
}

.uc-intro{display:grid;gap:16px;max-width:800px;margin:0 0 36px}
.uc-intro h1{font-size:clamp(32px,4.2vw,52px);line-height:1.08;font-weight:300}
.uc-intro p:not(.uc-eyebrow){font-size:17px;line-height:1.65;color:var(--g-muted);max-width:68ch}

.uc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:18px}
.uc-card{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  background:var(--g-card);border:1px solid var(--g-line);border-radius:var(--r-card);
  padding:20px 22px;text-decoration:none;color:var(--g-ink);
  transition:border-color .15s ease,transform .15s ease;
}
.uc-card:hover{border-color:var(--emerald);transform:translateY(-2px)}
.uc-card:focus-visible{outline:3px solid var(--emerald);outline-offset:3px}
.uc-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.uc-num{font-family:var(--mono);font-size:12.5px;font-weight:500;white-space:nowrap}
.uc-kind{font-family:var(--mono);font-size:12px;color:var(--g-muted);text-align:right}
.uc-card h2{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.uc-mini{display:block;background:var(--g-inset);border-radius:10px;padding:8px 8px 4px}
.uc-find{display:block;font-size:14px;line-height:1.55;color:var(--g-muted)}
.uc-card-foot{margin-top:auto}

.uc-notice{margin-top:32px;padding-top:16px;border-top:1px solid var(--g-line);font-size:13.5px;line-height:1.6;color:var(--g-muted);max-width:90ch}

/* -------------------------------------------------------- a study board */

.uc-case{padding-top:var(--nav-h)}
.uc-head{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--g-line);background:var(--g-bg)}
.uc-title{flex:1 1 320px;min-width:0;display:grid;gap:3px}
.uc-title h1{font-size:clamp(20px,2.4vw,28px);line-height:1.2;font-weight:600;letter-spacing:-.01em}
.uc-pager{display:flex;gap:6px;margin-left:auto}

.uc-quads{display:grid;gap:14px;padding:14px 0}
.uc-quad{
  background:var(--g-card);border:1px solid var(--g-line);border-radius:var(--r-card);
  padding:20px 22px;min-width:0;display:flex;flex-direction:column;gap:12px;
}
.uc-quad-label{display:flex;align-items:center;gap:10px}
.uc-n{
  font-family:var(--mono);font-size:12px;width:24px;height:24px;border-radius:50%;flex:none;
  display:grid;place-items:center;border:1px solid var(--g-line);color:var(--g-muted);
}
.uc-quad h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.uc-quad p{font-size:15.5px;line-height:1.6;max-width:70ch}
.uc-sub{font-size:16px;font-weight:600;margin-top:4px}

.uc-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14.5px}
.uc-kv dt{font-family:var(--mono);font-size:11.5px;color:var(--g-muted);padding-top:3px;text-transform:uppercase;letter-spacing:.05em}
.uc-kv dd{margin:0;min-width:0}
.uc-does{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px;line-height:1.55}
.uc-does li::marker{color:var(--emerald)}
.uc-eq{
  font-family:var(--mono);font-size:13.5px;line-height:1.7;
  background:var(--g-inset);border:1px solid var(--g-line);border-radius:10px;padding:10px 12px;
  white-space:pre-wrap;overflow-wrap:anywhere;
}

.uc-viz{cursor:zoom-in;border-radius:12px}
.uc-cap{font-size:14px !important;line-height:1.55;color:var(--g-muted)}

.uc-foot{padding:12px 0 0;display:grid;gap:10px;max-width:100ch}
.uc-foot h2{font-size:18px;font-weight:600;margin-top:6px}
.uc-foot p,.uc-foot ol{font-size:14.5px;line-height:1.6}
.uc-foot ol{margin:0;padding-left:22px;display:grid;gap:6px}
.uc-foot li{overflow-wrap:anywhere}
.uc-foot a{text-decoration:underline;text-underline-offset:3px}
.uc-foot a:hover{color:var(--emerald)}
.uc-byline{font-family:var(--mono);font-size:12.5px !important;color:var(--g-muted)}
.uc-foot .uc-notice{margin-top:4px}

/* 920px and wider: the four quadrants fill the screen in a 2 by 2 grid
   and each scrolls on its own; the header bar stays in view */
@media (min-width:920px){
  .uc-case .uc-board{display:flex;flex-direction:column;height:calc(100dvh - var(--nav-h));min-height:720px}
  .uc-head{position:sticky;top:var(--nav-h);z-index:5}
  .uc-quads{flex:1;min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .uc-quad{overflow:auto}
}
@media (max-width:767px){
  .uc-page{padding:calc(var(--nav-h) + 28px) 16px var(--space-footer)}
  .uc-case{padding-top:var(--nav-h)}
  .uc-quad{padding:18px}
}

/* --------------------------------------------------- the enlarged figure */

.uc-overlay{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);
  background:color-mix(in srgb,var(--g-bg) 94%,transparent);
  cursor:zoom-out;
}
.uc-overlay[hidden]{display:none}
.uc-overlay-inner{
  background:var(--g-card);border:1px solid var(--g-line);border-radius:var(--r-card);
  width:min(1100px,100%);max-height:100%;overflow:auto;padding:24px;display:grid;gap:12px;
  color:var(--g-ink);
}
.uc-overlay-inner:focus{outline:none}
.uc-overlay-inner:focus-visible{outline:3px solid var(--emerald);outline-offset:3px}
html.uc-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .uc-card{transition:none}
  .uc-card:hover{transform:none}
}

/* --------------------------------------------------- figure readouts */

.uc-readable{position:relative}
.uc-hover .uc-cross{stroke:var(--ink2);stroke-width:1;stroke-dasharray:3 3}
.uc-hover .uc-dot{stroke:var(--sheet);stroke-width:2}
.uc-hover .uc-box{fill:none;stroke:var(--ink);stroke-width:1.5}
.uc-tip{
  position:absolute;z-index:6;pointer-events:none;
  min-width:120px;max-width:min(300px,calc(100% - 8px));
  display:grid;gap:4px;padding:9px 11px;border-radius:10px;
  background:var(--sheet);color:var(--ink);border:1px solid var(--rule);
  box-shadow:0 10px 26px rgba(14,31,59,.22);
  font-family:"Public Sans",system-ui,sans-serif;font-size:13px;line-height:1.4;text-align:left;
}
.uc-tip[hidden]{display:none}
.uc-tip-head{font-family:var(--mono);font-size:11.5px;color:var(--ink2)}
.uc-tip-row{display:flex;align-items:center;gap:7px}
.uc-tip-row b{font-weight:600;color:var(--ink)}
.uc-tip-name{color:var(--ink2)}
.uc-tip-swatch{flex:none;width:12px;height:0;border-top:3px solid var(--sw)}
.uc-tip-swatch.is-dashed{border-top-style:dashed}
.uc-viz{touch-action:manipulation}