/* ==========================================================================
   L4 — GLASS
   The surfaces, lifted off the page.

   Verity is a working tool: people read four-figure sums off it for hours.
   So the glass is applied where it flatters and never where it costs
   legibility or speed.

     · Panels are frosted and layered - masthead, cards, tiles, drawer,
       menus, notices. Each one is at least 55% white over the ambient wash,
       which keeps black text above 12:1.
     · Blur is expensive, so only those dozen surfaces carry it. Table rows,
       badges, inputs and buttons are translucent but NOT blurred: a blurred
       row would cost a repaint on every hover of a thousand-row ledger.
     · Nothing that carries a figure sits on a gradient. The wash lives behind
       the panels, never inside them.

   Two escape hatches, both honoured automatically: a browser without
   backdrop-filter gets solid surfaces, and so does anyone who has asked their
   system to reduce transparency.
   ========================================================================== */

:root{
  /* The panes, from the most see-through to the most solid. */
  --glass:rgba(255,255,255,.66);
  --glass-2:rgba(255,255,255,.78);
  --glass-3:rgba(255,255,255,.86);
  --glass-edge:rgba(255,255,255,.75);   /* the lit top edge of a pane */
  --glass-rim:rgba(16,16,16,.07);       /* where a pane meets the page */
  --blur:blur(18px) saturate(150%);
  --blur-lg:blur(28px) saturate(160%);
  --lift:0 10px 30px rgba(16,16,16,.07), 0 1px 2px rgba(16,16,16,.04);
  --lift-lg:0 24px 60px rgba(16,16,16,.13), 0 2px 8px rgba(16,16,16,.06);
  --pane:14px;
  --pane-sm:11px;
}

/* ---------- The ambient wash --------------------------------------------
   Three soft fields of the accent and the grey, fixed behind everything, so
   the glass has something to refract. It never scrolls and never takes a
   click. */
/* The ground is a warm off-white, so a white pane reads as something laid ON
   the page rather than as the page itself. That difference is the whole
   effect. */
body{background:#F4F1EE}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 720px at 6% -14%, rgba(238,193,160,.85), transparent 60%),
    radial-gradient(900px 620px at 96% -8%, rgba(238,193,160,.42), transparent 62%),
    radial-gradient(780px 540px at 52% 30%, rgba(169,169,169,.22), transparent 66%),
    radial-gradient(980px 760px at 82% 114%, rgba(238,193,160,.55), transparent 60%),
    radial-gradient(760px 560px at 12% 106%, rgba(169,169,169,.24), transparent 62%);
}
.shell,.pf-body>*,.auth{position:relative;z-index:1}

/* ---------- The masthead and the section bar ----------------------------- */
.topbar{
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 1px 0 rgba(16,16,16,.05);
}
.sectionnav{
  background:rgba(255,255,255,.48);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(16,16,16,.04);
}
.iconbtn,.who{background:rgba(255,255,255,.55);border-color:rgba(16,16,16,.08);box-shadow:inset 0 1px 0 var(--glass-edge)}
.iconbtn:hover,.who:hover{background:rgba(255,255,255,.85)}
.brand-mark,.av{box-shadow:0 2px 8px rgba(238,193,160,.55)}
.gtab:hover{background:rgba(255,255,255,.5)}
.tab:hover{background:rgba(255,255,255,.45)}

/* ---------- Panes -------------------------------------------------------- */
.card{
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);border-radius:var(--pane);
  box-shadow:var(--lift),inset 0 1px 0 rgba(255,255,255,.8);
}
.card-h{
  background:rgba(255,255,255,.38);border-bottom:1px solid rgba(255,255,255,.6);
  border-radius:var(--pane) var(--pane) 0 0;
}
.stat{
  background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-edge);border-left:2px solid rgba(16,16,16,.10);border-radius:var(--pane-sm);
  box-shadow:var(--lift),inset 0 1px 0 rgba(255,255,255,.8);
}
.stat:hover{
  background:rgba(255,255,255,.78);border-left-color:var(--accent);
  box-shadow:0 14px 34px rgba(16,16,16,.10),inset 0 1px 0 rgba(255,255,255,.9);
}
.rulebox{border-color:rgba(16,16,16,.07)}

/* ---------- Tables -------------------------------------------------------
   The one place nothing is blurred: a ledger has to scroll at full speed. */
table.t th{
  background:rgba(255,255,255,.55);border-bottom:1px solid rgba(16,16,16,.10);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
table.t td{border-bottom:1px solid rgba(16,16,16,.06)}
table.t tbody tr:hover{background:rgba(238,193,160,.20)}
table.t tbody tr.sel,table.t tbody tr:focus-visible{background:rgba(238,193,160,.28);box-shadow:inset 2px 0 0 var(--ink)}

/* ---------- Drawer, veil, menus ------------------------------------------ */
.veil{background:rgba(22,20,18,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.drawer{
  background:var(--glass-3);-webkit-backdrop-filter:var(--blur-lg);backdrop-filter:var(--blur-lg);
  border-left:1px solid var(--glass-edge);box-shadow:var(--lift-lg);
}
.drawer-h,.drawer-f{background:rgba(255,255,255,.45);border-color:rgba(255,255,255,.6)}
.modal{
  background:var(--glass-3);-webkit-backdrop-filter:var(--blur-lg);backdrop-filter:var(--blur-lg);
  border:1px solid var(--glass-edge);border-radius:var(--pane);box-shadow:var(--lift-lg);
}
.modal-h,.modal-f{background:rgba(255,255,255,.45);border-color:rgba(255,255,255,.6)}
.pop{
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);border-radius:var(--pane-sm);box-shadow:var(--lift-lg);
}
.pop-h{background:rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.6)}
.menu-item:hover,.notif:hover{background:rgba(238,193,160,.22)}

/* ---------- Controls -----------------------------------------------------
   Translucent, not blurred: there are hundreds of them on a busy screen. */
.btn{
  background:rgba(255,255,255,.62);border:1px solid rgba(16,16,16,.10);border-radius:10px;
  box-shadow:0 1px 2px rgba(16,16,16,.05),inset 0 1px 0 rgba(255,255,255,.7);
}
.btn:hover:not(:disabled){background:rgba(255,255,255,.92);border-color:rgba(16,16,16,.16);box-shadow:0 4px 12px rgba(16,16,16,.08),inset 0 1px 0 rgba(255,255,255,.8)}
.btn.pri{
  background:linear-gradient(180deg,#F5D2B8 0%,#EEC1A0 100%);border-color:rgba(16,16,16,.08);color:#000;
  box-shadow:0 6px 18px rgba(238,193,160,.55),inset 0 1px 0 rgba(255,255,255,.65);
}
.btn.pri:hover:not(:disabled){
  background:linear-gradient(180deg,#F2C9AC 0%,#E3AE89 100%);
  box-shadow:0 8px 22px rgba(238,193,160,.65),inset 0 1px 0 rgba(255,255,255,.7);
}
.btn.danger{background:rgba(255,255,255,.7);border-color:var(--red-line);color:var(--red)}
.btn.danger:hover:not(:disabled){background:rgba(179,38,30,.10);border-color:var(--red)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.6)}
.inp,select.inp,textarea.inp{
  background:rgba(255,255,255,.7);border:1px solid rgba(16,16,16,.12);border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(16,16,16,.04);
}
.inp:focus{background:rgba(255,255,255,.96);border-color:rgba(16,16,16,.55);box-shadow:0 0 0 4px rgba(238,193,160,.38)}
.inp[readonly]{background:rgba(255,255,255,.45)}
.ms-box{background:rgba(255,255,255,.7);border-color:rgba(16,16,16,.12);border-radius:10px}
.upload{background:rgba(255,255,255,.5);border:1px dashed rgba(16,16,16,.18);border-radius:var(--pane-sm)}
.upload:hover{background:rgba(238,193,160,.18);border-color:var(--accent)}
.b{border-radius:999px;padding:1px 8px;background-color:rgba(255,255,255,.6)}
.b-warn{background:rgba(238,193,160,.32)}
.b-bad{background:rgba(179,38,30,.10)}
.b-neutral,.b-info{background:rgba(255,255,255,.62)}

/* ---------- Notices ------------------------------------------------------ */
.msg,.note{
  border-radius:var(--pane-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(16,16,16,.05);
}
.msg.info,.note.info{background:rgba(255,255,255,.62)}
.msg.ok,.note.ok{background:rgba(255,255,255,.7)}
.msg.warn,.note.warn{background:rgba(238,193,160,.26)}
.msg.bad,.note.bad{background:rgba(179,38,30,.09)}
.toast{
  background:rgba(18,17,16,.82);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--accent);border-radius:var(--pane-sm);
  box-shadow:var(--lift-lg);color:#FFFFFF;
}

/* ---------- The public forms and the sign-in page ------------------------ */
.pf-body{background:#FFFFFF}
.pf-head{
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid rgba(255,255,255,.55);
}
.pf-card{
  background:var(--glass-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);border-radius:18px;box-shadow:var(--lift-lg),inset 0 1px 0 rgba(255,255,255,.8);
}
.pf-company{background:rgba(238,193,160,.28);border-color:rgba(238,193,160,.7);border-radius:var(--pane-sm)}
.auth{background:transparent}
.auth-main{background:transparent}
.auth-card{
  background:var(--glass-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);border-radius:18px;box-shadow:var(--lift-lg);
}
/* The one dark pane: black glass, with the accent lit behind it. */
.auth-aside{position:relative;overflow:hidden}
.auth-aside::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 420px at 78% 8%, rgba(238,193,160,.30), transparent 62%),
    radial-gradient(520px 420px at 6% 98%, rgba(238,193,160,.16), transparent 60%);
}
.auth-aside>*{position:relative;z-index:1}
.auth-brand .mark{box-shadow:0 6px 18px rgba(238,193,160,.35)}
.auth-submit{
  background:linear-gradient(180deg,#F5D2B8 0%,#EEC1A0 100%);
  box-shadow:0 8px 22px rgba(238,193,160,.5),inset 0 1px 0 rgba(255,255,255,.6);
}
.auth-input{background:rgba(255,255,255,.72);border-radius:10px}

/* ---------- When glass is not available, or not wanted -------------------
   Both of these leave the product exactly as it was before this file: solid
   white panels, the same layout, the same contrast. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  body::before{opacity:.5}
  .topbar,.sectionnav,.card,.card-h,.stat,.drawer,.drawer-h,.drawer-f,.modal,.modal-h,.modal-f,
  .pop,.pop-h,.pf-card,.pf-head,.auth-card,.msg,.note,table.t th{background:#FFFFFF}
  .toast{background:#111110}
}
@media (prefers-reduced-transparency: reduce){
  body::before{display:none}
  .topbar,.sectionnav,.card,.card-h,.stat,.drawer,.drawer-h,.drawer-f,.modal,.modal-h,.modal-f,
  .pop,.pop-h,.pf-card,.pf-head,.auth-card,.msg,.note,table.t th,.btn,.inp{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:#FFFFFF;
  }
  .btn.pri{background:var(--accent)}
  .toast{-webkit-backdrop-filter:none;backdrop-filter:none;background:#111110}
}
@media print{
  body::before{display:none}
  .card,.stat,.pf-card{background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}