/* Poyiva design system — the single source of truth for the whole Poyiva UI.
   Derived from the new-project workspace design (Pavel: "this is what we adopt for the whole UI").
   `--pd-*` tokens on :root are the LIGHT theme; `.pd-dark` re-maps the same names to a dark theme
   (used by the hub) so every surface — light or dark — is the same system under the hood.
   Surfaces reference these tokens; nothing hard-codes the palette. */

:root {
  --pd-ink:#24221f; --pd-ink2:#6f6a61; --pd-ink3:#9a948a;
  --pd-bg:#f6f4ef; --pd-card:#ffffff; --pd-card2:#fbfaf6;
  --pd-line:#e2ddd0; --pd-line2:#d3cdbd; --pd-line-strong:#bdb5a6; --pd-tint:#f1efe8;
  --pd-teal:#0e7c73; --pd-teal-bg:#e6f2f0; --pd-blue:#2e6f9e; --pd-blue-bg:#e9f1f7;
  --pd-amber:#a9750d; --pd-amber-bg:#f8efdc; --pd-gold:#c79a32;
  --pd-ok:#3b6d11; --pd-ok-bg:#eaf3de; --pd-hold:#a9750d; --pd-hold-bg:#f8efdc; --pd-bad:#a5342a; --pd-bad-bg:#fbe9e7;
  --pd-radius:12px;
  --pd-font:-apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI",Inter,Roboto,sans-serif;
}

/* Dark theme — same token NAMES, dark values. `--pd-bg` matches the app's #141312 header so the
   dark surfaces flow straight out of the KRIZ|AT topbar. */
.pd-dark {
  --pd-ink:#f2efe9; --pd-ink2:#b3ada1; --pd-ink3:#847f74;
  --pd-bg:#141312; --pd-card:#1d1b19; --pd-card2:#232019;
  --pd-line:#302d29; --pd-line2:#413d37; --pd-line-strong:#4d483f; --pd-tint:#211f1c;
  --pd-teal:#45c4b2; --pd-teal-bg:#123430; --pd-blue:#6fa8d6; --pd-blue-bg:#152a3a;
  --pd-amber:#e0aa4a; --pd-amber-bg:#33280f; --pd-gold:#d9b45b;
  --pd-ok:#8fce55; --pd-ok-bg:#1e3311; --pd-hold:#e0aa4a; --pd-hold-bg:#33280f; --pd-bad:#e08a7d; --pd-bad-bg:#3a1a15;
}

/* ----- module directory (the hub) — dark variant of the design system ----- */
body:has(.pd-hub) main { max-width: none; margin: 0; padding: 0; }
.pd-hub{
  background:
    radial-gradient(1100px 480px at 78% -8%, rgba(69,196,178,.09), transparent 60%),
    radial-gradient(900px 420px at 8% 108%, rgba(111,168,214,.06), transparent 55%),
    var(--pd-bg);
  color:var(--pd-ink); font-family:var(--pd-font); -webkit-font-smoothing:antialiased;
  min-height:calc(100vh - 64px); padding:36px 40px 72px;
}
.pd-hub *{box-sizing:border-box}
.pd-crumb{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--pd-ink3)}
.pd-crumb span{margin:0 8px;color:var(--pd-line2)}
.pd-crumb a{color:var(--pd-ink2);text-decoration:none}
.pd-crumb a:hover{color:var(--pd-teal)}
.pd-hub h1{font-size:34px;font-weight:700;letter-spacing:-.02em;margin:10px 0 6px}
.pd-hub h1 .tm{font-size:.38em;vertical-align:super;color:var(--pd-teal);letter-spacing:0;font-weight:600}
.pd-hub-lede{color:var(--pd-ink2);font-size:14px;line-height:1.55;max-width:660px;margin:0 0 30px}
.pd-hub-group{margin-bottom:26px}
.pd-hub-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pd-ink3);margin-bottom:12px}
.pd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.pd-tile{display:flex;flex-direction:column;gap:9px;background:var(--pd-card);border:1px solid var(--pd-line);border-radius:14px;padding:16px 18px 15px;text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:border-color .14s ease,background .14s ease,transform .14s ease}
.pd-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pd-teal);opacity:0;transition:opacity .14s ease}
.pd-tile:hover{border-color:var(--pd-teal);background:var(--pd-card2);transform:translateY(-2px)}
.pd-tile:hover::before{opacity:.9}
.pd-tile:focus-visible{outline:2px solid var(--pd-teal);outline-offset:2px}
.pd-tile.disabled{opacity:.5}
.pd-tile.demo-locked{pointer-events:none;filter:grayscale(1);opacity:.45}
.pd-tile-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pd-tile-title{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.pd-tile-body{font-size:12.5px;color:var(--pd-ink2);line-height:1.5;margin:0;flex:1}
.pd-tile-go{font-size:12px;font-weight:600;color:var(--pd-teal);margin-top:2px}
.pd-tile-go.planned{color:var(--pd-ink3);font-weight:500}
.pd-chip{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:3px 9px;white-space:nowrap}
.pd-chip.active{background:var(--pd-ok-bg);color:var(--pd-ok)}
.pd-chip.preview{background:var(--pd-teal-bg);color:var(--pd-teal)}
.pd-chip.planned{background:var(--pd-tint);color:var(--pd-ink3)}
.pd-chip.util{background:var(--pd-blue-bg);color:var(--pd-blue)}

@media (max-width:640px){ .pd-hub{padding:24px 18px 56px} .pd-hub h1{font-size:27px} }