/* ==========================================================================
   assets/css/brutal-lite-web.css — Brutal Lite v3.1, WEB adapter
   Maps the preview's iPhone-frame concepts onto the real website's own
   viewport. Loads AFTER assets/css/brutal-lite.css (the byte-identical copy
   of lite5/lite.css — Appendix A). NEVER redefine a token, size, colour,
   radius or shadow here — those live in brutal-lite.css only. This file only
   repositions things that assumed a #screen/#stage preview frame that does
   not exist on the real site (the page IS the browser viewport).
   See brutal-lite-work/STRICT-CONTRACT.md for the full contract.
   ========================================================================== */

/* ---------- page background ---------- */
html.lite-v31, body.lite-v31{
  background:var(--paper,#ffffff);
}

/* 1. Grey page: same rule as brutal-lite.css's `.page-grey #screen`, but the
      real page has no #screen — the grey goes straight on <body>. */
body.lite-v31.page-grey{ background:#f4f5f7; }
body.lite-v31.page-grey .statusbar{ background:linear-gradient(rgba(244,245,247,.96) 70%,rgba(244,245,247,0)); }
body.lite-v31.page-grey .sticky-bottom,
body.lite-v31.page-grey .plan-bar{ background:linear-gradient(rgba(244,245,247,0),#f4f5f7 30%); }
body.lite-v31.page-grey .card, body.lite-v31.page-grey .list{ background:#fff; }

/* ---------- .page: same padding as the preview, safe-area aware ---------- */
.lite-v31 .page{
  padding:calc(58px + env(safe-area-inset-top,0px)) 16px calc(120px + env(safe-area-inset-bottom,0px));
  max-width:393px;margin:0 auto;position:relative;min-height:100vh;
}
.lite-v31 .page.no-footer{ padding-bottom:calc(40px + env(safe-area-inset-bottom,0px)); }
.lite-v31 .page.has-plan-bar{ padding-bottom:calc(200px + env(safe-area-inset-bottom,0px)); }

/* ---------- status-bar fade: fixed to the viewport top, no fake clock ----------
   brutal-lite.css's .statusbar is a real-device status bar readout (time +
   signal/wifi/battery) meant for the preview's fake phone screen. On the web
   there is no fake clock — only the scroll-under fade behind it is reused,
   fixed to the real viewport. Pages do not print a .statusbar element on the
   web; this is the equivalent fade, same gradient values as Appendix A. */
.lite-v31 .status-fade{
  position:fixed;top:0;left:0;right:0;height:calc(50px + env(safe-area-inset-top,0px));z-index:490;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.96) 70%,rgba(255,255,255,0));
}
body.lite-v31.page-grey .status-fade{ background:linear-gradient(rgba(244,245,247,.96) 70%,rgba(244,245,247,0)); }
.lite-v31 .status-fade.on-dark{ background:none; }

/* ---------- bottom tab bar: fixed to the viewport, identical for <a> as <button> ----------
   The site renders the 5 tabs as <a> (partials/footer.php), not <button> —
   brutal-lite.css only styles `.island-footer button`. Repeat the exact same
   rules for `a` children here (no value changes) and switch position to fixed
   (the preview used absolute inside #screen). */
.lite-v31 .island-footer{
  position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:393px;
  height:calc(90px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  z-index:300;display:flex;align-items:stretch;justify-content:space-around;
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.lite-v31 .island-footer a{
  flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font:700 10px/1 var(--font-ui);cursor:pointer;text-decoration:none;min-height:48px;
}
.lite-v31 .island-footer a i{ font-size:22px;width:46px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:10px; }
.lite-v31 .island-footer a.active{ color:var(--ink); }
.lite-v31 .island-footer a.active i{ background:var(--yellow);border:var(--bd);box-shadow:var(--sh-sm); }

/* ---------- sticky bars: fixed instead of absolute, centred to the 393px column ---------- */
.lite-v31 .plan-bar{
  position:fixed;left:0;right:0;bottom:calc(90px + env(safe-area-inset-bottom,0px));
  margin:0 auto;max-width:393px;z-index:260;
}
.lite-v31 .sticky-bottom{
  position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:393px;z-index:250;
  padding-bottom:calc(42px + env(safe-area-inset-bottom,0px));
}

/* ---------- toast: fixed at top 58px (same look as Appendix A, fixed not absolute) ---------- */
.lite-v31 .v31-toast{
  position:fixed;left:50%;top:calc(58px + env(safe-area-inset-top,0px));
}

/* ---------- desktop: centre the 393px column with a neutral surround ---------- */
@media (min-width:481px){
  /* .page / .island-footer / .plan-bar / .sticky-bottom already centre via
     left:0;right:0;margin:0 auto;max-width:393px — no extra rule needed. */
  html.lite-v31, body.lite-v31{ background:#e8e9ec; }
  .lite-v31 .page{ background:var(--paper,#ffffff); box-shadow:var(--soft); }
  body.lite-v31.page-grey .page{ background:#f4f5f7; }
}

/* ---------- neutralise the old brutal.css leaks (orchestrator, 2026-10-09) ----------
   brutal.css still loads before brutal-lite.css for not-yet-rebuilt markup. It gives
   .card / .chip / .seg hard shadows (and .card a 16px padding) that brutal-lite.css's
   own rules never reset, which broke "one hard shadow per screen" on every page.
   Only resets what Appendix A doesn't set; .card.brand / .card.pad (higher specificity)
   keep their Appendix A values. */
body.lite-v31 .card{box-shadow:none;padding:0;}
body.lite-v31 .chip{box-shadow:none;}
body.lite-v31 .seg{border:0;box-shadow:none;}
/* brutal.css's base .btn also carries a hard shadow; Appendix A only gives shadows to
   .btn-brand / .btn-ink / .btn-blue, so calm buttons must have none. */
body.lite-v31 .btn:not(.btn-brand):not(.btn-ink):not(.btn-blue){box-shadow:none;}
/* Safe-area shorthands used by older page CSS (were defined only in the retired lite.css). */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);}
/* The design's .input is the field box; a real <input>/<textarea> inside it must be
   invisible chrome (browser/brutal.css defaults were drawing a second box inside). */
body.lite-v31 .input input,body.lite-v31 .input textarea,body.lite-v31 .input select{
  flex:1;min-width:0;border:0;background:transparent;box-shadow:none;outline:none;padding:0;margin:0;
  font:inherit;font-size:15px;color:var(--ink);height:100%;border-radius:0;-webkit-appearance:none;appearance:none;}
body.lite-v31 .input input::placeholder,body.lite-v31 .input textarea::placeholder{color:var(--muted-2);}
body.lite-v31 .input:focus-within{border:var(--bd);box-shadow:var(--sh-sm);}