/* Glassability's buttons, one copy for the public sites, the course report, the kits and the portal pages
   (served at /fonts/glass.css beside fonts.css, the one path both sites share). 2026-09-26.

   The look is glass: a sheen along the top, a pool of light along the bottom, and the base colour left alone
   where the letters sit. The sheen and the pool are each a 13 px band, and the letters start 15 px from either
   edge (the padding), so no line of a label, wrapped or not, is ever under either: the contrast measured under
   the letters is the base gradient's alone. Long labels may wrap (1.4.10 reflow at 320 px).

   Light theme: dark glass, white letters (white on #2A6A88 is 6.3:1, on the middle band about 6.9:1).
   Dark theme: light aqua glass, near-black letters (#04141C on #55ABBF is 8.9:1; the top is lighter still).
   Every state keeps a 3:1 edge (the outer 1 px ring), a copper focus ring 3 px off the edge (2.4.7, 2.4.11), a
   44 px target (2.5.8); chosen and done states also carry a word or a check mark, never colour alone (1.4.1).
   prefers-contrast: more drops the sheen and the pool for a flat, higher-contrast face. */

.gbtn { --top: #2A6A88; --bot: #0E3850; --pool: 59,227,227; --edge: #0A2C40; --ring: #B5652C;
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px;
  padding: 15px 1.4rem; border: 0; border-radius: .65rem; color: #fff; text-decoration: none; cursor: pointer;
  font: 700 .92rem/1.15 "Source Sans 3", "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  background: linear-gradient(180deg, var(--top) 0%, var(--bot) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -2px 3px rgba(150,245,245,.35),
              0 0 0 1px var(--edge), 0 8px 18px rgba(11,27,51,.35); }
.gbtn::before { content: ""; position: absolute; inset: 2px 2% auto 2%; height: 13px; z-index: -1; pointer-events: none;
  border-radius: .55rem .55rem 55% 55% / .55rem .55rem 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 100%); }
.gbtn::after { content: ""; position: absolute; inset: auto 0 0 0; height: 13px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 80% 120% at 50% 118%, rgba(var(--pool),.8) 0%, rgba(var(--pool),.35) 45%, rgba(var(--pool),0) 78%); }
.gbtn:hover { filter: brightness(1.07); }
.gbtn:active { transform: translateY(1px); }
.gbtn:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.gbtn.copper { --top: #A65B28; --bot: #5E2C08; --pool: 255,196,130; --edge: #4A2306; }
.gbtn.green, .gbtn.done { --top: #347E4D; --bot: #17432A; --pool: 150,255,190; --edge: #123A22; }
.gbtn.done { cursor: default; }
.gbtn.grey, .gbtn[aria-disabled="true"] { --top: #5A6874; --bot: #323D48; --pool: 220,230,240; --edge: #28313A; text-shadow: none; cursor: default; }
.gbtn[aria-disabled="true"]:hover { filter: none; }
.gbtn.chosen { outline: 3px solid var(--ring); outline-offset: 3px; }
.gbtn .ext { font-size: .8em; opacity: .85; }
/* the button the page wants pressed next: a steady glow (not motion, so it can stay), plus two pulses on arrival */
.gbtn.lit { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -2px 3px rgba(150,245,245,.35),
                        0 0 0 1px var(--edge), 0 8px 18px rgba(11,27,51,.35), 0 0 18px 3px rgba(59,227,227,.5); }
@keyframes gbtn-lit { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -2px 3px rgba(150,245,245,.35),
                        0 0 0 1px var(--edge), 0 8px 18px rgba(11,27,51,.35), 0 0 28px 6px rgba(59,227,227,.75); } }
@media (prefers-reduced-motion: no-preference) { .gbtn.lit { animation: gbtn-lit 2.2s ease-in-out 2; } .gbtn { transition: filter .15s; } }

/* the public sites' calls to action: the same glass in sentence case */
.gbtn.cta { text-transform: none; letter-spacing: .02em; font-size: 1rem; --top: #227476; --bot: #0F4748; --pool: 120,235,225; --edge: #0A3536; }

/* dark theme: light aqua glass, near-black letters. Only pages that switch themes carry html.dual (the image, file
   and caption kits); the report, the portal pages and the public sites are light whatever the system prefers. */
@media (prefers-color-scheme: dark) { html.dual:not([data-theme="light"]) .gbtn {
  --top: #C6EEF4; --bot: #55ABBF; --ink: #04141C; --rim: #12455C; --glow: 220,255,252; --ring: #E0946A;
  color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -2px 3px rgba(255,255,255,.45),
              0 0 0 1px var(--rim), 0 8px 18px rgba(0,0,0,.45); }
  html.dual:not([data-theme="light"]) .gbtn::before { inset: 0 0 auto 0; height: 50%; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.04) 100%); }
  html.dual:not([data-theme="light"]) .gbtn::after { height: 34%;
    background: radial-gradient(ellipse 80% 100% at 50% 112%, rgba(var(--glow),1) 0%, rgba(var(--glow),.45) 45%, rgba(var(--glow),0) 78%); }
  html.dual:not([data-theme="light"]) .gbtn:hover { filter: brightness(1.04) saturate(1.1); }
  html.dual:not([data-theme="light"]) .gbtn.copper { --top: #F6D8BC; --bot: #D3925A; --ink: #2A1404; --rim: #7A3D0E; --glow: 255,232,200; }
  html.dual:not([data-theme="light"]) .gbtn.green, html.dual:not([data-theme="light"]) .gbtn.done { --top: #CDEFD8; --bot: #69BB86; --ink: #07200F; --rim: #245A34; --glow: 205,255,220; }
  html.dual:not([data-theme="light"]) .gbtn.grey, html.dual:not([data-theme="light"]) .gbtn[aria-disabled="true"] { --top: #E6ECF0; --bot: #A6B2BE; --ink: #1E2730; --rim: #4E5E6C; --glow: 255,255,255; }
  html.dual:not([data-theme="light"]) .gbtn.lit { box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.55),
                        0 0 0 1px var(--rim), 0 8px 18px rgba(0,0,0,.45), 0 0 20px 4px rgba(120,240,240,.55); }
}
:root[data-theme="dark"] .gbtn {
  --top: #C6EEF4; --bot: #55ABBF; --ink: #04141C; --rim: #12455C; --glow: 220,255,252; --ring: #E0946A;
  color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -2px 3px rgba(255,255,255,.45),
              0 0 0 1px var(--rim), 0 8px 18px rgba(0,0,0,.45); }
:root[data-theme="dark"] .gbtn::before { inset: 0 0 auto 0; height: 50%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.04) 100%); }
:root[data-theme="dark"] .gbtn::after { height: 34%;
  background: radial-gradient(ellipse 80% 100% at 50% 112%, rgba(var(--glow),1) 0%, rgba(var(--glow),.45) 45%, rgba(var(--glow),0) 78%); }
:root[data-theme="dark"] .gbtn:hover { filter: brightness(1.04) saturate(1.1); }
:root[data-theme="dark"] .gbtn.copper { --top: #F6D8BC; --bot: #D3925A; --ink: #2A1404; --rim: #7A3D0E; --glow: 255,232,200; }
:root[data-theme="dark"] .gbtn.green, :root[data-theme="dark"] .gbtn.done { --top: #CDEFD8; --bot: #69BB86; --ink: #07200F; --rim: #245A34; --glow: 205,255,220; }
:root[data-theme="dark"] .gbtn.grey, :root[data-theme="dark"] .gbtn[aria-disabled="true"] { --top: #E6ECF0; --bot: #A6B2BE; --ink: #1E2730; --rim: #4E5E6C; --glow: 255,255,255; }
:root[data-theme="dark"] .gbtn.lit { box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.55),
                      0 0 0 1px var(--rim), 0 8px 18px rgba(0,0,0,.45), 0 0 20px 4px rgba(120,240,240,.55); }

/* a reader who asked the system for more contrast: flat faces, no sheen or pool, a 2 px edge */
@media (prefers-contrast: more) {
  .gbtn { background: var(--bot); text-shadow: none; box-shadow: 0 0 0 2px var(--edge); }
  .gbtn::before, .gbtn::after { display: none; }
  .gbtn.lit, .gbtn.chosen { outline: 3px solid var(--ring); outline-offset: 3px; animation: none; }
  html.dual:not([data-theme="light"]) .gbtn, :root[data-theme="dark"] .gbtn { background: var(--top); box-shadow: 0 0 0 2px var(--rim); }
}