/* ============================================================================
   Mathews SecureUpload — machined gunmetal + brushed brass.
   Type: IBM Plex Sans (display/body) + IBM Plex Mono (data/labels).
   ========================================================================== */

@font-face { font-family:'Plex Sans'; src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex Sans'; src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex Sans'; src:url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

/* ---- Theme palettes (dark default). Colors are tokens only; components never
   hardcode a color. --accent/--on-accent are brass as a SURFACE (buttons/gauge);
   --brass is brass as TEXT/icon, kept contrast-safe per theme. ------------- */
:root {
  --ink:      #0C0E10;
  --ink-2:    #0f1215;
  --panel:    #15181C;
  --panel-2:  #1B2025;
  --hair:     #2A323A;
  --hair-soft:#1F252B;
  --text:     #E8EDF1;
  --muted:    #9AA6B2;   /* AA on --ink */
  --muted-2:  #869099;   /* AA on --ink for small text */
  --brass:    #C6A15B;   /* brass TEXT/icon */
  --brass-hi: #DcB874;
  --brass-dim:#7d6534;
  --steel:    #6BA5C4;
  --rust:     #D2745E;   /* AA on --ink */
  --accent:     #C6A15B; /* brass SURFACE */
  --accent-hi:  #DcB874; /* hover */
  --on-accent:  #17130a; /* text on --accent */
  --grid-line:  rgba(255,255,255,.02);
  --glow:       rgba(198,161,91,.10);
  --topbar-bg:  rgba(12,14,16,.72);
  --input-focus-bg: #181d22;
  --focus:      #C6A15B;

  --font-display:'Plex Sans', system-ui, sans-serif;
  --font-body:   'Plex Sans', system-ui, sans-serif;
  --font-mono:   'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --maxw: 1080px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="light"] {
  --ink:      #F5F3EC;
  --ink-2:    #EEEBE2;
  --panel:    #FFFFFF;
  --panel-2:  #F4F1EA;
  --hair:     #D6D0C3;
  --hair-soft:#E7E2D8;
  --text:     #1D2126;
  --muted:    #55606A;   /* AA on light bg */
  --muted-2:  #5C6771;   /* AA on light bg */
  --brass:    #7A5F28;   /* bronze text, AA on light */
  --brass-hi: #6E5320;
  --brass-dim:#B99B5E;
  --steel:    #215F7B;   /* AA on light */
  --rust:     #A3341F;
  --accent:     #C6A15B;
  --accent-hi:  #B08637;
  --on-accent:  #17130a;
  --grid-line:  rgba(0,0,0,.035);
  --glow:       rgba(198,161,91,.10);
  --topbar-bg:  rgba(245,243,236,.85);
  --input-focus-bg: #FFFFFF;
  --focus:      #7A5F28;
}

[data-theme="hc"] {
  --ink:      #000000;
  --ink-2:    #000000;
  --panel:    #0A0A0A;
  --panel-2:  #141414;
  --hair:     #FFFFFF;
  --hair-soft:#9AA0A6;
  --text:     #FFFFFF;
  --muted:    #EDEDED;
  --muted-2:  #D6D6D6;
  --brass:    #F2D27E;
  --brass-hi: #F7DE96;
  --brass-dim:#F2D27E;
  --steel:    #8FD3EC;
  --rust:     #FF9C82;
  --accent:     #F2D27E;
  --accent-hi:  #F7DE96;
  --on-accent:  #000000;
  --grid-line:  transparent;
  --glow:       transparent;
  --topbar-bg:  #000000;
  --input-focus-bg: #141414;
  --focus:      #F2D27E;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  /* Precision grid + a single brass-tinted machining glow, both very faint. */
  background-image: none;
  background-size: 100% 100%, 44px 44px, 44px 44px;
  background-attachment: fixed;
}

/* ---------------------------------------------------------------- primitives */

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--brass), transparent);
}

h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.021em; margin: 0; }

.display {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.04;
  color: var(--text);
}
.display em { font-style: normal; color: var(--brass); }

.lede { color: var(--muted); font-size: 1.02rem; max-width: 46ch; margin: 1.1rem 0 0; }

.mono { font-family: var(--font-mono); }

/* focus visibility everywhere */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
[data-theme="hc"] :focus-visible { outline-width: 3px; }

/* ------------------------------------------------------------------- buttons */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .82rem 1.35rem;
  cursor: pointer;
  transition: transform .15s var(--ease), background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  width: 100%;
}
.btn--primary:not(:disabled):hover { background: var(--accent-hi); transform: translateY(-1px); }
.btn--primary:not(:disabled):active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--hair);
  padding: .5rem .85rem;
  font-size: .82rem;
}
.btn--ghost:hover { color: var(--text); border-color: var(--brass-dim); }

/* -------------------------------------------------------------- login screen */

body.login {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 2rem 1.25rem 0;
}

.login-shell { width: 100%; max-width: 430px; margin: auto; }

.brandmark { display: flex; justify-content: center; margin-bottom: 2.4rem; }
.brandmark img { height: 60px; width: auto; opacity: .96; }

.card {
  position: relative;
  background: linear-gradient(180deg, var(--panel), var(--ink-2));
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 2.3rem 2.1rem 2.1rem;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
}
/* a thin brass seam across the card top — machined edge */
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 1px; margin: 0 auto; width: 64%;
  background: linear-gradient(90deg, transparent, var(--brass-dim), transparent);
}

.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}
.input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .8rem .9rem;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input--mono { font-family: var(--font-mono); letter-spacing: .02em; }
.input::placeholder { color: var(--muted-2); }
.input:focus {
  outline: none;
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgba(107,165,196,.16);
  background: var(--input-focus-bg);
}
/* A toggled-off (disabled) field reads as greyed out, not just inert — theme-safe
   via opacity + muted text; -webkit-text-fill-color forces the value text grey in
   WebKit/Blink, which otherwise keep the explicit `color` on disabled inputs. */
.input:disabled {
  opacity: .5;
  cursor: not-allowed;
  color: var(--muted-2);
  -webkit-text-fill-color: var(--muted-2);
}

.login-form { margin-top: 1.9rem; }
.card .btn--primary { margin-top: .5rem; }

.assurance {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: 1.5rem; padding-top: 1.3rem;
  border-top: 1px solid var(--hair-soft);
  color: var(--muted);
  font-size: .84rem; line-height: 1.5;
}
.assurance svg { flex: none; margin-top: 1px; color: var(--brass); }

.page-footnote {
  margin-top: 1.8rem; text-align: center;
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
}

/* Explanatory tooltips on the footnote terms (hover + keyboard focus + tap). */
.footnote-term {
  position: relative; cursor: help; color: var(--muted-2);
  border-bottom: 1px dotted var(--hair); outline-offset: 3px;
}
.footnote-term:hover, .footnote-term:focus-visible { color: var(--brass); }
.footnote-term .tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: min(260px, 78vw); z-index: 5;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--brass-dim); border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  padding: .7rem .85rem;
  font-family: var(--font-body); font-size: .78rem; line-height: 1.5;
  letter-spacing: 0; text-transform: none; text-align: left; font-weight: 400;
  opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility .14s ease;
  pointer-events: none;
}
/* little caret */
.footnote-term .tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--brass-dim);
}
.footnote-term:hover .tip,
.footnote-term:focus .tip,
.footnote-term:focus-within .tip { opacity: 1; visibility: visible; }

/* form-level status (login + app share .status) */
.status { font-size: .88rem; margin-top: 1rem; min-height: 1.2em; }
.status--error   { color: var(--rust); }
.status--working { color: var(--steel); }
.status--success { color: var(--brass); }

/* --------------------------------------------------------------- app / upload */

body.app { display: flex; flex-direction: column; min-height: 100vh; }
body.app .site-footer { margin-top: auto; } /* keep footer flush to the viewport bottom on short pages */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--hair-soft);
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5;
}
.topbar img { height: 32px; width: auto; }
.topbar .who {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .1em; color: var(--muted);
}
.topbar .who b { color: var(--text); font-weight: 500; }

.wrap { max-width: 640px; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) 1.25rem 4rem; }

.intro { margin-bottom: 2.2rem; }

/* the signature: precision reticle dropzone */
.dropzone {
  position: relative;
  display: block;
  border: 1px dashed var(--hair);
  border-radius: var(--radius);
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(107,165,196,.05), transparent 70%),
    var(--panel);
  padding: 3rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--brass-dim); background-color: var(--panel-2); }
.dropzone:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone i.corner {
  position: absolute; width: 16px; height: 16px;
  border: 0 solid var(--brass); opacity: .7;
  transition: all .25s var(--ease);
}
.dropzone i.tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; }
.dropzone i.tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
.dropzone i.bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; }
.dropzone i.br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }
.dropzone:hover i.corner, .dropzone.is-drag i.corner { opacity: 1; }
.dropzone:hover i.tl, .dropzone.is-drag i.tl { top: 8px; left: 8px; }
.dropzone:hover i.tr, .dropzone.is-drag i.tr { top: 8px; right: 8px; }
.dropzone:hover i.bl, .dropzone.is-drag i.bl { bottom: 8px; left: 8px; }
.dropzone:hover i.br, .dropzone.is-drag i.br { bottom: 8px; right: 8px; }

.dropzone .glyph {
  width: 34px; height: 34px; margin: 0 auto .9rem; color: var(--brass); display: block;
}
.dropzone .dz-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.dropzone .dz-sub { display: block; color: var(--muted); font-size: .84rem; margin-top: .35rem; }
.filename {
  display: block;
  font-family: var(--font-mono); font-size: .82rem; color: var(--steel);
  margin-top: .9rem; word-break: break-all; letter-spacing: .01em;
}
.filename:empty { display: none; }

.controls { margin-top: 1.5rem; }

/* instrument gauge — the progress signature */
.gauge-wrap { margin-top: 1.6rem; }
.gauge {
  position: relative; height: 8px; border-radius: 999px;
  background: var(--panel-2); overflow: hidden;
  border: 1px solid var(--hair-soft);
}
.gauge__fill {
  height: 100%; width: 0%;
  background: var(--steel);
  transition: width .25s var(--ease), background-color .4s;
}
/* tick overlay so the bar reads like a machined gauge */
.gauge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 21px, rgba(12,14,16,.85) 21px 22px);
}
.gauge-wrap[data-phase="uploading"] .gauge__fill,
.gauge-wrap[data-phase="delivered"] .gauge__fill { background: var(--accent); }
.gauge__label {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: .6rem;
}

/* how-it-works trio */
.how { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hair-soft); display: grid; gap: 1.4rem; }
.how .row { display: flex; gap: .95rem; }
.how .num { font-family: var(--font-mono); font-size: .74rem; color: var(--brass); padding-top: .15rem; min-width: 2.2em; }
.how .row h3 { font-family: var(--font-display); font-size: .96rem; font-weight: 600; margin: 0 0 .15rem; }
.how .row p { margin: 0; color: var(--muted); font-size: .87rem; }

/* animated shimmer only while actively encrypting */
@media (prefers-reduced-motion: no-preference) {
  .gauge-wrap[data-phase="encrypting"] .gauge__fill {
    background-image: linear-gradient(90deg, var(--steel), #9fd0e2, var(--steel));
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
  }
  @keyframes shimmer { to { background-position: 200% 0; } }

  .card, .intro, .dropzone { animation: rise .6s var(--ease) both; }
  .dropzone { animation-delay: .06s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* success modal — prominent confirmation of a completed upload */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(6,8,10,.74);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* the flex rule above would otherwise override the hidden attribute */
.modal-overlay[hidden] { display: none; }
.modal-card {
  position: relative;
  width: 100%; max-width: 430px;
  background: linear-gradient(180deg, var(--panel), var(--ink-2));
  border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 2.5rem 2.1rem 2.1rem; text-align: center;
  box-shadow: 0 30px 90px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.03);
}
.modal-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; margin: 0 auto; width: 60%;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.modal-close {
  position: absolute; top: .8rem; right: .9rem;
  background: none; border: 0; color: var(--muted-2); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: .3rem; border-radius: 4px;
}
.modal-close:hover { color: var(--text); }
.success-mark {
  width: 66px; height: 66px; margin: 0 auto 1.3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brass); border: 1.5px solid var(--brass-dim); background: rgba(198,161,91,.08);
}
.success-mark svg { width: 30px; height: 30px; }
.modal-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; }
.modal-card p { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: .7rem auto 1.5rem; max-width: 32ch; }
.ref {
  border: 1px solid var(--hair-soft); border-radius: var(--radius-sm);
  background: var(--panel-2); padding: .75rem .9rem; margin-bottom: 1.6rem;
}
.ref-label {
  display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: .25rem;
}
.ref-id { font-family: var(--font-mono); color: var(--brass-hi); font-size: .92rem; word-break: break-all; }
.modal-card .modal-instruct { color: var(--text); font-size: .88rem; line-height: 1.5; margin: 0 auto 1.5rem; max-width: 34ch; }
.modal-actions { display: flex; gap: .7rem; }
.modal-actions .btn { flex: 1; width: auto; padding: .72rem 1rem; font-size: .9rem; }

/* small button variant + on-page uploads log (sender side) */
.btn--sm { padding: .45rem .8rem; font-size: .8rem; }

.uploads-log { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--hair-soft); }
.uploads-log__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.uploads-log__head h2 {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); font-weight: 500; margin: 0;
}
.uploads-log__note { color: var(--muted); font-size: .85rem; margin: .5rem 0 1.1rem; }
.ulog-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ulog-table th {
  text-align: left; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2); font-weight: 500; padding: .5rem .6rem;
  border-bottom: 1px solid var(--hair);
}
.ulog-table td { padding: .6rem .6rem; border-bottom: 1px solid var(--hair-soft); vertical-align: middle; }
.ulog-table tr:last-child td { border-bottom: 0; }
.ulog-table .file-cell { color: var(--text); word-break: break-all; }
.ulog-table .ref-cell { font-family: var(--font-mono); color: var(--steel); font-size: .8rem; word-break: break-all; }
.ulog-table .time-cell { color: var(--muted); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .modal-overlay { animation: overlay-in .2s var(--ease) both; }
  .modal-card { animation: card-in .32s var(--ease) both; }
  .success-mark { animation: mark-pop .45s var(--ease) .1s both; }
  @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes mark-pop { 0% { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
}

@media (max-width: 480px) {
  .card { padding: 1.8rem 1.4rem; }
  .topbar .who span.label { display: none; }
}

/* ---------------------------------------------- accessibility + site footer */

/* Visually hidden but still focusable / read by assistive tech. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip-to-content link — appears on keyboard focus. */
.skip-link {
  position: absolute; left: .5rem; top: -3.5rem; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: .55rem .95rem; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .9rem; text-decoration: none;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: .5rem; }

/* Light theme: the all-white logo needs to render dark on a light background. */
[data-theme="light"] .brandmark img,
[data-theme="light"] .topbar img { filter: brightness(0); }

/* HC: heavier control borders for definition against pure black/white. */
[data-theme="hc"] .input,
[data-theme="hc"] .btn { border-width: 2px; }

.site-footer {
  border-top: 1px solid var(--hair-soft);
  padding: 1rem clamp(1.25rem, 4vw, 2.4rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  color: var(--muted-2);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  /* Match the topbar's frosted bar so the footer reads solid, not transparent. */
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.site-footer .copyright { color: var(--muted-2); }
.theme-control { display: inline-flex; align-items: center; gap: .35rem; }
.theme-control__label {
  color: var(--muted-2); text-transform: uppercase; letter-spacing: .12em;
  font-size: .66rem; margin-right: .2rem;
}
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: var(--panel-2); color: var(--muted-2);
  border: 1px solid var(--hair); border-radius: var(--radius-sm);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.theme-btn svg { width: 17px; height: 17px; display: block; }
.theme-btn:hover { color: var(--brass); border-color: var(--brass-dim); }
.theme-btn.is-active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
/* login/admin-login pages: footer sits at the bottom, card centers above it */
body.login .site-footer { width: 100%; border-top: 0; justify-content: center; gap: 1.5rem; }

/* ---- Cipher page background (see bg.js) ------------------------------- */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#scrim { position: absolute; inset: 0; pointer-events: none; }
/* login: calm the centered column so the mark + footnote keep AA over the motif */
#bg[data-bg-mode="login"] #scrim {
  background: radial-gradient(ellipse 48% 86% at 50% 50%, var(--ink) 0%, var(--ink) 30%, transparent 76%);
}
/* app: a gentle top wash behind the page-head text */
#bg[data-bg-mode="app"] #scrim {
  background: linear-gradient(180deg, var(--ink) 0%, transparent 24%);
}
/* keep real content above the fixed #bg layer */
.login-shell, body.app main, .site-footer { position: relative; z-index: 1; }
/* crisp on-background text over the motif */
.brandmark { text-shadow: 0 1px 8px var(--ink); }
.page-footnote .footnote-term { text-shadow: 0 1px 6px var(--ink), 0 0 3px var(--ink); }