/* web_app client portal — shared chrome, ported from the approved skin
   (design/restyle/mockups/boston-surfaces/chrome.css + the 2026-07-09 Inter
   ruling). Tokens are the single source of truth; surfaces compose from them.
   Type: Inter for UI, JetBrains Mono for timecode only. */

@font-face { font-family:'Inter'; font-weight:300; src:url('/_app/fonts/Inter-Light.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:400; src:url('/_app/fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:500; src:url('/_app/fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:600; src:url('/_app/fonts/Inter-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; src:url('/_app/fonts/JetBrainsMono-Regular.ttf') format('truetype'); }

:root{
  --bg:#08080A; --panel-top:#101013; --panel-bot:#0B0B0D;
  --card-top:#212128; --card-bot:#15151A; --raise-top:#2E2E37; --raise-bot:#1E1E25;
  --line:#222228; --line2:#2E2E36;
  --t-bright:#F4F4F6; --t:#DEDEE3; --t2:#83838E; --t3:#55555E;
  --lime:#84CC48; --lime-soft:#A6E06A; --steel:#828C9B; --teal:#3E8E80;
  --coral:#E8704A; --yellow:#E5C84F; --green:#5BB37E;
  --shadow:0 16px 40px -14px rgba(0,0,0,.8), 0 3px 10px -3px rgba(0,0,0,.6);
  --lift:0 22px 48px -14px rgba(0,0,0,.9), 0 6px 14px -4px rgba(0,0,0,.7);
  --topbar-h:54px; --header-h:36px; --radius:12px; --radius-sm:9px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; background:var(--bg); color:var(--t);
  font-family:'Inter',sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased; }
.mono{ font-family:'JetBrains Mono',monospace; }
a{ color:inherit; text-decoration:none; }

/* top bar */
.topbar{ display:flex; align-items:center; gap:14px; height:var(--topbar-h);
  position:sticky; top:0; z-index:40;
  padding:0 18px; background:linear-gradient(180deg,#141418,#0B0B0E);
  border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600;
  letter-spacing:.14em; color:var(--t-bright); }
.brand .mark{ width:18px; height:18px; border-radius:6px;
  background:linear-gradient(135deg,var(--lime),var(--teal)); }
.brand{ flex:none; white-space:nowrap; }
.crumb{ font-size:12px; color:var(--t3); flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who{ margin-left:auto; flex:none; display:flex; align-items:center; gap:12px;
  font-size:12px; color:var(--t2); white-space:nowrap; }
.who .logout{ font-size:11px; font-weight:600; color:var(--t3); white-space:nowrap;
  border:1px solid var(--line); border-radius:9px; padding:5px 11px; cursor:pointer; }
.who .logout:hover{ color:var(--t); border-color:var(--line2); }

/* pill button */
.btn{ font-family:inherit; font-size:13px; font-weight:600; color:#0C140A;
  background:linear-gradient(180deg,var(--lime-soft),var(--lime));
  border:none; border-radius:9px; padding:11px 20px; cursor:pointer; }
.btn:hover{ filter:brightness(1.05); }
.btn:disabled{ opacity:.5; cursor:default; }

/* inputs */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); font-weight:600; }
.field input{ font-family:inherit; font-size:14px; color:var(--t-bright);
  background:#0d0d10; border:1px solid var(--line2); border-radius:12px;
  padding:12px 14px; outline:none; }
.field input:focus{ border-color:var(--lime); }

/* login */
.login-wrap{ min-height:calc(100vh - var(--topbar-h)); display:grid;
  place-items:center; padding:24px; }
.login-card{ width:360px; max-width:100%; padding:30px 28px 26px;
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--lift); }
.login-card .ey{ font-size:10px; letter-spacing:.2em; color:var(--lime);
  font-weight:600; }
.login-card h1{ font-size:22px; font-weight:600; color:var(--t-bright);
  margin:6px 0 4px; letter-spacing:-.01em; }
.login-card .sub{ font-size:12.5px; color:var(--t2); margin-bottom:22px;
  line-height:1.5; font-weight:300; }
.login-card .field{ margin-bottom:15px; }
.login-card .btn{ width:100%; margin-top:6px; }
.err{ font-size:12px; color:var(--coral); min-height:16px; margin-top:10px; }

/* generic pane / card (six-card home builds on these in Phase 2) */
.pane{ background:linear-gradient(180deg,var(--panel-top),var(--panel-bot)); }
.card{ border-radius:var(--radius);
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  border:1px solid var(--line); box-shadow:var(--shadow); }
.muted{ color:var(--t2); }
.dim{ color:var(--t3); }