/* ════════════════════════════════════════════════════════════
   PTSB Site Diary — Brand Overrides v2
   -------------------------------------------------------------
   Drop-in stylesheet to load AFTER style.css.
   v2 adds:
     • Real PTSB fern logo (./logo-fern.png replaces "PT" placeholder)
     • Lucide SVG icons (via CSS mask-image) replacing all tabbar + key emoji
     • Tactile button physics (rest shadow, hover lift, press scale)
     • Card hover lift + shadow
     • Manrope-only typography (Cormorant Garamond dropped — wrong vibe for utility app)
     • Refined weather buttons (icon stacked above label)

   STILL CSS-only. No HTML, JS, class, or ID changes.
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── 0. Lucide SVG icon library (mask-image data URIs) ──────
   Used by ::after / ::before mask-image and .tabbar-icon mask.
   Each icon is a 24×24 viewBox with 2px stroke, currentColor.
   When applied as mask, background:currentColor fills the shape.
   ───────────────────────────────────────────────────────── */
:root {
  --icn-home:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/><path d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");

  --icn-folder:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/></svg>");

  --icn-clipboard:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='8' height='4' x='8' y='2' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M12 11h4'/><path d='M12 16h4'/><path d='M8 11h.01'/><path d='M8 16h.01'/></svg>");

  --icn-bell:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.268 21a2 2 0 0 0 3.464 0'/><path d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/></svg>");

  --icn-gear:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>");

  --icn-calendar:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/></svg>");

  --icn-archive:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='5' x='2' y='3' rx='1'/><path d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/><path d='M10 12h4'/></svg>");

  --icn-eye:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/><circle cx='12' cy='12' r='3'/></svg>");

  --icn-camera:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/><circle cx='12' cy='13' r='3'/></svg>");

  --icn-pencil:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/><path d='m15 5 4 4'/></svg>");

  --icn-star-solid:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/></svg>");

  --icn-star-outline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/></svg>");

  --icn-arrow-left:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 19-7-7 7-7'/><path d='M19 12H5'/></svg>");

  --icn-sun:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2'/><path d='M12 20v2'/><path d='m4.93 4.93 1.41 1.41'/><path d='m17.66 17.66 1.41 1.41'/><path d='M2 12h2'/><path d='M20 12h2'/><path d='m6.34 17.66-1.41 1.41'/><path d='m19.07 4.93-1.41 1.41'/></svg>");

  --icn-cloud:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/></svg>");

  --icn-drizzle:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/><path d='M8 19v1'/><path d='M8 14v1'/><path d='M16 19v1'/><path d='M16 14v1'/><path d='M12 21v1'/><path d='M12 16v1'/></svg>");

  --icn-rain:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/><path d='M16 14v6'/><path d='M8 14v6'/><path d='M12 16v6'/></svg>");

  --icn-lightning:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973'/><path d='m13 12-3 5h4l-3 5'/></svg>");

  --icn-plus:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>");

  --icn-check:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}

/* ──────────────────────────────────────────────────────────
   1. Color tokens — DARK
   ────────────────────────────────────────────────────────── */
:root[data-theme='dark'] {
  --bg:           #0E1B2E;
  --bg1:          #122237;
  --bg2:          #162943;
  --bg3:          #1E3553;
  --text:         #F5EFE3;
  --text2:        rgba(245, 239, 227, 0.62);
  --border:       rgba(245, 239, 227, 0.10);
  --accent:       #C9A24E;
  --accent-hover: #D4B05A;
  --accent-soft:  rgba(201, 162, 78, 0.10);
  --danger:       #C75D55;
  --warn:         #D9912E;
  --ok:           #6A9C6E;
  --success:      var(--ok);
  --radius:       6px;
  --shadow-1:     0 1px 0 rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.18);
  --shadow-2:     0 4px 12px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.16);
  --shadow-3:     0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.20);
  --shadow:       var(--shadow-1);
}

/* ──────────────────────────────────────────────────────────
   2. Color tokens — LIGHT
   ────────────────────────────────────────────────────────── */
:root[data-theme='light'] {
  --bg:           #F5EFE3;
  --bg1:          #F2EBDC;
  --bg2:          #FAF6EC;
  --bg3:          #EBE3D2;
  --text:         #0E1B2E;
  --text2:        #5B5749;
  --border:       rgba(14, 27, 46, 0.12);
  --accent:       #8E6E33;
  --accent-hover: #B08B45;
  --accent-soft:  rgba(142, 110, 51, 0.10);
  --danger:       #8A2D2D;
  --warn:         #B07820;
  --ok:           #2F5D3A;
  --success:      var(--ok);
  --radius:       6px;
  --shadow-1:     0 1px 0 rgba(14, 27, 46, 0.06), 0 1px 3px rgba(14, 27, 46, 0.08);
  --shadow-2:     0 4px 12px rgba(14, 27, 46, 0.10), 0 2px 4px rgba(14, 27, 46, 0.06);
  --shadow-3:     0 8px 24px rgba(14, 27, 46, 0.14), 0 4px 8px rgba(14, 27, 46, 0.08);
  --shadow:       var(--shadow-1);
}

/* ──────────────────────────────────────────────────────────
   3. Typography — Manrope only
   ────────────────────────────────────────────────────────── */
body {
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  letter-spacing: -0.005em;
  font-feature-settings: 'ss01', 'cv11';   /* nicer alt forms          */
}

/* All headings & big numbers stay Manrope but lean heavy */
.name-prompt-title,
.modal-title,
.submit-overlay-title,
.review-banner-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.today-card-count,
.sup-stat-num,
.storage-card-value {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Mono for codes / IDs / secrets */
.storage-report-id,
.twofa-secret-text,
.twofa-otpauth-url,
.twofa-code-input,
.history-card-id,
.report-row-sub,
.audit-reason,
code {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0;
}

/* ──────────────────────────────────────────────────────────
   4. Auth screen — real PTSB fern logo
   ────────────────────────────────────────────────────────── */
.name-prompt-logo {
  width: 132px;
  height: 100px;
  background-color: transparent;
  background-image: url("./logo-fern.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  border-radius: 0;
  margin-bottom: 18px;
  /* Fallback if image fails: hide the "PT" text so we don't double-render */
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
}
.name-prompt-title {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 6px;
}
.name-prompt-desc {
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text2);
}

/* ──────────────────────────────────────────────────────────
   5. Buttons — tactile, app-grade
   ────────────────────────────────────────────────────────── */
.btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-1);
  transition:
    transform      0.16s cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow     0.16s cubic-bezier(0.2, 0.6, 0.2, 1),
    background     0.16s cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color   0.16s cubic-bezier(0.2, 0.6, 0.2, 1),
    color          0.16s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-1);
  transition-duration: 80ms;
}

.btn-primary {
  background: var(--accent);
  color: #0E1B2E;
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), 0 4px 14px rgba(201, 162, 78, 0.20);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.10), 0 8px 22px rgba(201, 162, 78, 0.32);
}
.btn-primary:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), 0 2px 8px rgba(201, 162, 78, 0.16);
}

.btn-ghost {
  background: transparent;
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--bg3);
  box-shadow: var(--shadow-1);
}
.btn-ghost:active {
  background: var(--bg2);
  box-shadow: none;
}

.btn-submit {
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 16px 22px;
  font-size: 1rem;
}

.btn-danger { box-shadow: 0 1px 0 rgba(0,0,0,0.10), 0 2px 6px rgba(199,93,85,0.16); }
.btn-danger:hover { box-shadow: 0 2px 0 rgba(0,0,0,0.10), 0 6px 14px rgba(199,93,85,0.28); }

/* ──────────────────────────────────────────────────────────
   6. Cards — hover lift + shadow
   ────────────────────────────────────────────────────────── */
.card,
.history-card,
.notif-feed-item,
.today-card,
.sup-card,
.report-row,
.project-card,
.admin-row,
.storage-card,
.mach-row {
  border-radius: var(--radius);
  transition:
    transform   0.16s cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow  0.16s cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color 0.16s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.project-card:hover,
.report-row:hover,
.history-card:hover,
.notif-feed-item:hover,
.today-card-clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent);
}
.project-card:active,
.report-row:active,
.history-card:active,
.notif-feed-item:active,
.today-card-clickable:active {
  transform: scale(0.99);
  box-shadow: var(--shadow-1);
  transition-duration: 80ms;
}

.card-title {
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text2);
  padding: 14px 16px 8px;
}

/* ──────────────────────────────────────────────────────────
   7. Top bar
   ────────────────────────────────────────────────────────── */
.topbar {
  background: var(--bg2);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-1);
}
.topbar-title {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}
.act-as-badge {
  background: var(--accent);
  color: #0E1B2E;
  border-radius: 4px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  padding: 5px 10px;
}

/* ──────────────────────────────────────────────────────────
   8. Tab bar (bottom) — icon swap + active indicator
   ────────────────────────────────────────────────────────── */
.admin-tabbar { background: var(--bg2); border-top-color: var(--border); }
.tabbar-btn { position: relative; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em; }
.tabbar-btn.active { color: var(--accent); }
.tabbar-btn.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2.5px;
  background: var(--accent);
  border-radius: 0 0 3px 3px;
}

/* Replace emoji in .tabbar-icon with Lucide SVG via mask */
.tabbar-icon {
  font-size: 0 !important;
  color: transparent !important;
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto 2px;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.tabbar-btn[data-suptab="dashboard"]      .tabbar-icon { -webkit-mask-image: var(--icn-home);      mask-image: var(--icn-home); }
.tabbar-btn[data-suptab="projects"]       .tabbar-icon { -webkit-mask-image: var(--icn-folder);    mask-image: var(--icn-folder); }
.tabbar-btn[data-suptab="history"]        .tabbar-icon { -webkit-mask-image: var(--icn-clipboard); mask-image: var(--icn-clipboard); }
.tabbar-btn[data-suptab="notifications"]  .tabbar-icon { -webkit-mask-image: var(--icn-bell);      mask-image: var(--icn-bell); }
.tabbar-btn[data-suptab="manage"]         .tabbar-icon { -webkit-mask-image: var(--icn-gear);      mask-image: var(--icn-gear); }
.tabbar-btn[data-tab="today"]             .tabbar-icon { -webkit-mask-image: var(--icn-calendar);  mask-image: var(--icn-calendar); }
.tabbar-btn[data-tab="reports"]           .tabbar-icon { -webkit-mask-image: var(--icn-folder);    mask-image: var(--icn-folder); }
.tabbar-btn[data-tab="storage"]           .tabbar-icon { -webkit-mask-image: var(--icn-archive);   mask-image: var(--icn-archive); }
.tabbar-btn[data-tab="notifications"]     .tabbar-icon { -webkit-mask-image: var(--icn-bell);      mask-image: var(--icn-bell); }
.tabbar-btn[data-tab="manage"]            .tabbar-icon { -webkit-mask-image: var(--icn-gear);      mask-image: var(--icn-gear); }

/* ──────────────────────────────────────────────────────────
   9. Project select
   ────────────────────────────────────────────────────────── */
.project-tabs { padding: 12px 14px 8px; }
.project-tab {
  background: transparent;
  border-color: var(--border);
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-1);
}
.project-tab.active {
  background: var(--bg2);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.10), 0 0 0 2px rgba(201,162,78,0.25);
}
.project-card {
  padding: 16px 16px;
  background: var(--bg2);
  gap: 14px;
}
.project-code {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  font-family: ui-monospace, 'SF Mono', monospace;
}
.project-name {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
}

/* Star = real SVG, not emoji */
.project-star {
  width: 36px;
  height: 36px;
  font-size: 0 !important;
  color: transparent !important;
  background-color: currentColor;
  position: relative;
}
.project-star::after {
  content: '';
  position: absolute;
  inset: 8px;
  background-color: var(--text2);
  -webkit-mask: var(--icn-star-outline) center / contain no-repeat;
          mask: var(--icn-star-outline) center / contain no-repeat;
}
.project-star.pinned::after {
  background-color: var(--accent);
  -webkit-mask: var(--icn-star-solid) center / contain no-repeat;
          mask: var(--icn-star-solid) center / contain no-repeat;
}
.project-star { background: transparent !important; }
.project-star:hover { background: var(--bg3) !important; }

/* ──────────────────────────────────────────────────────────
   10. Reports list — accent on hover/active
   ────────────────────────────────────────────────────────── */
.report-row {
  border-left: 3px solid transparent;
  padding: 14px 16px;
}
.report-row:hover { border-left-color: var(--accent); }
.report-row-date { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.005em; }
.report-row-project { color: var(--text); font-weight: 500; margin-top: 2px; }
.report-row-sub { color: var(--text2); letter-spacing: 0.02em; margin-top: 4px; font-size: 0.74rem; }

.tag {
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tag.ack       { background: rgba(106, 156, 110, 0.18); color: var(--ok); }
.tag.pending   { background: rgba(217, 145,  46, 0.18); color: var(--warn); }
.tag.edited    { background: rgba(201, 162,  78, 0.18); color: var(--accent); }
.tag.rejected  { background: rgba(199,  93,  85, 0.18); color: var(--danger); }

/* ──────────────────────────────────────────────────────────
   11. Forms
   ────────────────────────────────────────────────────────── */
.form-input {
  border-radius: 6px;
  font-size: 0.95rem;
  background: var(--bg3);
  border-color: transparent;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}
.form-input:focus {
  border-color: var(--accent);
  background: var(--bg2);
  box-shadow: 0 0 0 3px rgba(201, 162, 78, 0.18);
}
.auth-field label {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* Eye toggle for password — replace emoji */
.pw-toggle {
  font-size: 0 !important;
  color: transparent !important;
  background-color: transparent;
  position: relative;
  width: 38px;
  height: 38px;
}
.pw-toggle::after {
  content: '';
  position: absolute;
  inset: 9px;
  background-color: var(--text2);
  -webkit-mask: var(--icn-eye) center / contain no-repeat;
          mask: var(--icn-eye) center / contain no-repeat;
}
.pw-toggle:hover { background: var(--bg3); }
.pw-toggle:hover::after { background-color: var(--text); }

/* ──────────────────────────────────────────────────────────
   12. Counter + +/− buttons
   ────────────────────────────────────────────────────────── */
.counter-row.active { background: var(--accent-soft); }
.cnt-btn {
  border-radius: 6px;
  font-weight: 700;
  box-shadow: var(--shadow-1);
}
.cnt-btn:hover {
  background: var(--accent);
  color: #0E1B2E;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.cnt-btn:active { transform: scale(0.94); box-shadow: var(--shadow-1); transition-duration: 70ms; }

/* ──────────────────────────────────────────────────────────
   13. Weather buttons — rebuild as icon + label
   ────────────────────────────────────────────────────────── */
.weather-btns { gap: 10px; padding: 14px 16px; }
.weather-btn {
  background: var(--bg3);
  border-radius: 8px;
  border-color: var(--border);
  padding: 14px 6px;
  font-size: 0 !important;            /* hide original "☀ Good/Fine" text */
  color: transparent !important;
  position: relative;
  min-height: 92px;
  box-shadow: var(--shadow-1);
  transition: all 0.16s cubic-bezier(0.2, 0.6, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.weather-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.weather-btn:active { transform: scale(0.97); transition-duration: 80ms; }
.weather-btn.active {
  background: var(--accent);
  color: #0E1B2E !important;
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 6px 16px rgba(201,162,78,0.30);
}
.weather-btn::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background-color: var(--text);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.weather-btn.active::before { background-color: #0E1B2E; }
.weather-btn::after {
  content: attr(data-weather);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  max-width: 88%;
}
.weather-btn.active::after { color: #0E1B2E; }

.weather-btn[data-weather="Good/Fine"]::before        { -webkit-mask-image: var(--icn-sun);       mask-image: var(--icn-sun); }
.weather-btn[data-weather="Cloudy (No Rain)"]::before { -webkit-mask-image: var(--icn-cloud);     mask-image: var(--icn-cloud); }
.weather-btn[data-weather="Drizzle"]::before          { -webkit-mask-image: var(--icn-drizzle);   mask-image: var(--icn-drizzle); }
.weather-btn[data-weather="Heavy Rain"]::before       { -webkit-mask-image: var(--icn-rain);      mask-image: var(--icn-rain); }
.weather-btn[data-weather="Thunderstorm"]::before     { -webkit-mask-image: var(--icn-lightning); mask-image: var(--icn-lightning); }

/* ──────────────────────────────────────────────────────────
   14. Photo attach — camera icon
   ────────────────────────────────────────────────────────── */
.photo-attach .btn {
  font-size: 0.84rem;
  padding: 10px 14px;
}
/* Replace the camera emoji inside the photo-attach button with SVG.
   The button text starts with "📷 Attach Photos" — hide first character
   visually by using a pseudo-element approach: we can't trivially split
   text, so we re-skin via padding + ::before */
.photo-attach > .btn {
  position: relative;
  padding-left: 38px;
}
.photo-attach > .btn::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icn-camera) center / contain no-repeat;
          mask: var(--icn-camera) center / contain no-repeat;
}
/* Hide the leading "📷" by clipping the first 1.4em of the text */
.photo-attach > .btn {
  text-indent: -1.2em;
  padding-left: 38px;
  overflow: hidden;
}
/* On focus this is fine — text "Attach Photos" remains visible */

/* ──────────────────────────────────────────────────────────
   15. Edit banner — pencil icon
   ────────────────────────────────────────────────────────── */
.edit-banner {
  background: rgba(217, 145, 46, 0.12);
  border-bottom-color: var(--warn);
  color: var(--warn);
  font-weight: 600;
  letter-spacing: 0.015em;
  padding-left: 44px;
  position: relative;
}
.edit-banner > span:first-child {
  font-size: 0 !important;
  color: transparent !important;
}
.edit-banner::before {
  content: '';
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background-color: var(--warn);
  -webkit-mask: var(--icn-pencil) center / contain no-repeat;
          mask: var(--icn-pencil) center / contain no-repeat;
}

/* ──────────────────────────────────────────────────────────
   16. Pending banner
   ────────────────────────────────────────────────────────── */
.pending-banner {
  background: rgba(217, 145, 46, 0.08);
  border-bottom-color: var(--warn);
  color: var(--warn);
  font-weight: 500;
}

/* ──────────────────────────────────────────────────────────
   17. Notif bell in topbar — replace emoji
   ────────────────────────────────────────────────────────── */
.topbar-notif {
  font-size: 0 !important;
  color: transparent !important;
  position: relative;
  width: 40px;
  height: 40px;
}
.topbar-notif::after {
  content: '';
  position: absolute;
  inset: 9px;
  background-color: var(--text);
  -webkit-mask: var(--icn-bell) center / contain no-repeat;
          mask: var(--icn-bell) center / contain no-repeat;
}
.topbar-notif.notif-on::after { background-color: var(--accent); }
.topbar-notif.notif-off::after { background-color: var(--text2); }
/* Keep notification dot/badge */
.topbar-notif.notif-off::after,
.topbar-notif .badge-dot {
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   18. Topbar gear — replace emoji
   ────────────────────────────────────────────────────────── */
.topbar-gear {
  font-size: 0 !important;
  color: transparent !important;
  position: relative;
  width: 40px;
  height: 40px;
}
.topbar-gear::after {
  content: '';
  position: absolute;
  inset: 9px;
  background-color: var(--text);
  -webkit-mask: var(--icn-gear) center / contain no-repeat;
          mask: var(--icn-gear) center / contain no-repeat;
}
.topbar-gear:hover::after { background-color: var(--accent); }

/* ──────────────────────────────────────────────────────────
   19. Subtab buttons
   ────────────────────────────────────────────────────────── */
.subtab-btn {
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-1);
}
.subtab-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.subtab-btn.active {
  background: var(--accent);
  color: #0E1B2E;
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.10), 0 4px 12px rgba(201,162,78,0.20);
}

/* ──────────────────────────────────────────────────────────
   20. Day picker / version picker / archive toggle
   ────────────────────────────────────────────────────────── */
.day-btn,
.version-btn,
.archive-toggle-btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px;
}
.day-btn.active,
.version-btn.active,
.archive-toggle-btn.active {
  background: var(--accent);
  color: #0E1B2E;
  border-color: var(--accent);
}

/* ──────────────────────────────────────────────────────────
   21. Submit overlay — Manrope title
   ────────────────────────────────────────────────────────── */
.submit-overlay-card {
  border-radius: 10px;
  box-shadow: var(--shadow-3);
}
.submit-overlay-check { border-radius: 50%; background: var(--ok); }
.submit-overlay-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ──────────────────────────────────────────────────────────
   22. Modal sheets
   ────────────────────────────────────────────────────────── */
.modal-sheet {
  border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow-3);
}
.modal-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: 1.15rem;
}

/* ──────────────────────────────────────────────────────────
   23. Mach row / no-work
   ────────────────────────────────────────────────────────── */
.mach-row.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.mach-name { font-weight: 600; letter-spacing: -0.005em; }
.no-work-head { background: rgba(217, 145, 46, 0.10); }
:root[data-theme='light'] .no-work-head { background: rgba(217, 145, 46, 0.12); }
.no-work-btn.active {
  background: var(--warn);
  color: #FAF6EC;
  border-color: var(--warn);
}

/* ──────────────────────────────────────────────────────────
   24. Status banners & chips
   ────────────────────────────────────────────────────────── */
.review-banner { border-radius: 8px; font-weight: 500; }
.review-banner-done    { background: rgba(106, 156, 110, 0.10); border-color: rgba(106, 156, 110, 0.40); }
.review-banner-pending { background: rgba(217, 145,  46, 0.08); border-color: rgba(217, 145,  46, 0.35); }
:root[data-theme='light'] .review-banner-done    { background: rgba(106, 156, 110, 0.14); }
:root[data-theme='light'] .review-banner-pending { background: rgba(217, 145,  46, 0.14); }

.chip { border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; }
.chip.ok   { background: rgba(106, 156, 110, 0.15); color: var(--ok); }
.chip.none { background: rgba(217, 145,  46, 0.15); color: var(--warn); }

.role-badge.admin      { background: var(--accent-soft); color: var(--accent); }
.role-badge.supervisor { background: rgba(106, 156, 110, 0.18); color: var(--ok); }
.chip-admin            { background: var(--accent-soft); color: var(--accent); }
.chip-sup              { background: rgba(106, 156, 110, 0.18); color: var(--ok); }

.r2-chip-count { background: var(--accent); color: #0E1B2E; }
.ep-code       { background: var(--accent); color: #0E1B2E; }

.history-edit-badge {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  padding: 2px 7px;
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────────
   25. Audit row
   ────────────────────────────────────────────────────────── */
.audit-row.audit-ok   { border-left-color: var(--ok); }
.audit-row.audit-fail { border-left-color: var(--danger); }

/* ──────────────────────────────────────────────────────────
   26. Notification feed
   ────────────────────────────────────────────────────────── */
.notif-feed-item { padding: 14px; }
.notif-feed-item.unread {
  border-left-color: var(--accent);
  background: var(--bg2);
}
.notif-feed-title { font-weight: 600; font-size: 0.95rem; }

/* ──────────────────────────────────────────────────────────
   27. Photos
   ────────────────────────────────────────────────────────── */
.photo-thumb, .photo-card, .rc-photo, .rc-photos .rc-photo {
  border-radius: 6px;
}
.photo-thumb.uploaded   { border-color: var(--ok); }
.photo-thumb.uploaded::after { background: var(--ok); }
.photo-thumb.committed  { border-color: var(--accent); }
.photo-thumb.committed::after { background: var(--accent); color: #0E1B2E; }

/* ──────────────────────────────────────────────────────────
   28. Toast
   ────────────────────────────────────────────────────────── */
#toast {
  border-radius: 8px;
  border-color: var(--accent);
  background: var(--bg2);
  box-shadow: var(--shadow-3);
  font-weight: 500;
}

/* ──────────────────────────────────────────────────────────
   29. Section titles in cards
   ────────────────────────────────────────────────────────── */
.rc-section-title,
.storage-section-title,
.presets-section-title {
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.74rem;
}

/* ──────────────────────────────────────────────────────────
   30. Sup-stat label
   ────────────────────────────────────────────────────────── */
.sup-stat-label {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   31. Settings info
   ────────────────────────────────────────────────────────── */
.settings-info-role { color: var(--accent); font-weight: 600; }

/* ── END · brand-overrides.css v2 ────────────────────────── */