/* ==========================================================================
   Shelley K. Perkins, MD. Breast Surgery.
   Design system: "Sage and cream"
   One stylesheet. Change the six palette values below to re-skin the site.
   ========================================================================== */

:root{
  /* ---- the palette. six values. everything else derives from these ---- */
  --bg:      #F7F5EF;   /* page ground, warm cream                  */
  --surface: #FFFFFF;   /* cards, panels                            */
  --text:    #2B332C;   /* body copy, deep warm charcoal-green      */
  --accent:  #4F6E52;   /* sage. links, buttons, active states      */
  --soft:    #E6EDE1;   /* pale sage wash for callouts and icons    */
  --amber:   #D9A24B;   /* honey. used sparingly, for emphasis only */

  /* ---- derived ---- */
  --accent-dk: #3E5741;
  --accent-lt: #6E8A6F;
  --ink-2:   #4C564D;   /* secondary text  */
  --ink-3:   #7C8478;   /* tertiary / meta */
  --line:    #DFE3D6;   /* hairlines       */
  --line-2:  #EDEFE5;   /* faint hairlines */
  --deep:    #2F3A31;   /* utility bar, footer */
  --amber-bg:#FBF3E4;
  --amber-ln:#E9D6AE;
  --amber-tx:#7A5717;

  --r:   14px;          /* card radius   */
  --r-s: 10px;
  --measure: 68ch;
  --shell: 1080px;

  --f-head: "Lora", Georgia, "Times New Roman", serif;
  --f-body: "Karla", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:112px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto}
img{display:block}

h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;letter-spacing:-.012em;line-height:1.22;color:var(--text)}
h1{font-size:clamp(1.85rem,4.2vw,2.75rem);margin:0 0 18px}
h2{font-size:clamp(1.35rem,2.8vw,1.85rem);margin:2.4em 0 .6em}
h3{font-size:1.16rem;margin:1.9em 0 .5em}
h4{font-size:1.02rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1.15em}
p,li{max-width:var(--measure)}
ul,ol{padding-left:1.3em}
li{margin-bottom:.5em}
strong{font-weight:700}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-dk)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

.wrap{max-width:var(--shell);margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-s) 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ------------------------------------------------------- utility strip -- */
.utility{background:var(--deep);color:#DFE7DC;font-size:.84rem}
.utility .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.utility a{color:#F0DDB8;font-weight:600;text-decoration:none}
.utility a:hover{color:#fff;text-decoration:underline}
@media (max-width:520px){
  .utility .wrap{justify-content:center}
  .utility .wrap > span:first-child{display:none}
}

/* -------------------------------------------------------------- header -- */
.site-head{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px;padding-bottom:14px}
.brand{text-decoration:none;line-height:1.2;flex:none}
.brand .nm{display:block;font-family:var(--f-head);font-size:1.2rem;font-weight:600;color:var(--text);letter-spacing:-.015em}
.brand .rl{display:block;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-lt);margin-top:3px;font-weight:600}

.nav-toggle{display:none;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  color:var(--text);font:inherit;font-size:.9rem;font-weight:600;padding:9px 14px;border-radius:99px;cursor:pointer}
.nav-toggle svg{width:17px;height:17px}
.nav-toggle .x{display:none}
.nav-toggle[aria-expanded="true"] .x{display:block}
.nav-toggle[aria-expanded="true"] .b{display:none}

/* --------------------------------------------------------------- nav -----
   Plain dropdown menus. Deliberately NOT built on <details>, because a
   <details> element with no stylesheet renders a browser triangle and dumps
   every submenu link onto the page as a bulleted list. That is what happened
   on 23 August 2026 and it must not be possible again.

   Two rules keep this safe:
     1. Submenus are hidden with the HTML hidden ATTRIBUTE, not by a CSS rule.
        With no stylesheet at all they stay shut.
     2. There are no empty <li> elements. A spacer list item shows as a stray
        bullet the moment CSS is missing.
   The chevron is a CSS-drawn box. With no stylesheet it simply does not
   appear, which is invisible rather than broken.
   ------------------------------------------------------------------------- */
.site-nav{display:flex;flex-wrap:wrap;gap:2px 18px;align-items:center}
.nav-item{position:relative;display:inline-flex;align-items:center;gap:4px}
.site-nav a{text-decoration:none;font-size:.94rem;font-weight:600;color:var(--ink-2);
  padding:7px 0;border-bottom:2px solid transparent;display:inline-block;white-space:nowrap}
.site-nav a:hover{color:var(--accent)}
.site-nav > .nav-item > a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.site-nav > .nav-item > a.on{color:var(--accent);border-bottom-color:var(--accent)}

/* chevron toggle */
.menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;
  color:var(--ink-3);cursor:pointer}
.menu-btn:hover{background:var(--soft);color:var(--accent-dk)}
.menu-btn[aria-expanded="true"]{background:var(--accent);color:#fff}
.chev{display:block;width:7px;height:7px;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .16s}
.menu-btn[aria-expanded="true"] .chev{transform:rotate(-135deg);margin-top:2px}
.nav-item:hover > a{color:var(--accent)}

/* the dropdown panel */
.submenu{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:-12px;z-index:110;
  min-width:268px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-s);box-shadow:0 16px 34px rgba(43,51,44,.15)}
.submenu li{margin:0;max-width:none;list-style:none}
.submenu a{display:block;padding:10px 12px;border-radius:7px;font-weight:500;font-size:.92rem;
  color:var(--ink-2);border-bottom:0;line-height:1.4;white-space:normal}
.submenu a:hover{background:var(--soft);color:var(--accent-dk)}
.submenu a.first{font-weight:700;color:var(--text);border-bottom:1px solid var(--line-2);
  border-radius:7px 7px 0 0;margin-bottom:4px;padding-bottom:12px}

/* Desktop only: hovering the item opens the panel. This intentionally
   overrides the hidden attribute, which is why it is scoped to devices that
   really have a pointer. */
@media (hover:hover) and (min-width:1041px){
  .nav-item:hover > .submenu,
  .nav-item:focus-within > .submenu{display:block}
}

/* ------------------------------------------------------------- mobile nav -- */
@media (max-width:1040px){
  .nav-toggle{display:inline-flex;min-height:44px}
  /* flex-wrap:nowrap matters: with wrap, a menu taller than its box spills
     into a second column off the right edge. Seen 7 September 2026 with a
     submenu open. The max-height is set by js/site.js from the real header
     position, so the menu scrolls inside the viewport instead of under the
     call bar; this value is the fallback. */
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);
    border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(43,51,44,.12);
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:4px 20px 22px;
    max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain}
  body.menu-open .call-bar{display:none}
  body.menu-open .to-top{display:none}
  .site-nav.open{display:flex}
  .nav-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
    width:100%;gap:0;border-bottom:1px solid var(--line-2)}
  .nav-item:last-child{border-bottom:0}

  /* every tap target is at least 52px tall */
  .site-nav > .nav-item > a{flex:1;padding:15px 0;border-bottom:0;font-size:1.02rem;min-height:52px}
  .menu-btn{width:52px;height:52px;border-radius:9px}
  .chev{width:9px;height:9px}

  .submenu{position:static;order:3;width:100%;min-width:0;border:0;box-shadow:none;
    background:var(--bg);border-radius:var(--r-s);padding:6px;margin:0 0 14px}
  .submenu a{padding:14px;font-size:.97rem;min-height:48px}
  .submenu a.first{background:var(--soft)}
}

/* ---------------------------------------------------------------- hero -- */
.hero{padding:56px 0 44px;border-bottom:1px solid var(--line-2)}
.hero .cols{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:center}
.hero .lede{font-size:1.06rem;line-height:1.72;color:var(--ink-2);margin-bottom:26px;max-width:54ch}
.page-head{padding:44px 0 8px}
.page-head .kicker{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-lt);font-weight:700;margin:0 0 12px}
.page-head .lede{font-size:1.04rem;line-height:1.72;color:var(--ink-2);max-width:60ch;margin-bottom:0}

.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.95rem;padding:12px 24px;
  border-radius:99px;border:1.5px solid transparent;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}
.btn-quiet{background:transparent;border-color:#B9C3B3;color:var(--accent-dk)}
.btn-quiet:hover{border-color:var(--accent);background:var(--soft);color:var(--accent-dk)}

/* Her photograph, 13 September 2026. The dashed placeholder rules are gone;
   the box keeps its shape and the image fills it, held a little above center so
   her face sits where the eye lands. */
.portrait{display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#EAEEE3}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
@media (max-width:880px){
  .hero{padding:36px 0 30px}
  .hero .cols{grid-template-columns:1fr;gap:26px}
  /* keep a portrait shape on a phone; 16/10 cropped her chin off */
  .portrait{aspect-ratio:4/5;max-width:300px;margin-inline:auto}
}

/* --------------------------------------------------------------- cards -- */
.section{padding:44px 0}
.section.tint{background:#F0EFE4;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.eyebrow{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-lt);font-weight:700;margin:0 0 16px}
h2.flush,h3.flush{margin-top:0}
.section > .wrap > h2:first-child{margin-top:0}
.prose > h2:first-child{margin-top:.4em}

.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:880px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px 24px;display:flex;flex-direction:column}
.card h3{margin:0 0 10px}
.card p{color:var(--ink-2);font-size:.95rem;margin-bottom:16px;flex:1}
.card .go{text-decoration:none;font-weight:700;font-size:.9rem;color:var(--accent)}
.card .go:hover{text-decoration:underline}
.card .ic{width:36px;height:36px;border-radius:11px;background:var(--soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px;flex:none}
.card .ic svg{width:20px;height:20px}

/* ------------------------------------------------------------ callouts -- */
.note{border-radius:var(--r);padding:20px 22px;margin:1.8em 0;border:1px solid}
.note :last-child{margin-bottom:0}
.note .lbl{display:block;font-family:var(--f-head);font-weight:600;font-size:1rem;margin-bottom:7px}

.note-plain{background:var(--soft);border-color:#CFDCC9}
.note-plain .lbl{color:var(--accent-dk)}

.note-doctor{background:var(--amber-bg);border-color:var(--amber-ln)}
.note-doctor .lbl{color:var(--amber-tx)}

.note-call{background:var(--surface);border-color:#D9BFB2;border-left:5px solid #B4614A}
.note-call .lbl{color:#8C4527}

.note-source{background:transparent;border:1px dashed var(--line);color:var(--ink-3);font-size:.88rem}
.note-source .lbl{color:var(--ink-2)}

/* --------------------------------------------------------------- table -- */
.table-scroll{overflow-x:auto;margin:1.6em 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
caption{text-align:left;padding:16px 18px 0;font-family:var(--f-head);font-weight:600;font-size:1.02rem}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{background:#F0EFE4;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
td strong{color:var(--text)}
th .yr{display:block;font-weight:400;font-size:.86em;color:var(--ink-3);margin-top:2px}

/* ----------------------------------------------------- on-this-page nav -- */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:0 0 34px}
.toc h2,.toc .toc-h{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-family:var(--f-body);font-weight:700}
.toc ol{list-style:none;padding:0;margin:0;columns:2;column-gap:28px}
.toc li{margin-bottom:8px;break-inside:avoid;max-width:none}
.toc a{text-decoration:none;font-size:.93rem;font-weight:600}
.toc a:hover{text-decoration:underline}
@media (max-width:700px){.toc ol{columns:1}}

/* -------------------------------------------- section strip in the header --
   Lives INSIDE .site-head, which is the sticky element. That is deliberate.
   A separately positioned bar competes with the header for the same space and
   loses on z-index, which is exactly the bug this replaced.
   ------------------------------------------------------------------------- */
.sec-strip{background:var(--surface);border-top:1px solid var(--line-2)}
.sec-strip[hidden]{display:none}
.sec-strip .wrap{display:flex;align-items:center;justify-content:flex-start;gap:14px;
  padding-top:0;padding-bottom:0}
.sec-strip .lbl{flex:none;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);padding:11px 0}
.pills{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:8px 0;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.pills::-webkit-scrollbar{height:5px}
.pills::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.pill{flex:none;white-space:nowrap;text-decoration:none;font-size:.85rem;font-weight:600;
  color:var(--ink-2);background:var(--bg);border:1px solid var(--line);
  padding:6px 14px;border-radius:99px;border-bottom-width:1px}
.pill:hover{border-color:var(--accent-lt);color:var(--accent-dk);background:var(--soft)}
.pill.here{background:var(--accent);border-color:var(--accent);color:#fff}
.pill.here:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}
@media (max-width:700px){
  .sec-strip .lbl{display:none}
  .sec-strip .wrap{padding-left:14px;padding-right:14px}
}

/* -------------------------------------------------------------- to top -----
   A plain anchor sitting in the HTML of every page, not something JavaScript
   creates. It works with scripting switched off. The arrow is drawn with CSS
   borders, so there is no icon that can fail to load.
   ------------------------------------------------------------------------- */
.to-top{position:fixed;right:18px;bottom:18px;z-index:118;width:48px;height:48px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(43,51,44,.26);transition:background .18s,transform .18s}
.to-top::before{content:"";position:absolute;width:13px;height:13px;margin-top:4px;
  border-top:2.6px solid #fff;border-left:2.6px solid #fff;transform:rotate(45deg)}
.to-top::after{content:"";position:absolute;width:2.6px;height:18px;background:#fff;border-radius:2px}
.to-top:hover{background:var(--accent-dk);transform:translateY(-2px)}
@media (max-width:700px){.to-top{bottom:70px;right:14px;width:46px;height:46px}}

/* ------------------------------------------------------ previous / next -- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:2.8em 0 0;
  padding-top:1.9em;border-top:1px solid var(--line)}
.pager a{display:block;padding:16px 19px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface);text-decoration:none}
.pager a:hover{border-color:var(--accent);background:var(--soft)}
.pager .dir{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:5px}
.pager .ttl{display:block;font-family:var(--f-head);font-weight:600;font-size:1.02rem;color:var(--text)}
.pager a:hover .ttl{color:var(--accent-dk)}
.pager .next{text-align:right;grid-column:2}
.pager .prev{grid-column:1}
@media (max-width:640px){
  .pager{grid-template-columns:1fr}
  .pager .next,.pager .prev{text-align:left;grid-column:1}
}

.top-link{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;
  color:var(--ink-3);text-decoration:none;margin:0}
.top-link::before{content:"";width:7px;height:7px;
  border-top:2px solid currentColor;border-left:2px solid currentColor;transform:rotate(45deg)}
.top-link:hover{color:var(--accent)}
.sec-end{display:flex;justify-content:flex-end;margin:1.6em 0 0}

/* ------------------------------------------------------------- diagram -- */
figure.fig{margin:1.9em 0;padding:22px 20px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r)}
figure.fig svg{display:block;width:100%;height:auto;max-width:100%}
figure.fig figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:.87rem;line-height:1.6;color:var(--ink-2);max-width:none}
figure.fig figcaption b{color:var(--text)}

.anat-skin{fill:#F3EDE2;stroke:#D9C9B2;stroke-width:2}
.anat-fat{fill:#FBF4E8}
.anat-muscle{fill:#D9B3A6;stroke:#BF9385;stroke-width:1.5}
.anat-rib{fill:#E9E3D6;stroke:#C9C0AC;stroke-width:1.5}
.anat-lobule{fill:var(--accent-lt);opacity:.85}
.anat-duct{fill:none;stroke:var(--accent-dk);stroke-width:3;stroke-linecap:round}
.anat-node{fill:var(--amber);stroke:#B9832F;stroke-width:1.5}
.anat-lig{fill:none;stroke:#C7B49A;stroke-width:1.6;stroke-dasharray:5 4}
.anat-nipple{fill:#C79A86;stroke:#A87A66;stroke-width:1.5}
.anat-lead{stroke:var(--ink-3);stroke-width:1.2}
.anat-lbl{font-family:var(--f-body);font-size:13px;font-weight:700;fill:var(--text)}
.anat-lbl-s{font-family:var(--f-body);font-size:11.5px;fill:var(--ink-2)}

.key{list-style:none;padding:0;margin:1.2em 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px 18px}
.key li{margin:0;max-width:none;display:flex;align-items:flex-start;gap:9px;
  font-size:.9rem;color:var(--ink-2)}
.key i{flex:none;width:14px;height:14px;border-radius:4px;margin-top:4px;border:1px solid rgba(0,0,0,.12)}

/* ------------------------------------------------------------- content -- */
.prose{padding:6px 0 50px}
.prose h2{scroll-margin-top:112px}
.prose h3{scroll-margin-top:112px}
.prose ul li::marker{color:var(--accent-lt)}

/* natural breaks between sections on long pages */
.prose > .wrap > h2{border-top:1px solid var(--line);padding-top:2.1em;margin-top:2.6em}
.prose > .wrap > h2:first-of-type{border-top:0;padding-top:0;margin-top:1.6em}

/* ------------------------------------------------------------- glossary -- */
/* inline term trigger */
.g{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  border-bottom:1.5px dotted var(--accent-lt);text-align:left}
.g:hover{color:var(--accent-dk);border-bottom-style:solid}
.g[aria-expanded="true"]{background:var(--soft);border-bottom-style:solid}

#gloss-pop{position:absolute;z-index:150;width:min(340px,calc(100vw - 32px));background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-s);box-shadow:0 16px 40px rgba(43,51,44,.16);
  padding:18px 18px 16px;font-size:.93rem;line-height:1.6}
#gloss-pop[hidden]{display:none}
#gloss-pop .gp-term{font-family:var(--f-head);font-weight:600;font-size:1.02rem;margin:0 0 6px;padding-right:26px}
#gloss-pop .gp-say{font-size:.82rem;color:var(--ink-3);margin:-2px 0 8px;font-style:italic}
#gloss-pop .gp-def{margin:0 0 12px;color:var(--ink-2);max-width:none}
#gloss-pop .gp-more{font-size:.85rem;font-weight:700;text-decoration:none}
#gloss-pop .gp-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;
  background:transparent;color:var(--ink-3);cursor:pointer;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center}
#gloss-pop .gp-close:hover{background:var(--soft);color:var(--text)}

/* glossary page */
.gl-search{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:4px 6px 4px 18px;max-width:520px;margin:0 0 18px}
.gl-search svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.gl-search input{flex:1;border:0;background:transparent;font:inherit;font-size:.98rem;padding:11px 0;color:var(--text);min-width:0}
.gl-search input:focus{outline:none}
.gl-search button{border:0;background:var(--soft);color:var(--accent-dk);font:inherit;font-size:.85rem;font-weight:700;
  padding:9px 16px;border-radius:99px;cursor:pointer}
.gl-search button:hover{background:#D8E4D2}

.gl-rail{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.gl-rail button{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;
  font-size:.82rem;font-weight:700;min-width:32px;padding:5px 8px;border-radius:8px;cursor:pointer}
.gl-rail button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.gl-rail button:disabled{opacity:.32;cursor:default}
.gl-count{font-size:.88rem;color:var(--ink-3);margin:0 0 22px}

.gl-group{margin:0 0 30px}
.gl-group > h2{font-size:1.5rem;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--soft);scroll-margin-top:112px;border-top:0}
.gl-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.gl-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:18px 20px;max-width:none;margin:0}
.gl-item:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.gl-item h3{margin:0 0 5px;font-size:1.05rem}
.gl-item .say{font-size:.83rem;color:var(--ink-3);font-style:italic;margin:0 0 7px}
.gl-item p{margin:0;color:var(--ink-2);font-size:.95rem;max-width:none}
.gl-item mark{background:#FBF0D5;color:inherit;padding:0 2px;border-radius:3px}
.gl-item .rel{margin:11px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.gl-item .rel a{font-size:.8rem;text-decoration:none;background:var(--soft);color:var(--accent-dk);
  padding:4px 11px;border-radius:99px;font-weight:600}
.gl-item .rel a:hover{background:#D8E4D2}
.gl-empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:30px 24px;text-align:center;color:var(--ink-2)}

/* ------------------------------------------------------------------ faq -- */
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;font:inherit;font-weight:700;font-size:1rem;
  color:var(--text);padding:17px 48px 17px 20px;cursor:pointer;position:relative;line-height:1.5}
.faq-q:hover{color:var(--accent-dk);background:#FBFBF7}
.faq-q::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--accent-lt);border-bottom:2px solid var(--accent-lt);transform:rotate(45deg);transition:transform .18s}
.faq-q[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:-2px}
.faq-a{padding:0 20px 18px;border-top:1px solid var(--line-2)}
.faq-a[hidden]{display:none}
.faq-a > :first-child{margin-top:14px}
.faq-a > :last-child{margin-bottom:0}
.faq-a p,.faq-a li{font-size:.96rem;color:var(--ink-2)}

/* --------------------------------------------------------- resource list -- */
.res{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.res li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:19px 21px;margin:0;max-width:none}
.res h3{margin:0 0 4px;font-size:1.05rem}
.res p{margin:0 0 8px;font-size:.94rem;color:var(--ink-2);max-width:none}
.res .meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.89rem;margin:0}
.res .meta a{font-weight:600;text-decoration:none}
.res .meta a:hover{text-decoration:underline}
.res .meta .tel{font-weight:700;color:var(--accent-dk);text-decoration:none}
.tag{display:inline-block;font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  background:var(--soft);color:var(--accent-dk);padding:3px 10px;border-radius:99px;margin-bottom:9px}
.tag.local{background:var(--amber-bg);color:var(--amber-tx)}

/* --------------------------------------------------------------- footer -- */
.site-foot{background:var(--deep);color:#C6D0C3;margin-top:20px;padding:44px 0 30px;font-size:.92rem}
.site-foot a{color:#DCE6D8;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px;margin-bottom:30px}
.site-foot h2,.site-foot .foot-h{font-family:var(--f-body);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:#8FA08C;margin:0 0 13px;font-weight:700}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:8px;max-width:none}
.site-foot .fbrand{font-family:var(--f-head);font-size:1.16rem;color:#F1F5EF;margin:0 0 8px}
.site-foot p{max-width:46ch;margin:0 0 10px}
.site-foot .fine{border-top:1px solid #41503F;padding-top:20px;font-size:.83rem;color:#8FA08C}
.site-foot .fine p{max-width:82ch}
@media (max-width:820px){.site-foot .cols{grid-template-columns:1fr;gap:26px}}

/* ------------------------------------------------------- sticky mobile -- */
.call-bar{display:none}
@media (max-width:700px){
  .call-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--accent);border-top:1px solid var(--accent-dk)}
  .call-bar a{display:flex;align-items:center;justify-content:center;gap:9px;
    color:#fff;text-decoration:none;font-weight:700;font-size:.97rem;padding:14px}
  .call-bar svg{width:17px;height:17px}
  body{padding-bottom:56px}
}

/* --------------------------------------------------------------- reveal -- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ----------------------------------------------------------------- misc -- */
.updated{font-size:.85rem;color:var(--ink-3);margin:2.6em 0 0;padding-top:16px;border-top:1px solid var(--line)}
.crumb{font-size:.86rem;color:var(--ink-3);margin:0 0 6px}
.crumb a{text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}

/* home page promo for the guide, and the signed note */
.guide-promo{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;margin:0 0 30px}
.guide-promo p{max-width:62ch}
.guide-promo p:last-child{margin-bottom:0}
@media (max-width:760px){.guide-promo{grid-template-columns:1fr;gap:16px;padding:22px}}
.note .sig{font-family:var(--f-head);font-style:italic;color:var(--amber-tx);margin-top:10px}

/* ------------------------------------------------ folded sections -------
   On long pages (body.fold), every H2 section after the first folds behind
   its heading. The "On this page" list and the section strip open sections.
   Built by js/site.js. With scripting off nothing folds and the page reads
   top to bottom as before.
   ------------------------------------------------------------------------- */
.fold > h2.fold-h{border-top:0;padding:0;margin:0;font-size:1rem}
.fold{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:0 0 10px}
.fold-btn{width:100%;text-align:left;background:none;border:0;font:inherit;font-family:var(--f-head);font-weight:600;
  font-size:1.12rem;color:var(--text);padding:17px 50px 17px 20px;cursor:pointer;position:relative;line-height:1.35;border-radius:var(--r)}
.fold-btn:hover{color:var(--accent-dk);background:#FBFBF7}
.fold-btn::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--accent-lt);border-bottom:2px solid var(--accent-lt);transform:rotate(45deg);transition:transform .18s}
.fold-btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:-2px}
.fold-btn[aria-expanded="true"]{border-bottom:1px solid var(--line-2);border-radius:var(--r) var(--r) 0 0}
.fold-p{padding:4px 20px 20px}
.fold-p[hidden]{display:none}
.fold-p > :first-child{margin-top:14px}
.fold-p > :last-child{margin-bottom:0}
.fold-p .sec-end{display:none}
.fold-all{display:flex;justify-content:flex-end;gap:8px;margin:0 0 14px}
.fold-all button{font:inherit;font-size:.82rem;font-weight:700;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;cursor:pointer}
.fold-all button:hover{border-color:var(--accent);color:var(--accent-dk)}
body.fold .toc{display:none}
body.fold .fold-all{margin:6px 0 14px}

/* ---------------------------------------------------------- your guide --
   guide.html. Everything the reader sees is in the HTML; js/guide.js only
   shows and hides it. The reading tools (larger text, low light) are the
   only things remembered, as a display preference in this browser.
   ------------------------------------------------------------------------- */
.gd-tools{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.gd-tool{font:inherit;font-size:.86rem;font-weight:700;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;cursor:pointer;min-height:40px}
.gd-tool:hover{border-color:var(--accent);color:var(--accent-dk)}
.gd-tool[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.door{display:flex;flex-direction:column;gap:8px;text-align:left;font:inherit;cursor:pointer;color:var(--text);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;
  transition:border-color .15s,box-shadow .15s}
.door:hover{border-color:var(--accent);box-shadow:0 10px 26px rgba(43,51,44,.10)}
.door.on{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.door-k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-lt)}
.door-t{font-family:var(--f-head);font-weight:600;font-size:1.22rem;line-height:1.28}
.door-d{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.doors-sec{padding:26px 0 6px}
@media (max-width:700px){.doors{grid-template-columns:1fr}.door{padding:18px}}

.gd-prose{padding-top:0}
.gd-door-panel[hidden]{display:none}
.gd-door-title{margin:1.4em 0 .5em;outline:none}
.gd-door-title:focus-visible{outline:3px solid var(--amber);outline-offset:4px}
.gd-call{margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--line)}
.gd-sub{font-size:1.35rem;margin:2.2em 0 .5em;padding-top:1.4em;border-top:1px solid var(--line)}

/* accordion: every long section folds behind its heading */
.acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:0 0 10px}
.acc.match{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.acc-h{margin:0;font-size:1.08rem}
h3.acc-h{font-size:1.02rem}
.acc-btn{width:100%;text-align:left;background:none;border:0;font:inherit;font-family:var(--f-head);font-weight:600;
  font-size:inherit;color:var(--text);padding:16px 50px 16px 20px;cursor:pointer;position:relative;line-height:1.4;border-radius:var(--r)}
.acc-btn:hover{color:var(--accent-dk);background:#FBFBF7}
.acc-btn::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--accent-lt);border-bottom:2px solid var(--accent-lt);transform:rotate(45deg);transition:transform .18s}
.acc-btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:-2px}
.acc-btn[aria-expanded="true"]{border-bottom:1px solid var(--line-2);border-radius:var(--r) var(--r) 0 0}
.acc.match .acc-btn::before{content:"Matches your answers";display:block;width:max-content;margin:0 0 8px;
  font-family:var(--f-body);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--amber-tx);
  background:var(--amber-bg);border:1px solid var(--amber-ln);padding:3px 9px;border-radius:99px}
.acc-p{padding:4px 20px 20px}
.acc-p[hidden]{display:none}
.acc-p > :first-child{margin-top:14px}
.acc-p > :last-child{margin-bottom:0}
.acc-p h3{margin-top:1.4em;font-size:1.05rem}
.acc-p .note{margin:1.3em 0}

.chooser{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:1.2em 0}
.chooser-q{font-family:var(--f-head);font-weight:600;font-size:1.05rem;margin:0 0 12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{font:inherit;font-size:.92rem;font-weight:600;text-align:left;color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line);border-radius:99px;padding:10px 16px;cursor:pointer;min-height:44px;line-height:1.3}
.opt:hover{border-color:var(--accent);color:var(--accent-dk);background:var(--soft)}
.opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.gd-panel{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r);padding:6px 24px 8px;margin:0 0 1.4em}
.gd-panel[hidden]{display:none}
.gd-panel h3{margin-top:1.1em;outline:none}
.gd-panel h3:focus-visible{outline:3px solid var(--amber);outline-offset:4px}

/* the report decoder, one question at a time */
.decoder-start{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 1.4em}
.decoder-start[hidden]{display:none}
.decoder-hint{font-size:.9rem;color:var(--ink-3)}
.decoder{margin:0 0 1.4em;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.decoder[hidden]{display:none}
.decoder fieldset{border:0;padding:0;margin:0;min-width:0}
.decoder fieldset[hidden]{display:none}
.decoder legend{font-family:var(--f-head);font-weight:600;font-size:1.18rem;padding:0;margin:0 0 10px;outline:none}
.decoder label{display:flex;align-items:flex-start;gap:12px;padding:10px 8px;cursor:pointer;
  font-size:.98rem;line-height:1.5;max-width:none;border-radius:10px;border:1px solid transparent}
.decoder label:hover{background:var(--bg);border-color:var(--line-2)}
.decoder input[type=radio]{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--accent)}
.wiz-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line-2)}
.wiz-prog{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.wiz-btns{display:flex;gap:10px}
.wiz-btns .btn[hidden]{display:none}
.wiz-btns .btn:disabled{opacity:.45;cursor:default}
.decoder-actions{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}

.gd-printable{margin:0 0 1.6em}
.gd-printable[hidden]{display:none}
.summary,.qlist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px 20px;margin:0 0 14px}
.summary{border-left:5px solid var(--amber)}
.summary-k{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-lt);font-weight:700;margin:0 0 12px}
.summary p{max-width:none}
.summary p[hidden],.qlist [hidden],.summary-note[hidden]{display:none}
.summary-empty{color:var(--ink-3);font-style:italic}
.summary-note{font-size:.88rem;color:var(--ink-3);margin:12px 0 0}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{margin:0;max-width:none;border-bottom:1px solid var(--line-2)}
.checklist li:last-child{border-bottom:0}
.checklist label{display:flex;align-items:flex-start;gap:12px;padding:10px 2px;cursor:pointer;font-size:.97rem;line-height:1.5;max-width:none}
.checklist input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--accent)}
.lines{display:none}

/* larger text */
html.gd-big{font-size:112%}
html.gd-big body{font-size:19px;line-height:1.75}
html.gd-big .decoder label,html.gd-big .checklist label,html.gd-big .summary p{font-size:1.08rem}

/* low light: the six palette values, re-pointed */
html.gd-dim{
  --bg:#1D211D;--surface:#262C27;--text:#E4E8E0;--accent:#8FB08F;--soft:#2F3A30;--amber:#D9A24B;
  --accent-dk:#A9C7A8;--accent-lt:#7E9A7E;--ink-2:#C3CBBF;--ink-3:#93A090;--line:#3A433A;--line-2:#333B33;
  --deep:#141714;--amber-bg:#3A3222;--amber-ln:#5A4B2C;--amber-tx:#EBCB88;
  color-scheme:dark;
}
html.gd-dim .section.tint,html.gd-dim thead th{background:#222823}
html.gd-dim .note-plain{border-color:#3E4E3F}
html.gd-dim .note-call{border-color:#6A4A3E;background:#2C2523}
html.gd-dim .note-call .lbl{color:#E8A88E}
html.gd-dim .portrait{background:#2A302A}
html.gd-dim .portrait img{filter:brightness(.92)}
html.gd-dim .btn-quiet{border-color:#556155;color:var(--accent)}
html.gd-dim .btn-primary{background:#4F6E52;border-color:#4F6E52}
html.gd-dim .site-head{background:var(--bg)}
html.gd-dim .submenu{box-shadow:0 16px 34px rgba(0,0,0,.5)}
html.gd-dim .pill.here{background:#4F6E52;border-color:#4F6E52}
html.gd-dim .opt[aria-pressed="true"],html.gd-dim .gd-tool[aria-pressed="true"]{background:#4F6E52;border-color:#4F6E52}
html.gd-dim .to-top{background:#4F6E52}
html.gd-dim .call-bar{background:#4F6E52}

/* --------------------------------------------------------- after surgery --
   recovery.html. Setup card, tabs, the check-in, and the
   exercise figures. Reuses .decoder, .acc, .note, .summary-k from above.
   ------------------------------------------------------------------------- */
.rc-gate{margin-top:22px}
.rc-setup{margin:0 0 18px}
.rc-form fieldset{margin:0 0 14px;padding-bottom:6px;border-bottom:1px solid var(--line-2)}
.rc-form fieldset:last-of-type{border-bottom:0}
.rc-form legend{font-size:1.05rem}
.rc-date{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-weight:600}
.rc-date input{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);min-height:44px}
.rc-saved{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--r);padding:18px 22px}
.rc-saved[hidden]{display:none}
.rc-summary{font-family:var(--f-head);font-weight:600;font-size:1.1rem;margin:0 0 12px;max-width:none}
.rc-saved .decoder-actions .btn{font-size:.88rem;padding:9px 16px}

.rc-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:4px 0 10px;margin:0 0 18px;
  border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
.rc-tabs[hidden]{display:none}
.rc-tab{flex:none;font:inherit;font-size:.9rem;font-weight:700;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:9px 16px;cursor:pointer;min-height:42px;white-space:nowrap}
.rc-tab:hover{border-color:var(--accent);color:var(--accent-dk)}
.rc-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.rc-tab[hidden]{display:none}
.rc-pane[hidden]{display:none}
.rc-pane > .gd-door-title{margin-top:.4em}
.rc-pane h3{font-size:1.1rem;margin:1.8em 0 .5em}

.rc-today{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:var(--r);padding:20px 24px;margin:0 0 6px}
.rc-day{margin:0 0 6px;font-size:clamp(1.5rem,3.4vw,2.1rem)}
.rc-phase{margin:0;color:var(--ink-2)}
.rc-list li[hidden]{display:none}
.rc-list li{margin-bottom:.7em}
.rc-list:empty{display:none}

/* The in-page drain log (.rc-goal to .rc-del) was removed on 11 September 2026.
   Patients now use the Drain Log app at /drain-log/; see .app-card below. */
h4.acc-h{font-size:1rem}

.rc-checkin fieldset{margin:0 0 12px;border-bottom:1px solid var(--line-2);padding-bottom:6px}
.rc-checkin legend{font-size:1.02rem}
.rc-result[hidden]{display:none}
.rc-result .note[hidden]{display:none}
.rc-result .note{margin:1.2em 0}
.rc-red{border-left-color:#B4614A;background:#FBF1EC}
.rc-amber{border-left-color:var(--amber);background:var(--amber-bg);border-color:var(--amber-ln)}
.rc-amber .lbl{color:var(--amber-tx)}
.rc-amber ul{margin:10px 0 0;font-size:.93rem}

.rc-ex{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:0 0 1.4em}
.rc-fig{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.rc-fig svg{display:block;width:120px;height:120px;margin:0 auto 10px}
.rc-fig figcaption{font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.rc-fig figcaption b{color:var(--text)}
.rc-line{fill:none;stroke:var(--text);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rc-line circle{fill:var(--soft)}
.rc-arrow{stroke:var(--amber);stroke-width:2.2;stroke-dasharray:3 3}
.rc-wall{stroke:var(--line);stroke-width:5}
.rc-closing{margin:2.4em 0 1.6em;padding:16px 20px;border-left:4px solid var(--line);color:var(--ink-2);font-size:.95rem;max-width:none}
[data-when][hidden]{display:none}
.call-row{margin:14px 0 0;max-width:none}
.btn-call{display:inline-flex;align-items:center;gap:9px;min-height:48px}
.btn-call svg{width:18px;height:18px;flex:none}
.btn-911{background:#B4614A;border-color:#B4614A}
.btn-911:hover{background:#8C4527;border-color:#8C4527}
.note .call-row:last-child{margin-bottom:0}


@media print{
  html.rc-printing body > *{display:none}
  html.rc-printing main{display:block}
  html.rc-printing main > *{display:none}
  html.rc-printing main > .prose{display:block}
  html.rc-printing .prose > .wrap > *{display:none}
  html.rc-printing .rc-setup{display:block}
  html.rc-printing .rc-form,html.rc-printing .rc-saved .decoder-actions{display:none}
  html.rc-printing .rc-saved{display:block;border:0;padding:0}
  html.rc-print-plan #pane-today,html.rc-print-plan #pane-care{display:block !important}
  html.rc-printing .acc-btn::after{display:none}
  html.rc-printing .note-call,html.rc-printing .rc-today{border:1px solid #999;page-break-inside:avoid}
  html.rc-printing .rc-fig,html.rc-printing .acc{page-break-inside:avoid}
  html.rc-printing .prose > .wrap::before{content:"From DrSPerkins.com, After surgery. Education only. Your discharge instructions come first.";
    display:block;font-size:9pt;color:#666;margin:0 0 12pt}
  html.rc-printing .rc-tabs{display:none}
}

@media print{
  .utility,.site-head,.call-bar,.toc,.site-foot,.to-top{display:none}
  body{background:#fff;font-size:11pt}
  .faq-a{display:block !important}
  /* printing the summary only */
  html.gd-printing body > *{display:none}
  html.gd-printing main{display:block}
  html.gd-printing main > *{display:none}
  html.gd-printing main > .prose{display:block}
  html.gd-printing .prose > .wrap > *{display:none}
  html.gd-printing .prose > .wrap > .gd-printable{display:block}
  html.gd-printing .gd-printable [hidden]{display:none}
  .acc-p[hidden],.fold-p[hidden],.gd-door-panel[hidden]{display:block}
  html.gd-printing .decoder-actions{display:none}
  html.gd-printing .summary,html.gd-printing .qlist{border:1px solid #999;page-break-inside:avoid}
  html.gd-printing .lines{display:block}
  html.gd-printing .lines span{display:block;height:28px;border-bottom:1px solid #bbb}
  html.gd-printing .checklist input{-webkit-appearance:checkbox;appearance:checkbox}
  html.gd-printing .gd-printable::before{content:"From DrSPerkins.com. Education only, not a diagnosis or a treatment plan.";
    display:block;font-size:9pt;color:#666;margin:0 0 12pt}
}


/* =========================================================== v2, 9 Sept 2026 --
   Four knowledge centers. Hub pages, utility links, footer and TOC labels
   that are no longer headings, FAQ questions as H3s, the recovery link cards.
   ------------------------------------------------------------------------- */
.utility .util-links{display:flex;gap:18px}
.utility .util-links a{color:#DFE7DC;font-weight:500}
.utility .util-links a:hover{color:#fff}
@media (max-width:1040px){.utility .util-links{display:none}}
@media (max-width:520px){.utility .wrap > span:first-child{display:none}}
@media (min-width:1041px){.nav-item.util-only{display:none}}
@media (max-width:1040px){.nav-item.util-only > a{font-size:.95rem;color:var(--ink-3)}}
.site-nav > .nav-item > a.on{color:var(--accent);border-bottom-color:var(--accent)}
h2.eyebrow{font-family:var(--f-body);line-height:1.4;margin:0 0 16px}
.hub .grid{margin-top:2px}
.hub{padding:34px 0}
.hub + .hub{padding-top:34px}
.hub-prose{padding-top:26px}
.hub-call{margin-top:1.4em}
.card h2{margin:0 0 10px;font-size:1.22rem}
.faq-h{margin:0;font-size:1rem;font-family:var(--f-body);letter-spacing:0;line-height:1.5}
.faq-h .faq-q{display:block}
.res h4{margin:0 0 4px;font-size:1.05rem;font-family:var(--f-head)}
h2.chooser-q{font-size:1.15rem;margin:0 0 12px}
.rc-more{margin:22px 0 0}
.rc-link{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;color:var(--text);transition:border-color .15s}
.rc-link:hover{border-color:var(--accent)}
.rc-link-t{display:block;font-family:var(--f-head);font-weight:600;font-size:1.05rem;margin-bottom:4px;color:var(--accent-dk)}
.rc-link-d{display:block;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.summary-go{margin:14px 0 0;max-width:none}
.pager span:empty{display:block}
@media print{.rc-more,.hub-call{display:none}}


/* ===================================================== v2.1, 11 Sept 2026 --
   The Drain Log app. A screenshot card that links to drain-log.html (the
   install screen), the phone frame, the step lists, the "name it yourself"
   box, and the source tags on Dr. Perkins' own instructions.
   ------------------------------------------------------------------------- */
.phone-shot{margin:0;flex:none;width:100%;max-width:250px;border-radius:30px;padding:9px;background:#1B252D;
  box-shadow:0 18px 40px rgba(20,30,24,.22),inset 0 0 0 1px #33414B}
.phone-shot img{width:100%;height:auto;border-radius:22px;background:#0c1620}
.app-card{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;text-decoration:none;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--r);
  padding:20px 22px;margin:1.6em 0;transition:border-color .15s,box-shadow .15s}
.app-card:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(47,58,49,.10)}
.app-card .phone-shot{max-width:150px;border-radius:22px;padding:6px}
.app-card .phone-shot img{border-radius:16px}
.app-card-k{display:block;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-lt);font-weight:700;margin:0 0 6px}
.app-card-t{display:block;font-family:var(--f-head);font-weight:600;font-size:1.28rem;line-height:1.25;margin:0 0 8px;color:var(--text)}
.app-card-d{display:block;font-size:.95rem;color:var(--ink-2);line-height:1.6;margin:0 0 12px;max-width:52ch}
.app-card-go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:#fff;background:var(--accent);
  border-radius:99px;padding:10px 20px;min-height:44px}
.app-card:hover .app-card-go{background:var(--accent-dk)}
.hub .app-card{margin:0 0 18px}
@media (max-width:560px){
  .app-card{grid-template-columns:96px 1fr;gap:16px;padding:16px}
  .app-card .phone-shot{max-width:96px;border-radius:16px;padding:4px}
  .app-card .phone-shot img{border-radius:12px}
  .app-card-t{font-size:1.1rem}
  .app-card-d{font-size:.9rem}
}

.app-hero{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:center;margin:8px 0 10px}
.app-hero .cta-row{margin-top:20px}
.app-hero ul{margin:0}
@media (max-width:720px){
  .app-hero{grid-template-columns:1fr;gap:24px;justify-items:center}
  .app-hero .phone-shot{max-width:220px}
  .app-hero > div{justify-self:stretch}
}

.name-it{background:var(--amber-bg);border:1px solid var(--amber-ln);border-left:5px solid var(--amber);border-radius:var(--r);
  padding:20px 22px;margin:1.4em 0}
.name-it .lbl{display:block;font-family:var(--f-head);font-weight:600;font-size:1.12rem;color:var(--amber-tx);margin:0 0 6px}
.name-it p{margin:0 0 .6em}
.name-it p:last-child{margin-bottom:0}
.name-eg{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:10px 0 0}
.name-eg li{margin:0;background:var(--surface);border:1px dashed var(--amber-ln);border-radius:99px;padding:4px 14px;font-weight:700;font-size:.92rem;color:var(--amber-tx)}

.steps{counter-reset:st;list-style:none;padding:0;margin:0 0 1.4em}
.steps > li{counter-increment:st;position:relative;padding:2px 0 0 46px;margin:0 0 14px;min-height:32px}
.steps > li::before{content:counter(st);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  background:var(--soft);color:var(--accent-dk);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.steps > li.step-name::before{background:var(--amber);color:#fff}
.steps > li.step-name{font-weight:600}
.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1em 0 0}
.install-grid > section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 6px}
.install-grid h3{margin:0 0 14px}
@media (max-width:760px){.install-grid{grid-template-columns:1fr}}

.src-tag{display:inline-block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border-radius:99px;
  padding:3px 12px;margin:-.2em 0 .9em;max-width:none}
.src-dr{background:var(--soft);color:var(--accent-dk);border:1px solid #CFDCC9}
.src-gen{background:transparent;color:var(--ink-3);border:1px dashed var(--line)}
.dose{font-variant-numeric:tabular-nums;white-space:nowrap}
@media print{.app-card{display:none}}

/* anatomy.html diagram key. These swatch colors were inline style attributes,
   which the Content-Security-Policy blocks, so the swatches showed blank. */
.key .key-1{background:#6E8A6F}
.key .key-2{background:#3E5741}
.key .key-3{background:#FBF4E8}
.key .key-4{background:#D9A24B}
.key .key-5{background:#D9B3A6}
.install-grid + p{margin-top:1.2em}

/* ================================================== v2.2, 13 Sept 2026 --
   Review boxes. Every change made for Dr. Perkins on 13 September 2026 is
   listed in a yellow box at the top of the page it is on, so she can check
   them one page at a time. Delete the boxes, and this block, once she has
   signed the site off.
   ------------------------------------------------------------------------- */
.verify{background:#FFF6D6;border:1px solid #E8CF7A;border-left:5px solid var(--amber);
  border-radius:var(--r);padding:20px 22px;margin:1.6em 0}
.verify .lbl{display:block;font-family:var(--f-head);font-weight:600;font-size:1.05rem;color:var(--amber-tx);margin:0 0 8px}
.verify p,.verify li{max-width:none}
.verify p:last-child,.verify ul:last-child{margin-bottom:0}
.verify ul{margin:0 0 1em}
.verify li{margin-bottom:.45em}
.verify li:last-child{margin-bottom:0}
.page-head .verify{margin-top:22px}