/* =====================================================================
   Goliath Employee Dashboard - Phase 1 layout
   Visual direction: "subtle glass + topography"
   Jarvis-inspired but grounded. Backlit glass, depth, gold as light.
   Selective glow = triage: only cards needing attention glow.
   ===================================================================== */

/* ----------------------------- Tokens ------------------------------- */
:root {
  /* Backgrounds - layered smoky charcoal gray (lifted off pure black) */
  --bg-base:      #24272c;
  --bg-deep:      #17191c;
  --panel:        rgba(22, 24, 28, 0.66);
  --panel-solid:  #16181c;
  --panel-inner:  rgba(255, 255, 255, 0.015);

  /* Gold - used as light, not fill */
  --gold:         #d4af5f;
  --gold-bright:  #ecc978;
  --gold-dim:     #9c823f;
  --gold-line:    rgba(212, 175, 95, 0.55);
  --gold-glow:    rgba(212, 175, 95, 0.40);
  --gold-faint:   rgba(212, 175, 95, 0.14);

  /* Status */
  --green:        #6fb185;
  --green-dim:    rgba(111, 177, 133, 0.65);
  --amber:        #e0a84a;

  /* Text - cool grays / off-white for data */
  --text-hi:      #f3f1ea;
  --text:         #c8ccd2;
  --text-mid:     #9aa0a8;
  --text-dim:     #6b7178;

  /* Structure */
  --hair:         rgba(255, 255, 255, 0.07);
  --hair-soft:    rgba(255, 255, 255, 0.045);
  --radius:       18px;
  --radius-sm:    12px;

  --rail-w:       248px;
  --rail-w-collapsed: 84px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-brand: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg-base);
  /* smoky gray ground (lighter top → deeper bottom) with a warm bottom-left wash */
  background-image:
    radial-gradient(1100px 720px at 8% 98%, rgba(212, 175, 95, 0.13), transparent 60%),
    radial-gradient(1200px 800px at 92% 2%, rgba(150, 160, 178, 0.06), transparent 55%),
    linear-gradient(180deg, #2c2f35 0%, #24272c 52%, #1c1e22 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Faint golden glow hugging the screen edges - the ambient "backlit" frame.
   Sits BEHIND the app content (z-index below .app) so the tiles and the
   left rail occlude it: the glow reads as light spilling from behind them
   and diffusing softly through the glass, never washing over their faces. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    inset 0 0 260px 26px rgba(212, 175, 95, 0.22),
    inset 0 0 100px rgba(212, 175, 95, 0.13);
  border: 1px solid rgba(212, 175, 95, 0.28);
}

/* Kingsland, TX topographic quad (recolored to gold) sits above the base
   wash, behind everything. Cropped to the map neatline - no collar/scale. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Two WebP sizes so the map is always scaled DOWN, never up (upscaling
     is what made it blurry on large or high-DPI screens): 1900px for 1x
     displays, 3040px for 2x displays and very wide 1x screens (below).
     The original PNG only for anything too old to understand image-set(). */
  background-image: url("../img/kingsland-topo.png");
  background-image: image-set(
    url("../img/kingsland-topo.webp") type("image/webp") 1x,
    url("../img/kingsland-topo@2x.webp") type("image/webp") 2x
  );
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  /* ease the map back toward the center so it never fights the data cards */
  -webkit-mask-image: radial-gradient(135% 135% at 50% 42%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.72) 42%, #000 82%);
          mask-image: radial-gradient(135% 135% at 50% 42%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.72) 42%, #000 82%);
}
/* very wide 1x monitors (2K / 4K at 100%) also get the large map so cover
   never has to stretch the 1900px asset */
@media (min-width: 1900px) {
  body::before { background-image: url("../img/kingsland-topo@2x.webp"); }
}

/* ---------------------------- App shell ----------------------------- */
.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.28s ease;
}
.app.collapsed { grid-template-columns: var(--rail-w-collapsed) 1fr; }

/* ============================ Left rail ============================= */
.rail {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;               /* the menu outgrew short screens */
  overflow-x: hidden;
  scrollbar-width: thin;
  padding: 30px 20px 22px;
  border-right: 1px solid var(--hair-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    rgba(9, 10, 12, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Logo */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 0 30px;
}
.brand-stacked { width: 80%; max-width: 176px; height: auto; display: block; }
.brand-icon { width: 40px; height: auto; display: none; }
.app.collapsed .brand-stacked { display: none; }
.app.collapsed .brand-icon { display: block; }
.app.collapsed .brand { padding-bottom: 22px; }

/* Sign-in page */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 400px; text-align: center;
  background: var(--panel); border: 1px solid var(--hair); border-top: 4px solid var(--gold);
  border-radius: 18px; padding: 34px 26px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8);
}
.login-logo { width: 150px; height: auto; margin: 0 auto 18px; display: block; }
.login-h { font-size: 22px; color: var(--text-hi); margin-bottom: 6px; }
.login-sub { font-size: 13.5px; color: var(--text-mid); line-height: 1.5; margin-bottom: 22px; }
#loginForm label, #codeForm label { display: block; text-align: left; font-size: 12.5px; color: var(--text-mid); font-weight: 600; margin-bottom: 6px; }
#loginForm input, #codeForm input {
  width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none;
}
#codeForm input { letter-spacing: 6px; text-align: center; font-size: 20px; font-weight: 700; }
#loginForm input:focus, #codeForm input:focus { border-color: var(--gold-line); }
#loginBtn, #codeBtn {
  width: 100%; margin-top: 14px; padding: 12px; border-radius: 10px; border: 1px solid var(--gold-line);
  background: var(--gold); color: #1a1408; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
#loginBtn:hover, #codeBtn:hover { background: var(--gold-bright); }
#loginBtn:disabled, #codeBtn:disabled { opacity: .6; cursor: default; }
.login-msg { margin-top: 16px; font-size: 13.5px; line-height: 1.5; min-height: 1em; }
.login-msg.err { color: #e88b86; }
.login-msg.ok { color: #8fd8a2; }
.login-card .site-foot { margin-top: 26px; }

/* Signed-in chip in the topbar */
.auth-chip { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 12px; font-size: 12.5px; color: var(--text-mid); white-space: nowrap; }
.auth-chip .auth-name { color: var(--text-hi); font-weight: 600; }
.auth-chip .auth-out { color: var(--gold-bright); text-decoration: none; border: 1px solid var(--gold-faint); padding: 4px 10px; border-radius: 8px; }
.auth-chip .auth-out:hover { background: rgba(212,175,95,0.12); }

/* Notification bell dropdown + gear link */
a.bell { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.notif-panel {
  position: fixed; top: 74px; right: 18px; z-index: 70;
  width: 340px; max-width: calc(100vw - 24px); max-height: 62vh; overflow-y: auto;
  display: none; background: var(--panel-solid); border: 1px solid var(--hair);
  border-top: 3px solid var(--gold); border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8);
}
.notif-panel.show { display: block; }
.notif-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--hair-soft); text-decoration: none; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: rgba(212,175,95,0.06); }
.notif-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--gold); }
.nd-tasks { background: #78a0e0; }
.nd-daily_logs { background: #8fd8a2; }
.nd-change_orders { background: #e0a84a; }
.nd-selections { background: #d8a0c8; }
.nd-wip { background: #c7b1f0; }
.nd-invoices { background: #a9c8e3; }
.nd-purchase_orders { background: #e0c274; }
.notif-title { display: block; font-size: 13px; color: var(--text-hi); line-height: 1.45; }
.notif-time { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* "What's New" update tracker (next to the bell) */
.upd-btn .upd-dot {
  position: absolute; top: 2px; right: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-bright); border: 2px solid var(--bg);
}
.upd-panel { width: 380px; }
.upd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--hair);
}
.upd-title { font-size: 13px; font-weight: 700; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .07em; }
.upd-ver { font-size: 12px; font-weight: 700; color: var(--text-mid); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 10px; }
.upd-entry { padding: 13px 16px; border-bottom: 1px solid var(--hair-soft); }
.upd-entry:last-of-type { border-bottom: 0; }
.upd-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.upd-badge {
  font-size: 11px; font-weight: 700; color: #1a1408; background: var(--gold);
  border-radius: 999px; padding: 2px 9px;
}
.upd-date { font-size: 11px; color: var(--text-dim); }
.upd-entry-title { font-size: 13px; font-weight: 600; color: var(--text-hi); margin-bottom: 6px; line-height: 1.4; }
.upd-list { margin: 0; padding-left: 17px; }
.upd-list li { font-size: 12.5px; color: var(--text-mid); line-height: 1.55; margin-bottom: 5px; }
.upd-list li:last-child { margin-bottom: 0; }
.upd-list li::marker { color: var(--gold); }
.upd-foot { padding: 9px 16px 12px; text-align: center; font-size: 11px; color: var(--text-dim); border-top: 1px solid var(--hair-soft); }

/* Settings page */
.set-wrap { max-width: none; }
/* ---- info tips: feature descriptions live behind an (i) you hover (per Dillon: declutter) ----
   Markup: <span class="info" data-tip="text" tabindex="0" role="img" aria-label="text">i</span>
   nav.js positions one shared .gtip bubble on hover / focus / tap. */
.info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--gold-bright); background: rgba(212,175,95,0.10); font: 700 10px/1 Georgia, "Times New Roman", serif; font-style: italic; margin-left: 6px; vertical-align: 1px; cursor: help; user-select: none; flex: none; text-transform: none; letter-spacing: 0; }
.info:hover, .info:focus-visible, .info.on { background: var(--gold); color: #1a1408; border-color: var(--gold); outline: none; }
h2 .info, h3 .info, .nc-sec-h .info, .set-lab .info, label .info, .bid-lbl .info { margin-left: 7px; }
.gtip { position: fixed; z-index: 12000; max-width: 340px; padding: 10px 12px; border-radius: 10px; background: var(--panel-solid); border: 1px solid var(--gold-line); color: var(--text); font: 400 12.5px/1.5 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; box-shadow: 0 16px 40px -14px rgba(0,0,0,0.85); pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.gtip.show { opacity: 1; }
.gtip b { color: var(--text-hi); }
@media print { .info, .gtip { display: none !important; } }

/* Settings hub + sections (settings.js routes on location.hash) */
.set-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 4px 0 24px; }
.set-tile { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 18px 18px 16px; color: var(--text-mid); min-height: 128px; transition: border-color .15s ease, transform .15s ease; }
.set-tile:hover { border-color: var(--gold-line); transform: translateY(-1px); }
.set-tile .st-ico { font-size: 22px; line-height: 1; }
.set-tile .st-name { font-size: 15px; font-weight: 700; color: var(--text-hi); margin-top: 4px; }
.set-tile .st-sub { font-size: 12.5px; line-height: 1.45; color: var(--text-mid); }
.set-tile .st-badge { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-bright); border: 1px solid var(--gold-faint); border-radius: 8px; padding: 2px 7px; }
body.role-admin .set-tile.adminonly { display: flex !important; }
.set-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gold-bright); text-decoration: none; margin: -6px 0 16px; }
.set-back:hover { color: var(--gold); }
/* section view: only the chosen category's cards show; the hub hides */
.set-wrap .set-card.set-off, body.role-admin .set-wrap .set-card.set-off, .set-wrap .sec-banner.set-off { display: none !important; }
.set-wrap[data-view="section"] .set-hub { display: none; }
.set-crumb { color: var(--text-dim); font-weight: 400; }
}
.set-card { background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
.set-card h2 { font-size: 13px; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; font-weight: 700; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); }
.set-row:last-child { border-bottom: 0; }
.set-lab { font-size: 14px; color: var(--text-hi); }
.set-sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.set-row input[type=checkbox] { width: 20px; height: 20px; accent-color: #d4af5f; flex: none; cursor: pointer; }
.set-save {
  font: inherit; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--gold-line); background: var(--gold); color: #1a1408; cursor: pointer; margin-top: 4px;
}
.set-save:hover { background: var(--gold-bright); }
.set-text {
  display: block; width: 100%; box-sizing: border-box; margin: 10px 0 12px; padding: 10px 12px;
  font: inherit; font-size: 13px; line-height: 1.55; color: var(--text); background: rgba(255,255,255,.04);
  border: 1px solid var(--hair); border-radius: 10px; resize: vertical; min-height: 140px;
}
.set-text:focus { outline: none; border-color: var(--gold-line); }
.set-msg { margin-top: 10px; font-size: 13px; min-height: 1em; }
.set-msg.ok { color: #8fd8a2; }
.set-msg.err { color: #e88b86; }

/* Shared site footer (signature + updated-on), consistent across pages */
.site-foot {
  margin-top: 40px; padding: 18px 4px 6px;
  border-top: 1px solid var(--hair-soft);
  text-align: center; font-size: 12.5px; line-height: 1.6;
  color: var(--text-dim);
}
.site-foot .foot-sig { color: var(--gold-bright); font-weight: 600; letter-spacing: .01em; }
.site-foot .foot-sep { opacity: .6; }
.site-foot .foot-updated { color: var(--text-mid); }
@media (max-width: 560px) { .site-foot .foot-sep { display: none; } .site-foot .foot-updated { display: block; margin-top: 3px; } }

/* Loading quote under the pulsing logo */
.q-line { max-width: 340px; margin: 6px auto 0; }
.q-text { display: block; font-style: italic; color: var(--text-mid); line-height: 1.5; }
.q-by { display: block; margin-top: 6px; font-size: 12px; color: var(--gold-bright); font-weight: 600; letter-spacing: .02em; }

/* Branded loading indicator (the icon, gently pulsing) */
.goliath-loader { width: 46px; height: auto; display: block; margin: 0 auto 14px; animation: gl-pulse 1.3s ease-in-out infinite; }
@keyframes gl-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .goliath-loader { animation: none; opacity: 0.85; } }

/* Nav */
.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
/* Admin-only entries stay hidden until auth.js stamps body.role-admin.
   (Visibility only - the pages/API behind them enforce it server-side.) */
.nav .nav-admin, .adminonly { display: none !important; }
body.role-admin .nav a.nav-admin { display: flex !important; }
body.role-admin .nav .nav-group.nav-admin, body.role-admin .adminonly { display: block !important; }
body.role-admin .nav .nav-soonitem.nav-admin { display: flex !important; }
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-mid);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.nav a .ico { width: 22px; height: 22px; flex: none; color: currentColor; }
.nav a:hover { color: var(--text-hi); background: rgba(255, 255, 255, 0.04); }
.nav a.active {
  color: var(--gold-bright);
  background:
    linear-gradient(90deg, rgba(212,175,95,0.16), rgba(212,175,95,0.03));
  box-shadow: inset 0 0 0 1px rgba(212,175,95,0.22);
}
.nav a.active::before {
  content: "";
  position: absolute;
  left: -20px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 26px; border-radius: 0 3px 3px 0;
  background: var(--gold);
  box-shadow: 0 0 12px 1px var(--gold-glow);
}
.app.collapsed .nav a { justify-content: center; padding: 12px 0; }
.app.collapsed .nav a .label { display: none; }

/* Nav action button (e.g. New Client) - a gold call-to-action in the rail */
.nav-action {
  display: flex; align-items: center; gap: 15px;
  width: 100%; margin: 0 0 8px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--gold-line);
  background: rgba(212,175,95,0.12);
  color: var(--gold-bright);
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap; text-align: left;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-action .ico { width: 22px; height: 22px; flex: none; color: currentColor; }
.nav-action:hover { background: rgba(212,175,95,0.22); }
.app.collapsed .nav-action { justify-content: center; padding: 12px 0; }
.app.collapsed .nav-action .label { display: none; }

/* New client / opportunity modal (shared across pages via new-client.js) */
.nc-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
}
.nc-overlay.show { display: flex; }
.nc-modal {
  width: 100%; max-width: 440px; border-radius: 16px; padding: 22px;
  background: var(--panel-solid); border: 1px solid var(--hair);
  border-top: 4px solid var(--gold); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8);
}
.nc-modal h3 { font-size: 18px; color: var(--text-hi); margin-bottom: 6px; }
.nc-modal .nc-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.nc-modal label { display: block; font-size: 12.5px; color: var(--text-mid); font-weight: 600; margin: 14px 0 4px; }
.nc-modal input {
  width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none;
}
.nc-modal input:focus { border-color: var(--gold-line); }
.nc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.nc-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px;
  border: 1px solid var(--gold-line); background: rgba(212,175,95,0.14); color: var(--gold-bright);
  transition: background .15s ease;
}
.nc-btn:hover { background: rgba(212,175,95,0.24); }
.nc-btn.ghost { border-color: var(--hair); background: none; color: var(--text-mid); font-weight: 500; }
.nc-btn:disabled { opacity: .6; cursor: default; }
.nc-msg { margin-top: 12px; font-size: 13px; min-height: 1em; line-height: 1.4; }
.nc-msg.err { color: #e88b86; }
.nc-msg.ok { color: #8fd8a2; }

/* Large intake modal (client / opportunity / project) */
.nc-modal-lg { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.nc-seg { display: flex; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; margin: 8px 0 6px; }
.nc-seg button { flex: 1; border: 0; background: rgba(18,20,24,0.6); color: var(--text-mid); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 0; cursor: pointer; border-right: 1px solid var(--hair); }
.nc-seg button:last-child { border-right: 0; }
.nc-seg button.active { background: var(--gold); color: #1a1408; }
.nc-sec-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-bright); font-weight: 700; margin: 4px 0; padding-top: 12px; border-top: 1px solid var(--hair-soft); }
.nc-row2 { display: flex; gap: 10px; }
.nc-row2 > div { flex: 1; min-width: 0; }
.nc-modal select { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.nc-modal select:focus { border-color: var(--gold-line); }
.nc-modal select option { background: #16181c; }
.nc-sugg-item { padding: 8px 10px; border: 1px solid var(--hair); border-radius: 8px; margin-top: 6px; font-size: 13px; color: var(--text-mid); cursor: pointer; background: rgba(255,255,255,0.02); }
.nc-sugg-item:hover { border-color: var(--gold-line); color: var(--text-hi); }
.nc-sugg-item b { color: var(--text-hi); font-weight: 600; }
.nc-warn { font-size: 12.5px; color: #e0a84a; margin-top: 6px; }
.nc-chip { font-size: 12.5px; color: var(--text-mid); background: rgba(212,175,95,0.10); border: 1px solid var(--gold-faint); border-radius: 8px; padding: 7px 10px; margin: 6px 0; }
.nc-chip a { color: var(--gold-bright); margin-left: 6px; }
.nc-sub-row { display: flex; gap: 8px; margin-bottom: 7px; align-items: center; }
.nc-sub-row input { min-width: 0; }
.nc-sub-row .nc-sub-name { flex: 2; }
.nc-sub-row .nc-sub-amt { flex: 1; }
.nc-sub-del { flex: none; width: 34px; height: 40px; border: 1px solid var(--hair); background: none; color: var(--text-dim); border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; }
.nc-sub-del:hover { color: #e88b86; border-color: rgba(224,82,78,0.5); }
.nc-addrow { -webkit-appearance: none; appearance: none; margin-top: 4px; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--gold-faint); background: none; color: var(--gold-bright); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.nc-addrow:hover { background: rgba(212,175,95,0.06); }

/* Shared page toolbar (daily logs, change orders, …) */
.dl-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 20px; }
.dl-sel { font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.dl-sel:focus { border-color: var(--gold-line); }
.dl-sel option { background: #16181c; }
.dl-dt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-mid); border: 1px solid var(--hair); border-radius: 10px; padding: 5px 10px; background: rgba(18,20,24,0.6); }
.dl-dt input { font: inherit; font-size: 13px; border: 0; background: none; color: var(--text-hi); outline: none; color-scheme: dark; }
.dl-clear { font: inherit; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--hair); background: none; color: var(--text-mid); cursor: pointer; }
.dl-clear:hover { color: var(--text-hi); border-color: var(--gold-faint); }
.dl-export { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--gold-line); background: rgba(212,175,95,0.14); color: var(--gold-bright); cursor: pointer; }
.dl-export:hover { background: rgba(212,175,95,0.24); }
.dl-add { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--gold-line); background: var(--gold); color: #1a1408; cursor: pointer; }
.dl-add:hover { background: var(--gold-bright); }

/* Modal form widgets shared by every page's modals (dark, on-theme) */
.nc-modal { color-scheme: dark; }
.nc-modal textarea { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; resize: vertical; min-height: 60px; }
.nc-modal textarea:focus { border-color: var(--gold-line); }
.nc-modal input[type=file] { padding: 9px 12px; font-size: 13px; color: var(--text-mid); }
.nc-modal input[type=file]::file-selector-button { font: inherit; font-size: 12.5px; font-weight: 600; margin-right: 10px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--gold-line); background: rgba(212,175,95,0.14); color: var(--gold-bright); cursor: pointer; }
.nc-btn.danger { border-color: rgba(224,82,78,0.5); background: rgba(224,82,78,0.10); color: #e8908c; }
.nc-btn.danger:hover { background: rgba(224,82,78,0.20); color: #ffd9d6; }
.tt-state { padding: 40px 4px; color: var(--text-dim); font-size: 14px; text-align: center; }

/* Collapse control */
.rail-foot { margin-top: auto; padding-top: 18px; }
.collapse-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-mid);
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.collapse-btn:hover { color: var(--text-hi); border-color: var(--gold-faint); background: rgba(212,175,95,0.05); }
.collapse-btn .chev { transition: transform 0.28s ease; }
.app.collapsed .collapse-btn .chev { transform: rotate(180deg); }
.app.collapsed .collapse-btn .label { display: none; }

/* Rail edge collapse arrow (desktop) - sits on the rail's right border */
.rail-toggle {
  position: absolute; top: 80px; right: -14px; z-index: 6;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--hair); background: #17191c; color: var(--text-mid);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.rail-toggle:hover { color: var(--gold-bright); border-color: var(--gold-faint); background: #1c1f24; }
.rail-toggle .chev { transition: transform 0.3s ease; }
.app.collapsed .rail-toggle .chev { transform: rotate(180deg); }

/* Mobile hamburger - lives in the topbar, hidden on desktop */
.nav-toggle {
  display: none; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--hair); background: rgba(18,20,24,0.6);
  color: var(--text); cursor: pointer; place-items: center;
}
.nav-toggle .ico { width: 22px; height: 22px; }

/* Mobile drawer backdrop */
.nav-backdrop {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.25s ease;
}

/* ============================== Main =============================== */
.main {
  /* every page fills the window; this is the one fixed margin (per Dillon:
     no wasted desktop space). Page wrappers must not cap max-width. */
  padding: 30px 40px 48px;
  min-width: 0;
  width: 100%;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 30px;
}
.page-title h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-hi);
  line-height: 1.1;
}
.page-title .date {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 400;
}

.search {
  flex: 1;
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}
.search .ico {
  position: absolute; left: 20px;
  width: 19px; height: 19px; color: var(--text-dim);
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 15px 20px 15px 52px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgba(18, 20, 24, 0.6);
  color: var(--text-hi);
  font-family: inherit; font-size: 15px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.search input::placeholder { color: var(--text-dim); }
.search input:focus {
  border-color: var(--gold-line);
  background: rgba(20, 22, 26, 0.8);
  box-shadow: 0 0 0 3px rgba(212,175,95,0.08);
}

.topbar-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.bell {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: rgba(18, 20, 24, 0.6);
  color: var(--text-mid);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.bell:hover { color: var(--text-hi); border-color: var(--gold-faint); }
.bell .ico { width: 21px; height: 21px; }
.bell .badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--gold);
  color: #1a1408;
  font-size: 11px; font-weight: 700;
  box-shadow: 0 0 10px var(--gold-glow);
  border: 2px solid var(--bg-base);
}

.user {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 14px 6px 6px;
  border-radius: 30px;
  border: 1px solid var(--hair);
  background: rgba(18, 20, 24, 0.6);
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.user:hover { border-color: var(--gold-faint); }
.user .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gold-bright);
  border: 1px solid var(--gold-line);
  background: radial-gradient(circle at 50% 40%, rgba(212,175,95,0.16), transparent);
}
.user .uname { font-size: 14px; font-weight: 500; color: var(--text); }
.user .chev { color: var(--text-dim); }

/* ============================== Grid =============================== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

/* Row 1 */
.span-task     { grid-column: span 5; }
.span-schedule { grid-column: span 4; }
.span-today    { grid-column: span 3; grid-row: span 1; }
/* Row 2 */
.span-bid      { grid-column: span 4; }
.span-invoice  { grid-column: span 4; }
.span-pulse    { grid-column: span 4; }
/* Row 3 */
.span-weather  { grid-column: span 12; }

/* ============================== Card ============================== */
.card {
  position: relative;
  border-radius: var(--radius);
  padding: 24px 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 42%),
    var(--panel);
  border: 1px solid var(--hair);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  /* lit-from-within: soft inner top highlight + grounding drop shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 40px rgba(255,255,255,0.012),
    0 24px 44px -30px rgba(0,0,0,0.9);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover { transform: translateY(-3px); }

/* --- Selective glow = triage. Attention cards float up and glow gold. --- */
/* Two intensities: glow intensity tracks urgency (build-plan polish note). */
.card.glow {                       /* softer nudge - "waiting on you" */
  border-color: var(--gold-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(212,175,95,0.30),
    0 0 34px -6px var(--gold-glow),
    0 24px 44px -28px rgba(0,0,0,0.9);
}
.card.glow-strong {                /* higher urgency - something slipping */
  border-color: rgba(212,175,95,0.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 1px rgba(212,175,95,0.5),
    0 0 46px -4px rgba(212,175,95,0.55),
    0 26px 48px -26px rgba(0,0,0,0.9);
}
.card.glow:hover        { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(212,175,95,0.4), 0 0 42px -4px var(--gold-glow), 0 30px 50px -26px rgba(0,0,0,0.9); }
.card.glow-strong:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(212,175,95,0.65), 0 0 56px -2px rgba(212,175,95,0.6), 0 32px 54px -24px rgba(0,0,0,0.9); }

/* Card header */
.card-head {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 20px;
}
.card-head .ico {
  width: 22px; height: 22px; color: var(--gold);
  flex: none;
  filter: drop-shadow(0 0 6px rgba(212,175,95,0.25));
}
.card-head h2 {
  font-size: 16px; font-weight: 600; letter-spacing: 0.005em;
  color: var(--text-hi);
}
.card-head .head-right { margin-left: auto; }

/* Headline number block */
.headline { display: flex; align-items: center; gap: 18px; }
.headline .big {
  font-size: 52px; font-weight: 700; line-height: 0.9;
  color: var(--text-hi);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.headline .big.gold { color: var(--gold-bright); }
.headline .cap { display: flex; flex-direction: column; gap: 6px; }
.headline .cap .lead { font-size: 18px; font-weight: 500; color: var(--text); }
.headline .cap .sub {
  font-size: 13px; color: var(--text-mid);
  display: flex; align-items: center; gap: 7px;
}
.headline .grow { flex: 1; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.green { background: var(--green); box-shadow: 0 0 8px var(--green-dim); }
.dot.gold  { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }

.behind { color: var(--gold-bright); font-weight: 600; }

/* Progress ring */
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring .track { fill: none; stroke: rgba(255,255,255,0.09); stroke-width: 7; }
.ring .value {
  fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--gold-glow));
}
.ring .pct {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 700; color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}

/* Home summary: priority donut + legend + preview */
.tt-donut { position: relative; width: 92px; height: 92px; flex: none; }
.tt-donut svg { width: 100%; height: 100%; display: block; }
.ht-donut-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 24px; font-weight: 700; color: var(--text-hi); font-variant-numeric: tabular-nums;
}
.ht-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 16px; }
.ht-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-mid); }
.ht-leg b { color: var(--text-hi); font-weight: 700; margin-left: 1px; font-variant-numeric: tabular-nums; }
.ht-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.ht-pri { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ht-msg { padding: 16px 4px; color: var(--text-dim); font-size: 14px; }
a.row { text-decoration: none; color: inherit; }

/* Divider */
.divider { height: 1px; background: var(--hair-soft); margin: 20px 0; border: 0; }

/* Task / list rows */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 4px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.16s ease;
}
.row + .row { border-top: 1px solid var(--hair-soft); }
.row:hover { background: rgba(255,255,255,0.03); }
.row .status-ico { width: 22px; height: 22px; flex: none; }
.row .status-ico.amber { color: var(--amber); }
.row .status-ico.green { color: var(--green); }
.row .status-ico.gray  { color: var(--text-dim); }
.row .r-title { font-size: 15px; font-weight: 600; color: var(--text-hi); width: 118px; flex: none; }
.row .r-desc { font-size: 14px; color: var(--text-mid); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .r-meta { font-size: 13px; font-weight: 600; white-space: nowrap; }
.row .r-meta.gold { color: var(--gold-bright); }
.row .r-meta.green { color: var(--green); }
.row .r-meta.dim { color: var(--text-mid); }
.row .chev-r { color: var(--text-dim); flex: none; }

/* ---- Interactive Task Tracker controls ---- */
.row .status-ico {
  -webkit-appearance: none; appearance: none;
  border: 0; background: none; padding: 0; margin: 0;
  width: 22px; height: 22px; flex: none; cursor: pointer;
  display: grid; place-items: center;
}
.row .status-ico svg { width: 22px; height: 22px; display: block; }
.row .status-ico:hover { filter: brightness(1.3); }
.row.is-done .r-title, .row.is-done .r-desc { text-decoration: line-through; opacity: 0.5; }

.task-del {
  -webkit-appearance: none; appearance: none; border: 0; background: none;
  width: 20px; height: 20px; padding: 0; flex: none; cursor: pointer;
  color: var(--text-dim); opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.task-del svg { width: 18px; height: 18px; display: block; }
.row:hover .task-del { opacity: 1; }
.task-del:hover { color: #d98a6a; }

.add-task-link {
  -webkit-appearance: none; appearance: none;
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px dashed var(--hair);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-mid); font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.add-task-link:hover { color: var(--gold-bright); border-color: var(--gold-faint); background: rgba(212,175,95,0.05); }

.task-add {
  margin-top: 16px;
  display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: center;
}
.task-add input, .task-add select {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--hair); background: rgba(18, 20, 24, 0.6);
  color: var(--text-hi); font: inherit; font-size: 14px; outline: none;
  transition: border-color 0.15s ease;
}
.task-add input::placeholder { color: var(--text-dim); }
.task-add input:focus, .task-add select:focus { border-color: var(--gold-line); }
.task-add-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.t-btn {
  -webkit-appearance: none; appearance: none;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--gold-line);
  background: rgba(212, 175, 95, 0.14); color: var(--gold-bright);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease;
}
.t-btn:hover { background: rgba(212, 175, 95, 0.22); }
.t-btn.ghost { border-color: var(--hair); background: none; color: var(--text-mid); }
.t-btn.ghost:hover { color: var(--text-hi); background: rgba(255, 255, 255, 0.04); }
.task-empty { padding: 16px 4px; color: var(--text-dim); font-size: 14px; }

/* ---------------------- Today's Schedule --------------------------- */
.timeline { display: flex; flex-direction: column; gap: 6px; }
.tl-item {
  position: relative;
  padding: 14px 6px 14px 20px;
  border-left: 2px solid var(--gold-line);
  border-radius: 0 8px 8px 0;
  transition: background 0.16s ease;
}
.tl-item:hover { background: rgba(255,255,255,0.025); }
.tl-item .time {
  font-size: 14px; font-weight: 600; color: var(--gold-bright);
  letter-spacing: 0.02em; margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.tl-item .what { font-size: 15px; color: var(--text); }

/* ------------------------- Bid Tracker ---------------------------- */
.bar-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.bar-row .name { font-size: 14px; color: var(--text); width: 130px; flex: none; }
.bar-track {
  flex: 1; height: 6px; border-radius: 4px;
  background: rgba(255,255,255,0.07); overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 4px; }
.bar-fill.green { background: linear-gradient(90deg, var(--green-dim), var(--green)); box-shadow: 0 0 8px var(--green-dim); }
.bar-fill.gold  { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); box-shadow: 0 0 8px var(--gold-glow); }
.bar-row .tag { font-size: 13px; font-weight: 600; width: 84px; flex: none; text-align: right; }
.bar-row .tag.green { color: var(--green); }
.bar-row .tag.gold  { color: var(--gold-bright); }
.bar-row .tag.red   { color: #e88a85; }

/* Bid Tracker card (live) */
a.hb-row { text-decoration: none; border-radius: 8px; }
a.hb-row:hover .name { color: var(--gold-bright); }
a.hb-row .tag { width: 96px; }
.hb-alerts { display: flex; gap: 14px; flex-wrap: wrap; margin: -4px 0 10px; }
.hb-alerts .tag { font-size: 12.5px; font-weight: 700; }
.hb-alerts .tag.gold { color: var(--gold-bright); }
.hb-alerts .tag.red { color: #e88a85; }
.hb-quiet { font-size: 13px; color: var(--text-dim); padding: 8px 0 4px; }

/* Money / invoice list */
.money-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px;
  cursor: pointer; border-radius: 10px;
  transition: background 0.16s ease;
}
.money-row + .money-row { border-top: 1px solid var(--hair-soft); }
.money-row:hover { background: rgba(255,255,255,0.03); }
.money-row .m-name { font-size: 15px; color: var(--text); flex: 1; }
.money-row .m-amt {
  font-size: 15px; font-weight: 600; color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
.money-row .chev-r { color: var(--text-dim); }

/* Footer link */
.card-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px;
  font-size: 14px; font-weight: 600; color: var(--gold-bright);
  text-decoration: none;
  transition: gap 0.18s ease, color 0.18s ease;
}
.card-link:hover { gap: 11px; color: var(--gold); }

/* --------------------------- Weather: see "home: weather" below ---- */

/* ------------------------ Company Pulse --------------------------- */
.pulse-item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 4px;
  cursor: pointer; border-radius: 10px;
  transition: background 0.16s ease;
}
.pulse-item + .pulse-item { border-top: 1px solid var(--hair-soft); }
.pulse-item:hover { background: rgba(255,255,255,0.03); }
.pulse-item .p-ico { width: 26px; height: 26px; flex: none; }
.pulse-item .p-ico.green { color: var(--green); }
.pulse-item .p-ico.gold  { color: var(--gold); }
.pulse-item .p-body { flex: 1; min-width: 0; }
.pulse-item .p-title { font-size: 15px; font-weight: 600; color: var(--text-hi); }
.pulse-item .p-sub { font-size: 13px; color: var(--text-mid); margin-top: 2px; }
.pulse-item .p-when { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pulse-item .p-when.green { color: var(--green); }
.pulse-item .p-when.gold  { color: var(--gold-bright); }

/* =========================== Mini Gantt =========================== */
.gantt { margin-top: 22px; }
.gantt-axis {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  margin-bottom: 12px;
}
.gantt-axis .axis-origin { font-size: 12px; font-weight: 600; color: var(--text-mid); letter-spacing: 0.05em; }
.gantt-ticks { display: flex; justify-content: space-between; position: relative; }
.gantt-ticks span {
  font-size: 12px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.gantt-ticks span.today {
  color: var(--gold-bright); font-weight: 700;
  position: relative;
}
.gantt-ticks span.today::after {
  content: ""; position: absolute; left: 50%; top: -4px; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--gold-line);
  box-shadow: 0 0 10px var(--gold-glow);
}

.gantt-rows { display: flex; flex-direction: column; gap: 14px; position: relative; }
/* today's vertical guide line sits over the plot */
.gantt-plot-wrap { position: relative; }
.gantt-today-line {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: var(--gold-line);
  box-shadow: 0 0 8px var(--gold-glow);
  pointer-events: none; z-index: 1;
}
.gantt-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; }
.gantt-row .g-label { font-size: 13px; color: var(--text); }
.gantt-lane { position: relative; height: 10px; }
.gantt-lane::before {  /* faint lane baseline */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(255,255,255,0.04);
}
.g-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 8px; border-radius: 5px;
}
.g-bar.green { background: linear-gradient(90deg, var(--green-dim), var(--green)); box-shadow: 0 0 10px -1px var(--green-dim); }
.g-bar.gold  { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); box-shadow: 0 0 12px -1px var(--gold-glow); }
.g-bar.gold .end-dot {
  position: absolute; right: -5px; top: 50%; transform: translate(50%, -50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px var(--gold-glow);
  border: 2px solid var(--bg-deep);
}

.gantt-legend {
  display: flex; gap: 24px; align-items: center;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--hair-soft);
}
.gantt-legend .lg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mid); }

/* ============================ Responsive ========================== */
/* Mid widths - two-up cards */
@media (max-width: 1500px) {
  .span-task, .span-schedule, .span-today,
  .span-bid, .span-invoice, .span-pulse { grid-column: span 6; }
  .span-weather { grid-column: span 12; }
}

/* ---------------------------------------------------------------------------
   MOBILE (<= 900px): the left rail becomes a slide-in drawer with a hamburger,
   and the whole layout stacks to a single column. ~half of usage is phones,
   so this is a first-class layout, not an afterthought.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app, .app.collapsed { grid-template-columns: 1fr; }   /* main spans full width */

  .rail {
    position: fixed; top: 0; left: 0; z-index: 50;
    width: 82vw; max-width: 300px; height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    border-right: 1px solid var(--hair);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
      rgba(9, 10, 12, 0.97);
  }
  .app.nav-open .rail { transform: translateX(0); box-shadow: 0 0 70px rgba(0,0,0,0.7); }
  .rail {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* iOS momentum */
    overscroll-behavior: contain;        /* drawer scroll stays in the drawer */
    padding-bottom: 40px;                /* room past the last group */
  }

  .nav-backdrop { display: block; visibility: hidden; }
  .app.nav-open .nav-backdrop { visibility: visible; opacity: 1; }

  .rail-toggle { display: none; }        /* no edge arrow on mobile */
  .rail-foot { display: none; }          /* collapse control not relevant in drawer mode */
  .nav-toggle { display: grid; }         /* show the hamburger */

  /* the drawer always shows full labels, regardless of desktop collapse state */
  .rail .brand .wordmark, .nav a .label { display: inline; }
  .nav a { justify-content: flex-start; padding: 13px 14px; }

  .main { padding: 16px 15px 44px; }

  /* topbar reflow: [hamburger] [title] … [actions], search on its own row */
  .topbar { flex-wrap: wrap; gap: 12px 14px; margin-bottom: 22px; }
  .nav-toggle { order: 1; }
  .page-title { order: 2; }
  .page-title h1 { font-size: 22px; }
  .topbar-right { order: 3; margin-left: auto; }
  .search { order: 4; flex-basis: 100%; max-width: none; margin: 0; }

  .grid { gap: 16px; }
  .grid > * { grid-column: 1 / -1 !important; }
  .card { padding: 20px; }
}

/* Small phones */
@media (max-width: 480px) {
  .headline .big { font-size: 44px; }
  .user .uname { display: none; }
  .user { padding: 5px; }
  .row .r-title { width: 100px; }
  .tt-search { max-width: none; }
}

/* In-page document viewer (popup for PDFs & photos) */
.sg-viewer { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(10,11,13,0.9); padding: 18px; }
.sg-viewer.show { display: flex; flex-direction: column; }
.sg-viewer-bar { display: flex; align-items: center; gap: 14px; max-width: 920px; width: 100%; margin: 0 auto 10px; }
.sg-viewer-name { flex: 1; font-size: 13.5px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-viewer-tab { flex: none; font-size: 12.5px; color: var(--gold-bright); text-decoration: none; border: 1px solid var(--gold-faint); padding: 6px 12px; border-radius: 8px; }
.sg-viewer-tab:hover { border-color: var(--gold-line); }
.sg-viewer-x { flex: none; font: inherit; font-size: 26px; line-height: 1; background: none; border: 0; color: var(--text-mid); cursor: pointer; padding: 0 2px; }
.sg-viewer-x:hover { color: #fff; }
.sg-viewer-body { flex: 1; max-width: 920px; width: 100%; margin: 0 auto; min-height: 0; }
.sg-viewer-body iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #fff; }
.sg-viewer-body img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; border-radius: 10px; }
@media (max-width: 640px) { .sg-viewer { padding: 10px; } }

/* Shared toolbar search box (used by Daily Logs, Projects, ...) */
.dl-search {
  font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi);
  outline: none; min-width: 160px;
}
.dl-search:focus { border-color: var(--gold-line); }

/* Themed scrollbars - every scroll container matches the dark/gold layout
   instead of showing the browser's default light slider. */
:root { scrollbar-width: thin; scrollbar-color: rgba(212,175,95,0.35) rgba(18,20,24,0.55); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(18,20,24,0.55); border-radius: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(212,175,95,0.30); border-radius: 8px;
  border: 2px solid rgba(18,20,24,0.7); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,95,0.55); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Mobile: destructive Delete buttons are desktop-only - too easy to fat-finger
   in the field. (The client-facing decline button is .sg-btn and unaffected.) */
@media (max-width: 900px) {
  .nc-btn.danger { display: none !important; }
}

/* Accordion nav groups (menu itself is rendered by nav.js) */
.nav-group { display: flex; flex-direction: column; }
.nav-group-head {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; font-weight: 500; padding: 11px 14px; border: 0; border-radius: 12px;
  background: none; color: var(--text-mid); transition: background .15s ease, color .15s ease;
}
.nav-group-head:hover { color: var(--text-hi); background: rgba(255,255,255,0.04); }
.nav-group-head .ico { width: 22px; height: 22px; flex: none; }
.nav-group-head .chev-g { margin-left: auto; font-size: 11px; color: var(--text-dim); transition: transform .18s ease; transform: rotate(-90deg); }
.nav-group.open > .nav-group-head .chev-g { transform: rotate(0deg); }
.nav-group-head.haslive { color: var(--gold-bright); }
.nav-group-items { display: none; flex-direction: column; gap: 2px; padding: 1px 0 4px 14px; position: relative; }
.nav-group-items::before {
  content: ""; position: absolute; left: 24px; top: 2px; bottom: 6px; width: 1px;
  background: var(--hair);
}
.nav-group.open > .nav-group-items { display: flex; }
.nav-group-items a { font-size: 13.5px; padding: 9px 12px 9px 22px; }
.nav-group-items a .ico { width: 19px; height: 19px; }

/* name-only future items */
.nav-future .nav-group-head { color: var(--text-dim); }
.nav-soonitem {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 22px;
  font-size: 13px; color: var(--text-dim); cursor: default; opacity: .75;
}
.nav-soonitem em {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-faint); border: 1px solid var(--hair); border-radius: 6px; padding: 1px 5px; margin-left: 5px;
}

/* collapsed rail: groups shrink to their icon; items hide until re-expanded */
.app.collapsed .nav-group-head { justify-content: center; padding: 12px 0; }
.app.collapsed .nav-group-items { display: none !important; }

/* Settings -> Pipelines (server-side pipeline manager, admin) */
.pp-pipe { border: 1px solid var(--hair); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.pp-pipe-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pp-pipe-head .pp-pipe-name { flex: 1; font-weight: 600; }
.pp-ghl { flex: none; font-size: 11px; border: 1px solid rgba(212,175,95,0.5); color: var(--gold-bright, #ecc978); border-radius: 999px; padding: 3px 10px; }
.pp-stages { display: grid; gap: 6px; margin: 0 0 6px 18px; }
.pp-stage { display: flex; gap: 8px; align-items: center; }
.pp-stage .pp-stage-name { flex: 1; }
.pp-del { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--hair); background: none; color: var(--text-dim); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.pp-del:hover { color: #f0a2a2; border-color: rgba(191,54,54,0.55); }
.pp-move { font-size: 13px; }

/* Master Schedule card (live) */
a.hs-row { text-decoration: none; }
a.hs-row:hover .g-label { color: var(--gold-bright); }

/* Sign out is a button now (POST), styled like the old link */
.auth-chip .auth-out { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* security banner (Settings) when a testing aid is left on */
.sec-banner { border: 1px solid rgba(191,54,54,0.6); background: rgba(191,54,54,0.14); color: #f0b1ad; border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
.sec-banner b { color: #fff; }
.set-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.set-table th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--hair); }
.set-table td { padding: 7px 8px; border-bottom: 1px solid var(--hair); color: var(--text-mid); vertical-align: top; }
.set-table td b { color: var(--text-hi); }
.set-table .me { color: #8fd8a2; font-weight: 700; }
.set-mini { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--hair); background: none; color: var(--text-mid); cursor: pointer; }
.set-mini:hover { border-color: var(--gold-line); color: var(--text-hi); }
.set-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.set-filter input, .set-filter select { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }

/* ---- live user chip (photo or initials) ---- */
.auth-chip .auth-me { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.auth-chip .auth-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-line); display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--gold-bright); background: radial-gradient(circle at 50% 40%, rgba(212,175,95,0.18), rgba(18,20,24,0.6)); }
.auth-chip .auth-me:hover .auth-name { color: var(--gold-bright); }
/* Settings: account card */
.acct-id { display: flex; align-items: center; gap: 14px; }
.acct-avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--gold-line); display: grid; place-items: center; cursor: pointer; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(212,175,95,0.18), rgba(18,20,24,0.6)); color: var(--gold-bright); font-weight: 700; letter-spacing: .06em; font-size: 16px; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-avatar:hover { border-color: var(--gold); }
.set-lbl { display: block; font-size: 12px; color: var(--text-mid); font-weight: 600; margin: 8px 0 4px; }
.set-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.set-in:focus { border-color: var(--gold-line); }
/* ---- home: search results ---- */
.search { position: relative; }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 70vh; overflow: auto; background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8); padding: 6px; }
.sr-group + .sr-group { border-top: 1px solid var(--hair); margin-top: 4px; padding-top: 4px; }
.sr-cat { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); padding: 8px 10px 4px; font-weight: 700; }
.sr-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--text); }
.sr-item:hover, .sr-item.on { background: rgba(212,175,95,0.10); }
.sr-title { font-size: 13.5px; font-weight: 600; color: var(--text-hi); }
.sr-sub { font-size: 12px; color: var(--text-dim); }
.sr-empty { padding: 12px; font-size: 13px; color: var(--text-dim); }
/* ---- home: weather (Weather Underground style 7-day panel) ---- */
.wx-cardhead { flex-wrap: wrap; }
.wx-cardhead .wx-loc { margin: 0 0 0 auto; }
.wx-loc { display: flex; gap: 6px; }
.wx-loc input { width: 190px; font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.wx-loc input:focus { border-color: var(--gold-line); }
.wx-go { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--gold-line); background: rgba(212,175,95,0.12); color: var(--gold-bright); cursor: pointer; display: inline-flex; align-items: center; }
.wx-go:hover { background: rgba(212,175,95,0.22); }
.wx-geo.on { background: var(--gold); color: #1a1408; }
.wx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 14px; }
.wx-coords { font-size: 11px; color: var(--text-dim); letter-spacing: .02em; }
.wx-city { font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; line-height: 1.05; color: var(--text-hi); }
.wx-city .wx-src { font-family: Inter, sans-serif; font-size: 11px; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .06em; margin-left: 10px; vertical-align: middle; }
.weather-cond { font-size: 13.5px; color: var(--text); margin-top: 4px; }
.weather-main { display: flex; align-items: center; gap: 10px; }
.weather-main .temp { font-size: 48px; font-weight: 700; color: var(--text-hi); letter-spacing: -0.02em; line-height: 0.9; }
.weather-main .w-ico { width: 64px; height: 64px; margin-left: 0; }
.weather-main .w-ico svg { width: 64px; height: 64px; }
.weather-main .w-sub { font-size: 12px; color: var(--text-mid); line-height: 1.5; }
.wx-dim { color: var(--text-dim); font-size: 13px; }
/* day columns share the chart's x axis: a 44px axis gutter then 7 equal columns */
.wx-days { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--hair); border-radius: 12px 12px 0 0; background: rgba(255,255,255,0.015); overflow: hidden; }
.wx-day { text-align: center; padding: 8px 4px 10px; border-left: 1px solid var(--hair-soft); min-width: 0; }
.wx-axis { border-left: 0; }
.wx-day.today { background: rgba(212,175,95,0.07); }
.wx-day .wx-d { font-size: 12px; color: var(--text-hi); font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--hair-soft); margin-bottom: 8px; white-space: nowrap; }
.wx-day.today .wx-d { color: var(--gold-bright); }
.wx-hl { font-size: 14px; font-variant-numeric: tabular-nums; }
.wx-hl .hi { color: #f0a15a; font-weight: 700; } .wx-hl .sep { color: var(--text-dim); margin: 0 5px; } .wx-hl .lo { color: #8fb8e0; }
.wx-i svg { width: 58px; height: 58px; margin: 2px auto 0; display: block; }
.wx-txt { font-size: 12px; color: var(--text); min-height: 2.6em; line-height: 1.3; padding: 0 2px; }
.wx-rain { font-size: 12px; color: var(--text-mid); margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.wx-rain svg { width: 11px; height: 11px; }
.wx-rain.wet { color: #8fb8e0; font-weight: 700; }
.wx-pop { font-size: 11px; color: var(--text-dim); }
.wx-sun { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); padding: 6px 6px 0; }
.wx-sun span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #f0a15a; margin-right: 3px; vertical-align: 1px; }
.wx-sun span:last-child::before { background: #c86a3a; }
.wx-charts { border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 12px 12px; padding: 6px 0 4px; background: rgba(255,255,255,0.01); position: relative; }
.wx-chart { display: block; width: 100%; height: auto; }
.wx-chart text { font-family: Inter, sans-serif; font-size: 10.5px; fill: var(--text-dim); }
.wx-chart .grid { stroke: rgba(255,255,255,0.06); }
.wx-chart .daygrid { stroke: rgba(255,255,255,0.12); }
.wx-chart .nowline { stroke: var(--gold); stroke-dasharray: 3 3; }
.wx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--text-mid); padding: 0 12px 8px 44px; }
.wx-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.wx-legend i.area { height: 9px; opacity: .6; }
.wx-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; color: var(--text-mid); line-height: 1.5; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.8); min-width: 150px; }
.wx-tip b { color: var(--text-hi); display: block; margin-bottom: 2px; }
.wx-tip span { color: var(--text-hi); }
.span-weather { position: relative; }
.weather-note { font-size: 12.5px; color: var(--text-mid); margin-top: 10px; }
.tl-diag { font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--gold-line); background: rgba(212,175,95,0.12); color: var(--gold-bright); cursor: pointer; margin-left: 6px; }
.tl-diag:disabled { opacity: .6; }
@media (max-width: 900px) {
  .wx-days { grid-template-columns: 30px repeat(7, minmax(0, 1fr)); }
  .wx-i svg { width: 34px; height: 34px; } .wx-txt { display: none; } .wx-sun { display: none; } .wx-hl { font-size: 12px; } .wx-day .wx-d { font-size: 10.5px; }
  .wx-city { font-size: 24px; } .weather-main .temp { font-size: 40px; }
  .wx-cardhead .wx-loc { margin-left: 0; width: 100%; } .wx-loc input { flex: 1; width: auto; }
}
/* ---- home: today + pulse ---- */
.tl-item { text-decoration: none; }
.tl-item.event { border-left: 3px solid #8fb8e0; }
.tl-item.task { border-left: 3px solid var(--gold-line); }
.tl-kind { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; padding: 1px 6px; margin-right: 8px; vertical-align: 2px; border: 1px solid var(--hair); color: var(--text-dim); }
.tl-kind.event { color: #8fb8e0; border-color: rgba(143,184,224,0.45); }
.tl-kind.task { color: var(--gold-bright); border-color: var(--gold-line); }
.tl-sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.tl-empty { font-size: 13px; color: var(--text-dim); padding: 8px 4px; }
.tl-note { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
.money-row .m-sub { display: block; font-size: 12px; color: var(--text-dim); }
a.money-row { text-decoration: none; }
/* ---- permissions matrix ---- */
.pm-hint { margin-bottom: 10px; }
.pm-wrap { overflow-x: auto; }
.pm-table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.pm-table th, .pm-table td { border-bottom: 1px solid var(--hair); padding: 8px 10px; vertical-align: top; text-align: left; }
.pm-table th.pm-user { min-width: 170px; }
.pm-name { font-weight: 700; color: var(--text-hi); } .pm-name em { font-style: normal; color: var(--text-dim); font-weight: 400; }
.pm-email { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.pm-role { font-size: 12px !important; padding: 6px 8px !important; }
.pm-reset { display: block; margin-top: 4px; font: inherit; font-size: 11px; color: var(--gold-bright); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.pm-group td { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; padding-top: 14px; border-bottom: 0; }
.pm-perm { min-width: 220px; } .pm-perm b { display: block; color: var(--text-hi); } .pm-perm span { display: block; font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
.pm-cell { text-align: center !important; } .pm-cell.over { background: rgba(212,175,95,0.10); }
.pm-check { display: inline-block; position: relative; width: 22px; height: 22px; }
.pm-check input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pm-check span { display: block; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--gold-line); background: rgba(212,175,95,0.06); }
.pm-check input:checked + span { background: var(--gold); border-color: var(--gold); }
.pm-check input:checked + span::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #1a1408; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pm-check input:disabled + span { opacity: .55; }