/* vendor/pyl0n-base.css — the CSS every PYL0N tool page shares.
   Shared tokens and reset, the nav shell (header, breadcrumb, sidebar,
   sidebar buttons and fields, canvas, all-tools popover, scroll progress,
   shell print rules), the theme-toggle icon pair and the reduced-motion rule.

   Linked from a page's <head> AFTER its inline <style>, where the shell block
   used to sit, so equal-specificity ties between page and shell rules resolve
   as they always did. The page keeps its own --accent family (and anything
   else that is only its own) in a small inline :root / [data-theme="dark"]
   block. Never redefine a token from this file there: this file's :root
   would override it again. A page rule that must beat a rule here goes in a
   second <style> after the <link>.

   Which pages link it, what was compared and how to convert the next page:
   docs/shared-extraction.md. Editing this file changes every page that links
   it — bump CACHE_NAME in sw.js in the same commit. */

/* ── Tokens (identical in every page, light and dark) ── */
:root {
  --bg:#f5f4f0; --surface:#ffffff; --border:#e5e2dc; --text:#1a1916;
  --green:#107c41; --green-dk:#0a6032; --green-fill:#107c41; --green-fill-hover:#0a6032;
  --amber:#b45309; --red:#c0392b;
  --faint:#85817a; --muted:#74706a;
  --navy:#1e3a6b; --sidebar-w:272px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --green:#22a85a; --green-dk:#1a8a47;
  --red:#ef6b5b; --amber:#f59e0b;
  --bg:#1a1917; --surface:#26231f; --border:#3e3b37; --text:#e8e6e1;
  --faint:#817d76; --muted:#9b9891;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

/* ═══════════════ PYL0N NAV SHELL ═══════════════ */
body { height:100vh!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; }

header {
  height:48px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; gap:12px;
  background:var(--surface); border-bottom:1px solid var(--border);
  position:relative; z-index:200;
}
[data-theme="dark"] header { background:rgba(28,28,26,0.97); }
.hdr-left  { display:flex; align-items:center; gap:10px; min-width:0; }
.hdr-right { display:flex; align-items:center; gap:4px; flex-shrink:0; }

.hdr-logo {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; background:var(--navy); border-radius: 8px;
  flex-shrink:0; text-decoration:none; transition:opacity 0.2s;
}
.hdr-logo:hover { opacity:0.8; }
.hdr-logo svg { width:14px; height:14px; }

.hdr-div { width:1px; height:18px; background:var(--border); flex-shrink:0; }

.breadcrumb { display:flex; align-items:center; gap:5px; min-width:0; }
.bc-btn {
  background:none; border:none; padding:0; cursor:pointer;
  font-size:13px; color:var(--muted); font-family:inherit;
  transition:color 0.2s; display:flex; align-items:center; gap:4px;
}
.bc-btn:hover { color:var(--text); }
.bc-btn .bc-caret { font-size:9px; opacity:0.6; transition:transform 0.2s; }
.bc-btn.open .bc-caret { transform:rotate(180deg); }
.bc-sep { font-size:11px; color:var(--faint); flex-shrink:0; }
.bc-current { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; }

.hdr-icon-btn {
  width:30px; height:30px; border-radius:6px; border:none;
  background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s, color 0.2s; flex-shrink:0;
}
.hdr-icon-btn:hover { background:var(--bg); color:var(--text); }
.hdr-icon-btn svg { width:15px; height:15px; pointer-events:none; }

/* ── App body ── */
.app-body { display:flex; flex:1; overflow:hidden; }

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
  transition:width 0.22s ease;
}
.sidebar.collapsed { width:0; }
.sidebar-inner { width:var(--sidebar-w); overflow-y:auto; flex:1; display:flex; flex-direction:column; }

.sb-section { padding:20px 16px; border-bottom:1px solid var(--border); }
.sb-section:last-child { border-bottom:none; }
.sb-hd {
  font-size:9px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint); margin-bottom:12px;
}
.sb-actions-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sb-btn {
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500;
  padding:7px 10px; border-radius: 8px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--muted); cursor:pointer;
  white-space:nowrap; transition:all 0.2s; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.sb-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--surface); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.08); }
.sb-btn:active { transform: translateY(0); box-shadow: none; }
.sb-btn:disabled { opacity:0.35; pointer-events:none; }
.sb-btn.full  { grid-column:1/-1; }
.sb-btn.primary { background:var(--accent-fill); color:#fff; border-color:var(--accent-fill); font-weight:600; }
.sb-btn.primary:hover { background:var(--accent-fill-hover); border-color:var(--accent-fill-hover); }
.sb-btn.green { background: var(--green-fill); color:#fff; border-color: var(--green-fill); font-weight:600; }
.sb-btn.green:hover { background:var(--green-fill-hover); border-color:var(--green-fill-hover); }
.sb-btn.accent { background:none; color:var(--accent); border-color:var(--accent); font-weight:600; }
.sb-btn.accent:hover { background:var(--accent-fill-hover); color:#fff; }

/* ── Canvas ── */
.canvas { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.canvas-body { flex:1; overflow-y:auto; }

/* ── Nav popover ── */
.nav-popover {
  position:fixed; top:49px; left:0; width:492px;
  background:var(--surface); border:1px solid var(--border);
  border-top:none; border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  z-index:400; padding:14px;
  max-height:calc(100vh - 56px); overflow-y:auto;
  animation:navPopIn 0.16s ease;
}
@keyframes navPopIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.nav-pop-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--border);
}
.nav-pop-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.1px; color:var(--faint); }
.nav-pop-dash  { font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; }
.nav-pop-dash:hover { text-decoration:underline; }
.nav-pop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.nav-tool-card {
  display:flex; align-items:center; gap:9px;
  padding:8px 9px; border-radius:8px;
  text-decoration:none; color:var(--text); transition:background 0.12s;
}
.nav-tool-card:hover { background:var(--bg); }
.nav-tool-card.ntc-active { background:var(--bg); outline:1.5px solid var(--border); }
.ntc-icon {
  width:28px; height:28px; border-radius: 8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff; letter-spacing:-0.3px;
  font-family:'DM Mono',monospace;
}
.ntc-info { min-width:0; }
.ntc-name { display:block; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ntc-tag  { display:block; font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.ntc-icon svg { display:block; }
/* Group heading (Decide / Plan / Cost / Finance / Output) across the grid */
.nav-pop-group {
  grid-column:1/-1; font-size:9px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--faint); padding:8px 9px 2px;
}
.nav-pop-group:first-child { padding-top:0; }
/* Narrow screens: fit the viewport, two columns, scroll if taller */
@media (max-width:520px) {
  .nav-popover { width:auto; right:0; }
  .nav-pop-grid { grid-template-columns:repeat(2,1fr); }
}

.sb-field { margin-bottom:10px; }
.sb-field:last-child { margin-bottom:0; }
.sb-field label {
  display:block; font-size:10px; font-weight:600; color:var(--faint);
  letter-spacing:0.8px; text-transform:uppercase; margin-bottom:4px;
}
.sb-field input, .sb-field select, .sb-field textarea {
  width:100%; padding:7px 9px; border:1.5px solid var(--border); border-radius: 8px;
  background:var(--bg); color:var(--text); font-size:13px;
  font-family:inherit; transition:border-color 0.2s;
}
.sb-field input:focus, .sb-field select:focus, .sb-field textarea:focus {
  outline:none; border-color:var(--accent); background:var(--surface);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
[data-theme="dark"] .sb-field input:focus, [data-theme="dark"] .sb-field select:focus, [data-theme="dark"] .sb-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.sb-field select { cursor:pointer; }

/* ── Print ── */
@media print {
  header, .sidebar, .nav-popover { display:none !important; }
  body { height:auto!important; overflow:visible!important; display:block!important; }
  .app-body, .canvas, .canvas-body { display:block!important; overflow:visible!important; height:auto!important; }
  #scroll-progress { display:none !important; }
}

/* ── Scroll progress bar ── */
#scroll-progress {
  position:sticky; top:0; left:0; z-index:50;
  height:2px; width:0%; max-width:100%;
  background:var(--accent);
  transition:width .1s linear;
  flex-shrink:0;
}

/* Theme toggle icon pair (SVG, matches index.html's header treatment) */
.icon-sun { display:none; }
.icon-moon { display:block; }
[data-theme="dark"] .icon-sun { display:block; }
[data-theme="dark"] .icon-moon { display:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}