/* Presto web app — the glass input panel and the document-type row.
   Visual reference: DermRounds_Mockup.html (2026-10-01).

   Glass (backdrop-filter) is used in exactly three places: the main input panel (#composeCard,
   here), the Derm Rounds button and the Derm Rounds masthead (derm-rounds/derm-rounds.css).
   Everything else stays solid: the header controls, the finished letter on its paper card, and
   every reading surface inside the drawer. Blur never touches the letter.

   Fallbacks: where backdrop-filter is unsupported, or under prefers-reduced-transparency, the
   panel is solid #0F2638 and the glows are gone. Text on the glass is brighter than the mockup's
   muted grey wherever the measured contrast against the worst-case background (a glow behind the
   glass) needed it. */

:root{
  --glass-text:#E9EFF1;
  --glass-soft:#C9D4D9;
}

/* ── The page's dark background (all browsers, iPhone included) ──────────────────────────── */
/* The app painted its navy canvas with background-attachment:fixed on <body>. iPhone Safari does
   not support fixed backgrounds, and once the panel turned to see-through glass, iPhones showed
   white behind it (2026-10-01). The canvas is now painted by the fixed glow layer itself (the
   same gradient, still fixed to the window), with a solid navy root underneath as the fallback
   and for the over-scroll bounce. Computers look the same as before. */
html{background-color:#08131E;}
body{background:transparent;}
.pglows::before{content:""; position:fixed; top:0; right:0; bottom:0; left:0;
  background:radial-gradient(1200px 700px at 20% -10%, #14324A, #08131E 62%);}

/* ── The glows behind the panel: fixed, non-interactive, never animated (the third, near the
   foot, sits behind the Derm Rounds button) ─────────────────────────────────────────────── */
/* z-index -1: painted above the page root and beneath every piece of content */
.pglows{position:fixed; top:0; bottom:0; left:0; right:0; margin:0 auto; max-width:780px; pointer-events:none; z-index:-1;}
.pglows i{position:absolute; display:block; border-radius:50%; filter:blur(18px);}
.pglows .g1{left:-60px; top:150px; width:300px; height:220px; background:radial-gradient(circle, rgba(198,161,91,.42), rgba(198,161,91,0) 70%);}
.pglows .g2{right:-70px; top:300px; width:300px; height:240px; background:radial-gradient(circle, rgba(70,120,165,.5), rgba(70,120,165,0) 70%);}

/* ── The main input panel: frosted glass ─────────────────────────────────────────────────── */
#composeCard{
  background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 18px 40px rgba(0,0,0,.35);
  border-radius:16px;
}
/* Elements inside stay crisper than the glass. The shorthand box's visible background lives on
   the illumination wrapper (.shwrap, set inline by the app), hence !important.
   Its border colours stay the dictation design's (2026-09-24): #24415B at rest and while typing
   (focus shows the soft gold ring), gold at 60% ONLY while listening — so the gold border keeps
   meaning "the microphone is on" (the mockup's gold-on-focus would make the two look the same).
   Its width is an even 1px all round in every mode (no one-sided rule on an input), and never
   changes, so the gold-token mirror, which copies the border widths once, stays on the caret. */
#composeCard .shwrap{background:rgba(11,30,45,.62) !important;}
#composeCard #shorthand, #composeCard #shorthand2, #composeCard .shwrap[data-rail] > textarea{border-width:1px;}
/* Typing boxes show focus with a soft gold glow (and, except the shorthand box, a gold border),
   never with an offset outline: the founder's layout standard (2026-09-23). The app-wide
   :focus-visible outline stays on buttons and chips, where keyboard users need it. */
textarea:focus-visible,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="color"]):focus-visible{outline:none;}
#composeCard .type:not(.on){background:rgba(20,50,74,.62); border-color:rgba(255,255,255,.12); box-shadow:none;}
#composeCard .type:not(.on):hover{background:rgba(26,59,85,.8);}
/* four chips in one row: Consult · Referral · Procedure · SOAP (Follow-up and Handout are chosen
   by /fu and /handout, see doc-commands.js) */
#types.dt4{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px;}
#types.dt4 .type{font-size:12px; font-weight:400; line-height:normal; padding:9px 3px; border-radius:9px; min-width:0;}
/* the panel's controls use the app's own typeface, as in the mockup (buttons otherwise fall back
   to the browser's default, Arial on most computers) */
#composeCard .type, #composeCard #genBtn{font-family:var(--sans);}
#types.dt4 .type:not(.on){color:var(--glass-soft);}
#types.dt4 .type.on{font-weight:500;}
@media (max-width:350px){ #types.dt4 .type{font-size:11px;} }
/* text that sat in muted grey is brightened where it lies directly on the glass */
#composeCard .depths .depth:not(.on) .depthsub,
#composeCard .dictnote, #composeCard .statusstrip, #composeCard .briefnew{color:var(--glass-soft);}
#composeCard .statusstrip .ststep:not(.done):not(.active){color:var(--glass-soft);}
/* text inside the panel that measured below 4.5:1 is brought up to it: Generate and the active
   status step take the mockup's ink-on-gold; the faint example text and suggestions are lifted */
#composeCard #genBtn:not(:disabled):not(.casting){background:linear-gradient(135deg, #D8B863, #B8944E); color:var(--tg-paper-text);}
#composeCard .statusstrip .ststep.active{background-image:linear-gradient(135deg, #D8B863, #B8944E); color:var(--tg-paper-text);}
#composeCard .depths .depth.on .depthsub{color:var(--tg-champ-text);}
#composeCard .tk-live{opacity:.62;}
#composeCard .tk-live .cursor{color:#F0D488; opacity:1;}
#composeCard .tk-ghost{color:#A9B8BF; opacity:1;}
#composeCard .briefchev{color:var(--tg-gold-dark);}
#composeCard #briefLine{color:#E7C474;}
body.idle #composeCard #briefLine{color:var(--glass-soft);}
#composeCard .statusstrip .starrow, #composeCard .statusstrip .ststep.next{opacity:1;}
/* steps 2–3 stay crisp on the glass, as in the mockup: the app's resting fade (60%) took the
   champagne chips' text below 4.5:1 once the glass was behind it */
#composeCard .stepzone{opacity:1;}

/* Copy letter matches Generate: dark ink on the same gold (white on gold measured about 2:1).
   Its "Copied ✓" champagne state and its disabled state are unchanged. */
#copyBtn:not(:disabled):not(.done){background:linear-gradient(135deg, #D8B863, #B8944E); color:var(--tg-paper-text);}

/* ── Document type chosen by command: the champagne label on the "Document type" heading line ── */
.dtcmd{display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:3px 6px 3px 10px; border-radius:999px;
  background:var(--tg-champ); color:var(--tg-champ-text); font:400 11px/1.3 var(--sans); letter-spacing:0; text-transform:none;}
.dtcmd[hidden]{display:none;}
.dtcmd-x{appearance:none; background:transparent; border:0; cursor:pointer; color:var(--tg-champ-text); font-size:11px; line-height:1.3; padding:0 4px; border-radius:999px;}
.dtcmd-x:hover{background:rgba(110,88,40,.12);}
.dtcmd-x:focus{outline:none;}
.dtcmd-x:focus-visible{outline:2px solid var(--tg-gold-deep); outline-offset:1px;}
/* the hint under the panel */
/* a short champagne message above the foot of the panel */
.prtoast{position:fixed; left:50%; bottom:calc(var(--dock-h, 0px) + 14px); z-index:70; max-width:calc(100vw - 32px);
  transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:var(--tg-champ); color:var(--tg-champ-text); font-size:12.5px; line-height:1.4; padding:9px 14px; border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.35); transition:opacity .25s, transform .25s;}
.prtoast.on{opacity:1; transform:translateX(-50%);}
/* read aloud by screen readers, not shown */
.prsr{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ── Fallbacks ──────────────────────────────────────────────────────────────────────────── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #composeCard{background:#0F2638;}
  .pglows i{display:none;}   /* the glows go; the dark canvas stays */
}
@media (prefers-reduced-transparency: reduce){
  #composeCard{background:#0F2638; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .pglows i{display:none;}   /* the glows go; the dark canvas stays */
}
@media (prefers-reduced-motion: reduce){
  .prtoast{transition:none;}
}