/* #285 R2 (owner, 27 Oct 2026: "You must comply with the Advisor's design submission, strictly."): the page is the Advisor's reference fragment as rendered, and cas.css is its stylesheet,
   byte for byte. This file only joins it to the page. The older stylesheet sits in a cascade layer, so every rule of cas.css wins over it, and a second layer puts every element of
   the reference back to the browser's defaults outside the popup's body, so the older rules reach only the cards a popup borrows from #store (app.mjs, the R2 block). */
@layer legacy, reset;
@import url("style.css") layer(legacy);
@layer reset {
  #cas-designs :not(.popup-body, .popup-body *), #cas-designs :not(.popup-body *)::before, #cas-designs :not(.popup-body *)::after { all: revert; }
}
:root { color-scheme: light dark; }
html, body { margin: 0; background: light-dark(#edf3f6, #0b1c29); }
#store { display: none !important; }
/* Night (owner, 27 Oct 2026: "I want a night option for the page, using the same color features as the Advisor's suggestion, strictly."): every colour of cas.css is a
   light-dark() pair, so a forced color-scheme draws the reference's own night or day values and adds none. cas.css sets "light dark" on .cas-app itself, which follows the
   device whatever its parent says, so the choice is set there too (app.mjs, data-scheme from the stored cas-theme). */
:root[data-scheme="dark"], :root[data-scheme="dark"] #cas-designs .cas-app { color-scheme: dark; }
:root[data-scheme="light"], :root[data-scheme="light"] #cas-designs .cas-app { color-scheme: light; }
/* The button sits in the room cas.css keeps free at the header's right (100 px, 90 px on a phone), and is pressed as the reference's contact-type buttons are. */
#cas-designs .top { position: relative; }
#cas-designs .top .r2-scheme { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
#cas-designs .top .r2-scheme[aria-pressed=true] { background: var(--selected); color: var(--teal); border-color: var(--teal); }
@media (max-width: 610px) { #cas-designs .top .r2-scheme { right: 15px; top: 16px; transform: none; } }
/* The older cards in a popup read the older token names; here they take the reference's colours, light or dark as the device or the Night button asks. */
#cas-designs .cas-app {
  --surface: var(--panel); --accent: var(--teal); --accent-ink: var(--bg);
  --yellow: light-dark(#8A6418, #D9B25E); --red: light-dark(#A4473D, #E08A7F); --gray: light-dark(#5F6C75, #9AA8B0); --blue: light-dark(#24559E, #7AB4F0);
  --yellow-bg: light-dark(#F6EFDF, #302918); --red-bg: light-dark(#F5E6E3, #33201D); --gray-bg: light-dark(#ECEFF1, #1C2C3B); --blue-bg: light-dark(#E4EDF8, #16293F);
  --tm-land: light-dark(#E7EDF0, #1D3042); --tm-abroad: light-dark(#F2F5F7, #172737); --tm-water: light-dark(#BCD7EE, #24506F); --tm-water-line: light-dark(#6F9FCB, #4C86B3);
  --tm-state: light-dark(#8E9FAB, #5A7186); --tm-road: light-dark(#8A99A4, #6C8092); --tm-road-i: light-dark(#55656F, #9DB0BF);
}
#cas-designs .popup-body .card { border: 0; padding: 0; margin: 13px 0 0; background: none; box-shadow: none; }
#cas-designs .popup-body .card-btns, #cas-designs .popup-body .info-btn { display: none; }
/* The supply directory in the popup (#supplies, app.mjs r2Supplies): the popup's title and Close stand for its own heading and Back, and its list scrolls in place, so the limits strip
   under it stays in view. The directory is at most the popup's 85% less its frame and a title of two lines (115px: padding 44, border 2, the gap 13, two title lines 56); its list
   takes its own height and gives way first, so a short list leaves a short popup. It clears the popup's Close, which cas.css floats: a flex box beside a float is narrowed whole,
   54 px at 390 x 844, where the title takes one line and the button reaches below it. */
#cas-designs .popup-body .sup-dir > .dir-bar { display: none; }
#cas-designs .popup-body .sup-dir { display: flex; clear: right; margin-top: 13px; max-height: calc(85dvh - 115px); }
#cas-designs .popup-body .dir-main { flex: 0 1 auto; }
/* What the reference has no element for: the one control that chooses the origin hospital, and the QR box's line when no number is on file. */
#cas-designs .r2-link { border: 0; background: none; padding: 0; font: inherit; color: var(--teal); text-decoration: underline; cursor: pointer; }
#cas-designs .qr .r2-noqr { color: #3a4a55; font-size: 12px; text-align: center; }