/* SignalLab layout adapters for the pinned autosecurelogin.com design system. */
:root {
  --bg: var(--obsidian);
  --panel-soft: var(--panel-2);
  --ink: var(--text);
  --mut: var(--muted);
  --soft: var(--panel);
  --accent: var(--ice);
  --accent2: var(--ice);
  --ok: var(--green);
  --code: #dbe9ff;
  --codebg: #061127;
  --suite-header-bg: rgba(4,9,20,.92);
  --suite-header-border: rgba(76,154,255,.2);
  --suite-header-text: var(--text);
  --suite-header-muted: var(--muted);
  --suite-header-accent: var(--ice);
  --suite-header-surface: rgba(16,35,74,.8);
}
html { scroll-padding-top: 10rem; scroll-behavior:auto; }
.shell,.suite-header-primary,.suite-nav { width: min(1200px, calc(100% - 2.4rem)); }
.suite-logo { width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(76,154,255,.5)); }
.suite-brand-copy strong { color:var(--text); }
.suite-brand-copy small { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.suite-nav { display:flex; flex-wrap:wrap; gap:.2rem; justify-content:flex-start; padding-block:.25rem; }
.suite-nav a { min-height:44px; display:inline-flex; align-items:center; flex:0 0 auto; padding:.45rem .8rem; }
.suite-nav a:hover,.suite-nav a[aria-current="page"] { color:var(--text); border-color:var(--cyan); background:rgba(76,154,255,.12); }
.suite-status { color:var(--green); border-color:rgba(108,229,177,.3); background:rgba(108,229,177,.1); }
.hero { grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
.hero h1 { max-width:18ch; font-size:clamp(2.4rem,5.3vw,4.6rem); }
.hero-proof strong { color:var(--ice); }
.status-card { background:linear-gradient(160deg,rgba(15,35,74,.9),rgba(6,17,38,.95)); border-color:var(--line); box-shadow:var(--shadow); }
.notice { background:none; border:0; box-shadow:none; padding:0; }
input,select,textarea { background:#061127; color:var(--text); border-color:var(--line); }
input[type="checkbox"] { accent-color:var(--cyan); }
fieldset.envelope { border-color:var(--line); }
.hardware-icon { color:var(--ice); background:rgba(76,154,255,.12); }
.hardware-item { background:rgba(7,19,40,.65); border-color:var(--line-soft); }
.panel a:not(.button),footer a,.guide a,.backbar a { color:var(--ice); text-decoration:underline; text-underline-offset:3px; }
.button-primary { color:#061229; }
.button-secondary { color:var(--text); }
.panel a.button-primary { color:#061229; }
.android-download { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; margin-bottom:1.25rem; align-items:center; }
.download-actions { display:flex; flex-direction:column; gap:.75rem; }
.update-notice { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); z-index:100; width:min(560px,calc(100% - 2rem)); display:flex; gap:1rem; align-items:center; padding:1rem; background:var(--navy); border:1px solid var(--cyan); border-radius:var(--radius); box-shadow:var(--shadow); }
[hidden] { display:none !important; }
.update-notice p { margin:0; }
.grid>* { min-width:0; }
#audit-log,#session-log { max-width:100%; overflow-x:auto; }
.wrap .goal,.wrap .toc,.wrap .references { background:var(--panel); border-color:var(--line); }
.wrap pre { background:var(--codebg); color:var(--text); }
.wrap .pill { color:var(--ice); background:var(--panel); border-color:var(--line); }
.wrap .tag { background:var(--ice); color:#061229; }
.wrap a { color:var(--ice); text-decoration:underline; }
.wrap,.backbar,.breadcrumb { width:min(1200px,calc(100% - 2.4rem)); max-width:none; padding-inline:0; }
.wrap { padding-top:2.5rem; }
.wrap>p,.wrap>ul,.wrap>ol { max-width:90ch; }
pre,code { overflow-wrap:anywhere; }
@media(max-width:850px) {
  .hero,.android-download { grid-template-columns:1fr; }
  .download-actions { flex-direction:row; flex-wrap:wrap; }
}
@media(max-width:560px) {
  .shell,.suite-header-primary,.suite-nav { width:calc(100% - 1.5rem); }
  .suite-affiliation { display:none; }
  .suite-header-primary { gap:.6rem; }
  .suite-brand { min-width:0; }
  .suite-nav { flex-wrap:nowrap; overflow-x:auto; }
  .hero h1 { max-width:100%; }
  .wrap,.backbar,.breadcrumb { width:calc(100% - 1.5rem); }
  .update-notice { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print {
  body { background:#fff; color:#111; }
  h1,h2 { background:none; color:#111; -webkit-text-fill-color:#111; }
  .update-notice { display:none; }
}

/* ASL splash art behind the hero, 2026-10-11 (same treatment as autosecurelogin.com
   assets/asl-subsite-art.css): art on the right, a dark scrim on the left, every edge
   faded so it never reads as a pasted rectangle. Phones get the art as a band above the copy. */
body:has(.hero.has-splash) { overflow-x:clip; }
.hero.has-splash { overflow:visible; }
.hero.has-splash > * { position:relative; z-index:1; }
.hero.has-splash > .hero-splash { position:absolute; z-index:-1; top:-2rem; bottom:-2rem; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none; overflow:hidden;
  background:radial-gradient(58% 52% at 78% 30%, rgba(76,154,255,.16), transparent 72%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%); }
.hero-splash img { position:absolute; top:50%; right:-4%; width:min(64vw,1160px); height:auto; max-width:none; transform:translateY(-50%); opacity:.66;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
  mask-composite:intersect; }
.hero-splash::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(4,9,20,.94) 0%, rgba(4,9,20,.82) 34%, rgba(4,9,20,.3) 60%, rgba(4,9,20,.1) 100%); }
/* the store line: a visible link to the Google Play listing with the listing's price */
.hero-store { margin:.2rem 0 1.1rem; }
.store-link { display:inline-flex; align-items:center; gap:.6rem; min-height:44px; padding:.45rem .55rem .45rem 1rem; border:1px solid rgba(156,200,255,.45); border-radius:999px; background:rgba(8,20,44,.72); color:var(--text); font-weight:700; text-decoration:none; }
.store-link:hover { border-color:var(--ice); background:rgba(76,154,255,.16); color:#fff; }
.store-price { display:inline-block; padding:.2rem .7rem; border-radius:999px; background:var(--ice); color:#061229; font-weight:800; }
@media(min-width:801px) and (max-width:1100px) { .hero-splash img { opacity:.4; } }
@media(max-width:800px) {
  .hero.has-splash { padding-top:16.5rem; }
  .hero.has-splash > .hero-splash { top:0; bottom:auto; height:21rem; -webkit-mask-image:linear-gradient(180deg, #000 0, #000 78%, transparent 100%); mask-image:linear-gradient(180deg, #000 0, #000 78%, transparent 100%); }
  /* wider than the phone so the side edges fall outside the band; top and bottom fade into the page */
  .hero-splash img { left:50%; right:auto; top:0; width:max(116vw,24rem); height:auto; transform:translateX(-50%); opacity:.96;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 56%, transparent 96%); -webkit-mask-composite:source-over;
    mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 56%, transparent 96%); mask-composite:add; }
  .hero-splash::before { background:linear-gradient(180deg, rgba(4,9,20,.05) 0, rgba(4,9,20,.05) 10rem, rgba(4,9,20,.9) 18rem, rgba(4,9,20,.9) 100%); }
}
@media print { .hero-splash { display:none; } }