/* ══════════════════════════════════════════════════════════════════════
   slips-view.css — the SLIPS destination view (Vault 5th tab).

   Single source of truth, loaded by BOTH ProbeEdge_Vault.html (#view-slipstyle,
   which also carries class .slips-view) and the preview harness. Scoped to
   .slips-view so it can be reused/previewed without touching global :root.

   Two full-screen themes (approved palettes) override the Vault CSS tokens
   WITHIN .slips-view only, so bg / panels / accent / text / fonts / radius
   re-theme while global :root, other views, and the top header stay untouched.
   --green / --red are intentionally NOT overridden (shared winner/status).
   Cards inside reskin via prediction-card.css [data-skin] rules (already built).
   ══════════════════════════════════════════════════════════════════════ */

/* ── base layout (uses whatever tokens the active theme sets) ── */
.slips-view{ background:var(--void); }
.slips-view .slips-section{ padding:56px 52px; position:relative; z-index:1; }
.slips-view .slips-hdr{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px; flex-wrap:wrap; gap:10px; }
.slips-view .slips-title{ font-family:var(--cinzel); font-size:24px; font-weight:600; letter-spacing:5px; color:var(--gold); }
.slips-view .slips-sub{ font-family:var(--mono); font-size:8px; letter-spacing:3px; color:var(--dim); }
.slips-view #slips-skin-toggle{ margin-bottom:24px; }
.slips-view .slips-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }

/* ── placeholder slot (base) ── */
.slips-view .slip-slot{ border:1px dashed rgba(255,255,255,0.16); border-radius:12px; padding:26px 18px; min-height:112px; background:var(--obsidian);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-align:center;
  transition:border-color .18s, background .18s; }
.slips-view .slip-slot:hover{ border-color:var(--gold); }
.slips-view .slip-slot__plus{ font-family:var(--cinzel); font-size:22px; line-height:1; color:var(--gold); }
.slips-view .slip-slot__lbl{ font-family:var(--mono); font-size:8px; letter-spacing:2px; color:var(--dim); }

/* ── DK-STYLE full-screen theme ── */
[data-skin="dk"] .slips-view{
  --void:#0B0E13; --obsidian:#10131A; --marble:#151922; --surface:#12151D;
  --gold:#4ADE80; --gold-b:#6EE7A0; --gold-d:rgba(74,222,128,0.18); --gold-g:rgba(74,222,128,0.05); --gold-gl:rgba(74,222,128,0.08);
  --platinum:#F4F6FA; --silver:rgba(244,246,250,0.70); --dim:rgba(244,246,250,0.55); --dim-text:rgba(244,246,250,0.70);
  --cinzel:'Inter',sans-serif; --cormorant:'Inter',sans-serif;
}
[data-skin="dk"] .slips-view .slips-title{ font-weight:700; letter-spacing:2px; }
[data-skin="dk"] .slips-view .slip-slot{ border-radius:8px; border-color:rgba(255,255,255,0.14); }
[data-skin="dk"] .slips-view .slip-slot:hover{ border-color:#4ADE80; background:rgba(74,222,128,0.06); }
[data-skin="dk"] .slips-view .slip-slot__plus{ font-family:'Inter',sans-serif; }

/* ── HARD-ROCK full-screen theme ── */
[data-skin="hardrock"] .slips-view{
  --void:#0B0614; --obsidian:#120A1E; --marble:#17102A; --surface:#140C24;
  --gold:#A855F7; --gold-b:#C4A5FF; --gold-d:rgba(168,85,247,0.22); --gold-g:rgba(168,85,247,0.06); --gold-gl:rgba(168,85,247,0.10);
  --platinum:rgba(244,240,255,0.94); --silver:rgba(206,190,240,0.70); --dim:rgba(206,190,240,0.60); --dim-text:rgba(206,190,240,0.75);
  --cinzel:'Encode Sans Expanded',sans-serif; --cormorant:'Inter',sans-serif;
}
[data-skin="hardrock"] .slips-view .slips-title{ font-weight:800; letter-spacing:2px; color:#C4A5FF; }
[data-skin="hardrock"] .slips-view .slip-slot{ border-radius:16px; border-color:rgba(168,85,247,0.35); }
[data-skin="hardrock"] .slips-view .slip-slot:hover{ border-color:#A855F7; background:rgba(168,85,247,0.08); }
[data-skin="hardrock"] .slips-view .slip-slot__plus{ font-family:'Encode Sans Expanded',sans-serif; }

/* ── inline add-pick modal (themed via view tokens) ── */
.slip-modal{ position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.72); padding:20px; }
.slip-modal.show{ display:flex; }
.slip-modal__box{ width:100%; max-width:420px; background:var(--obsidian); border:1px solid var(--gold-d); border-radius:14px; padding:26px; }
.slip-modal__title{ font-family:var(--cinzel); font-size:13px; letter-spacing:3px; color:var(--gold); margin-bottom:16px; }
.slip-modal__box select, .slip-modal__box textarea{ width:100%; padding:10px; background:var(--void); border:1px solid var(--gold-d); color:var(--platinum); font-family:var(--mono); font-size:10px; margin-bottom:12px; outline:none; }
.slip-modal__box textarea{ height:80px; resize:none; font-family:var(--cormorant); font-size:15px; }
.slip-modal__box input[type=range]{ width:100%; accent-color:var(--gold); margin-bottom:6px; }
.slip-modal__conf{ font-family:var(--mono); font-size:8px; letter-spacing:2px; color:var(--dim); margin-bottom:16px; }
.slip-modal__actions{ display:flex; gap:10px; }
.slip-modal__btn{ flex:1; padding:12px; font-family:var(--cinzel); font-size:9px; letter-spacing:3px; cursor:pointer; border-radius:6px; }
.slip-modal__btn--primary{ background:var(--gold); border:none; color:#04120A; }
[data-skin="hardrock"] .slip-modal__btn--primary{ color:#fff; }
.slip-modal__btn--ghost{ background:transparent; border:1px solid var(--gold-d); color:var(--dim); }
.slip-modal__msg{ font-family:var(--mono); font-size:8px; letter-spacing:1px; color:var(--gold); text-align:center; min-height:12px; margin-top:10px; }

/* ── stats bar (ported from Daily Pick) + filter tabs + edit affordance ── */
.slips-view .slips-stats{ display:flex; gap:26px; margin-bottom:20px; }
.slips-view .slips-stat__val{ font-family:var(--cinzel); font-size:26px; font-weight:600; color:var(--gold); line-height:1; }
.slips-view .slips-stat__lbl{ font-family:var(--mono); font-size:7px; letter-spacing:2px; color:var(--dim); margin-top:5px; }
.slips-view #slips-tabs{ margin-bottom:16px; }
.slips-view .slip-card-wrap{ position:relative; }
.slips-view .slip-edit-btn{ position:absolute; bottom:10px; left:14px; z-index:2; font-family:var(--mono); font-size:8px; letter-spacing:2px;
  padding:4px 9px; border-radius:5px; background:transparent; border:1px solid var(--gold-d); color:var(--dim); cursor:pointer;
  transition:color .15s, border-color .15s; }
.slips-view .slip-edit-btn:hover{ color:var(--gold); border-color:var(--gold); }
.slips-view .slips-empty-note{ grid-column:1 / -1; font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--dim); padding:20px 4px; }

@media(max-width:640px){ .slips-view .slips-section{ padding:32px 20px; } .slips-view .slips-stats{ gap:18px; } }