/* ==========================================================================
   FT Ventures Studio — shared CLIENT-PORTAL styling
   Used by BOTH the Builder's live preview and the real portal page, so every
   generated portal looks consistent. `--accent` is set per client at render,
   along with `--accent-ink` (a readable foreground ON the accent) and
   `--accent-text` (the accent darkened enough to be read AS text). Both are
   measured by FTV.inkOn/FTV.readable in registry.js — never assume white sits
   legibly on a colour the client chose. Defaults below match the default gold.
   ========================================================================== */
.portal-root{ --accent:#B0842E; --accent-ink:#12233B; --accent-text:#8A6724; background:var(--ground); color:var(--ink); font-family:var(--sans); border-radius:inherit; }
.p-head{ display:flex; align-items:center; gap:12px; padding:16px 22px; background:var(--panel); border-bottom:1px solid var(--line); }
.p-mark{ width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:16px;flex:none;letter-spacing:.02em; }
.p-brand{ font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.1; }
.p-sub{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--mono); margin-top:2px; }
.p-hero{ padding:32px 22px 6px; }
.p-hero h1{ font-family:var(--serif); font-size:clamp(23px,3.4vw,32px); margin:0 0 6px; font-weight:600; }
.p-hero p{ color:var(--ink-soft); margin:0; }
.p-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; padding:20px 22px 26px; }
.p-tile{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px 16px; box-shadow:var(--shadow); border-top:3px solid var(--line-2); }
.p-tile.live{ border-top-color:var(--accent); }
.p-tile-h{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.p-ic{ font-size:21px; line-height:1; }
.p-name{ font-weight:700; font-size:14.5px; }
.p-live{ font:700 8.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); padding:2px 6px; border-radius:999px; vertical-align:2px; margin-left:4px; }
.p-tag{ font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.4; }
.p-tools{ display:flex; flex-direction:column; gap:6px; }
.p-tool{ display:flex; justify-content:space-between; align-items:center; padding:8px 11px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink); text-decoration:none; background:var(--panel-soft); }
.p-tool:hover{ border-color:var(--accent); text-decoration:none; }
.p-tool span{ color:var(--accent-text); font-weight:700; }
.p-pending{ font-size:11.5px; color:var(--ink-faint); background:var(--panel-soft); border:1px dashed var(--line-2); border-radius:8px; padding:8px 10px; text-align:center; }
.p-skills{ margin-top:10px; font-size:10.5px; color:var(--ink-faint); font-family:var(--mono); line-height:1.4; }
.p-empty{ padding:34px 22px; text-align:center; color:var(--ink-faint); }