/* Derm Rounds — the button at the foot of the panel and the reading drawer.
   Visual reference: DermRounds_Mockup.html (2026-10-01).

   Glass (backdrop-filter) here is used on exactly two surfaces: the Derm Rounds button and the
   drawer's masthead. The third glass surface is the main input panel (rounds/glass.css). Cards,
   the drawer's reading area and the finished letter stay solid.

   Text sizes and colours follow the mockup. Small grey captions that the mockup draws in its
   faintest grey (#6E7E86) are a touch lighter here so every line of text keeps at least 4.5:1
   contrast against what is behind it (measured, see eval/derm-rounds/). */

:root{
  --dr-navy:#0B1E2D; --dr-surf:#14324A; --dr-line:#24415B; --dr-ink:#1B2B36;
  --dr-gold:#C6A15B; --dr-goldb:#D8B863;
  --dr-champ:#F5EFE1; --dr-champb:#E4D6A9; --dr-champt:#6E5828;
  --dr-text:#E9EFF1; --dr-soft:#C9D4D9; --dr-dim:#8DA0A9;
  --dr-faint-drawer:#77878F;  /* on the drawer's own background */
  --dr-faint-card:#8A9CA6;    /* on a card, and on the insets inside it (result strip, details) */
  /* the drawer's width beside the letter; the page keeps its full column width wherever it can */
  --dr-w:clamp(420px, calc(100vw - 844px), 620px);
  --dr-gap:16px;
}

/* ── The foot of the panel: the Derm Rounds button above the privacy note ──────────────── */
/* In normal flow at the end of the page (so the page's last line always ends above it) and sticky
   at the bottom of the window (so it is always in view). The navy ground behind it hides whatever
   scrolls beneath, so no letter text is ever seen under or through the button. */
.drdock{position:sticky; bottom:0; z-index:6; margin-top:auto; padding:14px 14px 0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,19,30,0) 0, #08131E 14px);} /* solid from the button's top edge down */
.drdock > .drbtn, .drdock > footer{pointer-events:auto;}
/* the faint gold glow near the foot, clipped to the foot so it never tints what scrolls past */
.drdock-g3{position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 40px); mask-image:linear-gradient(180deg, transparent 0, #000 40px);}
.drdock-g3::before{content:""; position:absolute; left:80px; bottom:-60px; width:280px; max-width:70%; height:180px; border-radius:50%;
  filter:blur(18px); background:radial-gradient(circle, rgba(198,161,91,.3), rgba(198,161,91,0) 70%);}
.drdock > footer{position:relative; z-index:1; border-top:0; justify-content:center; text-align:center; align-items:center;
  padding:8px 0 calc(10px + env(safe-area-inset-bottom, 0px)); font-size:10px; color:var(--dr-dim);}
@media (min-width:800px){ .drdock{padding:14px 22px 0;} }
/* the page scrolls inside <body> (html and body are both 100% tall with hidden horizontal overflow) */
html, body{scroll-padding-bottom:var(--dock-h, 0px);}

/* The button: the gold spark, "Derm Rounds" in Source Serif, a gold arrow */
.drbtn{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin:0; padding:12px 16px; border-radius:13px; cursor:pointer; font:inherit; font-size:16px; line-height:normal; color:var(--dr-text);
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px rgba(0,0,0,.35);
  transition:border-color .18s, box-shadow .18s, transform .12s;}
.drbtn:hover{border-color:rgba(198,161,91,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 12px 28px rgba(0,0,0,.42), 0 0 0 3px rgba(198,161,91,.14); transform:translateY(-1px);}
.drbtn:active{transform:scale(.98);}
.drbtn:focus{outline:none;}
.drbtn:focus-visible{outline:2px solid var(--dr-gold); outline-offset:3px;}
.drbtn-spark{color:var(--dr-goldb); font-size:15px;}
.drbtn-name{font-family:var(--serif); font-size:15px; font-weight:400;}
.drbtn-arrow{color:var(--dr-goldb); transition:transform .18s;}
.drbtn:hover .drbtn-arrow{transform:translateX(3px);}
.drbtn-dot{position:absolute; top:-3px; right:-3px; width:10px; height:10px; border-radius:50%; background:var(--dr-goldb); box-shadow:0 0 0 2px var(--dr-navy);}
.drbtn-dot[hidden]{display:none;}

/* ── Wide screens: the page makes room, so the drawer sits beside the letter ──────────────── */
@media (min-width:1121px){
  /* the letter's "Fill this one →" tag lives in the left margin, which is gone while the drawer is
     open: it takes its narrow-screen place above the paper's top-right corner instead */
  html.dr-beside .brguide{left:auto; right:14px; top:auto !important; bottom:calc(100% - 4px);}
  html.dr-beside .brguide::after{display:none;}
  body{transition:padding-right .22s ease-out;}
  .pglows{transition:right .22s ease-out;}
  html.dr-beside body{padding-right:calc(var(--dr-w) + 2 * var(--dr-gap));}
  html.dr-beside .pglows{right:calc(var(--dr-w) + 2 * var(--dr-gap));}
  html.dr-beside .prtoast{left:calc((100vw - var(--dr-w) - 2 * var(--dr-gap)) / 2);}
}

/* ── The drawer ───────────────────────────────────────────────────────────────────────────── */
.drdrawer{position:fixed; z-index:60; top:var(--dr-gap); right:var(--dr-gap); bottom:var(--dr-gap); width:var(--dr-w);
  display:flex; flex-direction:column; overflow:hidden; background:#0A1B28; border:1px solid #1D3850; border-radius:20px;
  color:var(--dr-text); font-family:var(--sans); font-size:13px; line-height:normal;
  opacity:0; transform:translateX(28px); pointer-events:none; transition:opacity .22s ease-out, transform .22s ease-out;}
.drdrawer.open{opacity:1; transform:none; pointer-events:auto;}
.drdrawer[hidden], .drdrawer [hidden]{display:none !important;}
.drdrawer:focus{outline:none;}
.drdrawer button{font-family:var(--sans);}
/* phones and narrow windows: a full-screen sheet */
@media (max-width:1120px){
  .drdrawer{top:0; right:0; bottom:0; left:0; width:auto; border-radius:0; padding-top:env(safe-area-inset-top, 0px);}
}
.drthread{position:absolute; top:0; left:0; height:1px; width:0; background:var(--dr-gold); z-index:3;}

/* Masthead (glass) */
.drmast{position:relative; flex:none; padding:18px 20px 12px; border-bottom:1px solid rgba(255,255,255,.1); overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
.drmglow{position:absolute; right:-50px; top:-40px; width:260px; height:160px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(198,161,91,.35), rgba(198,161,91,0) 70%); filter:blur(14px);}
.drclose{position:absolute; right:14px; top:14px; z-index:2; width:30px; height:30px; padding:0; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--dr-soft); font-size:16px; line-height:normal;}
.drclose::after{content:""; position:absolute; top:-7px; right:-7px; bottom:-7px; left:-7px;} /* a 44px touch target */
.drclose:focus{outline:none;}
.drclose:focus-visible{outline:2px solid var(--dr-gold); outline-offset:2px;}
.drmt{position:relative; margin:0; padding-right:40px; font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.1; color:var(--dr-text); letter-spacing:0;}
.drtag{position:relative; margin:4px 0 0; font-size:12.5px; color:var(--dr-soft);}
.drrule{position:relative; height:1px; background:var(--dr-gold); margin:12px 0 8px; width:0; transition:width .4s ease-out;}
.drdrawer.open .drrule{width:100%;}
.drissue{position:relative; line-height:1.35; font-family:var(--mono); font-size:11px; color:var(--dr-soft); display:block;}
.drissue-a, .drissue-b{white-space:nowrap;}
.drissue-dates{margin-left:10px;}
.drodo{display:inline-block; height:1.35em; overflow:hidden; vertical-align:bottom;}
.drodo-in{display:flex; flex-direction:column; transition:transform .5s ease-out;}
.drodo-in span{height:1.35em; line-height:1.35em;}
.drodo.rolled .drodo-in{transform:translateY(-1.35em);}
.drodo.still .drodo-in{transition:none;}
.drdelayed{position:relative; margin:8px 0 0; font-size:11.5px; color:var(--dr-goldb);}
.drmrow{position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-top:9px;}
.drcov{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--dr-dim);}
.drcdot{width:8px; height:8px; border-radius:50%; background:var(--dr-gold); flex:none;}
.drcdot.part{background:transparent; border:1px solid var(--dr-gold);}
.drcdot.off{background:#6E7E86;}
.drcovtxt{margin-left:4px;}
.drnewc{font-size:11px; color:var(--dr-goldb);}
.drweeks{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:11px; color:var(--dr-dim);}
.drwk{border:1px solid var(--dr-line); background:transparent; border-radius:999px; padding:2px 9px; font-size:11px; cursor:pointer; color:var(--dr-soft);}
.drwk.on{background:var(--dr-champ); border-color:var(--dr-champb); color:var(--dr-champt);}
.drtools{position:relative; display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.drsearch{flex:1 1 180px; min-width:160px; margin:0; background:rgba(11,30,45,.62); border:1px solid rgba(255,255,255,.14); border-radius:999px;
  color:var(--dr-text); padding:6px 12px; font-family:var(--sans); font-size:12px; line-height:normal; outline:none; box-shadow:none;}
.drsearch::placeholder{color:var(--dr-dim); opacity:1;}
.drsearch:focus{border-color:rgba(198,161,91,.6); box-shadow:none;}
/* the browser's clear button, in the drawer's own colours */
.drsearch::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none; width:11px; height:11px; margin-left:6px; cursor:pointer; opacity:.85;
  background:linear-gradient(45deg, transparent calc(50% - .7px), #C9D4D9 calc(50% - .7px), #C9D4D9 calc(50% + .7px), transparent calc(50% + .7px)),
    linear-gradient(-45deg, transparent calc(50% - .7px), #C9D4D9 calc(50% - .7px), #C9D4D9 calc(50% + .7px), transparent calc(50% + .7px));}
.drfchip{font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid var(--dr-line); background:rgba(11,30,45,.5); color:var(--dr-soft); cursor:pointer;}
.drfchip.on{background:var(--dr-champ); border-color:var(--dr-champb); color:var(--dr-champt);}
.drwk:focus, .drfchip:focus{outline:none;}
.drwk:focus-visible, .drfchip:focus-visible{outline:2px solid var(--dr-gold); outline-offset:2px;}

/* Reading area (solid) */
.drbody{position:relative; flex:1; overflow:auto; padding:14px 18px 10px; scroll-behavior:smooth; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.drbody:focus{outline:none;}
.drsec{font-size:10.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--dr-gold); margin:14px 0 8px;}
.drsec:first-child{margin-top:0;}
.drempty{font-size:12.5px; color:var(--dr-dim); padding:20px 4px; margin:0;}

/* Cards */
.drcard{position:relative; background:var(--dr-surf); border:1px solid var(--dr-line); border-radius:13px; padding:13px 14px; margin-bottom:10px;
  opacity:0; transform:translateY(6px); animation:drsettle .3s ease-out forwards;}
@keyframes drsettle{to{opacity:1; transform:none;}}
.drcard.isnew::before{content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:2px; border-radius:2px; background:var(--dr-gold);}
.drcard.lead{padding:16px 18px; background:linear-gradient(160deg, #17384F, #14324A);}
.drcard.lead .drch{font-size:19px;}
.drcard.corr{padding-top:22px;}
.drcard:focus{outline:none;}
.drcard:focus-visible{outline:2px solid var(--dr-gold); outline-offset:2px;}
.drctop{display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dr-dim);}
.drglyph{display:inline-flex; flex:none;}
.drglyph svg{display:block;}
.drissuechip{margin-left:auto; font-family:var(--mono); text-transform:none; letter-spacing:0; color:var(--dr-faint-card);}
.drch{font-family:var(--serif); font-size:16px; line-height:1.35; margin:7px 0 0; font-weight:400; color:var(--dr-text); letter-spacing:0;}
.drch s{color:var(--dr-faint-card);}
.drcs{font-size:12.8px; line-height:1.62; color:var(--dr-soft); margin:7px 0 0;}
.drcw{font-size:12.3px; line-height:1.55; color:var(--dr-soft); margin:8px 0 0;}
.drcw b{color:var(--dr-text); font-weight:500;}
.drdrawer mark{background:transparent; color:inherit; border-bottom:1px solid var(--dr-goldb);}
.drbars{margin:10px 0 2px; padding:8px 10px; border-radius:9px; background:rgba(11,30,45,.55); border:1px solid rgba(255,255,255,.08);}
.drbr{display:grid; grid-template-columns:62px 1fr 96px; align-items:center; gap:8px; margin:3px 0;}
.drbl{font-size:10.5px; color:var(--dr-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.drbt{height:7px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden;}
.drbf{display:block; height:100%; border-radius:4px; width:0; transition:width .6s ease-out;}
.drbf.g{background:var(--dr-gold);}
.drbf.c{background:#6E7E86;}
.drbn{font-family:var(--mono); font-size:10.5px; color:var(--dr-soft); text-align:right; white-space:nowrap;}
.drbcap{font-size:10px; color:var(--dr-faint-card); margin-top:3px;}
.drcite{font-size:10.6px; line-height:1.55; color:var(--dr-dim); margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08); overflow-wrap:anywhere;}
.drcfoot{display:flex; justify-content:space-between; margin-top:8px;}
.drcbtn{background:transparent; border:0; cursor:pointer; color:var(--dr-goldb); font-size:11.5px; padding:2px 0;}
.drcbtn:focus{outline:none;}
.drcbtn:focus-visible{outline:2px solid var(--dr-gold); outline-offset:2px;}
.drdetails{margin-top:10px; padding:10px 12px; border-radius:9px; background:rgba(11,30,45,.55); border:1px solid rgba(255,255,255,.08);}
.drdetails dl{margin:0;}
.drdrow{display:grid; grid-template-columns:118px 1fr; gap:8px; font-size:11.8px; line-height:1.55; padding:3px 0;}
.drdrow dt{color:var(--dr-dim);}
.drdrow dd{margin:0; color:var(--dr-soft);}
.drbasis{font-size:10.5px; color:var(--dr-faint-card); margin:6px 0 0; font-style:italic;}
.drabs{margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08);}
.drabs h5{margin:0 0 4px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dr-gold); font-weight:500;}
.drabs p{margin:0; font-size:11.8px; line-height:1.6; color:var(--dr-soft); font-family:var(--serif);}
.drslip{position:absolute; top:-6px; right:14px; max-width:220px; background:var(--dr-champ); color:var(--dr-champt); font-size:10.5px; line-height:1.4;
  padding:5px 9px; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.3); transform:rotate(1.5deg);}
.drfoot{flex:none; font-size:10px; color:var(--dr-faint-drawer); text-align:center; padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-top:1px solid rgba(255,255,255,.06);}
@media (max-width:420px){
  .drdrow{grid-template-columns:96px 1fr;}
  .drbr{grid-template-columns:58px 1fr 92px; gap:6px;}
}

/* ── Fallbacks: no blur available, or the reader asked for less transparency ──────────────── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .drbtn{background:#1A3B55;}
  .drmast{background:#14324A;}
  .drdock-g3, .drmglow{display:none;}
}
@media (prefers-reduced-transparency: reduce){
  .drbtn{background:#1A3B55; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .drmast{background:#14324A; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .drdock-g3, .drmglow{display:none;}
}
/* Motion only on arrival, never looping; with reduced motion everything is already in place */
@media (prefers-reduced-motion: reduce){
  body, .pglows, .drbtn, .drbtn-arrow, .drdrawer, .drrule, .drodo-in, .drbf{transition:none !important;}
  .drbtn:hover, .drbtn:active{transform:none;}
  .drbtn:hover .drbtn-arrow{transform:none;}
  .drcard{animation:none; opacity:1; transform:none;}
  .drbody{scroll-behavior:auto;}
}