/* PBD Customer Control Center -- shared page-shell toolkit ("Modernist dark" refresh). The design's "Page shell" layer: the 1280px container, the page-header pattern, section labels, the card system (red top rule on primary cards), the table/row pattern, the button system (flush-left labels), status tags, and the global focus-visible ring. Radius 0 everywhere. IMPORTANT (Phase 1 scoping): every class here is namespaced `ps-*` so linking this file on a page does NOT restyle that page's existing body before its per-page phase composes with it. The only global rules are the design tokens on :root and the :focus-visible ring -- both additive and safe. Page bodies are migrated onto these classes in Phases 2-3. Include via in , after nav-shared.css. */ :root{ /* Colors -- dark theme (design tokens). */ --ps-bg:#0b0b0d; --ps-card:#131316; --ps-card-alt:#0f0f12; /* secondary / rail cards */ --ps-row-resolved:#101013; --ps-hover:#16161a; --ps-rule-strong:#26262b; /* 2px rules */ --ps-rule-hair:#232329; /* 1px hairlines */ --ps-border-mid:#3a3a42; /* secondary buttons, pending steps */ --ps-white:#ffffff; --ps-body-strong:#f2f2f2; --ps-body:#d6d6dc; --ps-dim:#b9b9c1; --ps-secondary:#9a9aa2; --ps-kicker:#8a8a92; --ps-disabled:#6e6e76; --ps-red:#d1132e; --ps-red-hover:#a80e25; --ps-green:#4ade80; --ps-amber:#f5b942; --ps-font:'Archivo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } /* ---------- Container ---------- */ .ps-container{max-width:1280px;margin:0 auto;padding:44px 40px 64px;display:flex;flex-direction:column;gap:28px;font-family:var(--ps-font);} .ps-container--dashboard{gap:40px;} /* ---------- Page header ---------- */ .ps-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:2px solid var(--ps-rule-strong);padding-bottom:18px;} .ps-page-header-titles{display:flex;flex-direction:column;gap:6px;min-width:0;} .ps-h1{margin:0;font:900 34px/1 var(--ps-font);color:var(--ps-white);} .ps-subtitle{margin:0;font:400 14px var(--ps-font);color:var(--ps-secondary);} /* ---------- Section label ---------- */ .ps-section-label{font:700 12px var(--ps-font);letter-spacing:.26em;color:var(--ps-kicker);border-bottom:2px solid var(--ps-rule-strong);padding-bottom:10px;} /* ---------- Cards ---------- */ .ps-card{background:var(--ps-card);border:1px solid var(--ps-rule-hair);border-radius:0;} .ps-card--primary{border-top:2px solid var(--ps-red);} .ps-card--alt{background:var(--ps-card-alt);} .ps-card-pad{padding:24px 32px;} .ps-kicker{font:700 11px var(--ps-font);letter-spacing:.24em;color:var(--ps-kicker);} /* ---------- Tables / field rows ---------- */ .ps-table{display:flex;flex-direction:column;} .ps-table-head{display:grid;gap:16px;padding:8px 0;border-bottom:2px solid var(--ps-rule-strong);} .ps-table-head span{font:700 11px var(--ps-font);letter-spacing:.14em;color:var(--ps-kicker);} .ps-table-row{display:grid;gap:16px;padding:13px 0;border-bottom:1px solid var(--ps-rule-hair);align-items:center;transition:background .13s ease;} .ps-table-row:last-child{border-bottom:none;} .ps-table-row:hover{background:var(--ps-hover);} /* ---------- Buttons (flush-left labels -- never centered) ---------- */ .ps-btn{display:inline-flex;align-items:center;font:700 13.5px var(--ps-font);white-space:nowrap;cursor:pointer;border-radius:0;text-decoration:none;transition:background .13s ease,border-color .13s ease,color .13s ease;} .ps-btn--primary{background:var(--ps-red);color:#fff;border:none;padding:13px 44px 13px 18px;} .ps-btn--primary:hover{background:var(--ps-red-hover);} .ps-btn--secondary{background:transparent;color:var(--ps-body-strong);border:2px solid var(--ps-border-mid);padding:11px 42px 11px 16px;} .ps-btn--secondary:hover{border-color:var(--ps-red);color:var(--ps-red);} .ps-btn--link{background:none;border:none;padding:0;color:var(--ps-red);font:700 13px var(--ps-font);} .ps-btn--link:hover{color:var(--ps-white);} /* ---------- Status tags (flat, tinted bg ~10% of text color) ---------- */ .ps-tag{display:inline-block;font:700 10.5px var(--ps-font);letter-spacing:.13em;padding:4px 8px;border-radius:0;white-space:nowrap;} .ps-tag--green{color:var(--ps-green);background:rgba(74,222,128,.1);} .ps-tag--amber{color:var(--ps-amber);background:rgba(245,185,66,.1);} .ps-tag--red{color:var(--ps-red);background:rgba(209,19,46,.1);} .ps-tag--neutral{color:var(--ps-kicker);background:rgba(138,138,146,.12);} /* ---------- Focus-visible ring (design token) ---------- Scoped to shell content (and the header handles its own) so it never leaks into the datalog viewer overlay, which is out of scope by design. As page bodies migrate onto .ps-container in Phases 2-3, their interactive elements pick this up automatically. */ .ps-container :focus-visible,.ps-card :focus-visible,.ps-btn:focus-visible{outline:2px solid var(--ps-red);outline-offset:2px;} /* ---------- Responsive ---------- */ @media(max-width:1100px){ .ps-container{padding:36px 28px 56px;} } @media(max-width:860px){ .ps-container{padding:28px 16px 48px;gap:22px;} .ps-page-header{flex-direction:column;align-items:stretch;gap:14px;} .ps-h1{font-size:27px;} }