/* ==========================================================================
   CaseWeave — CLIENT VAULT shell theme  ·  clean, light app canvas
   --------------------------------------------------------------------------
   Loaded AFTER ../styles.css on the client web-vault pages
   (cases.html / case.html / item.html / signin.html). It mirrors launcher.css
   and portal.css so CaseVault feels like ONE product with the launcher
   (home.html) — never the dark "obsidian" marketing site. It does two jobs:

     1. Re-maps the global design tokens to the SAME light palette the launcher
        and attorney portal use (light floor, white cards, violet accent, soft
        shadows). Every panel built against those tokens re-themes automatically.
     2. DEFINES the app-shell classes these pages reference but that neither the
        marketing stylesheet nor the launcher ever provided — .appbar, .rows/.row,
        .empty, .crumb, .kv, the .authwrap sign-in, .field inputs, the case
        filter chips, and the sensitive-content gate.

   Honest by design: no fabricated data; the sensitive-content gate is a
   deliberate, user-initiated reveal, not a hidden default.
   ========================================================================== */

:root{
  /* ---- LIGHT canvas + elevation ramp (identical to launcher.css / portal.css) ---- */
  --floor:  #F4F3FB;
  --lift-1: #FFFFFF;
  --lift-2: #F1EFFA;
  --lift-3: #FBFAFE;
  --well:   #ECEAF6;

  --hair:        rgba(26,21,54,0.09);
  --hair-bright: rgba(26,21,54,0.16);
  --line:        rgba(26,21,54,0.16);   /* alias used by inline form borders */
  --inset-hi:  0 1px 2px rgba(26,21,54,0.05);
  --ring:      0 0 0 1px var(--hair);
  --glow:      0 24px 60px -28px rgba(40,30,90,0.35);

  /* ---- ink ramp ---- */
  --t1: #191538;   --t2: #4B4769;   --t3: #7C7795;   --t4: #A8A4BE;

  /* ---- functional color (state, never decoration) ---- */
  --violet: #7C53F0;   --violet-press: #6A40DE;   --violet-soft: rgba(124,83,240,0.10);
  --sage:   #2E9E73;   --sage-soft: rgba(46,158,115,0.13);
  --clay:   #DC5942;   --clay-soft: rgba(220,89,66,0.10);
  --brass:  #B98A2E;   --brass-soft: rgba(185,138,46,0.12);
  --cyan:   #2E8FB0;

  /* clean sans for headings/wordmark (Fraunces isn't loaded here; Space Grotesk is) */
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
}

/* the marketing grain overlay reads as noise on a light canvas — kill it here */
body::after{ display:none !important; }

body{
  background:var(--floor); color:var(--t2); min-height:100vh;
  background-image:
    radial-gradient(900px 520px at 12% -10%, rgba(124,83,240,0.10), transparent 60%),
    radial-gradient(820px 540px at 100% -4%, rgba(79,196,214,0.07), transparent 55%);
  background-attachment:fixed;
}
::selection{ background:var(--violet-soft); color:var(--t1); }

/* ==========================================================================
   AUTH (signin.html)
   ========================================================================== */
.authwrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:var(--s6) var(--s5); position:relative; overflow:hidden; }
.authwrap::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(680px 420px at 15% -10%, rgba(124,83,240,0.16), transparent 60%),
    radial-gradient(640px 460px at 100% 110%, rgba(124,83,240,0.10), transparent 55%); }
.authcard{ position:relative; width:100%; max-width:430px; background:var(--lift-1);
  border:1px solid var(--hair); border-radius:var(--radius-lg); padding:var(--s7) var(--s6);
  box-shadow:var(--glow), var(--ring); }
.authcard .brand{ font-size:1.35rem; margin-bottom:var(--s4); }
.authcard h1{ font-size:clamp(1.5rem,3vw,1.9rem); margin:var(--s2) 0 var(--s2); line-height:1.12; }
.authcard .sub{ color:var(--t3); font-size:0.96rem; margin:0 0 var(--s5); line-height:1.5; }
.authcard .btn{ margin-top:var(--s2); }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s4); }
.field label{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--t3); }
.field input{ font-family:var(--body); font-size:0.98rem; color:var(--t1); background:var(--lift-3);
  border:1px solid var(--hair-bright); border-radius:var(--radius-sm); padding:0.72em 0.9em; width:100%; }
.field input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); }
.field input::placeholder{ color:var(--t4); }

.formerr{ background:var(--clay-soft); border:1px solid rgba(220,89,66,0.30); color:#B23A28;
  border-radius:var(--radius-sm); padding:0.7em 0.9em; font-size:0.9rem; margin-bottom:var(--s4); }
.formok{ background:var(--sage-soft); border:1px solid rgba(46,158,115,0.32); color:#1F7A55;
  border-radius:var(--radius-sm); padding:0.7em 0.9em; font-size:0.9rem; }
.formnote{ color:var(--t3); font-size:0.85rem; margin:var(--s4) 0 0; text-align:center; }
.formnote a{ font-weight:560; }

/* the small mono "Your case" chip */
.role{ font-family:var(--mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--violet); background:var(--violet-soft); border:1px solid rgba(124,83,240,0.22);
  border-radius:var(--radius-pill); padding:4px 11px; }

/* ==========================================================================
   TOP-BAR SHELL (cases / case / item)
   ========================================================================== */
.appbar{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--hair); }
.appbar .container{ display:flex; align-items:center; gap:var(--s4); height:64px; }
.appbar .brand{ font-size:1.18rem; color:var(--t1); }
.appbar .brand:hover{ color:var(--t1); }
.appbar .brand .w{ color:var(--violet); }
.spacer{ flex:1; }
.signout{ font-weight:560; font-size:0.9rem; color:var(--t3); cursor:pointer; }
.signout:hover{ color:var(--violet); }

.appmain{ padding:var(--s7) 0 var(--s9); }
.crumb{ margin-bottom:var(--s4); }
.crumb a{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.06em; color:var(--t3); font-weight:500; }
.crumb a:hover{ color:var(--violet); }

/* key/value list (chain-of-custody facts) */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s5); margin:0; }
.kv dt{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--t3); align-self:center; }
.kv dd{ margin:0; color:var(--t1); font-weight:520; font-size:0.95rem; overflow-wrap:anywhere; }

/* iframe holding an original PDF */
.viewer-frame{ width:100%; min-height:72vh; border:1px solid var(--hair); border-radius:var(--radius);
  background:#fff; box-shadow:var(--inset-hi); }

/* ==========================================================================
   LIST ROWS (.rows/.row) — case list + evidence list
   ========================================================================== */
.rows{ display:flex; flex-direction:column; gap:var(--s3); }
.row{ display:flex; align-items:center; gap:var(--s4); background:var(--lift-1); border:1px solid var(--hair);
  border-radius:var(--radius); padding:var(--s4) var(--s5); box-shadow:var(--inset-hi);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; color:var(--t1); }
.row:hover{ transform:translateY(-1px); border-color:rgba(124,83,240,0.4); box-shadow:var(--glow); color:var(--t1); }
.rico{ width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:var(--violet-soft); color:var(--violet); }
.rico.warn{ background:var(--clay-soft); color:var(--clay); }
.rbody{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.rtitle{ font-weight:600; color:var(--t1); font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rmeta{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.03em; color:var(--t3); }
.rchev{ color:var(--t4); flex:none; }
.row:hover .rchev{ color:var(--violet); }

/* ==========================================================================
   FILTER CHIPS (case.html — Smart Folder counts)
   ========================================================================== */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s5); }
.chip{ display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--body); font-weight:560;
  font-size:0.86rem; color:var(--t2); background:var(--lift-1); border:1px solid var(--hair);
  border-radius:var(--radius-pill); padding:0.42em 0.9em; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease; }
.chip:hover{ color:var(--violet); border-color:rgba(124,83,240,0.40); }
.chip.active{ color:#fff; background:var(--violet); border-color:var(--violet); }
.chip .ct{ font-family:var(--mono); font-size:0.7rem; color:var(--t3); background:var(--well);
  border-radius:var(--radius-pill); padding:1px 7px; }
.chip.active .ct{ color:#fff; background:rgba(255,255,255,0.24); }

/* ==========================================================================
   UPLOAD (case.html — progress bar + whole-page drop target)
   ========================================================================== */
.upbar{ height:6px; margin-top:var(--s3); border-radius:var(--radius-pill);
  background:var(--well); overflow:hidden; }
.upbar i{ display:block; height:100%; width:0; border-radius:var(--radius-pill);
  background:var(--violet); transition:width .2s ease; }
body.dropping .cw-main{ outline:2px dashed var(--violet); outline-offset:-8px;
  border-radius:var(--radius); }

/* ==========================================================================
   SENSITIVE-CONTENT GATE (item.html — explicit, user-initiated reveal)
   ========================================================================== */
.gate{ display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--lift-1); border:1px solid var(--hair); border-radius:var(--radius);
  padding:var(--s7) var(--s6); box-shadow:var(--inset-hi); }
.gate .ico{ width:54px; height:54px; flex:none; border-radius:15px; display:grid; place-items:center;
  background:var(--clay-soft); color:var(--clay); margin-bottom:var(--s4); }
.gate h3{ color:var(--t1); margin:0 0 var(--s2); }

/* ==========================================================================
   EMPTY / LOADING STATES
   ========================================================================== */
.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3);
  color:var(--t3); background:var(--lift-1); border:1px dashed var(--hair-bright); border-radius:var(--radius);
  padding:var(--s7) var(--s6); }
.empty svg{ width:34px; height:34px; color:var(--t4); }
.empty p{ margin:0; max-width:42ch; font-size:0.95rem; line-height:1.5; }

/* the marketing .card lifts on hover; a static info card on these pages should sit still */
.appmain .card:hover{ transform:none; background:var(--lift-1); border-color:var(--hair); }

@media (max-width:640px){
  .appbar .container{ gap:var(--s3); }
  .appmain{ padding:var(--s6) 0 var(--s8); }
}