/* ════════════════════════════════════════════════════════════════
   hive-pages.css — the four marquee card-faces as full tab pages.
   Tools (signal) · Triage (danger) · Missions (wax) · Output (mint)
   Echoes the .bf-card visual language: hex canvas wash, top accent
   rule, mono eyebrow, display title, item rows.
   ════════════════════════════════════════════════════════════════ */

.pg            { position:relative; padding:0 0 40px; }
.pg__hero      { position:relative; overflow:hidden; padding:30px 28px 26px;
                 border:1px solid rgba(255,255,255,.07);
                 background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(0,0,0,.18));
                 border-top:2px solid var(--pg-accent, var(--wax-bright)); }
.pg__hero-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none; }
.pg__hero-inner{ position:relative; z-index:1; }
.pg__eyebrow   { font-family:var(--font-mono); font-size:13px; letter-spacing:.24em;
                 text-transform:uppercase; color:var(--pg-accent, var(--wax-bright)); opacity:.7; }
.pg__eyebrow-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.pg__colony    { display:inline-flex; align-items:center; gap:9px; padding:7px 14px;
                 border:1.5px solid color-mix(in srgb, var(--pg-accent) 55%, transparent);
                 background:color-mix(in srgb, var(--pg-accent) 14%, transparent);
                 box-shadow:0 0 16px color-mix(in srgb, var(--pg-accent) 18%, transparent); }
.pg__colony-dot{ width:9px; height:9px; border-radius:50%; flex:none;
                 background:var(--pg-accent); box-shadow:0 0 9px var(--pg-accent); }
.pg__colony-name{ font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.01em;
                 color:#fff; line-height:1; }
.pg__colony-url{ font-family:var(--font-mono); font-size:12px; color:color-mix(in srgb, var(--pg-accent) 80%, #fff);
                 padding-left:9px; margin-left:2px; border-left:1px solid rgba(255,255,255,.18); }
.pg__title     { font-family:var(--font-display); font-weight:700; font-size:34px;
                 line-height:1.02; color:#fff; margin:8px 0 6px; letter-spacing:-.01em; }
.pg__tag       { font-size:13px; color:rgba(255,255,255,.45); max-width:60ch; line-height:1.5; }
.pg__hero-stats{ display:flex; gap:26px; margin-top:18px; flex-wrap:wrap; }
.pg__hs        { display:flex; flex-direction:column; gap:2px; }
.pg__hs-v      { font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1;
                 color:var(--pg-accent, var(--wax-bright)); }
.pg__hs-k      { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em;
                 text-transform:uppercase; color:rgba(255,255,255,.3); }

.pg__body      { padding:22px 4px 0; display:flex; flex-direction:column; gap:22px; }
.pg__sec       { }
.pg__sec-head  { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pg__sec-title { font-family:var(--font-mono); font-size:13.5px; letter-spacing:.16em;
                 text-transform:uppercase; color:rgba(255,255,255,.55); }
.pg__sec-count { font-family:var(--font-mono); font-size:13px; letter-spacing:.08em;
                 color:var(--text-dim); margin-left:auto; }

/* generic accent-headed card */
.pg-card       { position:relative; overflow:hidden; padding:18px;
                 border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025);
                 border-top:2px solid var(--c, var(--pg-accent)); }
.pg-grid       { display:grid; gap:14px; }
.pg-grid--4    { grid-template-columns:repeat(4,1fr); }
.pg-grid--3    { grid-template-columns:repeat(3,1fr); }
.pg-grid--2    { grid-template-columns:repeat(2,1fr); }
@media (max-width:880px){ .pg-grid--4{ grid-template-columns:repeat(2,1fr);} .pg-grid--3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pg-grid--4,.pg-grid--3,.pg-grid--2{ grid-template-columns:1fr;} }

/* metric tile (Output) */
.pg-metric     { padding:20px 18px; border:1px solid rgba(255,255,255,.07);
                 background:rgba(255,255,255,.025); border-top:2px solid var(--c,var(--wax-bright)); }
.pg-metric__v  { font-family:var(--font-display); font-weight:700; font-size:38px; line-height:1;
                 color:var(--c,var(--wax-bright)); margin-bottom:6px; }
.pg-metric__k  { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.13em;
                 text-transform:uppercase; color:rgba(255,255,255,.42); }
.pg-metric__s  { font-size:13.5px; color:rgba(255,255,255,.42); margin-top:4px; }
.pg-metric__bar{ height:3px; background:rgba(255,255,255,.07); margin-top:12px; overflow:hidden; }
.pg-metric__bar i{ display:block; height:100%; background:var(--c,var(--wax-bright)); transition:width .6s; }

/* pillar bars (Output) */
.pg-pillar     { display:flex; align-items:center; gap:12px; padding:10px 0; }
.pg-pillar__k  { font-family:var(--font-mono); font-size:13.5px; letter-spacing:.05em;
                 color:rgba(255,255,255,.6); width:130px; flex:none; }
.pg-pillar__track{ flex:1; height:8px; background:rgba(255,255,255,.06); position:relative; }
.pg-pillar__track i{ position:absolute; inset:0 auto 0 0; background:var(--mint); }
.pg-pillar__v  { font-family:var(--font-mono); font-size:13.5px; color:var(--mint); width:46px; text-align:right; }

/* tool catalog (Tools) */
.pg-tool       { display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer;
                 border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02);
                 transition:border-color .2s, background .2s; }
.pg-tool:hover { border-color:rgba(92,225,201,.4); background:rgba(92,225,201,.05); }
.pg-tool__dot  { width:8px; height:8px; flex:none; border-radius:50%; background:var(--text-dim); }
.pg-tool__dot.fresh{ background:var(--ok); box-shadow:0 0 7px var(--ok); }
.pg-tool__dot.stale{ background:var(--warn); box-shadow:0 0 7px var(--warn); }
.pg-tool__name { font-size:13px; color:rgba(255,255,255,.78); }
.pg-tool__desc { font-size:13.5px; color:rgba(255,255,255,.32); }
.pg-tool__meta { margin-left:auto; display:flex; align-items:center; gap:10px; }
.pg-tool__vp   { font-family:var(--font-mono); font-size:13.5px; color:var(--signal); }
.pg-tool__run  { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em;
                 padding:4px 9px; border:1px solid rgba(92,225,201,.3); color:var(--signal); white-space:nowrap; }
.pg-tool__star { color:var(--royal); font-size:13.5px; }
.pg-catbar     { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.pg-catchip    { font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; padding:6px 12px;
                 border:1px solid rgba(255,255,255,.1); color:var(--text-dim); cursor:pointer; }
.pg-catchip.on { border-color:var(--signal); color:var(--signal); background:rgba(92,225,201,.08); }

/* triage queue (Triage) */
.pg-triage-item{ display:flex; align-items:center; gap:13px; padding:13px 15px; cursor:pointer;
                 border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02);
                 border-left:3px solid var(--sev,var(--warn)); transition:background .2s; }
.pg-triage-item:hover{ background:rgba(255,94,94,.05); }
.pg-triage__sev{ font-size:15px; color:var(--sev,var(--warn)); flex:none; width:20px; text-align:center; }
.pg-triage__body{ flex:1; min-width:0; }
.pg-triage__name{ font-size:13px; color:rgba(255,255,255,.82); }
.pg-triage__sub { font-size:13.5px; color:rgba(255,255,255,.34); margin-top:2px; }
.pg-triage__tag { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em; padding:4px 9px;
                 border:1px solid currentColor; color:var(--sev,var(--warn)); flex:none; }
.pg-empty      { padding:26px; text-align:center; color:var(--ok); font-size:13px;
                 border:1px dashed rgba(92,217,126,.3); background:rgba(92,217,126,.04); }
.pg-triage-group-label{ font-family:var(--font-mono); font-size:13px; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--sev); margin:16px 0 8px; }

/* ── Apiary: active-colony marquee cards section ── */
.apy-cards-section{ margin:28px 0 8px; }
.apy-cards-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid rgba(200,165,80,.14); }
.apy-cards-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--signal); }
.apy-cards-name{ font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff; }
.apy-cards-url{ font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--text-dim); }

/* ── Apiary: live hive for the active colony ── */
.apy-hive{ position:relative; margin-top:18px; background:var(--void,#04020a);
  border:1px solid rgba(200,165,80,.12); }
.apy-hive-label{ position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; padding:9px 18px;
  background:linear-gradient(180deg,rgba(4,2,10,.85),transparent); pointer-events:none; }
.apy-hive-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(225,150,40,.78); }
.apy-hive-count{ font-family:var(--font-mono); font-size:12.5px; color:rgba(255,255,255,.55); }
.apy-hive-canvas-wrap{ width:100%; height:660px; position:relative; overflow:hidden; }
.apy-hive-canvas-wrap canvas{ display:block; width:100%; height:100%; }