/* ===================================================================
   FONTS — self-hosted (no request to Google on any page load)
   Latin subset only, woff2 only; ~91KB for all five weights.
   Files from the @fontsource packages; licences alongside them in
   static/fonts/ (Oswald: OFL, Roboto: Apache 2.0).
   font-display: swap so text paints immediately in a fallback and
   reflows once the webfont lands.
   =================================================================== */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/oswald-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2");
}

:root {
  --jk-accent: #2a6ebb;
  --jk-ink: #1f2937;
  --jk-muted: #5b6573;
  --jk-line: #d9dee5;
  --jk-soft: #eef1f5;
  --jk-bg: #f4f6f8;
  --jk-head-a: #f2f4f7;   /* header gradient, left  */
  --jk-head-b: #7d8da6;   /* header gradient, right */
  --jk-display: "Oswald", "Arial Narrow", sans-serif;
  --jk-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { background: var(--jk-bg); }
body { color: var(--jk-ink); font-family: var(--jk-body); }

/* ===================================================================
   HEADER — full-bleed gradient
   The theme insets .navbar as a white rounded card below 992px and
   gives it a white background; both are overridden so the gradient
   spans the full viewport at every width.
   =================================================================== */
.jk-header {
  background: linear-gradient(100deg, var(--jk-head-a) 0%, var(--jk-head-b) 100%);
  width: 100%;
}
.navbar.jk-navbar {
  background: transparent !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 1.1rem 0 !important;
  box-shadow: none;
}
.jk-navwrap {
  width: 100%;
  max-width: none;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.jk-brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; margin-right: auto; }
.jk-brand__title {
  font-family: var(--jk-display);
  font-weight: 300;
  font-size: 3.4rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--jk-ink);
}
.jk-brand__page {
  font-family: var(--jk-display);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(31,41,55,.65);
  margin-top: .4rem;
}

.jk-navbar .nav-link {
  color: var(--jk-ink) !important;
  font-family: var(--jk-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .4rem 1rem !important;
  display: inline-flex;
  align-items: center;
}
.jk-navbar .nav-link:hover,
.jk-navbar .dropdown-item:hover { color: var(--jk-accent) !important; }
.jk-navbar .dropdown-menu { border: 1px solid var(--jk-line); border-radius: 6px; }
.jk-navbar .dropdown-item {
  font-family: var(--jk-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1rem;
}
.jk-navicon { width: 26px; height: 26px; margin-right: .55rem; }
.jk-navdot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;
  margin-right: .6rem; vertical-align: 2px; opacity: .6;
}

/* hamburger — three bars; the theme animates them into an X when open */
.jk-toggler { border: 0; background: transparent; padding: .4rem .1rem !important; }
.jk-toggler:focus { box-shadow: none; outline: 0; }
.jk-toggler .navbar-toggler-icon {
  display: block;
  width: 30px; height: 3px;
  background-color: var(--jk-ink);
  background-image: none;
  border-radius: 2px;
  transition: all .2s ease;
}
.jk-toggler .navbar-toggler-icon:not(:last-child) { margin-bottom: 6px; }
/* the three bars fold into an X while the menu is open (Bootstrap toggles
   .collapsed on the button) */
.jk-toggler .navbar-toggler-icon:nth-child(1) { transform: rotate(45deg); transform-origin: 10% 10%; }
.jk-toggler .navbar-toggler-icon:nth-child(2) { opacity: 0; }
.jk-toggler .navbar-toggler-icon:nth-child(3) { transform: rotate(-45deg); transform-origin: 10% 90%; }
.jk-toggler.collapsed .navbar-toggler-icon:nth-child(1),
.jk-toggler.collapsed .navbar-toggler-icon:nth-child(3) { transform: rotate(0); }
.jk-toggler.collapsed .navbar-toggler-icon:nth-child(2) { opacity: 1; }

/* shown only on preview builds (JK_PREVIEW set at build time) */
.jk-preview-banner {
  background: #fff4ce; color: #5c4400; border-bottom: 1px solid #e8d48a;
  text-align: center; font-size: .9rem; padding: .45rem 1rem;
}
@media print { .jk-preview-banner { display: none; } }

/* keyboard users can jump past the header */
.jk-skip {
  position: absolute; left: -10000px; top: .5rem;
  background: #fff; color: var(--jk-accent); padding: .5rem .9rem;
  border-radius: 4px; z-index: 2000; text-decoration: none; font-weight: 500;
}
.jk-skip:focus { left: .5rem; }

@media (max-width: 991px) {
  .jk-brand__title { font-size: 2.3rem; }
  .jk-navwrap { padding: 0 1.25rem; }
  .jk-navbar .navbar-collapse { margin-top: .75rem; flex-basis: 100%; }
  .jk-navbar .nav-link { padding: .75rem 0 !important; }
  .jk-navbar .dropdown-menu { border: 0; background: transparent; padding: 0 0 .5rem 2.1rem; }
  .jk-navbar .dropdown-item { padding: .55rem 0; color: var(--jk-ink); }
  .jk-navbar .dropdown-item:hover, .jk-navbar .dropdown-item:focus { background: transparent; }
}

/* ===================================================================
   PAGE SHELL
   =================================================================== */
#content { padding-top: 0; }
.jk-page { padding: 2.5rem 0 4rem; }

/* a max-width needs auto side margins, or the block hugs the left edge */
.jk-page__body { max-width: 900px; margin: 0 auto; }
.jk-page__body--wide { max-width: none; }
.jk-page--centered .jk-page__body { text-align: center; }
.jk-page--centered .jk-page__body > * { margin-left: auto; margin-right: auto; }
.jk-page--centered .jk-postop,
.jk-page--centered .jk-dropform { text-align: left; margin-left: auto; margin-right: auto; }

/* full-width page area, used by the reference table */
.jk-page--fluid { padding-top: 1.5rem; }
.jk-fluidwrap { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .jk-fluidwrap { padding: 0 2rem; } }
.jk-page__intro { max-width: 760px; margin: 0 auto 2rem; text-align: center; }

.jk-page__body h2 { font-size: 1.55rem; margin-top: 1.5rem; }
.jk-title { text-align: center; font-weight: 700; font-size: 1.9rem; margin: 1.5rem 0 2rem; }
.jk-rule { border: 0; border-top: 1px solid var(--jk-line); margin: 1.5rem auto; max-width: 320px; }

.jk-page__body blockquote {
  border-left: 3px solid var(--jk-accent);
  padding-left: 1rem;
  color: var(--jk-muted);
  font-style: italic;
  margin: 1.5rem 0;
}

.jk-sectionhead {
  font-family: var(--jk-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.55rem;
  margin: 2.75rem 0 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--jk-line);
}
.jk-sectionhead:first-child { margin-top: 0; }

.jk-note, .jk-disclaimer { color: var(--jk-muted); font-size: .95rem; }
.jk-disclaimer { margin: 0; line-height: 1.9; }
.jk-morelink { margin: 0; }
.jk-morelink a { color: var(--jk-accent); font-weight: 500; font-size: 1.05rem; }
.jk-status--error { color: #b42318; }

/* ===================================================================
   HOME HERO
   Square-cropped headshot, matching the WordPress treatment
   (aspect-ratio 1 + object-fit cover on a wide source image).
   Sized per breakpoint because the layout changes: above 768px the
   photo sits beside the text, below that it stacks above it and can
   claim most of the screen width.
   `width` is the only size dial here — aspect-ratio derives the
   height, so no max-width/max-height caps are needed (and any left
   in place would silently shrink it again).
   =================================================================== */
.jk-hero { padding: 5rem 0 6rem; }
.jk-hero__inner { display: flex; align-items: center; justify-content: center; gap: 4.5rem; }
.jk-hero__text { text-align: left; }

.jk-hero__figure img {
  width: min(40vw, 471px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.jk-hero__name {
  font-family: var(--jk-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 4rem;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.jk-hero__tagline { font-size: 1.7rem; color: var(--jk-muted); margin: .4rem 0; }

@media (max-width: 991px) {
  .jk-hero__figure img { width: min(44vw, 400px); }
  .jk-hero__name { font-size: 3rem; }
  .jk-hero__tagline { font-size: 1.4rem; }
}
@media (max-width: 767px) {
  .jk-hero { padding: 2.5rem 0 3.5rem; }
  .jk-hero__inner { flex-direction: column; gap: 1.75rem; }
  .jk-hero__figure img { width: min(82vw, 440px); }
  .jk-hero__text { text-align: center; }
  .jk-hero__name { font-size: 2.5rem; }
}

/* ===================================================================
   ABOUT
   =================================================================== */
.jk-biolink { text-align: center; margin: 0; }
.jk-biolink a {
  font-family: var(--jk-body);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--jk-ink);
  text-decoration: none;
}
.jk-biolink a:hover { color: var(--jk-accent); }
.jk-about-photo {
  max-width: 290px; height: auto; border-radius: 6px;
  float: right; margin: .25rem 0 1rem 1.75rem;
}
@media (max-width: 640px) {
  .jk-about-photo { float: none; display: block; margin: 0 0 1.25rem; }
}

/* ===================================================================
   PATIENTS CARDS
   =================================================================== */
.jk-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.jk-card {
  display: block; background: #fff;
  border: 1px solid var(--jk-line); border-radius: 8px;
  padding: 1.5rem; text-decoration: none; color: inherit;
  transition: box-shadow .15s, border-color .15s;
}
.jk-card:hover {
  border-color: var(--jk-accent);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  color: inherit;
}
.jk-card h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.jk-card p { margin: 0; font-size: .9rem; color: var(--jk-muted); }

/* ===================================================================
   CONTACT — offices
   =================================================================== */
.jk-office { padding: 1.75rem 0; border-bottom: 1px solid var(--jk-line); }
.jk-office:last-of-type { border-bottom: 0; }
.jk-office__name { font-size: 1.3rem; font-weight: 600; margin: 0 0 1rem; }
.jk-office__grid {
  display: grid;
  grid-template-columns: minmax(260px,1fr) minmax(320px,1.4fr);
  gap: 2rem;
  align-items: start;
}
.jk-office__details a { color: var(--jk-accent); text-decoration: none; }
.jk-office__details a:hover { text-decoration: underline; }
.jk-office__address, .jk-office__phone { margin-bottom: .5rem; }
.jk-office__hours {
  list-style: none; padding: 0; margin: .75rem 0 0;
  color: var(--jk-muted); font-size: .95rem;
}
.jk-office__map { aspect-ratio: 16/9; }
.jk-office__map iframe {
  width: 100%; height: 100%;
  border: 1px solid var(--jk-line); border-radius: 6px; background: #fff;
}
@media (max-width: 767px) { .jk-office__grid { grid-template-columns: 1fr; } }

/* ===================================================================
   EYE DROP REFERENCE
   Mobile-first: the card list is the default rendering; the table takes
   over from 768px up. Both are in the DOM, CSS picks one, and
   droptable.js filters both together.
   =================================================================== */
.jk-dropfilters { max-width: 1100px; margin: 0 auto 1.25rem; }
.jk-search { display: block; margin: 0 0 .85rem; }
.jk-search input {
  width: 100%; padding: .7rem .9rem; font-size: 1rem;
  border: 1px solid var(--jk-line); border-radius: 8px; background: #fff;
}
.jk-search input:focus { outline: 2px solid var(--jk-accent); outline-offset: 1px; border-color: var(--jk-accent); }
.jk-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.jk-chip {
  border: 1px solid var(--jk-line); background: #fff; color: var(--jk-ink);
  border-radius: 999px; padding: .4rem .85rem; font-size: .9rem; line-height: 1.1;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.jk-chip:hover { border-color: var(--jk-accent); color: var(--jk-accent); }
.jk-chip.is-active { background: var(--jk-accent); border-color: var(--jk-accent); color: #fff; }
.jk-chip--pf.is-active { background: #1f8a3b; border-color: #1f8a3b; }
.jk-dropcount { margin: .75rem 0 0; color: var(--jk-muted); font-size: .9rem; }
.jk-dropempty { text-align: center; color: var(--jk-muted); padding: 2rem 0; }

/* cap-colour swatch, shown beside the colour word in both renderings */
.jk-swatch {
  display: inline-block; width: 1em; height: 1em; border-radius: 50%;
  vertical-align: -0.12em; margin-right: .4em;
  border: 1px solid rgba(0,0,0,.18); background: #9ca3af;
}
.jk-swatch[data-color="Purple"]       { background: #7b3fb5; }
.jk-swatch[data-color="Red"]          { background: #cc2b2b; }
.jk-swatch[data-color="Blue"]         { background: #1f5fd0; }
.jk-swatch[data-color="Green"]        { background: #1f8a3b; }
.jk-swatch[data-color="Lime Green"]   { background: #6fbe1f; }
.jk-swatch[data-color="Teal/Green"]   { background: #0f9b8e; }
.jk-swatch[data-color="Orange"]       { background: #e07b18; }
.jk-swatch[data-color="Yellow"]       { background: #e8c21a; }
.jk-swatch[data-color="Pink"]         { background: #e0568f; }
.jk-swatch[data-color="Tan"]          { background: #c9a06b; }
.jk-swatch[data-color="Gray"]         { background: #8b929c; }
.jk-swatch[data-color="White"]        { background: #fff; }
.jk-swatch[data-color="Gray / White"] { background: linear-gradient(90deg, #8b929c 50%, #fff 50%); }
.jk-swatch[data-color="Pink / White"] { background: linear-gradient(90deg, #e0568f 50%, #fff 50%); }
/* Vial and Tube are container types, not cap colours */
.jk-swatch--container { border-radius: 3px; background: #fff; border-style: dashed; }
.jk-td-color { font-weight: 600; }
.jk-td-color[data-color="Vial"],
.jk-td-color[data-color="Tube"],
.jk-td-color[data-color="Tablet"],
.jk-td-color[data-color="Capsule"],
.jk-td-color[data-color="Varies"] { color: var(--jk-muted); font-weight: 500; font-style: italic; }
/* pills: a round tablet and a two-tone capsule instead of a cap colour */
.jk-swatch--container[data-color="Tablet"] { border-radius: 50%; border-style: solid; background: #f3f4f6; }
.jk-swatch--container[data-color="Capsule"] { width: 1.5em; border-radius: .5em; border-style: solid; background: linear-gradient(90deg, #f3f4f6 50%, #9ca3af 50%); }
/* artificial tears come in many bottles */
.jk-swatch--container[data-color="Varies"] { border-radius: 50%; border-style: solid; background: conic-gradient(#0f9b8e 0 25%, #1f5fd0 0 50%, #e0568f 0 75%, #e8c21a 0); }
.jk-chip--oral.is-active { background: #5b6573; border-color: #5b6573; }

/* --- cards (phones) --- */
.jk-dropcards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.jk-dropcard {
  display: flex; gap: .9rem; align-items: flex-start; min-width: 0;
  background: #fff; border: 1px solid var(--jk-line); border-radius: 10px; padding: .95rem 1rem;
}
.jk-dropcard[hidden] { display: none; }
.jk-dropcard__main { flex: 1 1 auto; min-width: 0; }
.jk-dropcard__name { font-size: 1.08rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.jk-dropcard__brand { margin: .1rem 0 0; color: var(--jk-muted); }
.jk-dropcard__color { margin: .45rem 0 .5rem; font-size: .95rem; }
.jk-dropcard__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .7rem; margin: 0; font-size: .92rem; }
.jk-dropcard__facts dt { color: var(--jk-muted); font-weight: 500; }
.jk-dropcard__facts dd { margin: 0; overflow-wrap: anywhere; }
.jk-dropcard__photos { flex: 0 0 auto; display: flex; flex-direction: column; gap: .35rem; align-items: center; }
.jk-dropcard__photos img.jk-drop { height: 72px; }

/* --- table (768px and up) --- */
.jk-tablescroll { display: none; }
.jk-datatable { width: auto; max-width: 100%; margin: 0 auto; background: #fff; font-size: 1rem; border-collapse: collapse; }
.jk-datatable th, .jk-datatable td { border: 1px solid var(--jk-line); vertical-align: middle; text-align: center; padding: .7rem .85rem; }
.jk-datatable thead th { background: var(--jk-soft); font-weight: 600; position: sticky; top: 0; z-index: 1; }
.jk-datatable tr[hidden] { display: none; }
.jk-sort {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer;
  white-space: nowrap;
}
.jk-sort::after { content: "\2195"; opacity: .35; margin-left: .3em; font-size: .85em; }
.jk-sort[aria-sort="ascending"]::after { content: "\2191"; opacity: .9; }
.jk-sort[aria-sort="descending"]::after { content: "\2193"; opacity: .9; }
.jk-td-generic { font-weight: 600; }
.jk-datatable .jk-td-generic, .jk-datatable .jk-td-color { font-size: 1.02rem; }
.jk-datatable .jk-td-color { white-space: nowrap; }
.jk-td-photo { white-space: nowrap; }

img.jk-drop {
  height: 58px; width: auto; margin: 2px;
  cursor: zoom-in; vertical-align: middle; border-radius: 3px;
  transition: transform .12s ease;
}
img.jk-drop:hover, img.jk-drop:focus { transform: scale(1.08); outline: none; }
img.jk-drop:focus-visible { outline: 2px solid var(--jk-accent); }

@media (min-width: 768px) {
  .jk-dropcards { display: none; }
  .jk-tablescroll { display: flex; justify-content: center; overflow-x: auto; }
}

/* ===================================================================
   IMAGE LIGHTBOX
   =================================================================== */
.jk-lightbox {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(17,24,39,.82);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.jk-lightbox[hidden] { display: none; }
.jk-lightbox__figure { margin: 0; text-align: center; max-width: 92vw; max-height: 88vh; }
.jk-lightbox__figure img {
  max-width: 92vw; max-height: 78vh; width: auto; height: auto;
  background: #fff; border-radius: 6px; padding: .5rem;
}
.jk-lightbox__figure figcaption { color: #fff; margin-top: .9rem; font-size: 1rem; }
.jk-lightbox__close {
  position: absolute; top: 1rem; right: 1.5rem;
  background: transparent; border: 0; color: #fff;
  font-size: 2.6rem; line-height: 1; cursor: pointer;
}
.jk-lightbox__close:hover { opacity: .75; }

/* ===================================================================
   FORMS
   =================================================================== */
/* eye drop schedule builder: one fieldset per drop; fields stack on
   phones and flow into a row from 768px up */
.jk-dropform { max-width: 1100px; }
.jk-droprow {
  display: grid; grid-template-columns: 1fr; gap: .7rem .8rem;
  border: 1px solid var(--jk-line); border-radius: 10px; background: #fff;
  padding: .9rem 1rem 1rem; margin: 0 0 .9rem; min-width: 0;
}
.jk-droprow__legend { float: left; width: 100%; font-weight: 600; font-size: .95rem; margin: 0 0 .25rem; padding: 0; }
.jk-droprow__f { display: flex; flex-direction: column; gap: .3rem; margin: 0; min-width: 0; font-size: .9rem; }
.jk-droprow__f > span { color: var(--jk-muted); font-weight: 500; }
.jk-droprow__f small { font-weight: 400; }
.jk-in {
  width: 100%; min-height: 44px; padding: .55rem .65rem; border: 1px solid var(--jk-line);
  border-radius: 6px; background: #fff; font-size: 1rem;
}
.jk-colorchip {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .65rem;
  border: 1px dashed var(--jk-line); border-radius: 6px; background: var(--jk-soft); font-size: 1rem; font-weight: 600;
}
.jk-colorchip__text { color: var(--jk-ink); }
.jk-colorchip[data-color=""] .jk-colorchip__text { color: var(--jk-muted); font-weight: 400; }
.jk-rowbtn {
  justify-self: start; border: 1px solid var(--jk-line); border-radius: 6px; background: #fff;
  color: #b42318; padding: .45rem .8rem; font-size: .9rem;
}
.jk-rowbtn:hover { border-color: #b42318; }
@media (min-width: 768px) {
  .jk-droprow { grid-template-columns: 2fr 1.4fr 1fr .95fr 1fr 1.1fr auto; align-items: end; }
  .jk-droprow__legend { grid-column: 1 / -1; }
  .jk-rowbtn { align-self: end; min-height: 44px; }
}

.jk-dropform__actions, .jk-postop__actions, .jk-form__actions {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem;
}

/* post-op form */
.jk-page__lede { max-width: 640px; margin: 0 auto 1.75rem; color: var(--jk-muted); font-size: 1.02rem; }
.jk-postop { max-width: 520px; }
.jk-field { margin: 0 0 1rem; transition: opacity .15s; }
.jk-field label { display: block; font-weight: 500; font-size: .95rem; margin: 0 0 .35rem; }
.jk-postop input, .jk-postop select {
  width: 100%; padding: .65rem .75rem; min-height: 44px;
  border: 1px solid var(--jk-line); border-radius: 6px;
  background: #fff; font-size: 1rem;
}
.jk-postop select:disabled, .jk-postop input:disabled { background: var(--jk-soft); color: var(--jk-muted); cursor: not-allowed; }
.jk-postop option:disabled { color: #a3aab5; }
.jk-field__hint { margin: .3rem 0 0; font-size: .85rem; color: var(--jk-muted); min-height: 1.1em; }
.jk-field.is-off { opacity: .55; }
.jk-field.is-off label { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
.jk-form__error { color: #b42318; font-weight: 500; margin: .5rem 0 0; }
/* eye drop builder: "was this supposed to be a taper?" */
.jk-form__question {
  margin: .75rem 0 0; padding: .85rem 1rem; max-width: 760px;
  border: 1px solid #e0b252; border-left-width: 4px; border-radius: 6px; background: #fff8e6;
}
.jk-form__question-text { margin: 0 0 .65rem; }
.jk-form__question-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* contact form */
.jk-form { max-width: 680px; margin: 1.25rem auto 0; }
.jk-form .form-control { background: #fff; }

/* ===================================================================
   GENERATED SCHEDULES (post-op + custom drop schedule)
   Mobile-first: below 640px each day is a stacked card with the drug
   name printed above its boxes; from 640px up it is a table. Print
   always uses the table (see @media print).
   =================================================================== */
.jk-schedule { text-align: left; color: var(--jk-ink); }
.jk-schedule .schedule-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.jk-schedule .schedule-head h1, .jk-schedule .surgery-name { margin: 0 0 .35rem; font-size: 1.7rem; font-weight: 700; }
.jk-schedule .schedule-head > span, .jk-schedule .schedule-meta { font-size: 1.05rem; color: var(--jk-ink); margin: 0; }
.jk-qrbox { text-align: center; flex: 0 0 auto; }
.jk-qr svg { display: block; margin: 0 auto; background: #fff; border: 1px solid var(--jk-line); border-radius: 6px; padding: 4px; }
.jk-qrbox__cap { font-size: .8rem; color: var(--jk-ink); margin: .35rem auto 0; max-width: 140px; }
.schedule-legend { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 1.05rem; }
.schedule-legend li { margin: 0 0 .25rem; }
.jk-schedule .table-wrapper { overflow-x: auto; }
.jk-schedule .schedule-table {
  width: 100%; border-collapse: collapse; text-align: center; background: #fff; font-size: 1.05rem;
}
.jk-schedule .schedule-table th,
.jk-schedule .schedule-table td { border: 1px solid #000; padding: 8px 10px; }
.jk-schedule .schedule-table th { background: #f2f2f2; font-weight: bold; }
.jk-schedule .schedule-drug { font-weight: 400; font-size: .95em; }
.jk-schedule .week-row td { background: var(--jk-head-b); color: #fff; font-weight: 700; text-align: left; padding: 6px 10px; font-size: 1rem; }
.jk-schedule .week-range { font-weight: 400; opacity: .9; margin-left: .5rem; }
.jk-schedule tr.week-odd td, .jk-schedule tr.week-odd th.day-cell { background: #fafbfc; }
.jk-schedule .day-cell { white-space: nowrap; font-weight: 600; text-align: left; }
.jk-schedule .day-wd { color: var(--jk-ink); font-weight: 500; margin-right: .3em; }
.jk-boxes { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.jk-boxes input[type=checkbox] { width: 20px; height: 20px; margin: 0; }
.jk-schedule .dose-none { color: #6b7280; }
.jk-schedule .button-container { margin: 1.25rem 0 .5rem; text-align: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; }
.jk-ics-note { text-align: center; max-width: 560px; margin: 0 auto; font-size: .85rem; }
.jk-safari-note { text-align: center; max-width: 560px; margin: .75rem auto 0; padding: .6rem .8rem; font-size: .85rem; color: var(--jk-muted); border-radius: 6px; background: var(--jk-soft); }
.jk-safari-note strong { color: var(--jk-ink); font-weight: 600; }
.jk-safari-note p { margin: 0 0 .5rem; }
.jk-safari-note__url { display: block; width: 100%; margin-top: .5rem; padding: .4rem .5rem; font-size: .85rem; border: 1px solid var(--jk-line); border-radius: 6px; background: #fff; }
.jk-safari-note__url[hidden] { display: none; }

/* custom drop schedule: daily routine (when to use each drop, every day) */
.jk-schedule .routine { margin: 1.75rem 0 0; }
.jk-schedule .routine h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .3rem; }
.jk-schedule .routine-note { font-size: 1.05rem; margin: 0 0 .75rem; }
.jk-schedule .routine-drop { text-align: left; }
.jk-schedule .routine-brand { font-weight: 400; }
.jk-schedule .routine-freq { display: block; font-size: .9em; font-weight: 600; font-style: italic; }
.jk-schedule td.routine-eye { font-weight: 600; white-space: nowrap; }
.jk-schedule .routine-table .day-cell { width: 1%; }
.jk-schedule .routine-table tr.slot-start th, .jk-schedule .routine-table tr.slot-start td { border-top: 2px solid #000; }
.jk-schedule .routine-titlerow { display: none; }  /* print-only copy of the heading, see dropform.js */

/* custom drop schedule: wake-up / bedtime (screen only) */
.jk-daytimes { margin: 1.5rem 0 0; padding: .85rem 1rem; border-radius: 8px; background: var(--jk-soft); }
.jk-daytimes__text { margin: 0 0 .6rem; font-size: .95rem; }
.jk-daytimes__fields { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.jk-daytimes__f { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.jk-daytimes__f .jk-in { width: auto; min-width: 10.5rem; }

/* phones: each day becomes a card */
@media (max-width: 639px) {
  .jk-schedule .schedule-table--stack, .jk-schedule .schedule-table--stack tbody,
  .jk-schedule .schedule-table--stack tr, .jk-schedule .schedule-table--stack th,
  .jk-schedule .schedule-table--stack td { display: block; }
  .jk-schedule .schedule-table--stack thead { display: none; }
  .jk-schedule .schedule-table--stack tr { border: 1px solid var(--jk-line); border-radius: 8px; margin: 0 0 .6rem; background: #fff; overflow: hidden; }
  .jk-schedule .schedule-table--stack tr.week-row { border: 0; border-radius: 6px; margin: 1rem 0 .5rem; }
  .jk-schedule .schedule-table--stack th, .jk-schedule .schedule-table--stack td { border: 0; text-align: left; }
  .jk-schedule .schedule-table--stack .day-cell { background: var(--jk-soft); padding: .5rem .8rem; }
  .jk-schedule .schedule-table--stack .dose-cell { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem .8rem; border-top: 1px solid var(--jk-line); }
  .jk-schedule .schedule-table--stack .dose-cell::before { content: attr(data-label); font-size: .9rem; color: var(--jk-ink); }
  .jk-schedule .schedule-table--stack .dose-cell--none { display: none; }
  .jk-schedule .schedule-table--stack td:not(.dose-cell) { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem .8rem; border-top: 1px solid var(--jk-line); }
  .jk-schedule .schedule-table--stack td:not(.dose-cell)::before { content: attr(data-label); color: var(--jk-ink); font-weight: 400; font-size: .95rem; flex: 0 0 auto; }
  .jk-schedule .routine-table .day-cell { width: auto; }
  .jk-schedule .routine-table td.routine-drop { display: block; font-size: 1.1rem; }
  .jk-schedule .routine-table td.routine-drop::before { content: none; }
  .jk-boxes { justify-content: flex-end; }
  .jk-boxes input[type=checkbox] { width: 22px; height: 22px; }
}

/* ===================================================================
   ARTICLES (Learn pages, Privacy)
   =================================================================== */
.jk-page--article .jk-page__body { max-width: 720px; font-size: 1.05rem; line-height: 1.65; }
.jk-page--article .jk-page__body h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; font-weight: 700; }
.jk-page--article .jk-page__body p, .jk-page--article .jk-page__body li { margin-bottom: .9rem; }
.jk-page--article .jk-page__body li { margin-bottom: .45rem; }
.jk-page--article .jk-page__body a { color: var(--jk-accent); }
.jk-figure { margin: 1.75rem 0 2rem; }
.jk-figure__link { display: block; background: #fff; border: 1px solid var(--jk-line); border-radius: 10px; padding: .75rem; cursor: zoom-in; }
.jk-figure img { display: block; width: 100%; height: auto; }
.jk-figure figcaption { margin-top: .6rem; font-size: .92rem; line-height: 1.45; color: var(--jk-muted); text-align: center; }
.jk-page--article .jk-page__body .jk-figure figcaption { margin-bottom: 0; }
.jk-article-nav { border-top: 1px solid var(--jk-line); margin-top: 2.5rem; padding-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .95rem; }
.jk-article-nav a { color: var(--jk-accent); text-decoration: none; }
.jk-article-nav a:hover { text-decoration: underline; }

/* ===================================================================
   HOME SECTIONS
   =================================================================== */
.jk-hero__blurb { max-width: 30rem; margin: 1rem 0 1.25rem; color: var(--jk-muted); font-size: 1.1rem; }
.jk-hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 767px) { .jk-hero__cta { justify-content: center; } .jk-hero__blurb { margin-left: auto; margin-right: auto; } }
.jk-home-section { padding: 2.5rem 0; }
.jk-home-section--alt { background: #fff; border-top: 1px solid var(--jk-line); border-bottom: 1px solid var(--jk-line); }
.jk-home-section .jk-sectionhead { margin-top: 0; }
.jk-home-section__lede { max-width: 720px; color: var(--jk-muted); margin: -.25rem 0 1.25rem; }
.jk-card--tool { position: relative; padding-top: 1.4rem; }
.jk-card__icon { display: block; font-size: 1.6rem; line-height: 1; margin-bottom: .6rem; color: var(--jk-accent); }
.jk-home-about { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .jk-home-about { grid-template-columns: 1.4fr 1fr; gap: 3rem; } }
.jk-home-about__text p { font-size: 1.02rem; line-height: 1.6; }
.jk-home-about__links a { color: var(--jk-accent); }
.jk-home-about__links span { margin: 0 .5rem; color: var(--jk-muted); }
.jk-home-about__offices { background: var(--jk-soft); border-radius: 10px; padding: 1.25rem 1.4rem; }
.jk-home-about__offices h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.jk-phonelist { list-style: none; padding: 0; margin: 0 0 .9rem; }
.jk-phonelist li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--jk-line); }
.jk-phonelist li:last-child { border-bottom: 0; }
.jk-phonelist a { color: var(--jk-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.jk-home-about__offices .jk-note a { color: var(--jk-accent); }

/* ===================================================================
   FOOTER
   =================================================================== */
.jk-footer {
  border-top: 1px solid var(--jk-line);
  padding: 2rem 0; text-align: center;
  color: var(--jk-muted); font-size: .9rem;
}
.jk-footer__disclaimer { max-width: 640px; margin: 0 auto 1rem; font-size: .85rem; }
.jk-footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.25rem; margin-bottom: .75rem; }
.jk-footer__links a { color: var(--jk-ink); text-decoration: none; }
.jk-footer__links a:hover { color: var(--jk-accent); }
.jk-footer__clinicians { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem .6rem; margin: 0 0 .75rem; font-size: .85rem; }
.jk-footer__clinicians a { color: var(--jk-ink); }
.jk-footer__clinicians a:hover { color: var(--jk-accent); }

/* ===================================================================
   PRINT LETTERHEAD — only appears on paper
   =================================================================== */
.jk-printhead { display: none; }

/* orientation toggle shown beside the Print/Back buttons */
.jk-printopt {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; color: var(--jk-muted); margin-left: .5rem;
}
.jk-printopt input { width: auto; }

/* ===================================================================
   PRINT
   =================================================================== */
@media print {
  @page { size: letter; margin: 0.6in; }

  html, body { background: #fff; }

  /* strip site chrome */
  .jk-header, .jk-footer, .button-container, .jk-title, .jk-lightbox,
  .jk-disclaimer, .jk-morelink, .jk-ics-note, .jk-safari-note, .jk-daytimes, .jk-skip, .jk-page__lede { display: none !important; }

  /* phones print the table form too */
  .jk-schedule .schedule-table--stack { display: table; width: 100%; }
  .jk-schedule .schedule-table--stack tbody { display: table-row-group; }
  .jk-schedule .schedule-table--stack thead { display: table-header-group; }
  .jk-schedule .schedule-table--stack tr { display: table-row; border: 0; margin: 0; }
  .jk-schedule .schedule-table--stack th, .jk-schedule .schedule-table--stack td { display: table-cell; text-align: center; }
  .jk-schedule .schedule-table--stack .dose-cell::before,
  .jk-schedule .schedule-table--stack td:not(.dose-cell)::before { content: none; }
  .jk-schedule .schedule-table--stack td:not(.dose-cell) { display: table-cell; }
  .jk-schedule .routine-table tr.slot-start th, .jk-schedule .routine-table tr.slot-start td { border-top: 2pt solid #000 !important; }
  .jk-schedule .routine-table td.routine-drop { text-align: left; }
  .jk-schedule .schedule-table--stack .dose-cell--none { display: table-cell; }
  .jk-boxes { justify-content: center; }

  /* let the printed content use the full page width. Bootstrap's
     .container keeps its screen max-width when printing (540px on a
     portrait page, 720px on landscape), so without this the schedule
     used about three quarters of the paper and landscape gained nothing. */
  .jk-page { padding: 0; }
  .jk-page .container { max-width: none !important; width: 100%; padding-left: 0; padding-right: 0; }
  .jk-page__body, .jk-page--centered .jk-page__body { max-width: none; margin: 0; }
  .jk-page--centered .jk-page__body > * { margin-left: 0; margin-right: 0; }

  /* letterhead */
  .jk-printhead {
    display: block !important;
    text-align: center;
    margin: 0 0 1.5rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid #000;
  }
  .jk-printhead__name {
    font-family: var(--jk-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 22pt;
    line-height: 1.1;
    color: #000;
  }
  .jk-printhead__sub { font-size: 10.5pt; color: #000; margin-top: .2rem; }
  .jk-printhead, .jk-schedule { font-variant-ligatures: none; }  /* "fi" ligatures copy out of a PDF as garbage ("Nve") */

  /* generated schedules: patients read these on paper, often printed in
     greyscale, so everything is solid black and nothing is below 12pt
     except the QR caption. */
  .jk-schedule, .jk-schedule * { color: #000 !important; }
  .jk-schedule { font-size: 12pt; }
  .jk-schedule .schedule-head { margin-bottom: .6rem; flex-wrap: nowrap; }
  .jk-schedule .schedule-head h1, .jk-schedule .surgery-name { font-size: 20pt; margin: 0 0 .25rem; }
  .jk-schedule .schedule-head span, .jk-schedule .schedule-meta { font-size: 12pt; }
  .jk-qr svg { width: 1.1in; height: 1.1in; border: 0; padding: 0; }
  .jk-qrbox__cap { font-size: 9pt; }
  .schedule-legend { font-size: 12pt; margin-bottom: .6rem; }
  /* The routine may continue onto the next page, but only between time
     slots (each slot is its own <tbody>), with the header row repeated and
     the heading kept with the first slot. Keeping the whole block together
     instead left most of page 1 blank whenever it didn't quite fit. */
  .jk-schedule .routine { margin-top: 14pt; }
  .jk-schedule .routine-table .routine-slot { break-inside: avoid; page-break-inside: avoid; }
  /* heading lives in the table header in print (see dropform.js) */
  .jk-schedule .routine > h2, .jk-schedule .routine > .routine-note { display: none; }
  .jk-schedule .routine-table { border: 0 !important; }
  .jk-schedule .routine-table tr.routine-titlerow { display: table-row; }
  .jk-schedule .routine-table tr.routine-titlerow th {
    border: 0 !important; background: none !important; text-align: left;
    padding: 0 0 6pt; font-weight: 400;
  }
  .routine-titlerow__h { display: block; font-size: 16pt; font-weight: 700; margin-bottom: 2pt; }
  .routine-titlerow__note { display: block; font-size: 12pt; }
  .jk-schedule td[data-label="Which eye"], .jk-schedule td[data-label="How often"] { white-space: nowrap; }
  .jk-schedule .routine h2 { font-size: 16pt; }
  .jk-schedule .routine-note { font-size: 12pt; margin-bottom: 6pt; }
  .jk-schedule .table-wrapper { overflow: visible; }
  .jk-schedule .week-row td { background: #ddd !important; font-size: 12pt; font-weight: 700; padding: 3pt 6pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .jk-schedule tr.week-odd td, .jk-schedule tr.week-odd th.day-cell { background: #fff; }
  .jk-schedule .day-cell { text-align: left; }

  .jk-schedule .schedule-table {
    width: 100%;
    margin: 0 auto;
    font-size: 12.5pt;
    border-collapse: collapse;
    /* keeps the outer edge solid even where cell borders meet the margin */
    border: 1pt solid #000;
  }
  /* Borders were printing too faint to read. Forced dark, and
     print-color-adjust stops the browser lightening them. */
  .jk-schedule .schedule-table th,
  .jk-schedule .schedule-table td {
    /* 1pt, not 1px: at 300dpi a 1px border can land between device pixels
       and disappear, which is why some row lines printed and others didn't
       on the laser printer while Save-to-PDF looked fine. 1pt is ~4 device
       pixels and always survives rasterisation. */
    border: 1pt solid #000 !important;
    padding: 4pt 6pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .jk-schedule .schedule-table th {
    background: #e8e8e8 !important;
    color: #000 !important;
    font-weight: 700;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  /* Repeat the header row on every page and don't split rows — matters for
     the 84-day trabeculectomy schedule, which runs to several pages. */
  .jk-schedule .schedule-table thead { display: table-header-group; }
  .jk-schedule .schedule-table tr { page-break-inside: avoid; break-inside: avoid; }

  /* checkbox squares need to survive printing too */
  .jk-boxes { white-space: nowrap; flex-wrap: nowrap; gap: 5pt; }
  .jk-schedule .schedule-table th, .jk-schedule .schedule-table td { padding: 4pt 6pt; }
  .jk-boxes input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    border: 1pt solid #000 !important;
    /* explicit inline-block: with appearance:none some renderers treat these
       as block and stack the day's doses vertically instead of in a row */
    display: inline-block;
    vertical-align: middle;
    width: 12pt; height: 12pt;
    margin: 0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ===================================================================
   VISION SIMULATOR (learn/vision-loss, static/js/vision.js)
   Mobile-first: one column, the stage full width; labels move beside
   their controls from 640px. The stage is layered images clipped by a
   draggable divider (see the comment block at the top of vision.js).
   =================================================================== */
.jk-vis { margin: 1.5rem 0 2rem; position: relative; }
/* break out of the reading column so the picture is as wide as the window allows */
.jk-page--article .jk-vis { width: min(100vw - 2rem, 960px); left: 50%; transform: translateX(-50%); }
.jk-vis__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.jk-vis__stage {
  position: relative; aspect-ratio: var(--jk-ar, 3 / 2); background: #111;
  border-radius: 10px; overflow: hidden; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.jk-vis__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.jk-vis__img[hidden] { display: none; }
.jk-vis__sim { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
/* blurred and warped copies bleed past the edges inside a masked wrapper, so
   the blur never fades to transparent at the picture's border */
.jk-vis__wrap { position: absolute; inset: 0; overflow: hidden; }
.jk-vis__wrap[hidden] { display: none; }
.jk-vis__wrap .jk-vis__img { inset: -6%; width: 112%; height: 112%; }
.jk-vis .jk-chip { min-height: 36px; }
.jk-vis__overlay { position: absolute; inset: 0; pointer-events: none; }
/* Play: pre-rendered frames that vision.js cross-fades */
.jk-vis__key { position: absolute; inset: 0; will-change: opacity; }
.jk-vis__floaters { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(0.6px); pointer-events: none; }
.jk-vis__floaters[hidden] { display: none; }
.jk-vis__floater { animation: jk-vis-drift 18s ease-in-out infinite alternate; }
@keyframes jk-vis-drift { from { transform: translate(0, 0); } to { transform: translate(3.5px, 2.5px); } }
@media (prefers-reduced-motion: reduce) { .jk-vis__floater { animation: none; } }

.jk-vis__divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; margin-left: -22px;
  cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center;
}
.jk-vis__divider::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.jk-vis__knob {
  position: relative; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--jk-ink);
  display: flex; align-items: center; justify-content: center; font-size: .65rem; letter-spacing: -1px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.jk-vis__stage.is-dragging .jk-vis__knob { background: var(--jk-accent); color: #fff; }
.jk-vis__divider:focus-visible { outline: none; }
.jk-vis__divider:focus-visible .jk-vis__knob { outline: 3px solid var(--jk-accent); outline-offset: 2px; }
.jk-vis__tag {
  position: absolute; top: .6rem; padding: .25rem .6rem; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; font-weight: 500; pointer-events: none;
}
.jk-vis__tag--l { left: .6rem; }
.jk-vis__tag--r { right: .6rem; }

.jk-vis__hint { margin: .6rem 0 1rem; color: var(--jk-muted); font-size: .92rem; text-align: center; }
.jk-vis__hold {
  border: 1px solid var(--jk-line); background: #fff; color: var(--jk-ink); border-radius: 999px;
  padding: .3rem .8rem; font: inherit; font-size: .9rem; min-height: 36px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.jk-vis__hold.is-held { background: var(--jk-accent); color: #fff; border-color: var(--jk-accent); }

.jk-vis__row, .jk-vis__opt { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; margin: .9rem 0; align-items: start; }
.jk-vis__opt { margin: .6rem 0; }
.jk-vis__lab { font-weight: 600; font-size: .9rem; color: var(--jk-ink); padding-top: .35rem; }
@media (min-width: 640px) {
  .jk-vis__row, .jk-vis__opt { grid-template-columns: 130px minmax(0, 1fr); gap: .75rem; }
}

.jk-vis__scenes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 480px) { .jk-vis__scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jk-vis__scene {
  border: 2px solid transparent; background: #fff; border-radius: 8px; padding: 3px;
  font: inherit; font-size: .78rem; line-height: 1.15; color: var(--jk-ink);
  display: grid; gap: .25rem; cursor: pointer; min-width: 0; text-align: center;
}
.jk-vis__scene img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 5px; margin: 0; }
.jk-vis__scene[aria-pressed="true"] { border-color: var(--jk-accent); }
.jk-vis__scene span { overflow-wrap: anywhere; padding-bottom: .15rem; }

.jk-chip--sm { padding: .3rem .7rem; font-size: .85rem; }
.jk-vis__sevwrap { padding-top: .25rem; }
.jk-vis__sevwrap input[type="range"] { width: 100%; accent-color: var(--jk-accent); min-height: 32px; margin: 0; }
.jk-vis__sevctl { display: flex; align-items: flex-start; gap: .6rem; }
.jk-vis__sevctl .jk-vis__sevwrap { flex: 1 1 auto; min-width: 0; }
.jk-vis__play { flex: 0 0 auto; min-height: 36px; min-width: 6.2rem; white-space: nowrap; margin-top: .25rem; }
.jk-vis__play[hidden] { display: none; }
.jk-vis__play.is-active { background: var(--jk-accent); border-color: var(--jk-accent); color: #fff; }
.jk-vis__sevlabels { display: flex; justify-content: space-between; font-size: .8rem; color: var(--jk-muted); }

.jk-vis__about, .jk-vis__paint { background: #fff; border: 1px solid var(--jk-line); border-radius: 8px; padding: .9rem 1rem; margin: 1rem 0; }
.jk-vis__about p { margin: 0; }
.jk-vis__paint[hidden] { display: none; }
.jk-vis__paintlede { margin: 0 0 .75rem; font-size: .92rem; color: var(--jk-muted); }
.jk-vis__gridwrap { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.jk-vis__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; width: min(100%, 320px); aspect-ratio: 1; }
.jk-vis__cell { border: 1px solid var(--jk-line); background: #f8fafc; border-radius: 3px; padding: 0; min-width: 0; cursor: pointer; }
.jk-vis__cell[data-level="1"] { background: #9aa3ad; }
.jk-vis__cell[data-level="2"] { background: #1f2937; }
.jk-vis__cell:focus-visible { outline: 2px solid var(--jk-accent); outline-offset: 1px; }
.jk-vis__gridbtns { display: flex; gap: .5rem; flex-direction: column; }

.jk-vis__share { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }
.jk-vis__qr { margin-left: auto; }
.jk-vis__copied { font-size: .9rem; color: var(--jk-muted); }

.jk-vis__noscript { background: #fff; border: 1px solid var(--jk-line); border-radius: 8px; padding: 1rem; }

/* prescription mode (learn/glasses-prescription): the rotated blur layer
   and the prescription form. vision.js sizes and rotates the layer. */
.jk-vis__rx { position: absolute; inset: 0; overflow: hidden; }
.jk-vis__rx[hidden] { display: none; }
.jk-vis__rxspin { position: absolute; }
.jk-vis__rximg { position: absolute; object-fit: cover; display: block; max-width: none; margin: 0; }
.jk-vis__scene[hidden] { display: none; }
.jk-vis__rxgrid {
  display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: .35rem .4rem; align-items: center;
  max-width: 520px;
}
.jk-vis__rxgrid .form-select, .jk-vis__rxgrid .form-control {
  font-size: 1rem; min-height: 40px; padding: .3rem 1.4rem .3rem .4rem; background-position: right .3rem center; min-width: 0;
}
.jk-vis__rxgrid .form-control { padding-right: .3rem; }
.jk-vis__rxh { font-size: .8rem; font-weight: 600; color: var(--jk-muted); }
.jk-vis__rxeye { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.jk-vis__rxeye small { display: block; font-weight: 400; color: var(--jk-muted); }
.jk-vis__rxnote { margin: .4rem 0 0; font-size: .85rem; color: var(--jk-muted); }
.jk-vis__agewrap { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
.jk-vis__agewrap .form-control { width: 5.5rem; font-size: 1rem; min-height: 40px; }
.jk-vis__agewrap .jk-vis__rxnote { margin: 0; flex: 1 1 14rem; }
.jk-vis__rxlist { margin: .5rem 0 0; padding-left: 1.2rem; }
.jk-vis__rxlist li { margin: .25rem 0; }

@media print {
  .jk-vis__hint, .jk-vis__row, .jk-vis__options, .jk-vis__paint, .jk-vis__share, .jk-vis__divider { display: none !important; }
  .jk-page--article .jk-vis { width: auto; left: auto; transform: none; }
  .jk-vis__stage { break-inside: avoid; }
}

/* ===================================================================
   LASER IRIDOTOMY DEMO (learn/laser-iridotomy, static/js/lpi.js)
   Mobile-first: one view at a time (chips switch) so the picture, the
   Fire laser button and the caption fit on one phone screen. From 768px
   both views sit side by side and the chips go away.
   =================================================================== */
.jk-lpi { margin: 1.5rem 0 2rem; position: relative; background: #fff; border: 1px solid var(--jk-line); border-radius: 10px; padding: .75rem; }
.jk-page--article .jk-lpi { width: min(100vw - 2rem, 1040px); left: 50%; transform: translateX(-50%); }
.jk-lpi__tabs { justify-content: center; margin-bottom: .5rem; }
.jk-lpi__views { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.jk-lpi__view { margin: 0; min-width: 0; }
.jk-lpi__view figcaption { text-align: center; font-size: .9rem; font-weight: 600; color: var(--jk-muted); margin: 0 0 .25rem; }
.jk-page--article .jk-page__body .jk-lpi__view figcaption { margin-bottom: .25rem; }
.jk-lpi__svg { display: block; width: 100%; height: auto; }
.jk-lpi__svg g, .jk-lpi__svg path, .jk-lpi__svg circle, .jk-lpi__svg ellipse { transition: none; }
@media (max-width: 767.98px) {
  .jk-lpi__views[data-show="side"] .jk-lpi__view[data-view="front"],
  .jk-lpi__views[data-show="front"] .jk-lpi__view[data-view="side"] { display: none; }
}
.jk-lpi__controls { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: .75rem 0 .5rem; }
.jk-lpi__controls .btn { min-height: 44px; }
.jk-lpi__fire { font-weight: 600; padding-left: 1.4rem; padding-right: 1.4rem; }
.jk-lpi__full[hidden] { display: none; }
.jk-lpi__step { margin: 0 auto; max-width: 46rem; min-height: 4.6em; text-align: center; font-size: 1rem; line-height: 1.45; }
.jk-page--article .jk-page__body .jk-lpi__step { margin-bottom: 0; }
@media (min-width: 768px) {
  .jk-lpi { padding: 1rem 1.25rem 1.25rem; }
  .jk-lpi__tabs { display: none; }
  .jk-lpi__views { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .jk-lpi__step { min-height: 3em; font-size: 1.1rem; }
}
/* full screen in the exam room: fill the screen, centre the content */
.jk-lpi:fullscreen { width: 100vw; left: 0; transform: none; border: 0; border-radius: 0; padding: 2vh 3vw; display: flex; flex-direction: column; justify-content: center; overflow: auto; }
.jk-lpi:fullscreen .jk-lpi__views { max-width: calc((100vh - 16rem) * 2.5); width: 100%; margin: 0 auto; }
.jk-lpi:fullscreen .jk-lpi__step { font-size: 1.35rem; max-width: 60rem; }
.jk-lpi:fullscreen .jk-lpi__controls .btn { font-size: 1.15rem; }
@media print { .jk-lpi__controls, .jk-lpi__tabs { display: none; } .jk-lpi__views .jk-lpi__view[data-view] { display: block !important; } }

/* YAG capsulotomy demo (learn/yag-capsulotomy, static/js/yag.js). It uses
   the .jk-lpi layout above; this is the "what you see" photo. The hazy copy
   is filtered once and only its opacity animates. */
.jk-yag__photo { position: relative; border-radius: 8px; overflow: hidden; background: #111; aspect-ratio: 3 / 2; }
.jk-yag__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.jk-yag__hazy { position: absolute; inset: 0; overflow: hidden; will-change: opacity; }
.jk-yag__blur { inset: -4%; width: 108%; height: 108%; filter: blur(2.6px) contrast(.72) brightness(1.1) saturate(.85); }
.jk-yag__veil { position: absolute; inset: 0; }
.jk-yag__scenes { justify-content: center; margin-top: .5rem; }
@media (min-width: 768px) {
  /* the photo is wider than the eye drawing is tall: centre it in its column */
  .jk-lpi__view:has(.jk-yag__photo) { display: flex; flex-direction: column; justify-content: center; }
}

/* Eye pressure sink (learn/eye-pressure, static/js/sink.js). Uses the
   .jk-lpi box. On a phone the picture sticks to the top of the screen
   while the treatment chips scroll under it; from 768px the chips sit
   beside it. */
.jk-sink__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.jk-sink__pic { margin: 0; min-width: 0; position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--jk-line); }
.jk-sink__pic .jk-lpi__svg { max-height: 38vh; margin: 0 auto; }
.jk-sink__side { min-width: 0; }
.jk-sink__opt { grid-template-columns: minmax(0, 1fr) !important; gap: .25rem !important; margin: .6rem 0; }
.jk-sink__opt .jk-vis__lab { padding-top: 0; }
.jk-sink .jk-chip { min-height: 40px; }
.jk-sink__about { background: var(--jk-bg); border-radius: 8px; padding: .5rem .7rem; margin: .25rem 0 .5rem; font-size: .9rem; line-height: 1.4; min-height: 6.6em; text-align: left; color: var(--jk-ink); }
.jk-page--article .jk-page__body .jk-sink__about { margin-bottom: .5rem; }
.jk-sink__about a { color: var(--jk-accent); white-space: nowrap; }
.jk-sink__controls { justify-content: flex-start; }
@media (min-width: 768px) {
  .jk-sink__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .jk-sink__pic { position: static; border-bottom: 0; }
  .jk-sink__pic .jk-lpi__svg { max-height: none; }
  .jk-sink__about { font-size: 1rem; padding: .7rem .85rem; min-height: 5.5em; }
}
.jk-lpi.jk-sink:fullscreen .jk-sink__grid { max-width: 1500px; margin: 0 auto; width: 100%; align-items: center; }
.jk-lpi.jk-sink:fullscreen .jk-sink__about { font-size: 1.25rem; }
.jk-lpi.jk-sink:fullscreen .jk-chip { font-size: 1.05rem; }
@media print { .jk-sink__pic { position: static; } .jk-sink__controls { display: none; } }