/* =========================================================
   PETE CARTER PORTFOLIO REDESIGN
   Homepage-focused CSS matching the approved dark systems
   engineering mockup while preserving shared chatbot tokens.

   This is the site's main stylesheet, shared by every page.
   Two other CSS files add page-specific styles on top of this
   one: chatbot.css (the floating AI chat widget) and resume.css
   (the /resume page only) — both are only loaded on the pages
   that need them, see templates/base.html and resume.html.

   TABLE OF CONTENTS (search for these ALL-CAPS headings below):
     - RESET AND PAGE BASE       shared defaults for every element
     - HEADER AND NAVIGATION     top nav bar, site menu, LinkedIn icon
     - BUTTONS                   .btn styles used all over the site
     - HERO                      homepage hero + the Ask Pete AI search box
     - CIRCULAR LIFECYCLE VISUAL homepage's 6-stage engineering diagram
     - METRICS BAND              scrolling strip of career numbers
     - FEATURED PROJECTS         homepage's 3 project cards
     - PROJECTS PAGE             /work page (full project write-ups)
     - PEERSLATE PLATFORM HOMEPAGE  the separate peerslate.com root page
     - LIGHT THEME COMPATIBILITY overrides so light themes still read well
     - FOOTER                    shared footer on every page
     - RESPONSIVE BEHAVIOR       @media rules for tablet/phone widths
     - MY STORY PAGE             /my-story page, largest single section
   ========================================================= */

:root {
    /* Core dark product palette */
    --color-page: #030b16;
    --color-page-deep: #020812;
    --color-section: #06111f;
    --color-card: #0a1624;
    --color-card-elevated: #0d1a2a;
    --color-card-hover: #102238;

    /* Brand accents */
    --color-gold: #f3be4f;
    --color-gold-bright: #ffd36a;
    --color-gold-muted: #c9922e;
    --color-gold-dark: #8a6323;
    --color-blue: #4ea3ff;
    --color-cyan: #50d6e8;

    /* Text and borders */
    --color-text-primary: #f5f7fa;
    --color-text-secondary: #c5cdd7;
    --color-text-muted: #8996a8;
    --color-text-dark: #091120;
    --color-border: #26374a;
    --color-border-soft: #18283a;
    --color-border-gold: #9a712b;

    /* Shadows */
    --shadow-card: 0 18px 45px rgb(0 0 0 / 24%);
    --shadow-gold: 0 0 24px rgb(243 190 79 / 18%);

    /* Legacy variables still used by chatbot.css */
    --navy-950: var(--color-text-dark);
    --navy-900: #15172d;
    --navy-800: #16213e;
    --navy-700: #0f3460;
    --gold-500: var(--color-gold);
    --gold-400: var(--color-gold-bright);
    --white: #ffffff;
    --surface: #f7f8fb;
    --text-dark: #202635;
    --text-muted: #5d6675;
    --border-light: rgb(26 26 46 / 10%);

    /* Type and layout */
    --font-display: clamp(1.8rem, 2.6vw, 2.6rem);     /* Main homepage headline size; clamp(min, preferred, max) keeps it responsive */
    --font-h2: clamp(2rem, 2.5vw, 2.55rem);          /* Section heading size used below the hero */
    --font-body: 1rem;                               /* Normal paragraph text size; 1rem usually equals 16px */
    --font-small: 0.875rem;                          /* Smaller supporting text size */
    --font-label: 0.75rem;                           /* Tiny label/eyebrow text size */
    --site-width: 1360px;                            /* Maximum width for aligned page content */

    /* PeerSlate Foundation C semantic tokens. New application rooms use
       these shared names instead of inventing a page-specific palette. */
    --ps-ink-950: #0a1b36;
    --ps-cloud-white: #f6f8fc;
    --ps-product-indigo: #203767;
    --ps-product-indigo-strong: #3f4ac4;
    --ps-connection-azure: #4ea3ff;
    --ps-ai-cyan: #2f5296;
    --ps-evidence-amber: #b87900;
    --ps-success: #24a36a;
    --ps-warning: #d48727;
    --ps-danger: #b23a2f;
    --ps-font-display: "Newsreader", Georgia, serif;
    --ps-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Theme presets: each block below redefines the same variable names from
   :root above with different colors. theme-preview.js sets data-theme on
   <body> when a visitor clicks a theme button in the site menu, which
   instantly swaps every color on the page to whichever block matches
   below (CSS variables cascade, so nothing else needs to change). */

body[data-theme="modern-blue"] {
    --color-page: #050914;
    --color-page-deep: #030711;
    --color-section: #07111f;
    --color-card: #0b1320;
    --color-card-elevated: #101b2c;
    --color-card-hover: #12243a;
    --color-gold: #4ea3ff;
    --color-gold-bright: #9fdcff;
    --color-gold-muted: #2563eb;
    --color-gold-dark: #1d4ed8;
    --color-blue: #60a5fa;
    --color-cyan: #38bdf8;
    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-dark: #06111f;
    --color-border: #26364d;
    --color-border-soft: #17263a;
    --color-border-gold: #3b82f6;
    --navy-900: #0f172a;
    --navy-800: #111827;
    --navy-700: #1d4ed8;
    --surface: #f8fafc;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border-light: rgb(15 23 42 / 12%);

    /* Platform-chrome variables mapped onto this theme's palette. */
    --bg: #050914;
    --bg-elevated: #07111f;
    --surface: #0b1320;
    --surface-soft: #101b2c;
    --text: #f8fafc;
    --text-muted: #94a3b8;
    --accent: #4ea3ff;
    --accent-hover: #9fdcff;
    --accent-soft: rgb(78 163 255 / 14%);
    --border: #26364d;
    --shadow: 0 18px 45px rgb(0 0 0 / 24%);
    --nav-bg: rgb(5 9 20 / 92%);
    --tab-active: #4ea3ff;
    --button-primary-bg: #4ea3ff;
    --button-primary-text: #06111f;
    --button-secondary-bg: rgb(255 255 255 / 5%);
    --button-secondary-text: #f8fafc;
}


/* =========================================================
   RESET AND PAGE BASE
   ========================================================= */

/* box-sizing: border-box makes an element's declared width/height include
   its padding and border, instead of adding them on top — this is what
   keeps padded boxes from silently growing wider than expected. Every
   browser also ships its own default margin/padding on things like <p>
   and <h1>, so zeroing both here means every page starts from the same
   blank slate instead of fighting inconsistent browser defaults. */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Makes in-page jumps (like clicking a nav link with a #section-id) glide
   instead of snapping instantly. */
html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--color-text-primary);
    background:
        radial-gradient(circle at 65% 18%, rgb(17 66 112 / 22%), transparent 32%),
        radial-gradient(circle at 12% 42%, rgb(5 36 67 / 24%), transparent 30%),
        linear-gradient(180deg, var(--color-page) 0%, #05101d 55%, var(--color-page) 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Links and buttons: browsers default links to blue/underlined and give
   buttons their own font — these two rules make both inherit the
   surrounding text's color and font instead, so a link or button only
   looks different where a class further down the file says it should. */
a {
    color: inherit;
    text-decoration: none;
}

button {
    color: inherit;
    font: inherit;
}

svg {
    display: block;
}

.site-container {
    width: min(100% - 96px, var(--site-width));    /* Shared alignment rail for the screenshot layout */
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    transform: translateY(-180%);
    padding: 10px 16px;
    color: var(--color-text-dark);
    background: var(--color-gold);
    border-radius: 6px;
    font-weight: 800;
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-gold-bright);
    outline-offset: 4px;
}


/* ---------- Site menu (top-left dropdown) ----------
   Future home of the multi-tenant business menu. position: relative
   lets the dropdown anchor directly beneath the button. */

.theme-preview {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border-soft);
}

.theme-preview p {
    padding: 8px 10px 4px;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.theme-preview button {
    width: 100%;
    display: block;
    padding: 9px 10px;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
}

.theme-preview button:hover,
.theme-preview button:focus-visible,
.theme-preview button.is-active {
    color: var(--color-gold-bright);
    background: rgb(80 214 232 / 8%);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 22px;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.93rem;
    font-weight: 800;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.btn:hover {
    transform: translateY(-2px);
}

/* Buttons size to their label (plus padding) — a fixed min-width left
   short labels floating inside stretched pills, which Pete flagged. */
.btn-primary {
    color: var(--color-text-dark);
    background: linear-gradient(180deg, var(--color-gold-bright), var(--color-gold));
    box-shadow: var(--shadow-gold);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--color-gold-bright);
}

.btn-secondary {
    color: var(--color-text-primary);
    background: rgb(255 255 255 / 2%);
    border-color: var(--color-border-gold);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    color: var(--color-gold-bright);
    border-color: var(--color-gold);
    background: rgb(243 190 79 / 8%);
}

.btn-secondary svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   HERO
   ========================================================= */

.main-content {
    min-height: calc(100vh - 68px);
    position: relative;
    isolation: isolate;
}

.main-content::before {
    content: none;
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--color-text-primary);
    background:
        linear-gradient(180deg, rgb(3 11 22 / 12%), rgb(3 11 22 / 72%)),
        var(--site-circuit-image);
    background-repeat: repeat-y;
    background-position: top left;
    background-size: 100% auto;
}

/* Restored circuit/chip artwork sitting behind the gradient tint and grid
   overlay below. Sits at z-index -3 so ::before/::after (both negative but
   less so) still paint on top of it for text readability. */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgb(3 11 22 / 82%) 0%, rgb(3 11 22 / 64%) 48%, rgb(3 11 22 / 82%) 100%),
        radial-gradient(circle at 78% 14%, rgb(78 163 255 / 18%), transparent 28%);
}

.hero::after {
    content: none;
}

.section-eyebrow {
    color: var(--color-gold);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.hero-ai-search {
    max-width: 720px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.page-ai-after-hero {
    max-width: 720px;
    margin: 24px 0 30px;
}

.page-ai-after-hero .hero-ai-search {
    max-width: 720px;
    margin: 0;
}

.hero-ai-search__label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-cyan);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-ai-search__box {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 56px;
    padding: 5px;
    background: linear-gradient(180deg, rgb(11 24 39 / 96%), rgb(8 20 32 / 96%));
    border: 1px solid rgb(80 214 232 / 42%);
    border-radius: 10px;
    box-shadow:
        0 16px 38px rgb(0 0 0 / 22%),
        0 0 22px rgb(80 214 232 / 10%);
    overflow: hidden;
}

.hero-ai-search__box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgb(80 214 232 / 75%), rgb(243 190 79 / 55%), transparent);
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

.hero-ai-search.is-searching .hero-ai-search__box::before {
    opacity: 1;
    animation: ai-border-scan 1.25s linear infinite;
}

@keyframes ai-border-scan {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.hero-ai-search__input {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 44px;
    padding: 0 15px;
    color: var(--color-text-primary);
    background: transparent;
    border: 0;
    outline: none;
    font-size: 0.98rem;
}

.hero-ai-search__input::placeholder {
    color: var(--color-text-muted);
}

.hero-ai-search__button {
    position: relative;
    z-index: 1;
    min-height: 42px;
    padding: 0 18px;
    color: var(--color-text-dark);
    background: linear-gradient(180deg, #9fdcff, #4ea3ff);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 850;
    transition: transform 160ms ease, filter 160ms ease;
}

.hero-ai-search__button:hover,
.hero-ai-search__button:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.hero-ai-search__button:disabled {
    cursor: progress;
    opacity: 0.72;
    transform: none;
}

.hero-ai-search__status {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.hero-ai-answer {
    position: relative;
    margin-top: 13px;
    padding: 14px 46px 15px 15px;
    color: var(--color-text-secondary);
    background: linear-gradient(180deg, rgb(10 22 36 / 94%), rgb(7 18 30 / 94%));
    border: 1px solid rgb(80 214 232 / 24%);
    border-left: 3px solid var(--color-cyan);
    border-radius: 10px;
    box-shadow:
        0 16px 36px rgb(0 0 0 / 20%),
        0 0 20px rgb(80 214 232 / 8%);
}

.hero-ai-answer.is-loading {
    border-left-color: var(--color-gold);
}

.hero-ai-answer::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-top: 1px solid rgb(80 214 232 / 24%);
    border-left: 1px solid rgb(80 214 232 / 24%);
    transform: rotate(45deg);
}

.hero-ai-answer__question {
    margin-bottom: 7px;
    color: var(--color-cyan);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.hero-ai-answer__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--color-border-soft);
    border-radius: 7px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.hero-ai-answer__close:hover,
.hero-ai-answer__close:focus-visible {
    color: var(--color-cyan);
    background: rgb(80 214 232 / 9%);
    border-color: rgb(80 214 232 / 38%);
}

.hero-ai-answer__response {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-line;
}


/* =========================================================
   FEATURED PROJECTS
   ========================================================= */

.projects-section {
    padding: 52px 0 84px;
    background:
        radial-gradient(circle at 30% 20%, rgb(17 66 112 / 12%), transparent 28%),
        var(--color-page);
}

.projects-copy {
    padding-top: 24px;
}

.section-eyebrow {
    margin-bottom: 22px;
}

.projects-copy h2 {
    max-width: 310px;
    margin-bottom: 18px;
    color: var(--color-text-primary);
    font-size: var(--font-h2);
    font-weight: 820;
    letter-spacing: -0.04em;
    line-height: 1.16;
}

.projects-copy p {
    max-width: 310px;
    margin-bottom: 31px;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.72;
}

.view-all-link {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 0 24px;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-gold);
    border-radius: 7px;
    font-size: 0.92rem;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.view-all-link:hover,
.view-all-link:focus-visible {
    color: var(--color-gold-bright);
    border-color: var(--color-gold);
    background: rgb(243 190 79 / 6%);
}


.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
}

.project-tags span {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: var(--color-text-secondary);
    background: var(--color-card-elevated);
    border: 1px solid var(--color-border-soft);
    border-radius: 5px;
    font-size: 0.72rem;
}


/* =========================================================
   PROJECTS PAGE
   ========================================================= */

.work-page {
    position: relative;
    isolation: isolate;
    padding: 46px 0 70px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgb(3 11 22 / 12%), rgb(3 11 22 / 72%)),
        var(--site-circuit-image);
    background-repeat: repeat-y;
    background-position: top left;
    background-size: 100% auto;
}

.work-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgb(3 11 22 / 82%) 0%, rgb(3 11 22 / 64%) 48%, rgb(3 11 22 / 82%) 100%),
        radial-gradient(circle at 78% 14%, rgb(78 163 255 / 18%), transparent 28%);
}

.work-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 24px;
    align-items: end;
    margin-bottom: 24px;
}

.work-hero h1 {
    max-width: 780px;
    margin-bottom: 12px;
    color: var(--color-text-primary);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 850;
    letter-spacing: -0.045em;
    line-height: 1;
}

.work-hero p:not(.section-eyebrow) {
    max-width: 690px;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.55;
}

.work-hero-panel {
    padding: 18px;
    background: linear-gradient(180deg, rgb(11 24 39 / 94%), rgb(8 20 32 / 94%));
    border: 1px solid rgb(243 190 79 / 28%);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.work-hero-panel strong,
.work-hero-panel span {
    display: block;
}

.work-hero-panel strong {
    margin-bottom: 8px;
    color: var(--color-gold);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.work-hero-panel span {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

.work-project-selector {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.work-project-tab {
    min-height: 86px;
    padding: 14px;
    color: var(--color-text-primary);
    text-align: left;
    background: linear-gradient(180deg, rgb(11 24 39 / 92%), rgb(8 20 32 / 92%));
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.96rem;
    font-weight: 820;
    line-height: 1.25;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.work-project-tab span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gold);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.work-project-tab:hover,
.work-project-tab:focus-visible,
.work-project-tab.is-active {
    transform: translateY(-3px);
    border-color: var(--color-gold);
    box-shadow: 0 0 22px rgb(243 190 79 / 16%);
}

.work-project-panel {
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 350px);
    gap: 18px;
    padding: 22px;
    background: linear-gradient(180deg, rgb(11 24 39 / 96%), rgb(8 20 32 / 96%));
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.work-project-panel.is-active {
    display: grid;
}

.work-project-main h2 {
    max-width: 760px;
    margin: 8px 0 10px;
    color: var(--color-text-primary);
    font-size: clamp(1.7rem, 2.8vw, 2.8rem);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.work-project-main > p {
    max-width: 760px;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.58;
}

.work-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
    gap: 14px;
    margin-top: 18px;
}

.work-proof-grid section,
.work-project-side {
    padding: 16px;
    background: rgb(255 255 255 / 3%);
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
}

.work-proof-grid h3,
.work-project-side h3 {
    margin-bottom: 9px;
    color: var(--color-gold);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.work-proof-grid ul,
.work-project-side ul {
    padding-left: 18px;
}

.work-proof-grid li,
.work-project-side li {
    margin-bottom: 7px;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.42;
}

.work-ask-btn {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    background: transparent;
}


/* Mockup themes: royal-blue arrows. */

body[data-theme="modern-blue"] #arrow-gold path {
    fill: #2f6fe0;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    color: rgb(255 255 255 / 42%);
    background: var(--color-page-deep);
    border-top: 1px solid var(--color-border-soft);
}

.footer-container {
    width: min(100% - 96px, var(--site-width));
    margin-inline: auto;
    padding: 24px 0;
    text-align: center;
    font-size: 0.78rem;
}

.footer-container--brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    text-align: left;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 850;
}

.footer-brand img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border: 1px solid rgb(176 216 255 / 24%);
    border-radius: 8px;
}

.footer p > span {
    color: rgb(243 190 79 / 45%);
    margin-inline: 8px;
}


/* =========================================================
   RESPONSIVE BEHAVIOR
   This section holds @media breakpoints for every page except
   My Story, which keeps its own responsive block further down
   (see "My Story responsive behavior" near the end of this file).
   Each @media (max-width: ...) block below only applies once the
   browser window gets narrower than that width — so the 1180px
   block is the first to kick in as the window shrinks, then 1040px,
   and so on down to the narrowest phone sizes.
   ========================================================= */

/* Large tablets / small laptops: nav spacing tightens, hero and
   lifecycle diagram stack to one column, work page panels stack. */
@media (max-width: 1180px) {
    .site-container,
    .footer-container {
        width: min(100% - 56px, var(--site-width));
    }

    .projects-copy {
        max-width: 760px;
        padding-top: 0;
    }

    .projects-copy h2,
    .projects-copy p {
        max-width: 680px;
    }

    .work-project-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-project-panel {
        grid-template-columns: 1fr;
    }
}


/* Small tablets: header shrinks again, and the /work page's hero and
   proof-grid columns collapse to one column. */
@media (max-width: 860px) {

    .work-hero,
    .work-proof-grid {
        grid-template-columns: 1fr;
    }
}


/* Smallest phones: page edge padding tightens further, and the hero
   headline/description shrink one more step. */
@media (max-width: 620px) {
    .site-container,
    .footer-container {
        width: min(100% - 32px, var(--site-width));
    }

    .footer-container--brand {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    /* Phone nav links restored now that the site has real pages to visit.
       They wrap into centered rows below Pete's name. */

    .section-eyebrow {
        font-size: 0.68rem;
        line-height: 1.7;
    }

    /* 6.4vw lands at 24px on a 375px phone — the exact size the My Story
       hero headline renders at, so both pages feel like the same site. */

    .btn {
        width: 100%;
    }

    /* Keep the hero's Interactive Resume button compact like desktop
       instead of a full-width bar (part of keeping the desktop essence
       on phones — matches how My Story handles its hero). */

    .work-page {
        padding: 34px 0 48px;
    }

    .work-project-selector,
    .work-project-panel,
    .work-proof-grid {
        grid-template-columns: 1fr;
    }

    .work-project-panel {
        padding: 16px;
    }

    .projects-section {
        padding-top: 44px;
    }

    /* Section heading below the hero: same clamp scale as the My Story
       section headings so it doesn't tower over the rest of the site. */
    .projects-copy h2 {
        font-size: clamp(1.55rem, 6vw, 1.9rem);
    }
}

/* =========================================================
   MY STORY PAGE
   Styles for templates/my_story.html. Reuses the shared
   variables, eyebrows, buttons, and card language above.
   ========================================================= */

/* ---------- Hero ---------- */

.my-story-page {
    position: relative;
    isolation: isolate;
    padding-bottom: 36px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgb(3 11 22 / 12%), rgb(3 11 22 / 72%)),
        var(--site-circuit-image);
    background-repeat: repeat-y;
    background-position: top left;
    background-size: 100% auto;
}

.my-story-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgb(3 11 22 / 82%) 0%, rgb(3 11 22 / 64%) 48%, rgb(3 11 22 / 82%) 100%),
        radial-gradient(circle at 78% 14%, rgb(78 163 255 / 18%), transparent 28%);
    pointer-events: none;
}

.story-hero {
    position: relative;
    isolation: isolate;                              /* Keeps the decorative layers behind this section only */
    overflow: hidden;
}

/* Same real circuit artwork used by the homepage hero, tuned a little darker
   here so the My Story copy and circular collage stay readable. */
.story-hero-circuit {
    display: none;
}

.story-hero::before {
    content: none;
}

.story-hero::after {
    content: none;
}

.story-hero__grid {
    display: grid;
    grid-template-columns: minmax(430px, 0.9fr) minmax(300px, 1.1fr);
    align-items: center;
    gap: clamp(22px, 4vw, 64px);
    padding-top: clamp(24px, 2.5vw, 34px);
    /* Kept small so Fun Facts sits close under the hero's AI search box. */
    padding-bottom: clamp(6px, 1vw, 10px);
}

.story-hero__content {
    max-width: 590px;
}

.story-hero__content h1 {
    margin: 10px 0 14px;
    color: var(--color-text-primary);
    font-size: clamp(2.3rem, 4.2vw, 3.4rem);
    font-weight: 820;
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.story-hero__content h1 span {
    color: var(--color-gold);
}

.story-hero__tagline {
    margin-bottom: 10px;
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 1.02rem;
}

.story-hero__intro {
    max-width: 480px;
    margin-bottom: 24px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Row of four compact value chips under the intro paragraph.
   Grid instead of flex-wrap: a wrapping flex row can strand one chip
   alone on a second line (3+1). The grid always shows exactly four
   across, or a clean 2x2 on narrower screens (media rule below). */
.story-values-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
    gap: 12px 18px;
    list-style: none;
}

/* Switch to 2x2 before the four chips would ever need to wrap */
@media (max-width: 1240px) {
    .story-values-row {
        grid-template-columns: repeat(2, minmax(0, auto));
    }
}

.value-chip {
    display: flex;
    align-items: center;
    gap: 11px;
}

.value-chip__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid;
}

.value-chip__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.value-chip__icon--gold {
    color: var(--color-gold);
    border-color: rgb(243 190 79 / 55%);
}

.value-chip__icon--cyan {
    color: var(--color-cyan);
    border-color: rgb(80 214 232 / 45%);
}

.value-chip__label {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ---------- Hero portrait ---------- */

.story-hero__portrait {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 100%;
    /* Only a little vertical padding: the extra top/bottom whitespace
       was making this column taller than the text column, which (with
       align-items: center on the grid) pushed dead space below the
       "Combining technical depth..." banner. Keeping the horizontal
       padding preserves side breathing room without shrinking the
       visible collage. */
    padding: 6px clamp(10px, 1.5vw, 20px);
    /* The mask on .portrait-frame fades the collage's bottom ~15% to fully
       transparent, so this negative margin pulls that invisible strip back
       out of the layout. It lets the collage render larger without making
       the hero row taller (which would re-open the gap above Fun Facts). */
    margin-bottom: -72px;
}

/* Soft ambient glow behind the collage so it reads as part of the
   scene rather than a flat rectangle pasted on top. */
.story-hero__portrait::before {
    content: "";
    position: absolute;
    width: clamp(380px, 44vw, 620px);
    aspect-ratio: 4 / 5;
    border-radius: 40px;
    /* Toned down so the halo reads as ambient light, not a visible shape
       behind the collage. */
    background:
        radial-gradient(circle, rgb(78 163 255 / 10%) 0 42%, transparent 72%),
        radial-gradient(circle, rgb(243 190 79 / 6%) 0 36%, transparent 70%);
    filter: blur(26px);
    pointer-events: none;
}

/* No hard frame or circular crop: a soft radial mask fades the
   collage's own edges into the page background so the photo blends
   in instead of reading as a cropped rectangle (fade values are on
   the mask-image lines below). */
.portrait-frame {
    position: relative;
    width: clamp(320px, 38vw, 480px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* A soft radial feather dissolves every edge of the collage into the
       page instead of showing a photo boundary. Extended a touch (finishes
       at 84% with a gentler ramp) so the blend reads smoother all the way
       around, not just top/bottom. */
    mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 24%, transparent 84%);
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 24%, transparent 84%);
}

.portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* Slightly muted so the photos sit in the page's dark palette instead
       of popping brighter than everything around them. */
    filter: saturate(0.96) brightness(0.94);
}

/* ---------- Hero AI search ----------
   Ask Pete AI, embedded directly inside the hero copy column
   (replacing the old "Combining technical depth..." banner text)
   so it sits right under the hero like it does on the homepage. */

.story-hero__ai {
    max-width: 590px;
    margin-top: 16px;
}

.story-hero__ai .hero-ai-search {
    max-width: none;
    margin: 0;
}

/* Keep the desktop My Story hero compact: the collage should support
   the story, not push the journey section far down the screen. */
@media (min-width: 781px) {
    .story-hero__grid {
        align-items: center;
    }

    .story-hero__content {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

}

/* ---------- Journey section ---------- */

/* Noticeably lighter band with gold edges so the journey section
   pops against the near-black page background. */
.story-journey {
    padding: 6px 0 12px;
}

.story-journey h2,
.story-drives h2 {
    margin: 8px 0 14px;
    color: var(--color-text-primary);
    font-size: clamp(1.55rem, 1.9vw, 1.9rem);
    font-weight: 820;
    letter-spacing: -0.04em;
    line-height: 1.16;
}

.story-journey__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.85fr);
    gap: 46px;
    align-items: start;
    padding: 22px 24px 24px;
    background:
        radial-gradient(circle at 18% 24%, rgb(30 84 134 / 16%), transparent 34%),
        linear-gradient(180deg, #0d2036, #0a1a2c);
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.story-journey__narrative p {
    margin-bottom: 10px;
    color: var(--color-text-secondary);
    font-size: 0.74rem;
    line-height: 1.38;
}

.story-journey .view-all-link {
    min-height: 36px;
    padding: 0 20px;
    font-size: 0.78rem;
}

/* Horizontal four-milestone timeline. The connecting line is drawn by
   ::before on each item except the first, so it links the gold nodes. */
.story-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding-top: 6px;
    list-style: none;
}

.timeline-item {
    position: relative;
}

/* Larger dark circles with soft borders, like the mockup */
.timeline-item__icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    color: var(--color-gold);
    background: #0e1f33;
    border: 1px solid rgb(146 167 190 / 38%);
    border-radius: 50%;
}

/* Light (silver-white) icon variant used by most milestones in the mockup */
.timeline-item__icon--light {
    color: #d9e2ec;
}

.timeline-item__icon--cyan {
    color: var(--color-cyan);
}

.timeline-item__icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Thin connecting line between milestone icons, with a small gold node
   where it meets each circle. Skipped on the first item. */
.timeline-item + .timeline-item::before {
    content: "";
    position: absolute;
    top: 28px;                                       /* Vertically centered on the 56px icon circle */
    right: calc(100% - 28px);
    width: calc(100% - 36px);
    height: 1px;
    background: rgb(243 190 79 / 40%);
}

.timeline-item + .timeline-item::after {
    content: "";
    position: absolute;
    top: 25px;
    left: -11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-gold);
}

.timeline-item__date {
    margin-bottom: 4px;
    color: var(--color-gold);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.timeline-item h3 {
    margin-bottom: 5px;
    color: var(--color-text-primary);
    font-size: 0.78rem;
    font-weight: 780;
    line-height: 1.3;
}

.timeline-item__text {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    line-height: 1.38;
}

/* ---------- Completed goals on the timeline ----------
   The visitor adds their own finished goals here, each Public or Private.
   Spans the full journey width, below the four career milestones. Uses the
   story page's --color-* tokens (remapped to the light palette on
   slate-light) so it reads on both dark and light, plus a green "completed"
   accent that works on any theme. */
.timeline-goals {
    grid-column: 1 / -1;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-soft);
}

.timeline-goals__head h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.timeline-goals__head p {
    margin: 3px 0 0;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.timeline-goals__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.timeline-goals__list:empty {
    margin-top: 0;
}

.timeline-goal {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    background: color-mix(in srgb, #1d9a5f 12%, transparent);
    border: 1px solid color-mix(in srgb, #1d9a5f 34%, transparent);
    border-radius: 10px;
}

.timeline-goal__mark {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1d9a5f;
}

.timeline-goal__mark svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.timeline-goal__body {
    min-width: 0;
    padding-right: 14px;
}

.timeline-goal__date {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.timeline-goal__body h4 {
    margin: 2px 0 6px;
    color: var(--color-text-primary);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.timeline-goal__vis {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 750;
}

.timeline-goal__vis--public {
    color: #14663f;
    background: #d3efdf;
}

.timeline-goal__vis--private {
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-text-primary) 12%, transparent);
}

.timeline-goal__delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.timeline-goal__delete:hover {
    background: color-mix(in srgb, #d23b5e 16%, transparent);
    color: #d23b5e;
}

/* Add affordance */
.timeline-goals__add {
    margin-top: 12px;
}

.timeline-goals__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px dashed color-mix(in srgb, var(--color-gold) 55%, transparent);
    border-radius: 10px;
    background: none;
    color: var(--color-gold);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.timeline-goals__toggle:hover {
    background: color-mix(in srgb, var(--color-gold) 12%, transparent);
    border-color: var(--color-gold);
}

/* inline-flex beats the UA [hidden] rule — restate so the toggle actually
   disappears while the form is open. */
.timeline-goals__toggle[hidden] {
    display: none;
}

.timeline-goals__toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.timeline-goals__form {
    display: grid;
    gap: 12px;
    max-width: 520px;
    padding: 15px;
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    background: rgb(255 255 255 / 4%);
}

/* display:grid beats the UA [hidden] rule, so the form would show on load —
   restate it (same gotcha as the theme dropdown + ts-ai plan). */
.timeline-goals__form[hidden] {
    display: none;
}

.timeline-goals__form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--surface, #fff);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.82rem;
}

.timeline-goals__form input::placeholder {
    color: var(--color-text-muted);
}

.timeline-goals__form input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.timeline-goals__vis {
    display: inline-flex;
    gap: 8px;
}

.timeline-goals__visopt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.timeline-goals__visopt svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.timeline-goals__visopt.is-active {
    border-color: #1d9a5f;
    background: #d3efdf;
    color: #14663f;
}

.timeline-goals__visopt[data-vis="Private"].is-active {
    border-color: color-mix(in srgb, var(--color-text-primary) 35%, transparent);
    background: color-mix(in srgb, var(--color-text-primary) 12%, transparent);
    color: var(--color-text-primary);
}

.timeline-goals__actions {
    display: flex;
    gap: 10px;
}

.timeline-goals__save {
    padding: 8px 16px;
    border: 0;
    border-radius: 9px;
    background: var(--color-gold);
    color: #fff;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
}

.timeline-goals__save:disabled {
    opacity: 0.5;
    cursor: default;
}

.timeline-goals__cancel {
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: none;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.timeline-goals__hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.66rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .timeline-goals__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .timeline-goals__list {
        grid-template-columns: 1fr;
    }
}

/* ---------- Values (What Drives Me) ---------- */

.story-drives {
    padding: 10px 0 12px;
}

/* Heading column beside the four cards, matching the mockup layout */
.story-drives__layout {
    display: grid;
    grid-template-columns: minmax(210px, 0.84fr) minmax(0, 3.16fr);
    gap: 28px;
    align-items: start;
}

.story-drives__heading h2 {
    margin-bottom: 0;
}

.story-drives__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.drive-card {
    min-height: 168px;
    padding: 18px 16px;
    text-align: center;
    background: linear-gradient(180deg, #0b1827, #081420);
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
}

.drive-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-inline: auto;
    margin-bottom: 10px;
    color: var(--color-gold);
}

.drive-card__icon svg {
    width: 37px;
    height: 37px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.drive-card h3 {
    margin-bottom: 6px;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 800;
}

.drive-card p {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    line-height: 1.46;
}

/* ---------- Lower information cards ---------- */

.story-cards {
    padding: 0 0 10px;
}

/* Two cards now: "Outside of Engineering" earned the connect card's
   old space, so it gets the wider column for its 4x2 interest grid. */
.story-cards__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    gap: 16px;
    align-items: stretch;
}

.story-card {
    display: flex;
    flex-direction: column;
    padding: 18px 22px;
    background: linear-gradient(180deg, #0b1827, #081420);
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
}

.story-card h2 {
    margin: 5px 0 12px;
    color: var(--color-text-primary);
    font-size: 1.05rem;
    font-weight: 820;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.story-card__list {
    margin-bottom: 16px;
    padding-left: 0;
    list-style: none;
}

/* Each learning item: small gold icon + text, like the mockup */
.story-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 7px;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    line-height: 1.32;
}

.story-card__list-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 2px;
    color: var(--color-gold);
}

.story-card__list-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.story-card__link {
    margin-top: auto;                                /* Pushes the link to the card bottom for equal-height cards */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-gold);
    font-size: 0.78rem;
    font-weight: 750;
    transition: color 160ms ease;
}

.story-card__link:hover,
.story-card__link:focus-visible {
    color: var(--color-gold-bright);
}

/* Interests grid inside the "Outside of Engineering" card:
   eight items in four columns × two rows. Responsive rules below
   drop it straight to two columns — never a 3+1 orphan row. */
.interest-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 12px;
    margin-bottom: 12px;
    list-style: none;
}

/* Outside of Work card: no bottom link anymore, so it shouldn't reserve
   space for one. Tighter padding + a snug interest grid keep it a little
   shorter than the Learning card beside it (Pete: smaller vertically). */
.story-card--interests {
    padding: 16px 20px;
    justify-content: center;
}

.story-card--interests .interest-grid {
    row-gap: 12px;
    margin-bottom: 0;
}

.interest-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.interest-item__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: var(--color-cyan);
    border: 1px solid rgb(80 214 232 / 35%);
    border-radius: 9px;
}

.interest-item__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.interest-item h3 {
    margin-bottom: 2px;
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 750;
}

.interest-item p {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    line-height: 1.3;
}

/* ---------- Shared card hover ----------
   The same "pop out" the homepage project cards use, applied to every
   card-style surface on the site so hover feedback feels consistent. */
.drive-card,
.story-card,
.fun-fact-card {
    transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.drive-card:hover,
.story-card:hover,
.fun-fact-card:hover {
    transform: translateY(-4px);
    border-color: #53687e;
    box-shadow: var(--shadow-card);
}

.fun-fact-card.is-updating {
    opacity: 0;
    transform: translateY(4px);
}

/* ---------- Fun facts ---------- */

/* Kept tight top and bottom: Fun Facts now sits between the hero's Ask
   Pete AI box and the My Journey band, so both gaps should stay small. */
/* No top padding: this section should hug the hero's AI search box.
   (The old FUN FACTS eyebrow and Show Me More button were removed —
   the cards rotate on their own.) */
.fun-facts {
    padding: 0 0 8px;
}

.fun-facts__header {
    margin-bottom: 12px;
}

.fun-facts__header h2 {
    color: var(--color-text-primary);
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    font-weight: 820;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

/* Five compact fact tiles in one row (Pete: smaller, five not three).
   Vertical layout — small icon on top, short fact below — so five fit
   comfortably side by side without cramping the text. */
.fun-facts__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.fun-fact-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 13px;
    background: linear-gradient(180deg, #0b1827, #081420);
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
}

.fun-fact-card__icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    color: var(--color-gold);
    border: 1px solid rgb(243 190 79 / 45%);
    border-radius: 50%;
}

.fun-fact-card__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fun-fact-card p {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    line-height: 1.4;
}


/* Leading icons inside the connect buttons (envelope + LinkedIn logo) */
.btn-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-icon--fill {
    fill: currentColor;
    stroke: none;
}

/* ---------- My Story responsive behavior ---------- */

/* Tablets: the four value chips in the hero shrink their icons and text. */
@media (max-width: 980px) {
    .story-values-row {
        gap: 10px 12px;
    }

    .value-chip {
        gap: 8px;
    }

    .value-chip__icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .value-chip__icon svg {
        width: 18px;
        height: 18px;
    }

    .value-chip__label {
        font-size: 0.72rem;
    }
}

@media (max-width: 900px) {
    .story-hero__portrait::before {
        width: clamp(310px, 46vw, 460px);
    }

    .portrait-frame {
        width: clamp(280px, 42vw, 420px);
    }

    .story-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 22px;
    }

    /* Hide the horizontal connector when the timeline wraps to two rows,
       because it would point at the wrong neighbor. */
    .timeline-item + .timeline-item::before,
    .timeline-item + .timeline-item::after {
        display: none;
    }

    /* Values heading stacks above the cards when width runs out */
    .story-drives__layout {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    /* Cards stack one per row so the 4x2 interest grid keeps room */
    .story-cards__grid {
        grid-template-columns: 1fr;
    }

    /* Five fact tiles wrap to three across on tablets. */
    .fun-facts__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 743px) {
    /* The hero keeps its desktop shape on phones: headline and value
       chips on the left, collage on the right, and the AI search box
       spanning the full width underneath both columns.
       "display: contents" below dissolves the .story-hero__content
       wrapper box so its children (headline block, values row,
       AI search) can be placed directly onto this grid as if they
       were its own children — that's what lets the AI search box
       escape the left column and stretch across the whole row. */
    .story-hero__grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        grid-template-areas:
            "headline portrait"
            "values   portrait"
            "ai       ai";
        align-items: center;
        gap: 0 16px;
        padding-top: 42px;
        padding-bottom: 16px;
    }

    .story-hero__content {
        display: contents;
    }

    .story-hero__headline {
        grid-area: headline;
        align-self: end;
    }

    .story-values-row {
        grid-area: values;
        align-self: start;
    }

    /* Headline shrinks on phones so "Engineer" fits the narrower
       left column without overflowing into the collage. */
    .story-hero__content h1 {
        font-size: clamp(1.5rem, 5vw, 2.3rem);
    }

    .story-hero__intro {
        margin-bottom: 18px;
    }

    .story-hero__portrait {
        grid-area: portrait;
        width: 100%;
        padding: 0;
        /* Cancel the desktop negative margin: in this stacked phone grid the
           collage shares a row with the headline/values, so pulling its
           bottom up would make it overlap the AI search box below. */
        margin-bottom: 0;
    }

    /* Collage scales with the viewport (40vw) so bigger phones get a
       proportionally bigger photo instead of one fixed size. */
    .story-hero__portrait::before {
        width: clamp(130px, 44vw, 330px);
    }

    .portrait-frame {
        width: clamp(120px, 40vw, 310px);
    }

    .story-hero-circuit {
        background-position: center top;
        opacity: 0.44;
    }

    .story-hero::after {
        inset: 0 0 0 24%;
        opacity: 0.18;
    }

    .story-hero__ai {
        grid-area: ai;
        max-width: none;
        width: 100%;
        margin-top: 22px;
    }

    .story-journey__layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .story-drives__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    /* 2x2 grid instead of 4 full-width stacked rows */
    .story-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
    }

    /* 2x2 grid instead of 4 full-width stacked rows */
    .story-drives__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .story-cards__grid {
        grid-template-columns: 1fr;
    }

    /* 2x2x2 on phones — eight items never strand a 3+1 row */
    .interest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fun-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .story-hero__grid {
        padding-top: 36px;
        padding-bottom: 14px;
    }
}


/* A second, separate 620px phone breakpoint: this one shrinks the
   shared "Ask Pete AI" search box (used on the homepage and other
   pages via portfolio_ai_search.html) and the lifecycle center card. */
@media (max-width: 620px) {
    .hero-ai-search {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .hero-ai-search__box {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0;
        min-height: 52px;
        padding: 5px;
    }

    .hero-ai-search__button {
        width: auto;
        min-height: 40px;
        padding-inline: 15px;
    }

    .hero-ai-search__input {
        min-height: 40px;
        padding-inline: 12px;
        font-size: 0.9rem;
    }

    .hero-ai-search__status {
        font-size: 0.74rem;
        line-height: 1.4;
    }

    .page-ai-after-hero {
        margin: 20px 0 24px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .hero-ai-search.is-searching .hero-ai-search__box::before {
        animation: none;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   PEERSLATE PLATFORM HEADER, PROFILE TABS, AND SLATE THEMES
   Added for the platform-style navigation overhaul. These rules
   intentionally sit at the end so they can override the older header
   and theme preview styles without deleting useful page CSS above.
   ========================================================= */

:root {
    --bg: #111719;
    --bg-elevated: #171f22;
    --surface: #1c2528;
    --surface-soft: #243034;
    --text: #f5f2ea;
    --text-muted: #c8c1b3;
    --accent: #d7a84f;
    --accent-hover: #e9c26f;
    --accent-soft: rgb(215 168 79 / 14%);
    --border: rgb(255 255 255 / 14%);
    --shadow: 0 18px 48px rgb(0 0 0 / 32%);
    --nav-bg: rgb(15 17 17 / 92%);
    --tab-active: #d7a84f;
    --button-primary-bg: #d7a84f;
    --button-primary-text: #151311;
    --button-secondary-bg: rgb(255 255 255 / 5%);
    --button-secondary-text: #f5f2ea;
}


/* Dark Slate (gray-slate) + Dark Slate Stone (stone-slate) share ONE dark
   palette. stone-slate is a gray-slate twin; the only difference is that
   stone-slate also carries data-surface-slate="on" (set in theme-preview.js),
   which cuts every card/button from the same stone as the page. */


/* =========================================================
   MOCKUP TYPE SYSTEM (2026-07-06, from static/Mockup/*.png)
   Every heading on the site is set in Newsreader — page
   titles, section heads, card titles, names — while body copy,
   labels, buttons, chips, and nav stay Inter. The whiteboard
   keeps its own handwriting face (Caveat).
   ========================================================= */
:root {
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    /* Dark "Ask" bar + navy chrome buttons from the mockups. */
    --askbar-bg: #101828;
    --ink-btn-bg: #101f42;
    --ink-btn-text: #f7f9fd;
}

h1,
h2,
h3 {
    font-family: var(--font-serif);
    letter-spacing: normal;
}


/* MODERN BLUE — rebuilt 2026-07-06 as THE mockup theme: cool paper
   page, white cards with hairline borders and whisper shadows, royal
   blue links/actions, deep navy chrome. Slate-family WITHOUT the stone
   photo (paper grain only). The old navy "Modern Blue" is gone. */
body[data-theme="modern-blue"] {
    --bg: #f2f3f6;
    --bg-elevated: #eceef2;
    --surface: #ffffff;
    --surface-soft: #f6f7f9;
    --text: #16213a;
    --text-muted: #5c6575;
    --accent: #2f6fe0;
    --accent-hover: #4a83e8;
    --accent-soft: rgb(47 111 224 / 9%);
    --border: #e5e7ec;
    --shadow: 0 10px 26px rgb(23 33 58 / 7%);
    --nav-bg: rgb(255 255 255 / 96%);
    --tab-active: #2f6fe0;
    --button-primary-bg: #2f6fe0;
    --button-primary-text: #ffffff;
    --button-secondary-bg: #ffffff;
    --button-secondary-text: #16213a;
    --color-page: #f2f3f6;
    --color-page-deep: #e8eaef;
    --color-section: #f8f9fb;
    --color-card: #ffffff;
    --color-card-elevated: #f6f7f9;
    --color-card-hover: #eff4fd;
    --color-gold: #2f6fe0;
    --color-gold-bright: #4a83e8;
    --color-gold-muted: #2559b8;
    --color-gold-dark: #1b4390;
    --color-blue: #2f6fe0;
    --color-cyan: #12866b;
    --color-text-primary: #16213a;
    --color-text-secondary: #414d66;
    --color-text-muted: #6b7486;
    --color-border: #e5e7ec;
    --color-border-soft: #edeff3;
    --color-border-gold: #b7cdf3;
    --shadow-card: var(--shadow);
    --shadow-gold: 0 8px 22px rgb(47 111 224 / 14%);

    /* Modern Blue uses the photo pipeline with a NEAR-OPAQUE white wash:
       cards read flat white (mockup) while the page keeps the faintest
       marble texture under a heavy white veil. */
    --slate-photo: var(--site-slate-bg-light);
    --slate-header-flat: rgb(255 255 255);
    --slate-tint-band: rgb(244 245 248 / 82%);
    --slate-tint-tabs: rgb(255 255 255 / 92%);
    --slate-tint-header: rgb(255 255 255 / 95%);
    --slate-tint-card: rgb(255 255 255 / 92%);
    --slate-tint-chip: rgb(255 255 255 / 92%);
    --slate-tint-input: rgb(255 255 255 / 96%);
    --slate-screen: rgb(240 241 244);
    --slate-edge-lit: rgb(255 255 255 / 95%);
}

/* =========================================================
   LAYERED INK & SIGNAL GOLD — the dark theme (PS-THEME-002, 2026-07-16)
   An optional, member-toggled theme (header switch next to search), off
   by default. A TRUE dark theme: near-black layered surfaces (never pure
   #000), off-white editorial type, and ONE signal-gold accent. Elevation
   is expressed by lightening each layer, the standard dark-UI pattern:
     well   #081426   (inset panels, footer, deep bands)
     page   #0e1d3a   (the canvas)
     card   #1a2c4f   (cards, rails, panels)
     raised #223a66   (nested cards, hover, popovers)
   Paper (#f6f5f0 with ink text) survives as a deliberate POP layer for a
   few feature moments — white layered between blacks — plus user content
   (sticky notes, photos, the whiteboard canvas).
   Contrast rules: bright gold #E3B83A is text-safe on every dark layer
   (≈9:1 on ink); button gold #D8A928 always carries ink text; the old
   text-safe gold-ink #8A6500 is only for text on the paper pop layer. */
body[data-theme="dark"] {
    --bg: #0e1d3a;
    --bg-elevated: #1a2c4f;
    --surface: #1a2c4f;
    --surface-soft: #16294c;
    --text: #f2f4f8;
    --text-muted: #9aa5b8;
    --accent: #e3b83a;
    --accent-hover: #f0c95a;
    --accent-soft: rgb(216 169 40 / 14%);
    --border: #2e4573;
    --shadow: 0 2px 6px rgb(0 0 0 / 40%), 0 14px 34px rgb(0 0 0 / 45%);
    --nav-bg: rgb(10 23 48 / 96%);
    --tab-active: #e3b83a;
    --button-primary-bg: #d8a928;
    --button-primary-text: #0a1730;
    --button-secondary-bg: #223a66;
    --button-secondary-text: #f2f4f8;
    --color-page: #0e1d3a;
    --color-page-deep: #081426;
    --color-section: #16294c;
    --color-card: #1a2c4f;
    --color-card-elevated: #223a66;
    --color-card-hover: #294578;
    --color-gold: #d8a928;
    --color-gold-bright: #e3b83a;
    --color-gold-muted: #bf8f17;
    --color-gold-dark: #8a6500;
    --color-blue: #e3b83a;
    --color-cyan: #5abf95;
    --color-text-primary: #f2f4f8;
    --color-text-secondary: #c4ccda;
    --color-text-muted: #9aa5b8;
    --color-border: #2e4573;
    --color-border-soft: #24375c;
    --color-border-gold: #d8a928;
    --shadow-card: 0 2px 6px rgb(0 0 0 / 35%), 0 14px 34px rgb(0 0 0 / 40%);
    --shadow-gold: 0 8px 22px rgb(216 169 40 / 18%);
    --slate-grain: 0;
    /* Sign In / ink chrome buttons: gold with ink text on the dark header. */
    --ink-btn-bg: #d8a928;
    --ink-btn-text: #0a1730;
    --askbar-bg: #081426;
}

/* No stone photo in mono mode — flat warm paper, no texture/grain. */
body[data-theme="dark"] {
    background-image: none;
    background-color: var(--bg);
}

body[data-theme="dark"]::before,
body[data-theme="dark"]::after {
    display: none;
}

/* WHITE SLATE — the "slate version of the mockup": exactly the Modern
   Blue palette, but the page is the real light stone photo with a
   white wash, and every bar/card is a pale stone slab. */
/* WHITE SLATE — the same palette as the Light theme (slate-light), but
   rendered on the real white-stone photo via the dark-theme slate
   pipeline (data-slate-photo). So: the Light theme's exact colors, with
   every white surface replaced by cut white slate. Retuned 2026-07-07 to
   mirror slate-light's tokens (blue #0b63e5, ink #061a3a) instead of the
   old #2f6fe0/#16213a. The stone-photo vars below the palette are kept —
   they are what make the white surfaces read as slate. */


/* ---------- Slate stone texture ----------
   The "slate" look comes from three stacked effects, all pure CSS (no
   image downloads): a grainy stone noise (an inline SVG turbulence
   pattern), faint diagonal strata lines like split slate, and soft
   radial sheen. --slate-noise is defined once here and reused as the
   top background layer of the page, the profile band, the hero, the
   metrics strip, and cards, so every surface reads as cut stone. */
:root {
    --slate-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.5  0 0 0 0 0.52  0 0 0 0 0.55  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    /* How strongly the stone grain shows through, tuned per theme below. */
    --slate-grain: 0.34;
    /* Ink color for the faint strata/crack lines, readable on any theme. */
    --slate-line: color-mix(in srgb, var(--text) 5%, transparent);
}

body[data-theme="modern-blue"] {
    --slate-grain: 0.22;
}

/* Slate page background + stone texture — ONLY for the four slate themes.
   The four original themes keep their own body background from the RESET
   AND PAGE BASE section far above, untouched. */


.global-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    /* One solid, dependable site header. Individual pages keep their own
       atmosphere below this line; the navigation itself no longer changes
       opacity or lets moving content show through. */
    background: #f6f8fc;
    border-bottom: 1px solid rgb(125 157 198 / 34%);
    box-shadow: 0 0.45rem 1.4rem rgb(10 27 54 / 10%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.platform-nav__inner {
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 2.8vw, 3.75rem);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(1rem, 2vw, 2.25rem);
}

.platform-brand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    justify-self: start;
}

/* Mockup brand lockup: inline stacked-diamond mark + serif wordmark,
   both drawn in the theme ink so every theme recolors them. */
.platform-brand__logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0.35rem 0.45rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgb(255 255 255 / 96%), rgb(226 238 250 / 92%));
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 92%),
        0 0.4rem 1rem rgb(51 112 189 / 13%);
}

/* PeerSlate logo lockup (metallic S-mark + wordmark). Pete wants the
   SAME colored logo on every theme — the natural silver/blue chrome the
   dark theme already shows — instead of the old darkened-to-ink version
   on light pages. A soft light drop-shadow keeps the silver readable on
   white chrome without recoloring it. (2026-07-07) */
.platform-brand__logo img {
    display: block;
    height: 2.2rem;
    width: auto;
    filter: drop-shadow(0 1px 1px rgb(6 26 58 / 22%));
}


/* Theme dropdown (mockup): a quiet bordered pill that opens a panel of
   named swatches. */


/* Compact icon-only theme toggle (Pete: "a lot smaller"). The sun icon
   alone reads as a theme control; the label is kept for screen readers
   via aria-label/title on the button. */


/* Inside the panel each theme is a full row: swatch dot + name. The
   variant gradient moves onto the ::before dot via --swatch; the row
   itself is a plain hoverable surface. */


/* "Pete's Slate" — links to Pete's portfolio home. */
.platform-brand__profile {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.platform-brand__profile:hover,
.platform-brand__profile:focus-visible {
    color: var(--accent-hover);
}

.platform-nav__links {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: clamp(1.15rem, 2.3vw, 3rem);
    width: 100%;
    list-style: none;
}

.platform-nav__links a {
    position: relative;
    padding: 6px 0;
    color: var(--text);
    font-size: clamp(0.93rem, 0.85vw, 1.02rem);
    font-weight: 620;
    white-space: nowrap;
    transition: color 160ms ease;
}

/* Mockup active link: accent ink + a short underline bar. */
.platform-nav__links a[aria-current="page"] {
    color: var(--accent);
    font-weight: 700;
}

.platform-nav__links a[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.platform-nav__links a:hover,
.platform-nav__links a:focus-visible {
    color: var(--accent-hover);
}

.platform-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 12px;
}

.theme-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--border);
    border-radius: 999px;
}


/* Dark Slate Stone: a lighter, cut-stone grey → gold, to read as the
   "everything is slate" dark theme next to the flatter Dark Slate dot. */


/* Dots for the four original (pre-slate) site themes. */


.sign-in-btn {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 18px;
    color: var(--ink-btn-text);
    background: var(--ink-btn-bg);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 650;
    white-space: nowrap;
    transition: filter 160ms ease;
}

.sign-in-btn:hover,
.sign-in-btn:focus-visible {
    filter: brightness(1.15);
}

.sign-in-btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Dark theme toggle (PS-THEME-001): a small accessible switch next to the
   header search box. Sun/moon icons bracket a pill track; the thumb slides
   and the icons swap emphasis on state change. Deliberately tiny — this is
   a header utility control, not a marketing element. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
}

.theme-toggle__icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 160ms ease, opacity 160ms ease;
}

.theme-toggle__icon--sun { opacity: 0.95; }
.theme-toggle__icon--moon { opacity: 0.55; }

.theme-toggle__track {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 19px;
    background: color-mix(in srgb, var(--border) 55%, var(--surface));
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: background 160ms ease, border-color 160ms ease;
}

.theme-toggle__thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 15px;
    height: 15px;
    background: var(--surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
    transition: transform 160ms ease;
}

.theme-toggle[aria-checked="true"] .theme-toggle__track {
    background: var(--ps-gold, #d8a928);
    border-color: var(--ps-gold, #d8a928);
}

.theme-toggle[aria-checked="true"] .theme-toggle__thumb {
    transform: translateX(15px);
    background: #0a1730;
}

.theme-toggle[aria-checked="true"] .theme-toggle__icon--moon { opacity: 0.95; }
.theme-toggle[aria-checked="true"] .theme-toggle__icon--sun { opacity: 0.55; }

.theme-toggle:hover .theme-toggle__track,
.theme-toggle:focus-visible .theme-toggle__track {
    border-color: var(--accent);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ps-focus-ring, 0 0 0 3px var(--surface), 0 0 0 5px var(--accent));
    border-radius: 999px;
}

@media (max-width: 1360px) {
    .theme-toggle__icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle__thumb,
    .theme-toggle__track,
    .theme-toggle__icon {
        transition: none;
    }
}

/* Base profile band: clean flat surface using each theme's own colors —
   the four ORIGINAL themes get exactly this, with no stone texture.
   The slate themes layer their texture on via gated rules further down. */
.profile-header {
    position: relative;
    z-index: 900;
    background:
        radial-gradient(circle at 72% 12%, var(--accent-soft), transparent 32%),
        linear-gradient(180deg, rgb(255 255 255 / 4%), transparent),
        var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}


.profile-header__inner {
    min-height: 142px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.profile-avatar {
    width: 112px;
    height: 112px;
    overflow: hidden;
    border: 3px solid rgb(255 255 255 / 44%);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 16px 34px rgb(0 0 0 / 28%);
}

/* The avatar photo is already cropped to Pete and Danielle's SOLD-sign
   moment (static/images/profile-pete-danielle.png), so it just fills
   the circle — no zoom/crop trickery needed here anymore. */
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.profile-identity {
    min-width: 0;
}

.profile-status {
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.profile-identity h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(2.15rem, 4vw, 2.9rem);
    font-weight: 650;
    letter-spacing: normal;
    line-height: 1.05;
}

/* Mockup: the title sits under the name in blue serif, not small caps. */
.profile-title {
    margin-top: 4px;
    color: var(--accent);
    font-family: var(--font-serif);
    font-size: 1.28rem;
    font-weight: 600;
}

/* "Open to conversations" chip (mockup). */
.profile-openchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    padding: 4px 12px;
    color: color-mix(in srgb, #1d9a5f 75%, var(--text) 25%);
    background: color-mix(in srgb, #1d9a5f 10%, transparent);
    border: 1px solid color-mix(in srgb, #1d9a5f 35%, transparent);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.profile-openchip i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1d9a5f;
}

/* Location / Message / URL row (mockup). */
.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.profile-meta span,
.profile-meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

.profile-meta a:hover {
    color: var(--accent);
}

.profile-meta svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* About Pete card on the right of the band (mockup). */
/* Wider + shorter (Pete): a wider card lets the blurb wrap in fewer lines,
   so the About box takes less vertical space and the band reads lighter. */
.profile-about {
    max-width: 430px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.profile-about h2 {
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 650;
}

.profile-about p {
    margin: 6px 0 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.profile-subtitle {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 1rem;
}

.profile-subtitle span {
    color: var(--accent);
    padding-inline: 9px;
}

.profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.profile-action-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-tabs {
    position: sticky;
    top: 68px;
    z-index: 850;
    /* Frosted glass, matching the header. */
    background: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 22px rgb(0 0 0 / 12%);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

.profile-tabs__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 54px;
    /* visible so the floating Ask answer panel isn't clipped; the tab LIST
       does the horizontal scrolling now. */
    overflow: visible;
}

/* Tabs live in their own scroller so they can sit closer together (Pete)
   while the Ask Pete AI field stays pinned on the right, not scrolling. */
.profile-tabs__list {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.3vw, 30px);
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-tabs__list::-webkit-scrollbar {
    display: none;
}

/* ---- Ask Pete AI, pinned to the right of the tab strip (overview) ---- */
.profile-tabs__ask {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.profile-tabs__ask .hero-ai-search {
    max-width: none;
    margin: 0;
}

/* The label + status line are redundant in the compact strip. */
.profile-tabs__ask .hero-ai-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.profile-tabs__ask .hero-ai-search__status {
    display: none;
}

.profile-tabs__ask .hero-ai-search__box {
    margin: 0;
}

/* Half the old field width (Pete) so the strip stays balanced. */
.profile-tabs__ask .hero-ai-search__input {
    width: 232px;
    min-width: 0;
}

/* The answer floats below the strip as a panel, so the sticky bar keeps
   its height instead of stretching when an answer comes back. */
.profile-tabs__ask .hero-ai-answer {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(560px, 86vw);
    max-height: 62vh;
    overflow-y: auto;
    z-index: 40;
}

/* ---- Ask AI launcher pinned to the right of the sub-header tab strip.
   Replaces the old floating bottom-right chat bubble. ---- */
.profile-tabs__ask-btn {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 15px;
    color: #10606b;
    background: rgb(46 200 211 / 12%);
    border: 1px solid rgb(22 123 135 / 34%);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 750;
    white-space: nowrap;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.profile-tabs__ask-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.profile-tabs__ask-btn:hover,
.profile-tabs__ask-btn:focus-visible {
    color: #fff;
    background: #1f3a69;
    border-color: #1f3a69;
}

/* On the résumé sub-header the tabs are centred, so pin the launcher to the
   right edge without disturbing that centring. */
.living-resume-v2-page .profile-tabs--resume .profile-tabs__inner {
    position: relative;
}

.living-resume-v2-page .profile-tabs--resume .profile-tabs__ask-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    min-height: 2rem;
    padding: 0 0.85rem;
    font-size: 0.76rem;
}

/* The sub-header launcher takes over from the floating bubble on every page
   that shows the profile sub-header. */
body.portfolio-shell #chat-toggle {
    display: none !important;
}

/* =====================================================================
   PROFILE-PAGE HEADER + SUB-HEADER — promoted from the résumé so all of
   Pete's profile pages (Overview, My Story, Evidence, Projects, Slate
   Board) share the résumé's slim, cinematic chrome. Scoped to
   body.portfolio-shell:not(.living-resume-v2-page) so the résumé page keeps
   controlling its own look via living-resume-v2.css (zero regression risk),
   while the platform homepage and The Slate hub (platform-shell) keep their
   own headers. Values mirror living-resume-v2.css. (2026-07-12)
   ===================================================================== */
body.portfolio-shell:not(.living-resume-v2-page) .global-header {
    background: #f6f8fc;
    border-bottom: 1px solid rgb(125 157 198 / 34%);
    box-shadow: 0 0.45rem 1.4rem rgb(10 27 54 / 10%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.portfolio-shell:not(.living-resume-v2-page) .platform-nav__inner {
    /* Full-bleed so the search + Sign In always sit at the far-right end of the
       header at every width (the capped, left-aligned inner used to strand them
       well short of the edge on wide monitors). */
    width: 100%;
    padding-inline: clamp(1rem, 2vw, 2.25rem);
    min-height: 4rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 2.8vw, 3.75rem);
}

body.portfolio-shell:not(.living-resume-v2-page) .platform-brand {
    justify-self: start;
}

body.portfolio-shell:not(.living-resume-v2-page) .platform-brand__logo {
    padding: 0.35rem 0.45rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgb(255 255 255 / 78%), rgb(213 235 255 / 58%));
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 86%),
        0 0.55rem 1.4rem rgb(51 112 189 / 16%);
}

body.portfolio-shell:not(.living-resume-v2-page) .platform-brand__logo img {
    height: 2.2rem;
    filter:
        saturate(1.18)
        contrast(1.08)
        drop-shadow(0 0.18rem 0.24rem rgb(18 59 112 / 28%));
}

body.portfolio-shell:not(.living-resume-v2-page) .platform-nav__links {
    width: 100%;
    grid-column: auto;
    justify-content: space-evenly;
    gap: clamp(1.15rem, 2.3vw, 3rem);
    order: initial;
    padding-bottom: 0;
    overflow: visible;
}

body.portfolio-shell:not(.living-resume-v2-page) .platform-nav__links a {
    font-size: clamp(0.93rem, 0.85vw, 1.02rem);
    font-weight: 620;
}

body.portfolio-shell:not(.living-resume-v2-page) .platform-actions {
    justify-self: end;
    gap: 0.85rem;
}

body.portfolio-shell:not(.living-resume-v2-page) .nav-search__input {
    width: 10.5rem;
}

body.portfolio-shell:not(.living-resume-v2-page) .nav-search__input:focus {
    width: 14rem;
}

body.portfolio-shell:not(.living-resume-v2-page) .sign-in-btn {
    min-height: 2.5rem;
    padding: 0 1.1rem;
    font-size: 0.86rem;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs {
    position: static;
    width: 100%;
    margin: 0;
    border-top: 1px solid rgb(139 169 206 / 26%);
    border-bottom: 0;
    background: linear-gradient(180deg, rgb(236 246 255 / 70%), rgb(247 251 255 / 88%));
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs::before,
body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs::after {
    display: none;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__inner {
    position: relative;
    width: min(calc(100% - 3rem), 68rem);
    min-height: 2.45rem;
    justify-content: center;
    padding: 0 0.75rem;
    border: 0;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__list {
    flex: 0 1 auto;
    width: 100%;
    justify-content: center;
    gap: clamp(1rem, 2.3vw, 2.4rem);
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tab {
    min-height: 2.45rem;
    padding: 0 0.05rem;
    color: #43546c;
    font-size: 0.78rem;
    font-weight: 680;
    letter-spacing: 0.01em;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tab::after {
    height: 2px;
    background: #203767;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tab:hover,
body.portfolio-shell:not(.living-resume-v2-page) .profile-tab:focus-visible,
body.portfolio-shell:not(.living-resume-v2-page) .profile-tab[aria-current="page"] {
    color: #203767;
}

/* Launcher pinned to the right of the now-centred tab strip. */
body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__ask-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    min-height: 2rem;
    padding: 0 0.85rem;
    font-size: 0.76rem;
}

/* Overview Ask AI handoff: the full search field takes the same compact
   sub-header position and visual treatment as the Living Résumé field. It is
   revealed by chatbot.js only after the large Ask Pete's Slate bar scrolls
   away, avoiding two competing AI inputs in the same viewport. */
body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__ask--overview {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__ask--overview.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs:has(.profile-tabs__ask--overview.is-visible) .profile-tabs__list {
    padding-right: 19rem;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__ask--overview .hero-ai-search__box {
    min-height: 2.4rem;
    padding: 4px;
    background: linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(240 248 255 / 94%));
    border: 1px solid rgb(46 200 211 / 46%);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 90%),
        0 0.4rem 1rem rgb(23 64 116 / 12%);
    overflow: visible;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__ask--overview .hero-ai-search:focus-within .hero-ai-search__box {
    border-color: #2f5296;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 90%),
        0 0 0 3px rgb(47 82 150 / 28%);
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__ask--overview .hero-ai-search__input {
    width: 13.5rem;
    min-height: 2rem;
    padding-left: 0.9rem;
    color: #0a1b36;
    font-size: 0.82rem;
    outline: none;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__ask--overview .hero-ai-search__input::placeholder {
    color: #5a6b84;
}

body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__ask--overview .hero-ai-search__button {
    min-height: 2rem;
    padding: 0 0.9rem;
    background: linear-gradient(180deg, #2f5296, #1f3a69);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 850;
}

@media (max-width: 1180px) {
    body.portfolio-shell:not(.living-resume-v2-page) .platform-nav__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "links links";
        gap: 0.2rem 1rem;
        padding-top: 0.55rem;
        padding-bottom: 0.45rem;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .platform-brand {
        grid-area: brand;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .platform-actions {
        grid-area: actions;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .platform-nav__links {
        grid-area: links;
        grid-column: auto;
        justify-content: center;
        gap: clamp(1.2rem, 4vw, 2.8rem);
        padding: 0.35rem 0 0.45rem;
        overflow-x: auto;
    }
}

@media (max-width: 743px) {
    body.portfolio-shell:not(.living-resume-v2-page) .platform-nav__inner {
        width: min(calc(100% - 1.25rem), 112rem);
        column-gap: 0.5rem;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .platform-brand__logo {
        padding: 0.25rem 0.35rem;
        border-radius: 0.7rem;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .platform-brand__logo img {
        height: 1.8rem;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .platform-actions {
        gap: 0.4rem;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .sign-in-btn {
        min-height: 2rem;
        padding: 0 0.65rem;
        font-size: 0.72rem;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .platform-nav__links {
        justify-content: flex-start;
        gap: 1.35rem;
        padding-top: 0.45rem;
        padding-bottom: 0.35rem;
        scrollbar-width: none;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .platform-nav__links::-webkit-scrollbar {
        display: none;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__inner {
        width: 100%;
        min-height: 2.35rem;
        padding: 0 0.75rem;
        overflow: hidden;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__list {
        justify-content: flex-start;
        gap: 1.25rem;
        overflow-x: auto;
        scroll-padding-inline: 0.75rem;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .profile-tab {
        min-height: 2.35rem;
        font-size: 0.75rem;
    }

    /* The phone header already exposes Ask AI, so keep the horizontally
       scrolling profile tabs clear instead of squeezing an inline field in. */
    body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs__ask--overview {
        display: none;
    }

    body.portfolio-shell:not(.living-resume-v2-page) .profile-tabs:has(.profile-tabs__ask--overview.is-visible) .profile-tabs__list {
        padding-right: 0;
    }
}

/* ---- Quick-ask chips, slim row under the tab strip (overview) ---- */
.profile-tabs__chips {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 9px;
}

.profile-tabs__chips button,
.profile-tabs__chips a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.profile-tabs__chips button:hover,
.profile-tabs__chips a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* On narrower screens the ask drops to its own full-width row under the
   tabs so nothing gets cramped. */
@media (max-width: 860px) {
    .profile-tabs__inner {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .profile-tabs__ask {
        width: 100%;
        margin: 4px 0 8px;
    }

    .profile-tabs__ask .hero-ai-search__box {
        width: 100%;
    }

    .profile-tabs__ask .hero-ai-search__input {
        width: 100%;
        flex: 1 1 auto;
    }

    .profile-tabs__ask .hero-ai-answer {
        width: 100%;
    }

    .profile-tabs__chips {
        justify-content: flex-start;
    }
}

.profile-tabs__inner::-webkit-scrollbar {
    display: none;
}

/* Dark Slate Stone: the Ask field was cut from the same dark stone as the
   strip, so it blended in. Keep the stone texture but lighten the wash to a
   warm champagne tone and add a gold hairline + soft glow, so it draws the
   eye like the ask boxes on the other pages (Pete). Scoped to the overview
   tab-strip ask only. */


.section-anchor {
    position: relative;
    top: -130px;
    display: block;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.profile-tab {
    position: relative;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 0.94rem;
    font-weight: 650;
    white-space: nowrap;
}

.profile-tab::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--tab-active);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease;
}

.profile-tab:hover,
.profile-tab:focus-visible,
.profile-tab[aria-current="page"] {
    color: var(--text);
}

.profile-tab:hover::after,
.profile-tab:focus-visible::after,
.profile-tab[aria-current="page"]::after {
    transform: scaleX(1);
}

/* LinkedIn badge pinned to the far right end of the profile tab row.
   margin-left: auto is what pushes it past the tabs to the right edge. */
.profile-tabs__linkedin {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 9px;
    transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.profile-tabs__linkedin svg {
    width: 40px;
    height: 40px;
}

.profile-tabs__linkedin:hover,
.profile-tabs__linkedin:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

/* =========================================================
   PLATFORM PREVIEW PAGES
   Shared look for Career Search, My Network, Explore Profiles,
   and For Recruiters (templates/platform_page.html).
   ========================================================= */

.platform-page {
    padding: clamp(48px, 8vw, 96px) 0;
}

.platform-page__inner {
    display: flex;
    justify-content: center;
}

.platform-page__card {
    max-width: 720px;
    padding: clamp(26px, 4vw, 44px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}


.platform-page__card h1 {
    margin: 4px 0 14px;
    color: var(--text);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.platform-page__lead {
    color: var(--text-muted);
    font-size: 1.04rem;
    line-height: 1.6;
}

.platform-page__points {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.platform-page__points li {
    position: relative;
    padding: 12px 14px 12px 38px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.platform-page__points li::before {
    content: "✓";
    position: absolute;
    left: 14px;
    color: var(--accent);
    font-weight: 900;
}

.platform-page__note {
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.platform-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* =========================================================
   AI ANSWER OVERLAY
   The shared Ask Pete AI search box used to insert its answer
   into the page flow, shoving everything below it downward.
   Now the answer floats over the content beneath the box,
   like a dropdown, and scrolls internally if it's long.
   ========================================================= */

.hero-ai-search {
    position: relative;
}

.hero-ai-answer {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    z-index: 140;
    margin-top: 0;
    max-height: 340px;
    overflow-y: auto;
}

/* Slate-only button restyle. Original themes keep the .btn-primary /
   .btn-secondary rules from the buttons section far above. */


/* Slate-only hero background. Original themes keep their circuit-banner
   hero from the HERO section far above. */


/* Slate-only card surface (stone gradient + texture). Original themes keep
   their own card styling from the sections far above. */


body[data-theme="modern-blue"] .hero::before {
    background:
        linear-gradient(90deg, rgb(255 255 255 / 78%) 0%, rgb(255 255 255 / 48%) 48%, rgb(255 255 255 / 78%) 100%),
        radial-gradient(circle at 78% 14%, var(--accent-soft), transparent 28%);
}

body[data-theme="modern-blue"] .hero,
body[data-theme="modern-blue"] .my-story-page,
body[data-theme="modern-blue"] .work-page,
body[data-theme="modern-blue"] .resume-page {
    color: var(--text);
}

body[data-theme="modern-blue"] .platform-nav__links a,
body[data-theme="modern-blue"] .profile-tab {
    color: var(--text);
}

/* Unified profile-tab (second-row) links: adopt the Résumé page's softer
   slate link with an indigo active state site-wide (2026-07-12). The
   Résumé page layers its own living-resume-v2.css treatment on top, so it
   is unchanged; this brings every other page's row into line with it. */
body[data-theme="modern-blue"] .profile-tabs .profile-tab {
    color: #43546c;
    font-weight: 680;
}

body[data-theme="modern-blue"] .profile-tabs .profile-tab:hover,
body[data-theme="modern-blue"] .profile-tabs .profile-tab:focus-visible,
body[data-theme="modern-blue"] .profile-tabs .profile-tab[aria-current="page"] {
    color: #203767;
}

body[data-theme="modern-blue"] .profile-tabs .profile-tab::after {
    background: #203767;
}

body[data-theme="modern-blue"] .btn-secondary {
    background: #ffffff;
}

/* =========================================================
   SLATE SLAB SURFACES — STONE PHOTO THEMES
   These themes use the real stone photographs in
   static/images/slate-backgrounds/ two ways, copying the mockups:
     1. The page itself is one fixed, darkened photo.
     2. Every bar, card, button, and chip is its OWN slab of stone:
        the same photo scaled down per surface, washed with a theme
        tint, lit from the top edge, and dropped with real shadows so
        each piece looks raised off the page — touchable, like the
        mockups.
   Everything here keys off body[data-slate-photo="on"], which
   theme-preview.js sets for the stone themes (gray-slate,
   stone-slate, paper-slate). Flat themes are completely unaffected.
   ========================================================= */


/* Dark Slate Stone: same dark stone, a touch lighter wash so the rock
   texture reads crisper (it's the "everything is stone" theme). */


/* Mockup themes: Modern Blue buries the stone under a heavy white veil
   (flat mockup paper); White Slate lets noticeably more stone through. */
body[data-theme="modern-blue"] {
    background-image:
        linear-gradient(180deg, rgb(243 244 247 / 88%), rgb(240 241 245 / 80%)),
        var(--site-slate-bg-light);
}


/* The real photo already supplies grain and cracks, so the synthetic
   turbulence overlay (still used by the other two slate themes) is
   replaced here with just a soft light-glow vignette for readability. */


/* The hero and section pages no longer paint their own circuit-image
   backgrounds — the fixed stone photo shows straight through, exactly
   like the mockups. */


/* The Featured Projects section painted an opaque page-color background
   (plus a faint blue radial) that hid the fixed stone photo behind it —
   so the area around and below the project cards read as flat, not slate.
   Clearing it lets the continuous stone show through the whole section. */


/* ---------- Top platform header: the darkest cut of the page stone ----
   Per the mockups the header keeps the slate texture — it samples the
   SAME fixed photo crop as the page behind it, under a heavy dark wash
   (--slate-tint-header), so it reads as the same stone in shadow rather
   than a flat black strip pasted on top. */


/* ---------- Profile band: part of the page, not its own slab ----------
   Pete's rule: each page is ONE big continuous background. The band with
   his name/photo/actions paints NOTHING of its own — the body's fixed
   stone photo shows straight through, so it can never mismatch the page.
   (An earlier tinted+veined slab recipe here always read as a different,
   warmer material than the stone around it.) The tab strip below and the
   header above are the darker slabs that frame it. */


/* Light themes keep the natural colored logo too (Pete's call) — a soft
   ink drop-shadow gives the silver chrome enough definition on light
   stone without darkening its color. */
body[data-theme="modern-blue"] .platform-brand__logo img {
    filter: drop-shadow(0 1px 1px rgb(6 26 58 / 22%));
}


/* Mockup type scale: headlines are bold (not black) with only a gentle
   tightening — the old 900-weight / -0.05em setting read compressed and
   heavier than the mockups' clean lettering. Slate themes only. */


/* Gilded keywords (Pete, 2026-07-06): the highlighted words in the two
   hero headlines render as polished metal — light-caught top, deep
   base — lifted off the stone by real drop shadows. text-shadow must be
   cleared because the letters are gradient-filled (transparent color),
   and a text-shadow would smear through them. */


/* Ask Pete AI box: the one surface the user wants LESS textured — heavier
   tint over the photo so it stays calm while everything else is grainy. */


/* ---------- Card slabs ----------
   Every card-sized surface gets its own raised piece of stone. */


/* ---------- Chip/button slabs ----------
   Smaller interactive pieces: skill buttons, project tabs, secondary
   buttons, suggestion chips, tags. Smaller stone cut, tighter shadow. */


/* The "current role" note badge carried a hard cyan/blue tint — recolor
   it to the theme's own soft accent so it isn't a lone blue chip. */


/* Hover/active states elsewhere swap in old navy gradients — keep the
   stone slab and communicate the state with brightness + accent border
   instead, so nothing flashes blue on these themes. */


/* The shared card "pop out" hover sets a blue-gray border — use the
   theme accent instead. */


/* ---------- Gold primary buttons: stone-textured and raised ----------
   View Case Studies, Ask Pete AI, and the AI search's Ask button keep
   their gold color but pick up the stone grain, a lit top edge, and
   real drop shadows so they feel as physical as the slabs around them. */


/* Their hover states elsewhere swap in a flat bright gold — keep the
   texture and just brighten. */


/* ---------- AI response bubble: flat, untextured ----------
   The dropdown answer reads calmer as a plain solid panel against all
   the surrounding stone (trial per Pete's request). */


/* ---------- Resume "Ask Pete's AI Assistant" panel ----------
   Dialed back so it sits INTO the page instead of popping off it:
   quieter tint straight over the page-scale stone (no separate slab
   cut), a hairline border, and a soft close shadow. */


/* ---------- Last blue remnants ----------
   Surfaces that still carried the old navy/circuit palette. */


/* ---------- Ask Pete AI answer dropdown ----------
   On these two themes the hero paints no background (the fixed stone
   photo shows through), so the AI-search heroes don't need to clip their
   overflow. Letting them overflow — and lifting them above the following
   section's stacking context — means the answer dropdown floats OVER the
   metrics strip and impact cards below instead of being hidden behind
   them. */


/* ---------- Chat assistant panel ----------
   The slide-in "Ask Pete AI" panel (chatbot.css) shipped with a hardcoded
   navy/blue palette. Recolor it to a slate stone slab so the popup matches
   the active theme instead of reading blue. */


/* Floating ASK PETE AI chip: chatbot.css ships it as a gold-OUTLINED
   ghost chip — on the slate themes it becomes the same solid satin-gold
   button as every other primary CTA (mockups have no gold outlines). */


/* Skill popover pointer "tail": chatbot-era navy + gold hairline —
   match it to the slate popover surface and neutral border instead. */


/* Last static gold hairlines: the metric divider pseudo-element and the
   "View All ..." outline links. The strip already draws its own neutral
   border-right separators, so the old gold divider is simply hidden
   there; View All links become raised slate chips like the mockups'
   secondary controls. */


/* Full-width Slate Board surfaces: the card slab's 820px stone tile
   visibly seams when an element is wider than the tile, so these wide
   pieces cut one continuous cover-crop of the photo instead (same
   approach as the metrics strip). */


/* My Story value-chip medallions: raised neutral-ring badges like the
   metric icons (glyphs keep their gold/cyan color, rings go neutral). */


/* =========================================================
   LIGHT PHOTO-SLATE ADJUSTMENTS — LIGHT SLATE & LIGHT BLUE SLATE
   Everything above is tuned for DARK stone: heavy black shadows,
   white-on-dark rims, a dark medallion. These overrides swap those
   dark-only pieces for light-appropriate versions so the two light
   themes get the SAME raised / textured / shadowed slate look as Gray
   and Sage — just in light colors (soft gray/navy shadows, accent-ringed
   icons, a white stone medallion, dark text). The slab recipes, tints,
   and per-theme shadows come from each theme's own variable block above.
   ========================================================= */

/* Soft light vignette instead of the dark one. */
body[data-theme="modern-blue"]::before {
    background:
        radial-gradient(circle at 20% 8%, rgb(255 255 255 / 40%), transparent 34%),
        radial-gradient(circle at 85% 16%, rgb(255 255 255 / 24%), transparent 36%),
        linear-gradient(180deg, transparent, rgb(90 96 110 / 6%));
}

body[data-theme="modern-blue"]::after {
    opacity: 0.12;
    mix-blend-mode: multiply;
}

body[data-theme="modern-blue"] {
    --slab-bar-shadow:
        inset 0 1px 0 rgb(255 255 255 / 88%),
        inset 0 -1px 1px rgb(50 58 72 / 12%),
        0 2px 4px rgb(40 45 60 / 12%),
        0 14px 26px rgb(40 45 60 / 17%),
        0 28px 50px rgb(40 45 60 / 12%);
    --slab-card-shadow:
        inset 0 1px 0 rgb(255 255 255 / 88%),
        inset 0 -1px 1px rgb(50 58 72 / 10%),
        0 2px 4px rgb(40 45 60 / 10%),
        0 14px 26px rgb(40 45 60 / 15%),
        0 28px 52px rgb(40 45 60 / 12%);
    --slab-control-shadow:
        inset 0 1px 0 rgb(255 255 255 / 88%),
        inset 0 -1px 1px rgb(50 58 72 / 10%),
        0 2px 4px rgb(40 45 60 / 12%),
        0 10px 20px rgb(40 45 60 / 15%);
    --slab-primary-shadow:
        inset 0 1px 0 rgb(255 255 255 / 62%),
        inset 0 -1px 1px rgb(70 56 26 / 18%),
        0 2px 4px rgb(70 56 26 / 18%),
        0 12px 22px rgb(70 56 26 / 22%),
        0 0 20px color-mix(in srgb, var(--button-primary-bg) 22%, transparent);
    --slate-vein-strong: color-mix(in srgb, var(--text) 8%, transparent);
    --slate-vein-soft: color-mix(in srgb, var(--accent) 12%, transparent);
    --slate-type-shadow:
        0 1px 0 rgb(255 255 255 / 82%),
        0 2px 3px rgb(40 45 60 / 18%),
        0 8px 16px rgb(40 45 60 / 12%);
    --slate-accent-text-shadow:
        0 1px 0 rgb(255 255 255 / 78%),
        0 2px 4px color-mix(in srgb, var(--accent) 20%, transparent),
        0 8px 16px rgb(40 45 60 / 10%);
}

/* The two mockup themes share cool-ink slab edges and soft pop/gilt —
   the mockup's shadows are whisper-quiet, so type shadows go too. */
body[data-theme="modern-blue"] {
    --slate-linkedin-bg: rgb(16 31 66);
    --slate-linkedin-mark: rgb(255 255 255);
    --pop-shadow: 0 20px 40px rgb(23 33 58 / 16%);
    --gilt-shadow:
        drop-shadow(0 1px 0 rgb(255 255 255 / 55%))
        drop-shadow(0 2px 3px rgb(23 33 58 / 26%));
    --slab-hi: rgb(255 255 255 / 72%);
    --slab-lo: rgb(23 33 58 / 9%);
    --slab-hi-chip: rgb(255 255 255 / 76%);
    --slab-lo-chip: rgb(23 33 58 / 8%);
    --slate-type-shadow: 0 1px 0 rgb(255 255 255 / 55%);
    --slate-accent-text-shadow: 0 1px 0 rgb(255 255 255 / 50%);
}

/* Bars: soft light shadows in place of heavy black. */
body[data-theme="modern-blue"] .global-header {
    box-shadow: 0 6px 18px rgb(40 45 60 / 12%);
    border-bottom: 1px solid var(--border);
}

body[data-theme="modern-blue"] .profile-header {
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 70%),
        0 12px 26px rgb(40 45 60 / 13%);
}

body[data-theme="modern-blue"] .profile-tabs {
    box-shadow: var(--slab-bar-shadow);
}


/* Card hover: the dark theme brightens; brightening a near-white card
   just washes it out, so lean on an accent border + faint lift instead. */
body[data-theme="modern-blue"] .resume-skill-button:focus-visible,
body[data-theme="modern-blue"] .resume-skill-card.is-popover-open .resume-skill-button,
body[data-theme="modern-blue"] .work-project-tab:hover,
body[data-theme="modern-blue"] .work-project-tab.is-active,
body[data-theme="modern-blue"] .resume-ai-suggestion:hover,
body[data-theme="modern-blue"] .btn-secondary:hover,
body[data-theme="modern-blue"] .resume-metric-card:hover,
body[data-theme="modern-blue"] .resume-metric-card.is-selected {
    border-color: var(--accent);
    filter: none;
}

/* Project-media backdrop + chat panel internals: light on light. */

body[data-theme="modern-blue"] #chat-header {
    background: linear-gradient(180deg, rgb(255 255 255 / 35%), rgb(40 45 60 / 9%));
}

body[data-theme="modern-blue"] #chat-input {
    color: var(--text);
    background: rgb(255 255 255 / 72%);
}

body[data-theme="modern-blue"] #chat-input-area,
body[data-theme="modern-blue"] #chat-disclaimer {
    background: rgb(255 255 255 / 22%);
}

body[data-theme="modern-blue"] #chat-panel {
    box-shadow: var(--slab-card-shadow), 0 0 30px rgb(40 45 60 / 14%);
}

/* Layered Ink & Signal Gold shell (PS-THEME-002): mirrors the Modern Blue
   shell rules above. Ink-black global chrome over layered near-black
   pages; elevation = lighter surface + 1px hairline + deep soft shadow. */
body[data-theme="dark"] .hero::before {
    background:
        linear-gradient(90deg, rgb(14 29 58 / 88%) 0%, rgb(14 29 58 / 62%) 48%, rgb(14 29 58 / 88%) 100%),
        radial-gradient(circle at 78% 14%, var(--accent-soft), transparent 28%);
}

body[data-theme="dark"] .hero,
body[data-theme="dark"] .my-story-page,
body[data-theme="dark"] .work-page,
body[data-theme="dark"] .resume-page {
    color: var(--text);
}

/* Ink header: off-white links, gold active underline (reference poster). */
body[data-theme="dark"] .global-header {
    background: #0a1730;
    box-shadow: 0 6px 18px rgb(0 0 0 / 28%);
    border-bottom: 1px solid #253c66;
}

body[data-theme="dark"] .platform-nav__links a {
    color: #e2e7f0;
}

body[data-theme="dark"] .platform-nav__links a:hover,
body[data-theme="dark"] .platform-nav__links a:focus-visible {
    color: #ffffff;
}

body[data-theme="dark"] .platform-nav__links a[aria-current="page"] {
    color: #e3b83a;
}

body[data-theme="dark"] .platform-nav__links a[aria-current="page"]::after {
    background: #d8a928;
}

body[data-theme="dark"] .platform-brand__logo img {
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 45%));
}

/* Header search: solid white pill on the ink bar. */
body[data-theme="dark"] .nav-search__input {
    background: #ffffff;
    border-color: #3b527f;
    color: #0a1730;
}

body[data-theme="dark"] .nav-search__input::placeholder { color: #66645f; }

body[data-theme="dark"] .nav-search__input:focus {
    border-color: #d8a928;
    background: #ffffff;
}

body[data-theme="dark"] .nav-search__icon { stroke: #66645f; }

/* Theme toggle on the ink bar. */
body[data-theme="dark"] .theme-toggle { color: #afb9cb; }

body[data-theme="dark"] .theme-toggle__track {
    background: #253a61;
    border-color: #3b527f;
}

body[data-theme="dark"] .theme-toggle[aria-checked="true"] .theme-toggle__track {
    background: #d8a928;
    border-color: #d8a928;
}

/* Ask AI header button + Sign In: gold is the one signal on the ink bar,
   so Sign In takes it; Ask AI stays a quiet outline control. */
body[data-theme="dark"] .nav-ask-ai {
    color: #e2e7f0;
    border-color: #3b527f;
    background: transparent;
}

/* Profile sub-header (second row): a raised graphite strip one layer
   above the page, one below the ink bar — black on black layering. */
body[data-theme="dark"] .profile-tabs {
    background: #16294c;
    border-bottom: 1px solid #253c66;
}

body[data-theme="dark"] .profile-tabs .profile-tab {
    color: #9aa5b8;
    font-weight: 680;
}

body[data-theme="dark"] .profile-tabs .profile-tab:hover,
body[data-theme="dark"] .profile-tabs .profile-tab:focus-visible,
body[data-theme="dark"] .profile-tabs .profile-tab[aria-current="page"] {
    color: #e3b83a;
}

body[data-theme="dark"] .profile-tabs .profile-tab::after {
    background: #d8a928;
}

/* Slate success confirmations: the light theme's deep green lifts to the
   dark-safe verified green on navy cards. */
body[data-theme="dark"] .ts-compose__done,
body[data-theme="dark"] .ts-checkin__done {
    color: #5abf95;
}

/* Sub-header Ask AI chip: the AI-teal pill collapses to the gold signal
   family on the dark strip. */
body[data-theme="dark"] .profile-tabs__ask-btn {
    color: #e3b83a;
    background: rgb(216 169 40 / 12%);
    border-color: rgb(216 169 40 / 35%);
}

body[data-theme="dark"] .profile-tabs__ask-btn:hover,
body[data-theme="dark"] .profile-tabs__ask-btn:focus-visible {
    color: #0a1730;
    background: #d8a928;
    border-color: #d8a928;
}

body[data-theme="dark"] .btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

body[data-theme="dark"] {
    --slab-bar-shadow: 0 1px 2px rgb(0 0 0 / 40%);
    --slab-card-shadow: 0 2px 6px rgb(0 0 0 / 35%), 0 14px 34px rgb(0 0 0 / 40%);
    --slab-control-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 14px rgb(0 0 0 / 35%);
    --slab-primary-shadow: 0 2px 4px rgb(0 0 0 / 45%), 0 12px 22px rgb(216 169 40 / 20%);
    --slate-vein-strong: transparent;
    --slate-vein-soft: transparent;
    --slate-type-shadow: none;
    --slate-accent-text-shadow: none;
    --slate-linkedin-bg: #0a1730;
    --slate-linkedin-mark: #f7f9fc;
    --pop-shadow: 0 4px 12px rgb(0 0 0 / 45%), 0 28px 72px rgb(0 0 0 / 55%);
    --gilt-shadow: none;
    --slab-hi: rgb(255 255 255 / 6%);
    --slab-lo: rgb(0 0 0 / 45%);
    --slab-hi-chip: rgb(255 255 255 / 7%);
    --slab-lo-chip: rgb(0 0 0 / 40%);
}

body[data-theme="dark"] .profile-header {
    box-shadow: 0 1px 2px rgb(11 12 14 / 5%);
}

body[data-theme="dark"] .profile-tabs {
    box-shadow: var(--slab-bar-shadow);
}

body[data-theme="dark"] .resume-skill-button:focus-visible,
body[data-theme="dark"] .resume-skill-card.is-popover-open .resume-skill-button,
body[data-theme="dark"] .work-project-tab:hover,
body[data-theme="dark"] .work-project-tab.is-active,
body[data-theme="dark"] .resume-ai-suggestion:hover,
body[data-theme="dark"] .btn-secondary:hover,
body[data-theme="dark"] .resume-metric-card:hover,
body[data-theme="dark"] .resume-metric-card.is-selected {
    border-color: #d8a928;
    filter: none;
}

/* Footer: the deepest layer — a well below the page canvas. */
body[data-theme="dark"] .footer {
    background: #081426;
    color: #afb9cb;
    border-top: 1px solid #253c66;
}

body[data-theme="dark"] .footer .footer-privacy { color: #afb9cb; }
body[data-theme="dark"] .footer p { color: #afb9cb; }
body[data-theme="dark"] .footer .footer-why-link { color: #e3b83a; }
body[data-theme="dark"] .footer .footer-brand span { color: #f7f9fc; }

/* Chat assistant: graphite AI shell with gold accents (brief: AI surfaces
   are black/graphite with off-white copy; gold marks the active tool). */
body[data-theme="dark"] #chat-panel {
    background: #182c52;
    border: 1px solid #34497b;
    color: #f7f9fc;
    box-shadow: 0 18px 50px rgb(0 0 0 / 45%);
}

body[data-theme="dark"] #chat-header {
    background: #0a1730;
    color: #f7f9fc;
    border-bottom: 1px solid #34497b;
}

body[data-theme="dark"] #chat-header h3 { color: #f7f9fc; }
body[data-theme="dark"] #chat-header p { color: #afb9cb; }

body[data-theme="dark"] #chat-messages { background: transparent; }

body[data-theme="dark"] #chat-input {
    color: #f7f9fc;
    background: rgb(255 255 255 / 8%);
    border-color: #3b527f;
}

body[data-theme="dark"] #chat-input-area,
body[data-theme="dark"] #chat-disclaimer {
    background: rgb(255 255 255 / 4%);
    color: #afb9cb;
}

body[data-theme="dark"] #chat-send {
    background: #d8a928;
    color: #0a1730;
}

body[data-theme="dark"] #chat-toggle {
    background: #d8a928;
    color: #0a1730;
    border-color: #d8a928;
}

body[data-theme="dark"] .suggestion-btn {
    background: rgb(255 255 255 / 6%);
    color: #e2e7f0;
    border-color: #3b527f;
}

body[data-theme="dark"] .chat-message.bot-message {
    background: rgb(255 255 255 / 7%);
    color: #eef1f6;
}

/* Focus ring: gold with an ink offset, visible on every dark layer and
   on the paper pop layer alike. */
body[data-theme="dark"] :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #0e1d3a, 0 0 0 5px rgb(227 184 58 / 85%);
}

@media (max-width: 1180px) {
    .platform-nav__inner {
        grid-template-columns: 1fr auto;
        gap: 16px;
    }

    .platform-nav__links {
        grid-column: 1 / -1;
        justify-content: flex-start;
        order: 3;
        padding-bottom: 12px;
        overflow-x: auto;
    }

    .platform-actions {
        justify-self: end;
    }

    .profile-header__inner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* =========================================================
   MY SLATE BOARD (/petec/slate-board) + HOME FEED
   Pete's goals-and-wins board: quick stats, a compose bar
   (visual preview), four goal cards with progress rings, a
   monthly momentum chart, the badge "trophy shelf", and the
   draft/private/public entry list. The home page's "From the
   Slate Boards" feed reuses the same card language.
   Base styles below use the shared theme variables so all 8
   themes render; the slate-photo slab lists earlier in this
   file add the stone treatment on the slate themes.
   ========================================================= */

.board-page {
    padding: clamp(34px, 5vw, 58px) 0 72px;
}


/* Four quick stats — 2x2 at every width (groups-of-4 rule). */

.board-stat {
    padding: 10px 6px;
    text-align: center;
}

.board-stat strong {
    display: block;
    color: var(--accent);
    font-size: 1.75rem;
    font-weight: 850;
    line-height: 1.1;
}

.board-stat span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* ---------- Compose bar (visual preview) ---------- */
.board-compose {
    padding: 18px 20px 16px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.board-compose__label {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.board-compose__input {
    width: 100%;
    min-height: 58px;
    padding: 12px 14px;
    resize: vertical;
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 0.95rem;
}

.board-compose__input::placeholder {
    color: var(--text-muted);
}

.board-compose__input:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 1px;
}

.board-compose__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.board-compose__btn {
    min-height: 40px;
    font-size: 0.84rem;
}

.board-compose__note {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.8rem;
}


/* ---------- Goal cards with progress rings ---------- */
.board-goals__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* Tracking cards (mockup): pastel icon, serif percent, horizontal
   progress bar in the goal's own color (--ring, set inline per card). */
.goal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 17px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

/* Whiteboard ink links jump to these cards — keep them clear of the
   sticky tab strip when they land. */
.goal-card[id],
.bd-entry[id] {
    scroll-margin-top: 140px;
}

.goal-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.goal-card__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.goal-card__pct {
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.goal-bar {
    display: block;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 11%, transparent);
    overflow: hidden;
}

.goal-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ring, var(--accent));
}

.goal-card h3 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.goal-card p {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* Status + target line (mockup 3): a colored dot matching the ring. */
.goal-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}

.goal-status i {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1d9a5f;
}

.goal-status--progress i {
    background: #e0a72f;
}

.goal-status {
    width: 100%;
}

.goal-status time {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 600;
}

/* ---------- Momentum chart ---------- */

.momentum-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    height: 122px;
}

.momentum-col {
    display: grid;
    justify-items: center;
    align-content: end;
    gap: 7px;
    height: 100%;
}

/* --h is the bar height in px, set inline per month. */
.momentum-bar {
    display: block;
    width: min(26px, 100%);
    height: calc(var(--h, 8) * 1px);
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #ffffff 22%), var(--accent));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Months that haven't happened yet: quiet neutral stubs. */
.momentum-col--rest .momentum-bar {
    background: color-mix(in srgb, var(--text) 14%, transparent);
    box-shadow: none;
}

.momentum-col span {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 750;
}

/* ---------- Badge trophy shelf ---------- */
.board-badges__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}


/* ---------- Entry list (draft / private / public) ---------- */
.board-entries {
    display: grid;
    gap: 14px;
}

.entry-type {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.entry-time {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* ---------- The Whiteboard ----------
   A real-looking whiteboard: silver frame, bright writing surface,
   marker tray. Deliberately FIXED light colors on every theme — it's a
   physical object hanging on the slate, not a themed panel. Content
   scrolls inside once it outgrows the board. */
/* Section wrapper: heading, compose bar, then the physical board. */
.board-whiteboard {
    margin-top: 42px;
}

.whiteboard {
    margin-top: 20px;
    padding: 10px;
    background: linear-gradient(180deg, #e8ebee, #cdd3d9);
    border: 1px solid #b9c1c8;
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 70%),
        0 4px 8px rgb(0 0 0 / 18%),
        0 26px 50px rgb(0 0 0 / 22%);
}

.whiteboard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.whiteboard__head h2 {
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 650;
}

.whiteboard__head p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.whiteboard__surface {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 470px;
    overflow-y: auto;
    scrollbar-width: thin;
    border-radius: 10px;
    background:
        radial-gradient(ellipse at 18% 8%, rgb(122 138 152 / 5%), transparent 40%),
        radial-gradient(ellipse at 78% 85%, rgb(122 138 152 / 7%), transparent 45%),
        linear-gradient(158deg, #ffffff 0%, #fafbfc 55%, #f1f3f5 100%);
    box-shadow:
        inset 0 2px 10px rgb(90 104 116 / 12%),
        inset 0 -2px 8px rgb(255 255 255 / 60%);
}

/* Four user-named sections, quartered by dashed marker rules. */
.wb-section {
    padding: 22px 26px 26px;
}

.wb-section:nth-child(odd) {
    border-right: 1.5px dashed rgb(96 110 122 / 24%);
}

.wb-section:nth-child(-n+2) {
    border-bottom: 1.5px dashed rgb(96 110 122 / 24%);
}

/* Kalam = legible print handwriting (marker printing, not cursive). */
.wb-heading {
    display: inline-block;
    margin-bottom: 12px;
    padding-bottom: 1px;
    border-bottom: 3px solid currentColor;
    font-family: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-transform: uppercase;
    transform: rotate(-0.6deg);
}

.wb-heading--green { color: #2a7d4f; }
.wb-heading--blue { color: #2b5fa5; }
.wb-heading--violet { color: #6d3fa9; }
.wb-heading--purple { color: #8b3fc9; }
.wb-heading--orange { color: #d2691e; }
.wb-heading--red { color: #b83a33; }

.wb-list {
    display: grid;
    gap: 9px;
    list-style: none;
}

/* Hand-placed feel: alternate lines tilt a hair each way. */
.wb-list li {
    transform: rotate(-0.3deg);
}

.wb-list li:nth-child(even) {
    transform: rotate(0.35deg);
}

/* Each line of ink IS a link to the card it created. The underline
   draws itself in on hover, like running the marker under the words. */
.wb-ink {
    display: inline-block;
    font-family: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
    font-size: 1.06rem;
    line-height: 1.35;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    background-position: 0 94%;
    transition: background-size 240ms ease;
}

.wb-ink::before {
    content: "\2013\00a0";
}

.wb-ink:hover,
.wb-ink:focus-visible {
    background-size: 100% 1.5px;
}

.wb-ink--green { color: #2a7d4f; }
.wb-ink--blue { color: #2b5fa5; }
.wb-ink--violet { color: #6d3fa9; }
.wb-ink--purple { color: #8b3fc9; }
.wb-ink--orange { color: #d2691e; }
.wb-ink--red { color: #b83a33; }


/* Marker tray on the frame's bottom rail. */
.whiteboard__tray {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 3px;
}

.wb-marker {
    width: 46px;
    height: 9px;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
}

.wb-marker--green { background: linear-gradient(90deg, #2a7d4f 0 68%, #1c5636 68%); }
.wb-marker--blue { background: linear-gradient(90deg, #2b5fa5 0 68%, #1d4276 68%); }
.wb-marker--violet { background: linear-gradient(90deg, #6d3fa9 0 68%, #4e2c7c 68%); }
.wb-marker--red { background: linear-gradient(90deg, #b83a33 0 68%, #872a25 68%); }

.wb-eraser {
    width: 54px;
    height: 14px;
    margin-left: auto;
    border-radius: 3px;
    background: linear-gradient(180deg, #5d6a73, #404b53);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 25%),
        0 1px 2px rgb(0 0 0 / 35%);
}

/* ---------- Board motion (skipped for reduced-motion users) ---------- */
@media (prefers-reduced-motion: no-preference) {
    /* Ink writes itself onto the board, line by line (--i staggers). */
    .wb-ink {
        opacity: 0;
        translate: 0 6px;
        animation: wb-ink-in 460ms ease forwards;
        animation-delay: calc(140ms + var(--i, 0) * 110ms);
    }

    @keyframes wb-ink-in {
        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* Momentum bars grow up out of the baseline. */
    .momentum-bar {
        transform-origin: bottom;
        animation: bar-grow 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }

    @keyframes bar-grow {
        from {
            transform: scaleY(0);
        }
    }

    /* Bubbles and badges lift when touched. */
    .goal-card {
        transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .goal-card:hover {
        transform: translateY(-3px);
    }
}


/* ---------- Board + feed responsive ---------- */
@media (max-width: 1180px) {

    /* Groups of 4 collapse to 2x2, never 3+1. */
    .board-goals__grid,
    .board-badges__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 743px) {
    .momentum-chart {
        gap: 6px;
        height: 104px;
    }

    .goal-ring {
        width: 66px;
        height: 66px;
    }

    /* Whiteboard sections stack single-file on phones; the quadrant
       dividers become simple rules between rows. */
    .whiteboard__surface {
        grid-template-columns: 1fr;
        max-height: 520px;
    }

    .wb-section {
        padding: 18px 18px 20px;
    }

    .wb-section:nth-child(odd) {
        border-right: 0;
    }

    .wb-section:not(:last-child) {
        border-bottom: 1.5px dashed rgb(96 110 122 / 24%);
    }

    .board-compose__actions .btn {
        flex: 1 1 auto;
    }

    .entry-time {
        flex-basis: 100%;
        margin-left: 0;
        order: 3;
    }

}

/* =========================================================
   INTERVIEW STUDIO (/interview-studio) — interview practice workspace.
   The legacy selectors below are dormant; the canonical workspace uses
   static/css/interview-studio.css. They remain to avoid collateral changes
   in the shared stylesheet during this focused migration.
   ========================================================= */

.iv-page {
    padding: clamp(34px, 5vw, 58px) 0 72px;
}

.iv-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 32px;
    align-items: center;
    margin-bottom: 26px;
}

.iv-hero__copy h1 {
    margin: 10px 0 14px;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.iv-hero__lead {
    max-width: 580px;
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

.iv-hero__prep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.iv-hero__prep img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border: 2px solid rgb(255 255 255 / 40%);
    border-radius: 50%;
}

.iv-hero__prep strong {
    color: var(--text);
}

.iv-confidence {
    padding: 20px 22px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.iv-confidence h2 {
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 800;
}

.iv-confidence p {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.iv-confidence__check {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--accent);
    font-weight: 650;
}

.iv-confidence__check::before {
    content: "\2713\00a0\00a0";
    font-weight: 900;
}

/* Four benefit cards — 4-across / 2x2 (site rule). */
.iv-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.iv-benefit {
    padding: 16px 15px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.iv-benefit h3 {
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 800;
}

.iv-benefit p {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ---------- Mode bar ---------- */
.iv-modebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 10px 14px;
    margin-bottom: 22px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.iv-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.iv-mode {
    min-height: 36px;
    padding: 0 16px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.iv-mode:hover {
    color: var(--text);
    border-color: var(--accent);
}

.iv-mode.is-active {
    color: var(--button-primary-text);
    background: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
}

.iv-slate-chip {
    padding: 6px 12px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

.iv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 650;
}

.iv-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.iv-toggle__track {
    position: relative;
    width: 38px;
    height: 21px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 22%, transparent);
    transition: background-color 160ms ease;
}

.iv-toggle__track::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
    transition: transform 160ms ease;
}

.iv-toggle input:checked + .iv-toggle__track {
    background: var(--accent);
}

.iv-toggle input:checked + .iv-toggle__track::after {
    transform: translateX(16px);
}

.iv-toggle input:focus-visible + .iv-toggle__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Studio layout ---------- */
.iv-studio {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
    gap: 20px;
    align-items: start;
}

.iv-studio__main,
.iv-studio__rail {
    display: grid;
    gap: 18px;
}

.iv-card {
    padding: 18px 20px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.iv-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 12px;
}

.iv-label {
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.iv-label--right {
    margin-left: auto;
    color: var(--text-muted);
}

.iv-counter {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.iv-nav {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.iv-nav button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.iv-nav button:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.iv-question__row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.iv-question-mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
}

.iv-question-mark svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The question itself reads like it's being ASKED — serif, larger. */
.iv-question {
    color: var(--text);
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.35;
}

.iv-question__meta {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.iv-chip {
    padding: 3px 10px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.iv-chip--mode {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.iv-chip--soon {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.iv-question__links {
    display: flex;
    gap: 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.iv-question__links button,
.iv-linklike {
    padding: 0;
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
}

.iv-question__links button:hover,
.iv-linklike:hover {
    text-decoration: underline;
}

/* ---------- Response card ---------- */
.iv-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.iv-clear {
    padding: 0;
    color: var(--text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: underline;
}

.iv-response-card textarea {
    width: 100%;
    min-height: 150px;
    padding: 13px 15px;
    resize: vertical;
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.55;
}

.iv-response-card textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 1px;
}

.iv-response__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 12px;
}

.iv-response__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

.iv-btn {
    min-height: 38px;
    padding: 0 15px;
    font-size: 0.82rem;
}

.iv-rec-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d64545;
    box-shadow: 0 0 6px rgb(214 69 69 / 60%);
}

#iv-record.is-recording {
    border-color: #d64545;
}

#iv-record.is-recording .iv-rec-dot {
    animation: iv-rec-pulse 1s ease infinite;
}

@keyframes iv-rec-pulse {
    50% {
        opacity: 0.35;
    }
}

#iv-record:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---------- Coach feedback + score ring ---------- */
.iv-feedback__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.iv-feedback__text p {
    margin-bottom: 10px;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.6;
}

.iv-feedback__text .iv-feedback__empty {
    color: var(--text-muted);
}

.iv-score {
    --p: 0;
    width: 108px;
    height: 108px;
    display: grid;
    place-content: center;
    justify-items: center;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--surface) 77%, transparent 78% 100%),
        conic-gradient(#2a9d6f calc(var(--p) * 1%), color-mix(in srgb, var(--text) 12%, transparent) 0);
    box-shadow: 0 6px 14px rgb(0 0 0 / 16%);
}

.iv-score strong {
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}

.iv-score span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.iv-session {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 650;
}

/* ---------- Suggested questions + mock interview ---------- */

.iv-mock {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.iv-mock p {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ---------- Right rail ---------- */
.iv-evidence__sub {
    margin: -4px 0 12px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.iv-evidence__list {
    display: grid;
    gap: 10px;
    list-style: none;
}

.iv-evidence__list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.iv-evidence__list strong {
    color: var(--accent);
    font-size: 0.92rem;
    font-weight: 850;
    white-space: nowrap;
}

.iv-evidence__list span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.iv-tag {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Tag inks mix toward the theme text so they stay readable on both
   light and dark surfaces (same trick as the entry flags). */
.iv-tag--lead {
    color: color-mix(in srgb, #2a7d4f 55%, var(--text) 45%);
    background: color-mix(in srgb, #2a7d4f 13%, transparent);
}

.iv-tag--impact {
    color: color-mix(in srgb, #2b5fa5 55%, var(--text) 45%);
    background: color-mix(in srgb, #2b5fa5 13%, transparent);
}

.iv-tag--tech {
    color: color-mix(in srgb, #6d3fa9 55%, var(--text) 45%);
    background: color-mix(in srgb, #6d3fa9 13%, transparent);
}

.iv-evidence__link {
    display: inline-block;
    margin-top: 12px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
}

.iv-evidence__link:hover {
    text-decoration: underline;
}

.iv-star__list {
    display: grid;
    gap: 12px;
    list-style: none;
}

.iv-star__list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.iv-star__letter {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 8px;
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 850;
}

.iv-star__list strong {
    display: block;
    color: var(--text);
    font-size: 0.88rem;
}

.iv-star__list span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.iv-match h3 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
}

.iv-match p {
    margin: 8px 0 10px;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* ---------- Question banks ---------- */
.iv-bank {
    margin-top: 46px;
}

.iv-bank__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    list-style: none;
    counter-reset: ivq;
}

.iv-bank__list li {
    counter-increment: ivq;
}

.iq-item {
    position: relative;
    width: 100%;
    padding: 11px 13px 11px 44px;
    text-align: left;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1.45;
    transition: border-color 160ms ease, transform 160ms ease;
}

.iq-item::before {
    content: counter(ivq, decimal-leading-zero);
    position: absolute;
    left: 13px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 850;
}

.iq-item:hover,
.iq-item:focus-visible {
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* ---------- Interview responsive ---------- */
@media (max-width: 1180px) {
    .iv-hero {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .iv-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .iv-studio {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 743px) {
    .iv-bank__list {
        grid-template-columns: 1fr;
    }

    .iv-feedback__body {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .iv-response__buttons {
        margin-left: 0;
        width: 100%;
    }

    .iv-response__buttons .btn {
        flex: 1 1 auto;
    }

    .iv-toggle {
        margin-left: 0;
    }
}

/* =========================================================
   MOCKUP DESIGN SYSTEM (ps-*) — shared primitives used by the
   rebuilt pages (home, overview, board, interview). Everything
   reads the theme variables, so all nine themes recolor it; the
   proportions/layout are locked to static/Mockup/*.png.
   ========================================================= */

.ps-eyebrow {
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ps-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 650;
}

.ps-link:hover {
    text-decoration: underline;
}

.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 650;
    white-space: nowrap;
    transition: filter 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.ps-btn:hover {
    transform: translateY(-1px);
}

.ps-btn--primary {
    color: var(--button-primary-text);
    background: var(--button-primary-bg);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--button-primary-bg) 28%, transparent);
}

.ps-btn--primary:hover {
    filter: brightness(1.08);
}

.ps-btn--ghost {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

.ps-btn--ghost:hover {
    border-color: var(--accent);
}

.ps-btn--ink {
    color: var(--ink-btn-text);
    background: var(--ink-btn-bg);
}

.ps-btn--ink:hover {
    filter: brightness(1.15);
}

/* White mockup card: hairline border, whisper shadow. */
.ps-card {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

/* Pastel icon circles (mockup feature cards / metric cards). */
.ps-tint--blue { color: #2f5fb3; background: #e3ebfa; }
.ps-tint--green { color: #1d7a4f; background: #ddf0e4; }
.ps-tint--violet { color: #6d3fd0; background: #eae4f9; }
.ps-tint--sky { color: #1c7391; background: #ddeef5; }
.ps-tint--orange { color: #c2611b; background: #fdeadd; }

/* Section rhythm. */
.ps-section {
    padding: clamp(26px, 4vw, 46px) 0;
}

.ps-section--last {
    padding-bottom: 64px;
}

.ps-section-head {
    margin-bottom: 24px;
}

.ps-section-head h2 {
    margin-top: 8px;
    color: var(--text);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 650;
}

.ps-section-head--center {
    text-align: center;
}

.ps-section-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ---------- HOME: hero ---------- */
.ps-hero {
    padding: clamp(30px, 5vw, 64px) 0 clamp(22px, 3vw, 40px);
}

.ps-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.ps-hero__copy h1 {
    margin: 14px 0 20px;
    color: var(--text);
    font-size: clamp(2.6rem, 4.6vw, 3.6rem);
    font-weight: 650;
    line-height: 1.12;
}

/* The mockup underlines the key words with a soft rule. */
.ps-underline {
    box-shadow: inset 0 -0.14em color-mix(in srgb, var(--text) 14%, transparent);
}

.ps-hero__lead {
    max-width: 460px;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.ps-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

/* ---------- HOME: live profile preview card ---------- */
.ps-hero__preview {
    display: grid;
    gap: 14px;
}


/* ---------- HOME: feature cards ---------- */
.ps-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ps-feature {
    position: relative;
    display: block;
    padding: 22px 20px 40px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: transform 160ms ease, border-color 160ms ease;
}

.ps-feature:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.ps-feature__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

.ps-feature__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ps-feature h3 {
    margin-top: 14px;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 650;
}

.ps-feature p {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

.ps-feature__arrow {
    position: absolute;
    right: 18px;
    bottom: 14px;
    color: var(--text-muted);
}

/* ---------- HOME: how it works ---------- */
.ps-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    list-style: none;
    counter-reset: none;
}

.ps-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
}

/* Dashed connector between steps (mockup). */
.ps-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 44px;
    left: calc(50% + 46px);
    width: calc(100% - 92px);
    border-top: 2px dashed color-mix(in srgb, var(--text) 18%, transparent);
}

.ps-step__num {
    position: absolute;
    top: -6px;
    left: calc(50% - 44px);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--ink-btn-text);
    background: var(--ink-btn-bg);
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 800;
}

.ps-step__icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 10px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.ps-step__icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ps-step h3 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 650;
}

.ps-step p {
    max-width: 220px;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.5;
}

/* ---------- HOME: slate boards feed ---------- */
.ps-feed {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ps-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ps-flag svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ps-flag--blue { color: color-mix(in srgb, #2f6fe0 70%, var(--text) 30%); }
.ps-flag--green { color: color-mix(in srgb, #1d9a5f 70%, var(--text) 30%); }
.ps-flag--violet { color: color-mix(in srgb, #7c4fd8 70%, var(--text) 30%); }
.ps-flag--gray { color: var(--text-muted); }

.ps-mini-chip {
    padding: 3px 9px;
    color: color-mix(in srgb, #2f6fe0 70%, var(--text) 30%);
    background: color-mix(in srgb, #2f6fe0 12%, transparent);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 750;
}

.ps-mini-chip--violet {
    color: color-mix(in srgb, #7c4fd8 70%, var(--text) 30%);
    background: color-mix(in srgb, #7c4fd8 12%, transparent);
}

/* ---------- HOME: real example band ---------- */
.ps-example {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    padding: 26px 30px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.ps-example img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border: 2px solid rgb(255 255 255 / 60%);
    border-radius: 50%;
}

.ps-example__copy {
    flex: 1 1 320px;
}

.ps-example__copy h2 {
    margin: 6px 0 8px;
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 650;
}

.ps-example__copy p:last-child {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Footer privacy line (mockup, all pages). */
.footer-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.84rem;
}

/* ---------- Home responsive ---------- */
@media (max-width: 1180px) {
    .ps-hero__grid {
        grid-template-columns: 1fr;
    }

    .ps-features,
    .ps-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ps-step:not(:last-child)::after {
        display: none;
    }

    .ps-feed {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .ps-features,
    .ps-steps {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   PEERSLATE HOMEPAGE MOCKUP PASS
   Homepage-only overrides based on the ChatGPT mockup spec:
   Playfair headings, 1180px rail, light cards, generous pacing,
   stacked hero preview cards, and polished board/CTA sections.
   ========================================================= */

.peerslate-home-page {
    /* CONTRAST FIX (2026-07-07): the landing is the ONLY page that never
       takes body.slate-light, so the shared design tokens (--surface/--text/
       --text-muted/--border/--accent) that every ps-* component reads were
       left at their dark-era defaults here — that's why the Proven Impact
       band rendered near-invisible heads and charcoal metric cards on an
       otherwise light page. Map the shared tokens onto the landing's own
       light palette so shared components resolve correctly. */
    --surface: #ffffff;
    --surface-soft: #f8fbff;
    --border: #d9e2ec;
    --text: #061a3a;
    --text-muted: #49617a;
    --accent: #0758c9;
    --accent-soft: #eff6ff;
    --shadow: 0 12px 30px rgb(6 26 58 / 8%);

    --font-serif: "Playfair Display", Georgia, serif;
    --home-bg: #f8fafc;
    --home-bg-soft: #f1f5f9;
    --home-surface: rgb(255 255 255 / 92%);
    --home-surface-solid: #ffffff;
    --home-surface-soft: #f8fbff;
    --home-text: #061a3a;
    --home-muted: #49617a;
    --home-soft: #6e7f91;
    --home-border: #d9e2ec;
    --home-border-soft: #e8eef5;
    --home-blue: #0758c9;
    --home-blue-hover: #0b63e5;
    --home-blue-faint: #eff6ff;
    --home-teal: #0d9488;
    --home-teal-soft: #ccfbf1;
    --home-navy: #061a3a;
    --home-navy-2: #142b4f;
    --home-shadow-sm: 0 4px 12px rgb(6 26 58 / 6%);
    --home-shadow-md: 0 12px 30px rgb(6 26 58 / 8%);
    --home-shadow-lg: 0 24px 64px rgb(6 26 58 / 14%);
    --home-shadow-blue: 0 10px 24px rgb(7 88 201 / 24%);
    color: var(--home-text);
}

.peerslate-home-page .site-container {
    width: min(100% - 3rem, 1180px);
}

.peerslate-home-page .global-header {
    background: #f6f8fc;
    border-bottom-color: var(--home-border);
    box-shadow: 0 0.45rem 1.4rem rgb(10 27 54 / 10%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 743px) {
    .peerslate-home-page .global-header {
        background: #f6f8fc;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.peerslate-home-page .platform-nav__inner {
    width: 100%;
    min-height: 64px;
    gap: clamp(1.5rem, 2.8vw, 3.75rem);
}

.peerslate-home-page .platform-nav__links {
    gap: clamp(1.15rem, 2.3vw, 3rem);
    scrollbar-width: none;
}

.peerslate-home-page .platform-nav__links::-webkit-scrollbar {
    display: none;
}

.peerslate-home-page .platform-nav__links a {
    color: var(--home-text);
    font-size: 0.95rem;
    font-weight: 650;
}

.peerslate-home-page .platform-nav__links a[aria-current="page"] {
    color: var(--home-blue);
}

.peerslate-home-page .platform-nav__links a[aria-current="page"]::after {
    background: var(--home-blue);
}

.peerslate-home-page .sign-in-btn {
    min-height: 42px;
    border-radius: 0.85rem;
}


.peerslate-home-page .sign-in-btn {
    background: var(--home-navy);
}

.peerslate-home-page .main-content {
    overflow: hidden;
}

.peerslate-home-page .ps-home {
    position: relative;
    color: var(--home-text);
}

/* Mockup background is a clean near-white page (no grid). The only tint is
   a whisper of cool blue in the hero, added on .ps-hero below.
   CONTRAST FIX (2026-07-07): this used to be a position: fixed ::before
   overlay painting white over the body's DARK default gradient. Fixed
   overlays only cover the viewport, so overscroll (iOS rubber-banding),
   print, and any stitched full-page rendering showed dark voids/banding.
   Paint the page background on the body itself instead. */
body.peerslate-home-page {
    background: #fdfdfe;
}

.peerslate-home-page .ps-eyebrow {
    color: var(--home-blue);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.peerslate-home-page .ps-btn {
    min-height: 54px;
    padding: 0.9rem 1.25rem;
    border-radius: 0.85rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.peerslate-home-page .ps-btn--primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--home-blue), var(--home-blue-hover));
    box-shadow: var(--home-shadow-blue);
}

.peerslate-home-page .ps-btn--ghost {
    color: var(--home-text);
    background: rgb(255 255 255 / 90%);
    border-color: var(--home-border);
}

.peerslate-home-page .ps-link {
    color: var(--home-blue);
    font-size: 0.9rem;
    font-weight: 750;
}

.peerslate-home-page .ps-hero {
    padding: 2.2rem 0 3.6rem;
    /* Faint cool-blue hero wash that fades to the white page (mockup). It
       lives on the section so it scrolls with the hero rather than staying
       pinned to the viewport. */
    background: linear-gradient(180deg, #eef3fb 0%, #f4f7fb 46%, rgb(253 253 254 / 0) 100%);
}

.peerslate-home-page .ps-hero__grid {
    /* Wider right column so the front card can stay a comfortable size AND
       the deck can fan out to its right, fully visible inside the rail. */
    grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.05fr);
    gap: 3.2rem;
    align-items: center;
}

.peerslate-home-page .ps-hero__copy {
    max-width: 34rem;
}

.peerslate-home-page .ps-hero__copy h1 {
    margin: 1rem 0 1.5rem;
    color: var(--home-text);
    font-family: "Playfair Display", Georgia, serif;
    /* Mockup hero is a roomy semibold, not a heavy black. 600 + relaxed
       letter-spacing/line-height matches the refined display type; 700 with
       -0.04em/0.95 read as thick and cramped ("YourWork"). */
    font-size: clamp(3.4rem, 5.4vw, 4.9rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.06;
}

/* Thin 2px rule beneath the keyword (mockup), sitting just below the
   baseline with a small gap — not a thick highlight band. */
.peerslate-home-page .ps-underline {
    background-image: linear-gradient(rgb(6 26 58 / 22%), rgb(6 26 58 / 22%));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 90%;
    box-shadow: none;
}

.peerslate-home-page .ps-hero__lead {
    max-width: 34rem;
    color: var(--home-muted);
    font-size: 1.2rem;
    line-height: 1.65;
}

.peerslate-home-page .ps-hero__actions {
    gap: 0.9rem;
    margin-top: 2rem;
}

.peerslate-home-page .ps-hero__preview,
.peerslate-home-page .hero-preview {
    position: relative;
    display: block;
    /* Fill the right column so the front card can sit at the left and the
       deck can fan out to the right (mockup). The rail caps the column at
       ~570px, so it never over-stretches. */
    width: 100%;
    min-height: 470px;
    padding-top: 0.15rem;
    isolation: isolate;
}

.peerslate-home-page .preview-stack {
    position: relative;
    min-height: 300px;
}

.peerslate-home-page .preview-card {
    background: rgb(255 255 255 / 96%);
    border: 1px solid rgb(217 226 236 / 90%);
    border-radius: 1.5rem;
    box-shadow: 0 24px 64px rgb(6 26 58 / 14%);
}

.peerslate-home-page .preview-main {
    position: relative;
    z-index: 3;
    width: min(100%, 410px);
    padding: 1.25rem;
    background: #ffffff;
}

.peerslate-home-page .preview-main__head {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.peerslate-home-page .preview-main__head img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border: 2px solid var(--home-border);
    border-radius: 50%;
}

.peerslate-home-page .preview-main__head h2 {
    color: var(--home-text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.peerslate-home-page .preview-main__title {
    margin-top: 0.32rem;
    color: var(--home-blue);
    font-size: 0.95rem;
    font-weight: 800;
}

.peerslate-home-page .preview-main__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin-top: 0.64rem;
    color: var(--home-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.peerslate-home-page .preview-main__bio {
    margin-top: 1rem;
    color: var(--home-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.peerslate-home-page .preview-main__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}

.peerslate-home-page .preview-main__chips span {
    padding: 0.26rem 0.62rem;
    color: var(--home-muted);
    background: var(--home-bg-soft);
    border: 1px solid var(--home-border-soft);
    border-radius: 0.5rem;
    font-size: 0.68rem;
    font-weight: 760;
}

.peerslate-home-page .preview-main__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.1rem;
    padding: 0.85rem 0.3rem;
    background: #f8fafc;
    border: 1px solid var(--home-border-soft);
    border-radius: 0.85rem;
    text-align: center;
}

.peerslate-home-page .preview-main__metrics div + div {
    border-left: 1px solid var(--home-border-soft);
}

.peerslate-home-page .preview-main__metrics strong {
    display: block;
    color: var(--home-text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

.peerslate-home-page .preview-main__metrics span {
    display: block;
    margin-top: 0.35rem;
    color: var(--home-soft);
    font-size: 0.57rem;
    font-weight: 780;
    line-height: 1.2;
}

.peerslate-home-page .preview-impact,
.peerslate-home-page .preview-milestone,
.peerslate-home-page .preview-ghost {
    position: absolute;
    pointer-events: none;
}

/* The deck fans out to the RIGHT of the front card (mockup): Impact
   Snapshot on top, Recent Milestone lower, blank card edges behind for
   depth. Anchored from the right so they always stay inside the rail. */
.peerslate-home-page .preview-impact {
    z-index: 2;
    top: 40px;
    right: 30px;
    width: 178px;
    padding: 1rem 1.05rem;
    opacity: 1;
}

.peerslate-home-page .preview-milestone {
    z-index: 1;
    top: 198px;
    right: 16px;
    width: 175px;
    min-height: 150px;
    padding: 1rem 1.05rem;
    opacity: 1;
}

.peerslate-home-page .preview-ghost {
    z-index: 0;
    width: 182px;
    height: 224px;
    background: #ffffff;
    opacity: 0.72;
}

.peerslate-home-page .preview-ghost-one {
    top: 92px;
    right: 6px;
    transform: rotate(5deg);
}

.peerslate-home-page .preview-ghost-two {
    top: 150px;
    right: -14px;
    transform: rotate(9deg);
}

.peerslate-home-page .preview-impact p,
.peerslate-home-page .preview-milestone p {
    color: var(--home-muted);
    font-size: 0.72rem;
    font-weight: 780;
}

.peerslate-home-page .preview-impact strong {
    display: block;
    margin-top: 1rem;
    color: var(--home-text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

.peerslate-home-page .preview-impact span,
.peerslate-home-page .preview-milestone span {
    display: block;
    margin-top: 0.5rem;
    color: var(--home-soft);
    font-size: 0.7rem;
    line-height: 1.35;
}

.peerslate-home-page .preview-impact svg {
    width: 100%;
    height: 58px;
    margin-top: 0.95rem;
}

.peerslate-home-page .preview-impact__fill {
    fill: rgb(20 184 166 / 14%);
}

.peerslate-home-page .preview-impact__line {
    fill: none;
    stroke: var(--home-teal);
    stroke-linecap: round;
    stroke-width: 3;
}

.peerslate-home-page .preview-milestone strong {
    display: block;
    margin-top: 0.95rem;
    color: var(--home-text);
    font-size: 0.76rem;
    font-weight: 780;
    line-height: 1.45;
}

.peerslate-home-page .preview-milestone b {
    position: absolute;
    right: 1rem;
    bottom: 0.9rem;
    color: var(--home-blue);
    font-size: 0.95rem;
}

.peerslate-home-page .hero-ai-panel {
    position: relative;
    z-index: 5;
    width: min(100%, 418px);
    margin-top: 0.95rem;
}

.peerslate-home-page .home-ask {
    margin: 0;
}

.peerslate-home-page .ai-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 64px;
    padding: 0.85rem 1rem;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(135deg, var(--home-navy), var(--home-navy-2));
    border-radius: 1rem;
    box-shadow: 0 18px 40px rgb(6 26 58 / 22%);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.peerslate-home-page .ai-bar:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 46px rgb(6 26 58 / 25%);
}

/* Keep the icon/input/button above the scanning glow layer. */
.peerslate-home-page .ai-bar > * {
    position: relative;
    z-index: 1;
}

/* Searching glow: the same sweeping gradient every AI bar uses
   (reuses the shared @keyframes ai-border-scan), tinted for the light
   homepage. Fires while chatbot.js adds .is-searching to the form. */
.peerslate-home-page .ai-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgb(96 160 255 / 78%), rgb(45 212 191 / 55%), transparent);
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

.peerslate-home-page .home-ask.is-searching .ai-bar::before {
    opacity: 1;
    animation: ai-border-scan 1.25s linear infinite;
}

.peerslate-home-page .ai-bar-icon {
    color: #dbeafe;
    font-size: 1rem;
}

.peerslate-home-page .ai-bar-text {
    flex: 1;
    color: rgb(255 255 255 / 78%);
    font-size: 0.94rem;
    font-weight: 650;
}

/* The dark pill now wraps a live input + submit button. */
.peerslate-home-page .ai-bar:focus-within {
    box-shadow: 0 0 0 3px rgb(11 99 229 / 35%), 0 18px 40px rgb(6 26 58 / 22%);
}

.peerslate-home-page .ai-bar .hero-ai-search__input {
    flex: 1;
    min-width: 0;
    padding: 0;
    color: #ffffff;
    background: transparent;
    border: 0;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
}

.peerslate-home-page .ai-bar .hero-ai-search__input::placeholder {
    color: rgb(255 255 255 / 66%);
}

.peerslate-home-page .ai-bar .hero-ai-search__input:focus {
    outline: none;
}

/* Extra .ai-bar specificity so the slate-photo theme's generic
   .hero-ai-search__button rule can't override the white circle. */
.peerslate-home-page .ai-bar .ai-bar-action {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.65rem;
    height: 2.65rem;
    min-height: 0;
    padding: 0;
    color: var(--home-text);
    background: #ffffff;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 900;
    transition: transform 160ms ease, background-color 160ms ease;
}

.peerslate-home-page .ai-bar .ai-bar-action:hover {
    transform: scale(1.06);
    background: #ffffff;
}

.peerslate-home-page .ai-bar .ai-bar-action:disabled {
    cursor: default;
    opacity: 0.6;
}

/* Four separate pills in one row under the ask bar (mockup) — no tray. */
.peerslate-home-page .ai-chip-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.7rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.peerslate-home-page .ai-chip {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.4rem;
    padding: 0 0.55rem;
    color: var(--home-text);
    background: #ffffff;
    border: 1px solid #e8eef5;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgb(6 26 58 / 6%);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease;
}

.peerslate-home-page .ai-chip__icon {
    color: var(--home-muted);
    font-size: 0.86em;
    line-height: 1;
}

.peerslate-home-page .ai-chip:hover {
    border-color: var(--home-blue);
    transform: translateY(-1px);
}

/* Live AI answer (rendered by chatbot.js) restyled light for the homepage;
   the shared .hero-ai-answer is dark-themed for the old hero. The
   .hero-ai-panel ancestor lifts specificity above the slate-photo theme
   rules (which otherwise force it dark and position:absolute). */
.peerslate-home-page .hero-ai-panel .hero-ai-answer {
    position: static;
    width: auto;
    height: auto;
    max-height: 264px;
    margin-top: 0.75rem;
    overflow-y: auto;
    color: var(--home-muted);
    background: #ffffff;
    border: 1px solid var(--home-border);
    border-left: 3px solid var(--home-blue);
    box-shadow: var(--home-shadow-md);
}

.peerslate-home-page .hero-ai-panel .hero-ai-answer.is-loading {
    border-left-color: var(--home-teal);
}

.peerslate-home-page .hero-ai-panel .hero-ai-answer::before {
    background: #ffffff;
    border-top-color: var(--home-border);
    border-left-color: var(--home-border);
}

.peerslate-home-page .hero-ai-panel .hero-ai-answer__question {
    color: var(--home-blue);
}

.peerslate-home-page .hero-ai-panel .hero-ai-answer__response {
    color: var(--home-text);
}

.peerslate-home-page .hero-ai-panel .hero-ai-answer__close {
    color: var(--home-soft);
    background: var(--home-bg-soft);
    border-color: var(--home-border);
}

.peerslate-home-page .hero-ai-panel .hero-ai-answer__close:hover,
.peerslate-home-page .hero-ai-panel .hero-ai-answer__close:focus-visible {
    color: var(--home-blue);
    background: var(--home-blue-faint);
    border-color: var(--home-blue);
}

.peerslate-home-page .ps-section {
    padding: 4.5rem 0 5.5rem;
}

.peerslate-home-page .ps-hero + .ps-section {
    padding-top: 0;
    padding-bottom: 1.35rem;
}

.peerslate-home-page #how-it-works {
    padding: 1rem 0 1.1rem;
}

.peerslate-home-page .ps-section-head {
    margin-bottom: 1.4rem;
}

.peerslate-home-page .ps-section-head h2 {
    color: var(--home-text);
    font-family: "Playfair Display", Georgia, serif;
    /* Mockup section headline is ~32px medium-serif, not a 44px black. */
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
    font-weight: 600;
    line-height: 1.15;
}

.peerslate-home-page .ps-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.peerslate-home-page .ps-feature {
    min-height: 214px;
    padding: 1.4rem 1.3rem 2.4rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--home-surface-soft) 100%);
    border-color: var(--home-border-soft);
    border-radius: 1.25rem;
    box-shadow: var(--home-shadow-md);
}

.peerslate-home-page .ps-feature__icon {
    width: 52px;
    height: 52px;
}

.peerslate-home-page .ps-feature__icon svg {
    width: 24px;
    height: 24px;
}

.peerslate-home-page .ps-feature h3 {
    margin-top: 1.05rem;
    color: var(--home-text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* Mockup card copy is a comfortable ~15px on exactly three lines. */
.peerslate-home-page .ps-feature p {
    margin-top: 0.6rem;
    max-width: 15.5rem;
    color: var(--home-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.peerslate-home-page .ps-feature__arrow {
    color: var(--home-text);
}

.peerslate-home-page .ps-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.peerslate-home-page .ps-step {
    gap: 0.45rem;
}

.peerslate-home-page .ps-step:not(:last-child)::after {
    top: 41px;
    left: calc(50% + 44px);
    width: calc(100% - 88px);
    border-top-color: rgb(7 88 201 / 22%);
}

.peerslate-home-page .ps-step__num {
    top: -0.28rem;
    left: calc(50% - 42px);
    width: 1.6rem;
    height: 1.6rem;
    color: #ffffff;
    background: var(--home-blue);
}

.peerslate-home-page .ps-step__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 0.45rem;
    color: var(--home-blue);
    background: rgb(255 255 255 / 92%);
    border-color: var(--home-border-soft);
    border-radius: 1.15rem;
    box-shadow: var(--home-shadow-sm);
}

/* Slightly larger step glyphs (was the shared 26px). */
.peerslate-home-page .ps-step__icon svg {
    width: 30px;
    height: 30px;
}

.peerslate-home-page .ps-step h3 {
    margin-bottom: 0.15rem;
    color: var(--home-text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Narrower column + larger type so each step reads on three lines (mockup). */
.peerslate-home-page .ps-step p {
    max-width: 11rem;
    color: var(--home-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.peerslate-home-page .ps-feed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.peerslate-home-page [aria-labelledby="ps-feed-title"] {
    padding: 1.5rem 0 1.65rem;
}

.peerslate-home-page [aria-labelledby="ps-feed-title"] .ps-section-head {
    margin-bottom: 0.95rem;
}

.peerslate-home-page .ps-flag {
    font-size: 0.72rem;
}

.peerslate-home-page .ps-flag--blue { color: var(--home-blue); }
.peerslate-home-page .ps-flag--green { color: var(--home-teal); }
.peerslate-home-page .ps-flag--violet { color: #8b5cf6; }

.peerslate-home-page .ps-mini-chip {
    color: var(--home-teal);
    background: var(--home-teal-soft);
    border-radius: 0.55rem;
    font-size: 0.74rem;
}

.peerslate-home-page .ps-mini-chip--violet {
    color: #6d28d9;
    background: #ede9fe;
}

.peerslate-home-page .ps-avatar-stack {
    display: inline-flex;
    align-items: center;
}

.peerslate-home-page .ps-avatar-stack i {
    width: 24px;
    height: 24px;
    margin-left: -6px;
    background: linear-gradient(135deg, #cfe1ff, #0d9488);
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.peerslate-home-page .ps-avatar-stack i:first-child {
    margin-left: 0;
}

.peerslate-home-page .ps-section--last {
    padding: 0 0 3.3rem;
}

.peerslate-home-page .ps-example {
    gap: 1.75rem;
    /* Roomier band with an evenly soft-blue wash (mockup), not a
       half-white gradient that washed the right side out. */
    padding: 1.65rem 2rem;
    background:
        linear-gradient(120deg, #e9f1fc, #eef5fd),
        var(--slate-noise);
    border-color: #d5e3f5;
    border-radius: 1.25rem;
    box-shadow: var(--home-shadow-sm);
}

.peerslate-home-page .ps-example img {
    width: 82px;
    height: 82px;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgb(6 26 58 / 10%);
}

.peerslate-home-page .ps-example__copy h2 {
    margin: 0.4rem 0 0.5rem;
    color: var(--home-text);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.6rem, 2.3vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
}

.peerslate-home-page .ps-example__copy p:last-child {
    max-width: 34rem;
    color: var(--home-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.peerslate-home-page .footer {
    border-top: 0;
}

.peerslate-home-page .footer-privacy {
    color: var(--home-muted);
}

@media (max-width: 900px) {
    .peerslate-home-page .ps-hero__grid {
        grid-template-columns: 1fr;
    }

    .peerslate-home-page .ps-features,
    .peerslate-home-page .ps-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .peerslate-home-page .ps-feed {
        grid-template-columns: 1fr;
    }

    .peerslate-home-page .ps-hero__copy {
        max-width: 42rem;
    }

    .peerslate-home-page .ps-hero__preview {
        width: min(100%, 560px);
        max-width: 520px;
        margin-inline: auto;
    }

    .peerslate-home-page .preview-impact {
        right: -0.5rem;
    }

    .peerslate-home-page .preview-milestone {
        right: -1rem;
    }

    .peerslate-home-page .preview-ghost {
        display: none;
    }
}

@media (max-width: 743px) {
    .peerslate-home-page .site-container {
        width: min(100% - 2rem, 1180px);
    }

    .peerslate-home-page .ps-hero {
        padding: 3.6rem 0 3rem;
    }

    .peerslate-home-page .ps-hero__copy h1 {
        font-size: clamp(3.15rem, 13vw, 4.6rem);
    }

    .peerslate-home-page .ps-hero__preview {
        min-height: auto;
        padding-right: 0;
    }

    .peerslate-home-page .preview-stack {
        min-height: auto;
    }

    .peerslate-home-page .preview-impact,
    .peerslate-home-page .preview-milestone,
    .peerslate-home-page .preview-ghost {
        display: none;
    }

    .peerslate-home-page .ps-features,
    .peerslate-home-page .ps-steps {
        grid-template-columns: 1fr;
    }

    .peerslate-home-page .preview-main,
    .peerslate-home-page .hero-ai-panel,
    .peerslate-home-page .ai-bar {
        width: 100%;
    }

    .peerslate-home-page .ai-chip-row {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .peerslate-home-page .ai-chip {
        flex: 1 1 calc(50% - 0.5rem);
        justify-content: center;
    }

    .peerslate-home-page .ps-section {
        padding: 3.6rem 0 4.2rem;
    }

    .peerslate-home-page #how-it-works {
        padding: 4rem 0;
    }

    .peerslate-home-page .ps-example {
        align-items: flex-start;
        padding: 1.5rem;
    }
}

@media (max-width: 460px) {
    .peerslate-home-page .preview-main {
        padding: 1rem;
        border-radius: 1.2rem;
    }

    .peerslate-home-page .preview-main__head {
        align-items: flex-start;
        gap: 0.85rem;
    }

    .peerslate-home-page .preview-main__head img {
        width: 62px;
        height: 62px;
    }

    .peerslate-home-page .preview-main__head h2 {
        font-size: 1.34rem;
    }

    .peerslate-home-page .preview-main__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem 0;
    }

    .peerslate-home-page .preview-main__metrics div:nth-child(3) {
        border-left: 0;
    }

    .peerslate-home-page .ai-chip {
        min-height: 2.25rem;
        padding-inline: 0.55rem;
        font-size: 0.72rem;
    }
}

/* =========================================================
   DARK SLATE homepage — when the site's Dark Slate theme is active, the
   homepage should match the rest of the dark pages instead of staying light.
   Gated on [data-theme="gray-slate"] (not data-slate-photo) so light-theme
   visitors never get a dark flash. Most of the homepage is driven by the
   --home-* vars, so darkening those + the few hardcoded white surfaces flips
   the whole page.
   ========================================================= */


/* Page background → the theme's stone photo, like every other dark page. */


/* Header + wordmark */


/* Hero keyword underline needs to be light on the dark page. */


/* Cards / surfaces that were hardcoded white. */


/* The ask-bar go button becomes a light circle on the dark pill. */


/* Ghost button (See How It Works) + Sign In: hardcoded white → dark. */


/* ---------- OVERVIEW (mockup profile page) ---------- */
.ps-ov {
    padding: 26px 0 70px;
}

/* Metric cards + ask bar sit between the profile band and the tab strip
   (mockup). Small gaps above (from the band card) and below (to the tabs). */
.ps-ov-preface {
    padding: 20px 0 2px;
}

body.slate-light .ps-ov {
    padding-top: 22px;
}

.ps-ov-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ps-metric {
    /* Mockup: pastel circle icon + big value share the top row, then the
       title and description span full width below. */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 18px 20px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.ps-metric__icon {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

.ps-metric__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ps-metric strong {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
}

/* When the metric card is a link (homepage Proven Impact band), give it
   the same quiet "pop out" hover the other cards use, and keep the text
   from picking up the default underline/link color. */
a.ps-metric {
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

a.ps-metric:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.ps-section-sub {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.ps-metric h3 {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 14px;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
}

.ps-metric p {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* ---------- Dark "Ask Pete's Slate" bar (real AI search) ---------- */
.ps-askbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 18px 0 8px;
    padding: 10px 14px 10px 22px;
    background: var(--askbar-bg);
    border-radius: 14px;
    box-shadow: 0 16px 34px rgb(10 16 30 / 28%);
}

.ps-askbar__lead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    border-right: 1px solid rgb(255 255 255 / 14%);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.ps-askbar__spark {
    color: #8db1f4;
    font-size: 1.05rem;
}

.ps-askbar__form {
    flex: 1 1 260px;
    min-width: 240px;
}

/* The shared AI-search partial, recut for the dark bar: bare input +
   round blue Ask button; label and status line hide (the bar itself
   is the label), and the answer panel still drops below. */
.ps-askbar .hero-ai-search__label,
.ps-askbar .hero-ai-search__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.ps-askbar .hero-ai-search {
    width: 100%;
    margin: 0;
}

.ps-askbar .hero-ai-search__box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.ps-askbar .hero-ai-search__input {
    flex: 1;
    min-width: 0;
    padding: 10px 2px;
    color: #ffffff;
    background: transparent;
    border: 0;
    font-size: 0.92rem;
}

.ps-askbar .hero-ai-search__input::placeholder {
    color: rgb(255 255 255 / 55%);
}

.ps-askbar .hero-ai-search__input:focus {
    outline: none;
}

.ps-askbar .hero-ai-search__button {
    min-height: 38px;
    padding: 0 16px;
    color: #ffffff;
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    font-size: 0.84rem;
    font-weight: 700;
}

.ps-askbar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ps-askbar__chips button,
.ps-askbar__chips a {
    padding: 8px 13px;
    color: #ffffff;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 650;
    white-space: nowrap;
    transition: background-color 160ms ease;
}

.ps-askbar__chips button:hover,
.ps-askbar__chips a:hover {
    background: rgb(255 255 255 / 14%);
}

/* ---------- Overview content blocks ---------- */
/* Flattened sections (Pete): the Overview blocks are no longer cards — the
   heading and the smaller cards inside sit directly on the page, which reads
   cleaner and gives the section more breathing room. The card look (border,
   shadow, fill) came from .ps-card, now removed in the markup; here we just
   drop the interior padding and open up the gap between sections. */
.ps-ov-block {
    margin-top: 42px;
    padding: 0;
}

.ps-ov-block:first-child {
    margin-top: 8px;
}

.ps-ov-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 18px;
    margin-bottom: 20px;
}

.ps-ov-block__head h2 {
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 650;
}

.ps-ov-block__head p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* Skills chip grid. */
.ps-skills {
    display: grid;
    /* 12 skills laid out as exactly two rows of six on desktop (Pete's
       request). Narrower widths reflow via the overrides lower in the
       file (4-across on mid tablets, 2-across on phones). */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.ps-skills a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 15px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-soft) 60%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: var(--font-serif);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color 160ms ease, transform 160ms ease;
}

.ps-skills a:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Mockup: each icon sits in a bigger pastel-blue circle badge. */
.ps-skills svg {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 8px;
    flex-shrink: 0;
    color: #2f5fb3;
    background: #e3ebfa;
    border-radius: 50%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ps-skills .ps-skill-name {
    flex: 1;
    min-width: 0;
}

/* Small "evidence-backed" count: how many documented accomplishments back
   the skill. Kept subtle and teal so it reads as a verification badge. */
.ps-skills .ps-skill-count {
    flex-shrink: 0;
    min-width: 22px;
    padding: 1px 7px;
    color: #0d9488;
    background: rgb(13 148 136 / 11%);
    border-radius: 999px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0;
}

/* Experience role cards. */
.ps-roles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ps-role {
    padding: 18px;
    background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.ps-role__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ps-role__head strong {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
}

.ps-role__head time {
    color: var(--text-muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

.ps-role h3 {
    margin: 10px 0 8px;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 650;
}

.ps-role ul {
    display: grid;
    gap: 7px;
    list-style: none;
}

.ps-role li {
    position: relative;
    padding-left: 14px;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.5;
}

.ps-role li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.ps-role__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.ps-role__tags span {
    padding: 3px 9px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
}

/* Projects snapshot. */
.ps-projects {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ps-project {
    display: block;
    padding: 16px;
    color: inherit;
    background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 160ms ease, transform 160ms ease;
}

.ps-project:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.ps-project__kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ps-project__kicker svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ps-kicker--blue { color: color-mix(in srgb, #2f6fe0 70%, var(--text) 30%); }
.ps-kicker--green { color: color-mix(in srgb, #1d9a5f 70%, var(--text) 30%); }
.ps-kicker--violet { color: color-mix(in srgb, #7c4fd8 70%, var(--text) 30%); }
.ps-kicker--orange { color: color-mix(in srgb, #d97a26 70%, var(--text) 30%); }

.ps-project h3 {
    margin: 10px 0 7px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
}

.ps-project > p:not(.ps-project__kicker) {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.ps-project__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    color: #0d9488;
    font-size: 0.74rem;
    font-weight: 700;
}

.ps-project__foot svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: color-mix(in srgb, var(--text-muted) 65%, transparent);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ps-ov-cta {
    margin-top: 26px;
}

.ps-ov-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- Overview responsive ---------- */
@media (max-width: 1180px) {
    .ps-ov-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ps-roles {
        grid-template-columns: 1fr;
    }

    .ps-projects {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The About card drops below the identity on narrower screens. */
    .profile-header__inner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-about {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (max-width: 620px) {
    .ps-projects {
        grid-template-columns: 1fr;
    }

    .ps-askbar__lead {
        border-right: 0;
        padding-right: 0;
    }
}

/* ---------- SLATE BOARD (bd-*, mockup) ---------- */
.bd-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}

.bd-hero__avatar {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 2px solid var(--border);
    border-radius: 50%;
}

.bd-hero__copy {
    flex: 1 1 300px;
}

.bd-hero__copy h1 {
    color: var(--text);
    font-size: clamp(2rem, 3.6vw, 2.7rem);
    font-weight: 650;
    line-height: 1.08;
}

.bd-hero__sub {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.98rem;
}

.bd-hero__name {
    margin-top: 10px;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
}

.bd-hero__meta {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.bd-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Stat cards with links (mockup). */
.bd-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.bd-stat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.bd-stat__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
}

.bd-stat__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bd-stat strong {
    display: block;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
}

.bd-stat span {
    display: block;
    margin: 3px 0 6px;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 650;
}

.bd-stat .ps-link {
    font-size: 0.76rem;
}

.bd-stat__note {
    color: color-mix(in srgb, #d97a26 75%, var(--text) 25%);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 650;
}

/* Tracking grid. */
.bd-goals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.bd-goals .goal-card h3 {
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Latest entries: three across (mockup). */
.bd-entries {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bd-entry {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.bd-entry__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.bd-entry__top time {
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.bd-entry h3 {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
}

.bd-entry > p {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.bd-entry__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.bd-entry__foot > span {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.bd-entry__foot .ps-link {
    font-size: 0.76rem;
}

/* Bottom row: momentum chart / trophy shelf / assistant. */
.bd-bottom {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1.1fr;
    gap: 16px;
    margin-top: 22px;
    align-items: stretch;
}

.bd-bottom > .ps-card {
    padding: 20px 22px;
}

.bd-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.bd-card-head h2 {
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 650;
}

.bd-card-head span {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.bd-chart {
    width: 100%;
    height: auto;
}

.bd-chart__grid line {
    stroke: color-mix(in srgb, var(--text) 14%, transparent);
    stroke-width: 1;
}

.bd-chart__labels text {
    fill: var(--text-muted);
    font-family: Inter, sans-serif;
    font-size: 7.5px;
}

.bd-chart__line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bd-chart__dots circle {
    fill: var(--accent);
    stroke: var(--surface);
    stroke-width: 1.4;
}

.bd-foot {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Shield badges. */
.bd-shields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
    margin-bottom: 14px;
}

.bd-shield {
    display: grid;
    justify-items: center;
    gap: 7px;
    text-align: center;
}

.bd-shield__medal {
    display: grid;
    place-items: center;
    width: 54px;
    height: 60px;
    color: #ffffff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--shield) 82%, #ffffff 18%), var(--shield));
    clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
    filter: drop-shadow(0 3px 5px rgb(10 16 30 / 30%));
}

.bd-shield__medal svg {
    width: 24px;
    height: 24px;
    margin-top: -6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bd-shield strong {
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Slate Assistant. */
.bd-assistant__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}

.bd-assistant__spark {
    color: var(--accent);
    font-size: 1.2rem;
}

.bd-assistant__head h2 {
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 650;
}

.bd-beta {
    padding: 2px 8px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bd-assistant__sub {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.bd-assistant__chips {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}

.bd-assistant__chips button {
    padding: 8px 12px;
    text-align: left;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-soft) 60%, transparent);
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: border-color 160ms ease;
}

.bd-assistant__chips button:hover {
    border-color: var(--accent);
}

/* Compact light recut of the AI partial inside the assistant card. */
.bd-assistant__form .hero-ai-search__label,
.bd-assistant__form .hero-ai-search__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.bd-assistant__form .hero-ai-search {
    margin: 0;
    width: 100%;
}

.bd-assistant__form .hero-ai-search__box {
    display: flex;
    gap: 8px;
    padding: 4px 4px 4px 14px;
    background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: none;
}

.bd-assistant__form .hero-ai-search__input {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
    color: var(--text);
    background: transparent;
    border: 0;
    font-size: 0.84rem;
}

.bd-assistant__form .hero-ai-search__input:focus {
    outline: none;
}

.bd-assistant__form .hero-ai-search__button {
    min-height: 34px;
    padding: 0 14px;
    color: #ffffff;
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ---------- Board responsive ---------- */
@media (max-width: 1180px) {
    .bd-stats,
    .bd-goals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .whiteboard__surface {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wb-section:nth-child(odd) {
        border-left: 0;
    }

    .wb-section {
        padding: 10px 16px 14px;
        border-top: 1px solid var(--border);
    }

    .wb-section:nth-child(-n+2) {
        border-top: 0;
    }

    .bd-entries,
    .bd-bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .whiteboard__surface {
        grid-template-columns: 1fr;
    }

    .wb-section {
        border-left: 0;
        padding-left: 4px;
    }

    .wb-section:nth-child(2) {
        border-top: 1px solid var(--border);
    }
}

/* =========================================================
   PHONE LAYOUT (below iPad Mini) — reworked 2026-07-06.
   Goal: keep the desktop's essence (raised slate slabs, one
   continuous background, compact confident chrome) instead of
   the old four-stacked-rows header and oversized controls.
   ========================================================= */
@media (max-width: 743px) {
    /* The header stays pinned at the top on pages with no bottom nav (home,
       Interview Me, About, Contact), so navigation is always reachable there.
       Pages that DO have the bottom section bar (portfolio / Slate) let the
       header scroll away — the bottom bar covers navigation for them. */
    .global-header {
        position: sticky;
        top: 0;
    }

    body.has-mobile-tabbar .global-header {
        position: relative;
    }

    /* Two tight rows: brand + controls together up top, nav links in a
       scrollable strip beneath — like every polished mobile web app. */
    .platform-nav__inner {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "links links";
        column-gap: 10px;
        row-gap: 0;
        padding-top: 10px;
        padding-bottom: 6px;
    }

    .platform-brand {
        grid-area: brand;
        flex-direction: row;
        align-items: center;
        gap: 9px;
    }

    .platform-brand__logo img {
        height: 22px;
    }

    .platform-brand__profile {
        font-size: 0.72rem;
    }

    .platform-actions {
        grid-area: actions;
        gap: 8px;
    }

    .theme-selector {
        gap: 3px;
        padding: 3px;
    }

    

    .sign-in-btn {
        min-height: 30px;
        padding-inline: 9px;
        font-size: 0.72rem;
        gap: 5px;
    }

    .platform-nav__links {
        grid-area: links;
        gap: 20px;
        padding-top: 8px;
        padding-bottom: 6px;
    }

    .platform-nav__links a {
        font-size: 0.84rem;
    }

    /* Profile band: smaller portrait and type, and the two action
       buttons share ONE row instead of stacking as full-width slabs. */
    .profile-header__inner {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 6px 14px;
        min-height: 0;
        padding-top: 14px;
        padding-bottom: 16px;
    }

    .profile-avatar {
        width: 64px;
        height: 64px;
        border-width: 2px;
    }

    .profile-status {
        margin-bottom: 3px;
        font-size: 0.66rem;
        letter-spacing: 0.15em;
    }

    .profile-identity h1 {
        font-size: 1.7rem;
    }

    .profile-title {
        margin-top: 6px;
        font-size: 0.7rem;
        letter-spacing: 0.22em;
    }

    .profile-subtitle {
        margin-top: 5px;
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .profile-subtitle span {
        padding-inline: 5px;
    }

    .profile-actions {
        grid-column: 1 / -1;
        gap: 10px;
        margin-top: 6px;
    }

    .profile-action-btn {
        min-width: 0;
        flex: 1 1 0;
        min-height: 40px;
        padding: 0 10px;
        font-size: 0.78rem;
        gap: 7px;
        white-space: nowrap;
    }

    .profile-action-btn svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }

    /* Tab strip: a touch tighter, still sticky and swipeable. */
    .profile-tabs {
        position: sticky;
        top: 0;
    }

    .profile-tabs__inner {
        gap: 22px;
        min-height: 46px;
    }

    .profile-tab {
        min-height: 46px;
        font-size: 0.86rem;
    }

    .profile-tabs__linkedin {
        width: 38px;
        height: 38px;
    }

    .profile-tabs__linkedin svg {
        width: 32px;
        height: 32px;
    }

    /* Buttons everywhere drop to a comfortable phone scale — the old
       48px-tall desktop sizing is what read "blown up" on phones. */
    .btn {
        min-height: 42px;
        padding: 0 18px;
        font-size: 0.86rem;
        gap: 10px;
    }


}

@media (max-width: 620px) {
    /* Small phones: the "Pete's Slate" label is the one brand element
       that doesn't fit beside the theme dots + Sign In — drop it (the
       portrait and tab strip still link to the portfolio). */
    .platform-brand__profile {
        display: none;
    }
}

@media (max-width: 520px) {
    /* Keep the single-row header even on small phones — only the nav
       link strip scrolls. The profile band goes single-column with the
       portrait beside the name row still reading cleanly. */
    .profile-header__inner {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 4px 12px;
    }

    .profile-avatar {
        width: 56px;
        height: 56px;
    }

    .profile-identity h1 {
        font-size: 1.5rem;
    }

    .portfolio-shell #chat-toggle {
        display: none !important;
    }
}

/* =========================================================
   SLATE-LIGHT — clean near-white treatment for portfolio pages
   (Example Slate, etc.) so they match the homepage + their mockups.
   Maps a light palette onto the shared theme vars (so the var-driven
   ps-* components + profile chrome render light), then de-stones the
   platform header, profile band, and tab strip (which carry
   slate-photo rules). Applied via {% block body_class %}slate-light.
   Placed LAST so it wins cascade ties with body[data-slate-photo].
   ========================================================= */
body.slate-light {
    --bg: #fdfdfe;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f4f8fd;
    --border: #d9e2ec;
    --text: #061a3a;
    --text-muted: #49617a;
    --accent: #0b63e5;
    --accent-soft: rgb(11 99 229 / 8%);
    --shadow: 0 12px 30px rgb(6 26 58 / 8%);
    --tab-active: #0b63e5;
    /* Primary buttons are blue on the Light theme (the shared default was a
       leftover gold from the old theme). */
    --button-primary-bg: #0b63e5;
    --button-primary-text: #ffffff;
    --askbar-bg: linear-gradient(135deg, #0b1f3f, #16305e);
    /* The overview mockup uses Newsreader (moderate-contrast humanist
       serif), NOT the homepage's Playfair — Playfair read far too thick /
       high-contrast on "Pete Carter" and the section headings. */
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    background: #fdfdfe;
    color: var(--text);
}

body.slate-light .main-content {
    background: transparent;
}

/* ---- global platform header (light, like the homepage) ---- */
body.slate-light .global-header {
    background: #f6f8fc;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 0.45rem 1.4rem rgb(10 27 54 / 10%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 743px) {
    body.slate-light .global-header {
        background: #f6f8fc;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

body.slate-light .platform-nav__links a { color: var(--text); }
body.slate-light .platform-nav__links a[aria-current="page"] { color: var(--accent); }
body.slate-light .platform-nav__links a[aria-current="page"]::after { background: var(--accent); }


body.slate-light .sign-in-btn {
    color: #ffffff;
    background: #0a1f44;
}

/* ---- profile band → clean white card (mockup) ---- */
body.slate-light .profile-header {
    background: transparent;
    border-bottom: 0;
}

body.slate-light .profile-header__inner {
    margin-top: 24px;
    padding: 26px 30px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

body.slate-light .profile-avatar {
    border-color: #ffffff;
    box-shadow: 0 10px 26px rgb(6 26 58 / 14%);
}

body.slate-light .profile-identity h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Mockup: the title under the name is bold Inter (sans), not serif. */
body.slate-light .profile-title {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
}

/* Shrink the specialty row so it stays on one line. */
body.slate-light .profile-subtitle {
    font-size: 0.85rem;
}

/* ---- tab strip → clean static row with a rail-width underline ---- */
body.slate-light .profile-tabs {
    position: static;
    margin-top: 6px;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.slate-light .profile-tabs::before,
body.slate-light .profile-tabs::after {
    display: none;
}

body.slate-light .profile-tabs__inner {
    border-bottom: 1px solid var(--border);
}

body.slate-light .profile-tabs__linkedin {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.slate-light .profile-tabs__linkedin svg rect { fill: #0a66c2; }
body.slate-light .profile-tabs__linkedin svg path { fill: #ffffff; }

/* Live AI answer on the ask bar: light card to match the page (the shared
   .hero-ai-answer is dark-themed). */
body.slate-light .ps-askbar .hero-ai-answer {
    color: var(--text-muted);
    background: #ffffff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    box-shadow: var(--shadow);
}

body.slate-light .ps-askbar .hero-ai-answer::before {
    background: #ffffff;
    border-top-color: var(--border);
    border-left-color: var(--border);
}

body.slate-light .ps-askbar .hero-ai-answer__question { color: var(--accent); }
body.slate-light .ps-askbar .hero-ai-answer__response { color: var(--text); }
body.slate-light .ps-askbar .hero-ai-answer__close {
    color: var(--text-muted);
    background: var(--surface-soft);
    border-color: var(--border);
}

/* Ask bar: white chips + a white circular arrow button (mockup). */
body.slate-light .ps-askbar__chips button,
body.slate-light .ps-askbar__chips a {
    color: #0a1f44;
    background: #ffffff;
    border: 1px solid transparent;
    box-shadow: 0 3px 10px rgb(6 16 34 / 28%);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

body.slate-light .ps-askbar__chips button:hover,
body.slate-light .ps-askbar__chips a:hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgb(6 16 34 / 34%);
}

body.slate-light .ps-askbar .hero-ai-search__button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    color: #0a1f44;
    background: #ffffff;
    border-radius: 50%;
    font-size: 0;
}

body.slate-light .ps-askbar .hero-ai-search__button::after {
    content: "\2192";
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}


/* =========================================================
   SLATE FEED (/slate-feed) — built 2026-07-07 from Pete's
   Slate Feed mockup (Progress tab). Class family: sf-*.
   Light-theme-first (the mockup's look); everything reads
   from the shared theme vars so Dark Slate stays usable.
   Layout: page head → tab strip → three columns
   (left rail 296px / feed / right rail 332px).
   ========================================================= */

.sf-page {
    padding: 34px 0 64px;
}

/* The mockup's type is all clean sans — override the site-wide
   serif h1/h2/h3 inside this page only. */
.sf-page h1,
.sf-page h2,
.sf-page h3 {
    font-family: "Inter", "Segoe UI", sans-serif;
}

/* ---- page head ---- */
.sf-head h1 {
    margin: 0;
    color: var(--text);
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.sf-head p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.98rem;
}

/* ---- tab strip ---- */
.sf-tabbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 26px;
    border-bottom: 1px solid var(--border);
}

.sf-tabs {
    display: flex;
    gap: 34px;
    overflow-x: auto;                 /* phones: the strip scrolls */
    scrollbar-width: none;
}

.sf-tabs::-webkit-scrollbar { display: none; }

.sf-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 2px 15px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.sf-tab svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-tab:hover { color: var(--text); }

.sf-tab[aria-disabled="true"] { cursor: default; }
.sf-tab[aria-disabled="true"]:hover { color: var(--text-muted); }

.sf-tab[aria-current="page"] {
    color: var(--accent);
}

/* Active-tab underline sits on top of the strip's bottom hairline. */
.sf-tab[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
}

/* "All Activity" dropdown — a real <select> drawn like the mockup's
   rounded filter button (custom chevron via background-image). */
.sf-filter { margin-bottom: 10px; }

.sf-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sf-filter select {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 36px 9px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background:
        var(--surface)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2349617a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 13px center / 13px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.sf-filter select:hover { border-color: var(--accent); }

/* ---- the three columns ---- */
.sf-layout {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr) 332px;
    gap: 26px;
    align-items: start;
    margin-top: 26px;
}

.sf-rail {
    display: grid;
    gap: 22px;
    min-width: 0;
}

/* Dark Slate keeps the filter readable: dark surface + light chevron. */


/* =========================
   LEFT RAIL
   ========================= */

.sf-shortcuts { padding: 20px 20px 8px; }

.sf-shortcuts h2 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 700;
}

.sf-shortcuts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-shortcuts li + li { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }

.sf-shortcuts a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    color: inherit;
    text-decoration: none;
}

.sf-shortcut__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--text);
}

.sf-shortcut__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-shortcut__text { display: grid; gap: 2px; min-width: 0; }

.sf-shortcut__text strong {
    color: var(--text);
    font-size: 0.93rem;
    font-weight: 700;
}

.sf-shortcut__text small {
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Chevron drawn with a rotated border corner — no extra SVG. */
.sf-chevron {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--text-muted);
    border-right: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.sf-shortcuts a:hover .sf-chevron { transform: rotate(45deg) translate(2px, -2px); }
.sf-shortcuts a:hover strong { color: var(--accent); }

.sf-keep { padding: 20px; }

.sf-keep h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 700;
}

.sf-keep p {
    margin: 5px 0 14px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.sf-keep small {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

/* Shared slim progress bar (Keep building + project cards). */
.sf-bar {
    display: block;
    height: 8px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--border) 55%, transparent);
    overflow: hidden;
}

.sf-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

/* Invite banner — soft blue panel, little flag-on-the-hill scene. */
.sf-invite {
    display: flex;
    gap: 14px;
    padding: 18px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.sf-invite__art { flex: 0 0 64px; }

.sf-invite__art svg { width: 64px; height: 64px; }

.sf-invite__hill { fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.sf-invite__hill--near { fill: color-mix(in srgb, var(--accent) 30%, var(--surface)); }

.sf-invite__pole,
.sf-invite__body {
    fill: none;
    stroke: var(--text);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-invite__flag { fill: var(--accent); }
.sf-invite__head { fill: var(--text); }

.sf-invite__copy strong {
    display: block;
    color: var(--text);
    font-size: 0.93rem;
    font-weight: 700;
}

.sf-invite__copy p {
    margin: 3px 0 10px;
    color: var(--text-muted);
    font-size: 0.83rem;
}

.sf-invite__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
}

.sf-invite__cta:hover { text-decoration: underline; }

/* =========================
   CENTER FEED
   ========================= */

.sf-feed {
    display: grid;
    gap: 20px;
    align-content: start;
}

.sf-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 18px 20px 14px;
}

.sf-item[hidden] { display: none; }

/* ---- shared card header ---- */
.sf-item__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sf-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.sf-item__who {
    margin: 0;
    min-width: 0;
    font-size: 0.94rem;
}

.sf-item__name {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.sf-item__name:hover { color: var(--accent); }

.sf-item__action { color: var(--text-muted); }

.sf-item__boardlink {
    color: var(--accent);
    font-weight: 650;
    text-decoration: none;
}

.sf-item__boardlink:hover { text-decoration: underline; }

.sf-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.sf-item__more {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: default;
}

.sf-item__more svg { width: 18px; height: 18px; fill: currentColor; }

/* ---- card bodies ---- */
.sf-item__body { margin-top: 14px; }

.sf-item__copy h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sf-item__copy p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Milestone: copy left, hexagon medal right. */
.sf-item__body--split {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
}

.sf-item__body--split .sf-chip { margin-top: 13px; }

.sf-hexart--milestone { flex: 0 0 104px; }
.sf-hexart--milestone svg { width: 104px; height: 96px; }

.sf-spark { fill: #7fabf5; }
.sf-spark--small { fill: #a9c6f8; }

/* Badge: medal left, copy right. */
.sf-item__body--badge {
    display: flex;
    gap: 16px;
    align-items: center;
}

.sf-hexart--badge { flex: 0 0 76px; }
.sf-hexart--badge svg { width: 76px; height: 76px; }

/* Project: copy left, percent + bar right. */
.sf-item__body--project {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
}

.sf-progress {
    flex: 0 0 190px;
    display: grid;
    gap: 7px;
    justify-items: end;
    padding-top: 4px;
}

.sf-progress__pct {
    color: #16a34a;
    font-size: 0.85rem;
    font-weight: 700;
}

.sf-progress__bar {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--border) 55%, transparent);
    overflow: hidden;
}

.sf-progress__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #22c55e;
}

/* Board move: two mini kanban cards with an arrow between. */
.sf-boardmove {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 14px;
}

.sf-minicard {
    flex: 1 1 0;
    max-width: 250px;
    display: grid;
    gap: 7px;
    align-content: start;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
}

.sf-minicard__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.sf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sf-dot--blue { background: #2f6fe0; }
.sf-dot--green { background: #22c55e; }

.sf-minicard strong {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.35;
}

.sf-boardmove__arrow {
    align-self: center;
    color: var(--text-muted);
}

.sf-boardmove__arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- chips ---- */
.sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 650;
}

.sf-chip svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-chip--green { color: #157347; background: #ddf3e6; }
.sf-chip--blue { color: #2458c9; background: #e4edfc; }

/* ---- card footer ---- */
.sf-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.sf-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sf-facepile { display: inline-flex; }

.sf-facepile i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: #dbe7fb;
    color: #274f9e;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 800;
}

.sf-facepile i + i { margin-left: -7px; }
.sf-facepile i:nth-child(2) { background: #dff0e2; color: #1d6b3f; }
.sf-facepile i:nth-child(3) { background: #f0e4fb; color: #6d3fd0; }

.sf-social__count {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.sf-item__acts {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.sf-act {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.sf-act svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-act:hover { color: var(--text); }

.sf-act[aria-disabled="true"] { cursor: default; }
.sf-act[aria-disabled="true"]:hover { color: var(--text-muted); }

/* You celebrated/reacted: the button lights up accent-blue. */
.sf-act[aria-pressed="true"] { color: var(--accent); }
.sf-act[aria-pressed="true"]:hover { color: var(--accent); }

/* =========================
   RIGHT RAIL
   ========================= */

.sf-railhead {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-railhead svg {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--text);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-railhead h2 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
}

.sf-railhead__meta {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.sf-railhead .ps-link { margin-left: auto; font-size: 0.83rem; }

.sf-railhead__flame { stroke: #ea731d; }

/* ---- weekly review ---- */
.sf-review { padding: 20px; }

.sf-review__body {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 16px;
}

.sf-ring {
    position: relative;
    flex: 0 0 86px;
    width: 86px;
    height: 86px;
}

.sf-ring svg {
    width: 86px;
    height: 86px;
    transform: rotate(-90deg);
}

.sf-ring circle {
    fill: none;
    stroke-width: 7.5;
}

.sf-ring__track { stroke: color-mix(in srgb, var(--border) 55%, transparent); }

.sf-ring__value {
    stroke: var(--accent);
    stroke-linecap: round;
}

.sf-ring strong {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--text);
    font-size: 1.32rem;
    font-weight: 800;
}

/* The small % sign rides just above the number's baseline. */
.sf-ring strong i {
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 700;
    margin-top: 7px;
}

.sf-review__copy { min-width: 0; }

.sf-review__copy strong {
    display: block;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.sf-review__copy p {
    margin: 4px 0 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.sf-review__copy .ps-link { font-size: 0.85rem; }

/* ---- suggested next step ---- */
.sf-suggest { padding: 20px; }

.sf-suggest__panel[hidden] { display: none; }

.sf-suggest__panel {
    display: flex;
    gap: 14px;
    margin-top: 15px;
    padding: 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.sf-suggest__icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
}

.sf-suggest__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-suggest__copy { min-width: 0; }

.sf-suggest__copy strong {
    display: block;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.sf-suggest__copy p {
    margin: 4px 0 12px;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.sf-suggest__acts {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.sf-suggest__go {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 9px;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.sf-suggest__go:hover { filter: brightness(1.08); }

.sf-suggest__later {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
}

.sf-suggest__later:hover { text-decoration: underline; }

.sf-suggest__done {
    margin: 15px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

/* ---- trending goals ---- */
.sf-trending { padding: 20px; }

.sf-trending__list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.sf-trending__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 0;
}

.sf-trending__list li + li { border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }

.sf-trending__rank {
    flex: 0 0 12px;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
}

.sf-trend {
    display: grid;
    place-items: center;
    flex: 0 0 16px;
}

.sf-trend svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-trend--up svg { stroke: #16a34a; }
.sf-trend--down svg { stroke: #dc2626; }

.sf-trending__label {
    min-width: 0;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
}

.sf-trending__people {
    margin-left: auto;
    padding-left: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ---- growth cheer card ---- */
.sf-cheer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

.sf-cheer__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #ddf3e6;
    color: #157347;
}

.sf-cheer__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-cheer__copy strong {
    display: block;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.sf-cheer__copy p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 0.83rem;
}

/* =========================
   RESPONSIVE
   ========================= */

/* Tablets: feed + right rail stay side by side; the left rail's three
   modules drop below them in a row. */
@media (max-width: 1180px) {
    .sf-layout { grid-template-columns: minmax(0, 1fr) 320px; }

    .sf-center { order: 1; }
    .sf-rail--right { order: 2; }

    .sf-rail--left {
        order: 3;
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        align-items: start;
    }
}

/* Phones: one column, feed first. */
@media (max-width: 743px) {
    .sf-layout { grid-template-columns: 1fr; }

    .sf-rail--left { grid-template-columns: 1fr; }

    .sf-tabbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .sf-tabs { gap: 24px; }

    .sf-filter { margin-bottom: 12px; }
    .sf-filter select { width: 100%; }

    /* Milestone medal tucks under the copy on small screens. */
    .sf-item__body--split,
    .sf-item__body--project {
        flex-direction: column;
        align-items: flex-start;
    }

    .sf-progress {
        flex-basis: auto;
        width: 100%;
        justify-items: start;
    }

    .sf-boardmove { flex-direction: column; }

    .sf-boardmove__arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 24px; }

    .sf-minicard { max-width: none; }

    .sf-item__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}


/* =========================================================
   DESKTOP LAYOUT DOWN TO iPAD MINI (744px) — added 2026-07-07
   Pete's rule: every width from 744px up shows the DESKTOP
   arrangement (multi-column, side-by-side), never the stacked
   "blown-up phone" look. The tablet blocks earlier in this file
   stack live components between 780-1240px; rather than editing
   two dozen historical blocks, this section comes LAST and
   re-asserts each component's desktop grid for >=744px (source
   order wins at equal specificity). A compression tier then
   shrinks paddings/type between 744-1080px so those desktop
   grids genuinely fit.

   Deliberately NOT re-asserted (checked individually — the
   lesson from the reverted 2026-07-05 attempt):
   - .platform-nav (1180px block): the header genuinely cannot
     hold logo + 6 links + Theme + Sign In in one row below
     ~1180px — its link-row wrap is load-bearing.
   - .sf-layout (slate feed): 3 rails cannot fit in 744px; its
     2-column tablet form is already a desktop-style layout.
   - Old-design selectors (.hero-grid, .lifecycle-*, .nav-container
     etc.) — dead markup; those rules were removed entirely in the
     2026-07-09 dead-CSS purge.
   ========================================================= */

@media (min-width: 744px) {
    /* ---- PeerSlate homepage ---- */
    .ps-hero__grid,
    .peerslate-home-page .ps-hero__grid {
        grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    }

    .ps-features,
    .ps-steps,
    .peerslate-home-page .ps-features,
    .peerslate-home-page .ps-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ps-feed,
    .peerslate-home-page .ps-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .peerslate-home-page .ps-hero__copy {
        max-width: none;
    }

    /* ---- Example Slate overview ---- */
    .ps-ov-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ps-roles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ps-projects {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .profile-header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .profile-about {
        grid-column: auto;
        max-width: 320px;
    }

    .profile-actions {
        grid-column: auto;
    }

    /* ---- Slate Board ---- */
    .bd-stats,
    .bd-goals {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bd-entries {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bd-bottom {
        grid-template-columns: 1.15fr 1fr 1.1fr;
    }

    /* The quartered whiteboard IS the desktop design (2x2) — the
       1180px block only trims padding, so nothing to re-assert. */

    /* ---- Interview Me ---- */
    .iv-hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
        gap: 24px;
    }

    .iv-benefits {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .iv-studio {
        grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.85fr);
    }

    /* ---- My Slate (story) ---- */
    .story-timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .timeline-item + .timeline-item::after {
        display: block;
    }

    .story-drives__layout {
        grid-template-columns: minmax(180px, 0.84fr) minmax(0, 3.16fr);
    }

    .story-cards__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    }

    /* ---- Work / Projects page ---- */
    .work-project-selector {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .work-project-panel {
        grid-template-columns: minmax(0, 1fr) minmax(230px, 330px);
    }

    .work-hero {
        grid-template-columns: minmax(0, 1fr) minmax(230px, 330px);
    }

    .work-proof-grid {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 0.7fr);
    }
}

/* Compression tier: between iPad Mini and small laptops the desktop
   grids above stay, but cards/type/gaps tighten so they truly fit. */
@media (min-width: 744px) and (max-width: 1080px) {
    .ps-card { border-radius: 12px; }

    /* Six-across skills get tight here — fall back to four (three rows)
       until the phone block takes over at 743px with two. */
    .ps-skills { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .ps-features,
    .ps-steps,
    .ps-ov-metrics,
    .bd-stats,
    .bd-goals,
    .iv-benefits,
    .ps-projects,
    .peerslate-home-page .ps-features,
    .peerslate-home-page .ps-steps {
        gap: 10px;
    }

    .ps-feed,
    .peerslate-home-page .ps-feed,
    .bd-entries,
    .ps-roles {
        gap: 10px;
    }

    .story-timeline { gap: 14px; }

    /* Ask-bar chips wrap instead of clipping the last chip. The
       homepage rules are namespaced, so these selectors must match
       that specificity to win the cascade. */
    .ps-askbar__chips,
    .peerslate-home-page .ai-chip-row,
    .hero-ai-panel .ai-chip-row { flex-wrap: wrap; }

    .peerslate-home-page .ai-chip,
    .hero-ai-panel .ai-chip { font-size: 0.78rem; padding: 7px 12px; }

    /* The hero preview's floating mini-cards tuck fully inside the
       viewport instead of poking past the right edge. */
    .peerslate-home-page .preview-impact,
    .peerslate-home-page .preview-milestone { right: 4px; }

    /* Profile band: the name takes one line again at tablet widths. */
    .profile-identity h1 { font-size: 1.7rem; }

    /* Step connectors get little room at these widths — hide the
       dashes, keep the 4-across cards. */
    .ps-step:not(:last-child)::after,
    .peerslate-home-page .ps-step:not(:last-child)::after {
        display: none;
    }

    h1 { letter-spacing: -0.015em; }
}

/* =========================================================
   PHONE DENSITY (<=743px) — Pete: cards and buttons were too
   big, wasted space. Tighter paddings, smaller controls, and
   2-up grids so phones fit more horizontally. This block is
   last in the file, so it wins over the older 620/520 blocks
   wherever they disagree.
   ========================================================= */
@media (max-width: 743px) {
    /* Controls: compact but still comfortably tappable (38px). */
    .btn,
    .ps-btn {
        min-height: 38px;
        padding: 0 14px;
        font-size: 0.8rem;
        border-radius: 9px;
    }

    .sign-in-btn { padding: 8px 14px; font-size: 0.8rem; }

    /* Card groups go 2-up instead of one huge card per row. */
    .ps-features,
    .ps-steps,
    .ps-ov-metrics,
    .bd-stats,
    .bd-goals,
    .iv-benefits,
    .ps-projects,
    .bd-entries,
    .peerslate-home-page .ps-features,
    .peerslate-home-page .ps-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .ps-feed,
    .peerslate-home-page .ps-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    /* Core Skills: two dense columns of smaller pills. */
    .ps-skills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ps-skills a { padding: 9px 10px; }
    .ps-skills .ps-skill-name { font-size: 0.78rem; }

    /* Tighter card interiors across the ps-* pages. (.ps-ov-block is no
       longer a card — it stays flush with the page on phones too.) */
    .ps-ov-block { padding: 0; }
    .sf-item { padding: 14px 14px 11px; }
    .sf-shortcuts { padding: 14px 14px 4px; }
    .sf-keep,
    .sf-review,
    .sf-suggest,
    .sf-trending { padding: 14px; }

    /* Type scale: match the My Story phone reference (~24px h1). */
    .sf-head h1 { font-size: 1.55rem; }
    .sf-head p { font-size: 0.9rem; }

    /* Section rhythm tightens so pages feel dense, not airy. */
    .ps-section { padding: 18px 0; }
}


/* =========================================================
   FEED COMPOSER + POSTS (Slate Feed) — added 2026-07-07.
   Twitter-style share bar: 500-char limit with live counter,
   optional image attach. Posts render as sf-item cards (type
   "post") and persist per-browser via slate-feed.js.
   ========================================================= */

.sf-center {
    display: grid;
    gap: 20px;
    align-content: start;
    min-width: 0;
}

.sf-compose {
    display: flex;
    gap: 12px;
    padding: 16px 18px 14px;
}

.sf-compose__main { flex: 1; min-width: 0; }

.sf-compose textarea {
    width: 100%;
    min-height: 52px;
    padding: 10px 2px;
    border: 0;
    resize: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
}

.sf-compose textarea:focus { outline: none; }

.sf-compose textarea::placeholder { color: var(--text-muted); }

.sf-compose__preview {
    position: relative;
    margin: 4px 0 8px;
    max-width: 280px;
}

.sf-compose__preview img {
    display: block;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.sf-compose__preview button {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(10 20 35 / 72%);
    color: #ffffff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.sf-compose__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.sf-compose__photo {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--accent);
    cursor: pointer;
    transition: background 140ms ease;
}

.sf-compose__photo:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.sf-compose__photo svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-compose__count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* Counter warms up near the cap: amber from 450, red at 500. */
.sf-compose__count.is-warn { color: #b45309; font-weight: 700; }
.sf-compose__count.is-max { color: #dc2626; font-weight: 700; }

.sf-compose__post {
    padding: 8px 20px;
    border: 0;
    border-radius: 99px;
    background: var(--accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
}

.sf-compose__post:hover { filter: brightness(1.08); }

.sf-compose__post:disabled {
    opacity: 0.45;
    cursor: default;
    filter: none;
}

/* Posted cards: text + optional image, plus a quiet delete. */
.sf-item__post-text {
    margin: 12px 0 0;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.sf-item__post-img {
    display: block;
    max-width: 100%;
    max-height: 420px;
    margin-top: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.sf-item__delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.sf-item__delete:hover { color: #dc2626; }

/* =========================================================
   BOARD STYLE TOGGLE + CHALKBOARD MODE (Slate Board).
   The toggle flips data-board-mode="chalk" on .whiteboard:
   deep chalkboard-green surface in a walnut frame, chalk-tint
   ink and headings, chalk sticks in the tray. Same Kalam
   handwriting, same layout — only the physical board changes.
   ========================================================= */

.wb-mode {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.wb-mode__btn {
    padding: 7px 14px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}

.wb-mode__btn.is-active {
    background: var(--accent);
    color: #ffffff;
}

/* ---- compose section chips (Short Term / Long Term / ...) ---- */
.board-compose__sections {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 12px;
}

.board-compose__section {
    padding: 7px 14px;
    border: 1.5px solid var(--border);
    border-radius: 99px;
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

/* Selected chip takes its section's marker color. */
.board-compose__section.is-active[data-wb-target="short"] { border-color: #2a7d4f; color: #2a7d4f; background: color-mix(in srgb, #2a7d4f 9%, var(--surface)); }
.board-compose__section.is-active[data-wb-target="long"] { border-color: #6d3fa9; color: #6d3fa9; background: color-mix(in srgb, #6d3fa9 9%, var(--surface)); }
.board-compose__section.is-active[data-wb-target="projects"] { border-color: #2b5fa5; color: #2b5fa5; background: color-mix(in srgb, #2b5fa5 9%, var(--surface)); }
.board-compose__section.is-active[data-wb-target="work"] { border-color: #b83a33; color: #b83a33; background: color-mix(in srgb, #b83a33 9%, var(--surface)); }

.board-compose__count {
    margin-right: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.board-compose__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ---- user-added ink lines: plain ink + a tiny eraser button ---- */
.wb-list .wb-user {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.wb-user .wb-ink { cursor: default; }

.wb-del {
    align-self: center;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease;
}

.wb-list li:hover .wb-del,
.wb-del:focus-visible { opacity: 0.75; }

.wb-del:hover { color: #b83a33; opacity: 1; }

/* ---- CHALKBOARD MODE ---- */
.whiteboard[data-board-mode="chalk"] {
    background: linear-gradient(180deg, #8a6844, #6c4e2f);
    border-color: #57402a;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 28%),
        0 4px 8px rgb(0 0 0 / 22%),
        0 26px 50px rgb(0 0 0 / 26%);
}

.whiteboard[data-board-mode="chalk"] .whiteboard__surface {
    background:
        radial-gradient(ellipse at 22% 12%, rgb(255 255 255 / 5%), transparent 42%),
        radial-gradient(ellipse at 80% 88%, rgb(255 255 255 / 4%), transparent 45%),
        linear-gradient(158deg, #33473c 0%, #2c3f35 55%, #26372e 100%);
    box-shadow:
        inset 0 2px 12px rgb(0 0 0 / 42%),
        inset 0 -2px 8px rgb(255 255 255 / 4%);
}

.whiteboard[data-board-mode="chalk"] .wb-section:nth-child(odd) { border-right-color: rgb(255 255 255 / 26%); }
.whiteboard[data-board-mode="chalk"] .wb-section:nth-child(-n+2) { border-bottom-color: rgb(255 255 255 / 26%); }

/* Chalk ink: pale section tints with a soft chalk-dust glow. */
.whiteboard[data-board-mode="chalk"] .wb-heading--green,
.whiteboard[data-board-mode="chalk"] .wb-ink--green { color: #c8ecd3; }
.whiteboard[data-board-mode="chalk"] .wb-heading--violet,
.whiteboard[data-board-mode="chalk"] .wb-ink--violet { color: #ddccf6; }
.whiteboard[data-board-mode="chalk"] .wb-heading--blue,
.whiteboard[data-board-mode="chalk"] .wb-ink--blue { color: #c6ddf8; }
.whiteboard[data-board-mode="chalk"] .wb-heading--red,
.whiteboard[data-board-mode="chalk"] .wb-ink--red { color: #f7cbc7; }

.whiteboard[data-board-mode="chalk"] .wb-heading,
.whiteboard[data-board-mode="chalk"] .wb-ink {
    text-shadow: 0 0 6px rgb(255 255 255 / 18%);
}

.whiteboard[data-board-mode="chalk"] .wb-del { color: rgb(255 255 255 / 60%); }
.whiteboard[data-board-mode="chalk"] .wb-del:hover { color: #f7cbc7; }

/* Tray: markers become chalk sticks; the eraser goes wood + felt. */
.whiteboard[data-board-mode="chalk"] .wb-marker { height: 8px; border-radius: 3px; }
.whiteboard[data-board-mode="chalk"] .wb-marker--green { background: #cfeed8; }
.whiteboard[data-board-mode="chalk"] .wb-marker--blue { background: #cfe2f8; }
.whiteboard[data-board-mode="chalk"] .wb-marker--violet { background: #e2d4f7; }
.whiteboard[data-board-mode="chalk"] .wb-marker--red { background: #f8d6d2; }

.whiteboard[data-board-mode="chalk"] .wb-eraser {
    background: linear-gradient(180deg, #caa36f 0 55%, #3d332b 55%);
}

/* Sticky notes read fine on both surfaces — no change needed. */


/* =========================================================
   ••• CARD MENU + INLINE EDIT (Slate Feed / People) — 2026-07-07.
   Every feed card's three-dots button opens this menu: posted
   cards get Edit + Delete, sample cards pulled from the board get
   Delete (dismiss). Theme-var driven so Dark Slate works too.
   ========================================================= */

/* The ••• button ships disabled on sample cards; JS re-enables it. */
.sf-item__more { cursor: pointer; }
.sf-menu-wrap { position: relative; }

.sf-card-menu {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 30;
    min-width: 150px;
    padding: 6px;
    display: grid;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: 0 14px 34px rgb(6 26 58 / 18%);
}

.sf-card-menu__item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.sf-card-menu__item:hover { background: var(--surface-soft); }

.sf-card-menu__item--danger { color: #dc2626; }
.sf-card-menu__item--danger:hover { background: color-mix(in srgb, #dc2626 12%, transparent); }

/* Inline edit box (posted cards). */
.sf-item__edit {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.sf-item__edit textarea {
    width: 100%;
    min-height: 74px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.5;
    resize: vertical;
}

.sf-item__edit textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.sf-item__edit-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sf-item__edit-count {
    margin-right: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.sf-item__edit .sf-compose__post { padding: 7px 18px; }


/* =========================================================
   LIGHT-THEME CONVERSION — MY SLATE (story) & PROJECTS (work)
   (added 2026-07-07)
   These two pages (.my-story-page and .work-page) were built in the
   original dark theme and never converted when the site went light
   site-wide, so on the default Light theme (body.slate-light) they
   rendered as dark navy pages while every other page was light — the
   "backgrounds don't match, like my slate" issue Pete flagged. We
   remap the old dark --color-* variables to the light palette for
   these page scopes, then override the handful of HARDCODED dark
   backgrounds (page circuit art + card gradients) that don't come
   from variables. The old "gold" accent slots become the site's blue
   accent so the pages match the rest of the Light theme. Placed at
   the very end of the file so they win the cascade over the base
   dark rules. (Resume & Evidence get the same treatment in resume.css.)
   ========================================================= */
body.slate-light .my-story-page,
body.slate-light .work-page {
    /* remap the dark-theme palette to light */
    --color-text-primary: #0c1f3d;
    --color-text-secondary: #4a6076;
    --color-text-muted: #6b7d92;
    --color-text-dark: #ffffff;          /* text that sits ON the accent */
    --color-gold: #0b63e5;               /* accent → site blue */
    --color-gold-bright: #2f79f0;
    --color-gold-muted: #0a53c2;
    --color-gold-dark: #0a3f8c;
    --color-blue: #0b63e5;
    --color-cyan: #0e7ea3;
    --color-card: #ffffff;
    --color-card-elevated: #eef4fb;
    --color-card-hover: #e7eefb;
    --color-border: #d9e2ec;
    --color-border-soft: #e4ebf3;
    --color-border-gold: #a9c8f7;
    --shadow-card: 0 12px 30px rgb(6 26 58 / 8%);
    --shadow-gold: 0 0 0 rgb(0 0 0 / 0%);

    /* kill the dark circuit-photo page background */
    background: transparent;
    color: var(--color-text-primary);
}

body.slate-light .my-story-page::before,
body.slate-light .work-page::before {
    background: none;
}

/* ---- Projects (work) page: white cards ---- */
body.slate-light .work-hero-panel,
body.slate-light .work-project-tab,
body.slate-light .work-project-panel {
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}
body.slate-light .work-project-tab:hover,
body.slate-light .work-project-tab:focus-visible,
body.slate-light .work-project-tab.is-active {
    background: #eef4fb;
    border-color: var(--color-gold);
}
body.slate-light .work-ask-btn {
    background: #f4f8fd;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* ---- My Slate (story) page: white cards ---- */
body.slate-light .story-journey__layout,
body.slate-light .drive-card,
body.slate-light .story-card,
body.slate-light .fun-fact-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}
body.slate-light .timeline-item__icon {
    background: #eef4fb;
    border: 1px solid var(--color-border);
}
body.slate-light .timeline-item__icon--light {
    color: #0c1f3d;
}
/* timeline connector line + node → blue */
body.slate-light .timeline-item + .timeline-item::before {
    background: rgb(11 99 229 / 35%);
}
body.slate-light .timeline-item + .timeline-item::after {
    background: var(--color-gold);
}
/* icon-circle borders were gold/cyan tinted → blue on light */
body.slate-light .value-chip__icon--gold {
    border-color: rgb(11 99 229 / 45%);
}
body.slate-light .interest-item__icon {
    border-color: rgb(11 99 229 / 30%);
}

/* ---- Blend the hero collage into the light background ----
   The collage (hero-collage.png) has a dark navy background baked in.
   Rather than framing it with a hard border on white (which read as a
   pasted rectangle), feather its edges so they dissolve into the page —
   Pete asked for the collage to blend into the background around the
   edges. A slightly tighter feather than the dark themes keeps the
   navy from washing too far into the white. */
body.slate-light .portrait-frame {
    mask-image: radial-gradient(ellipse 72% 64% at 50% 46%, #000 30%, transparent 86%);
    -webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 46%, #000 30%, transparent 86%);
    border: 0;
    box-shadow: none;
}
body.slate-light .portrait-frame img {
    filter: none;
}
/* The collage is feathered again on light (not framed), so keep the base
   -72px that pulls the now-transparent bottom strip back out of the layout. */
body.slate-light .story-hero__portrait {
    margin-bottom: -72px;
}

/* =========================================================
   LIGHT THEME — RAISED CARDS + THIN LIGHT-BLUE BORDER (site-wide)
   Pete: every card should read as slightly raised, with a thin light-blue
   hairline in the Light theme. Applied broadly across the card families so
   the whole site is consistent. Placed AFTER the per-page slate-light card
   rules above so this border/shadow wins; the homepage never takes
   slate-light, so its composition is untouched. Cards that ride .ps-card
   are covered once by that selector; the rest are listed explicitly.
   ========================================================= */
body.slate-light .ps-card,
body.slate-light .profile-about,
body.slate-light .ps-metric,
body.slate-light .ps-role,
body.slate-light .ps-project,
body.slate-light .ps-feature,
body.slate-light .story-card,
body.slate-light .drive-card,
body.slate-light .fun-fact-card,
body.slate-light .story-journey__layout,
body.slate-light .sf-item,
body.slate-light .sf-compose,
body.slate-light .ts-pathcard,
body.slate-light .resume-role-card,
body.slate-light .resume-role-panel,
body.slate-light .resume-metric-card,
body.slate-light .resume-education-card,
body.slate-light .resume-project-card,
body.slate-light .resume-impact-card,
body.slate-light .resume-impact-panel,
body.slate-light .resume-recruiter-panel,
body.slate-light .resume-ai-panel,
body.slate-light .work-project-panel,
body.slate-light .work-proof-card,
body.slate-light .iv-card,
body.slate-light .iv-benefit,
body.slate-light .iv-confidence,
body.slate-light .bd-stat,
body.slate-light .bd-entry,
body.slate-light .goal-card,
body.slate-light .ct-card {
    border: 1px solid #cbdcf8;
    box-shadow:
        0 6px 18px rgb(11 99 229 / 8%),
        0 1px 2px rgb(6 26 58 / 6%);
}

/* The life-values cards also appear on the Overview (outside .my-story-page,
   which is where the story page remaps the old --color-* tokens). Under the
   Light theme, give their text the shared light tokens so it isn't near-white
   on a white card. Dark/stone themes have no slate-light class, so they keep
   the theme palette (correct light-on-dark text) untouched. */
body.slate-light .drive-card h3 { color: var(--text); }
body.slate-light .drive-card p { color: var(--text-muted); }
body.slate-light .drive-card__icon { color: var(--accent); }

/* =========================================================
   CONTACT PAGE (rebuilt 2026-07-07 — was a "coming soon" stub)
   Four live channel cards + the Ask Pete AI panel, all on the
   shared design tokens so Light and Dark Slate both work.
   ========================================================= */
.ct-page {
    padding: 40px 0 64px;
}

.ct-head h1 {
    margin: 8px 0 10px;
    color: var(--text);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
}

.ct-lead {
    max-width: 560px;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.55;
}

/* Four channels: 4-across, 2x2 on tablets, stacked on phones —
   the groups-of-4 rule, never 3+1. */
.ct-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.ct-card {
    display: block;
    padding: 22px;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

a.ct-card:hover,
a.ct-card:focus-visible {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.ct-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
}

.ct-card__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ct-card__icon--linkedin {
    background: #eaf2fb;
}

.ct-card h2 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 750;
}

.ct-card > p {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;   /* long email/URL never overflows the card */
}

.ct-card__meta {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* AI panel: copy on the left, the live search on the right. */
.ct-ai {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 26px;
    align-items: center;
    margin-top: 26px;
    padding: 26px 28px;
}

.ct-ai__copy h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 800;
}

.ct-ai__copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.ct-ai .hero-ai-search {
    max-width: none;
    margin: 0;
}

.ct-note {
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

@media (max-width: 1040px) {
    .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-ai { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .ct-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   HEADER SEARCH (added 2026-07-07)
   Compact pill in the header's actions cluster. Results drop
   down in a ps-card-style panel; the last row is always the
   "Ask Pete's AI" fallthrough. Built on the shared tokens so
   it works on the landing, Light, and Dark Slate without
   per-theme rules. Desktop-first: hidden below 1180px until
   the compact phone header gets its own pass.
   ========================================================= */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-search__icon {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.nav-search__input {
    width: 150px;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 22%, var(--surface));
    color: var(--text);
    font-family: inherit;
    font-size: 0.86rem;
    transition: width 180ms ease, border-color 160ms ease, background 160ms ease;
}

.nav-search__input::placeholder { color: var(--text-muted); }
.nav-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.nav-search__input:focus {
    width: 230px;
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}

/* Tight middle range: the header holds brand + 6 links + actions, so the
   search slims down before the nav's own 1180px wrap point. */
@media (max-width: 1360px) {
    .nav-search__input { width: 118px; }
    .nav-search__input:focus { width: 200px; }
}

.nav-search__results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 300px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.nav-search__item {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    text-decoration: none;
}

.nav-search__item strong {
    display: block;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 650;
}

.nav-search__item small {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.nav-search__item:hover,
.nav-search__item.is-active {
    background: var(--accent-soft);
}

.nav-search__item--ask {
    margin-top: 4px;
    border-top: 1px solid var(--border);
    border-radius: 0 0 9px 9px;
}

.nav-search__item--ask strong {
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

@media (max-width: 1180px) {
    .nav-search { display: none; }
}

/* =========================================================
   MOBILE NAV (2026-07-08, Pete): the header stays sticky (already is)
   with an always-available "Ask AI" button, plus a bottom tab bar that
   mirrors the page's section tabs and reveals on scroll-up. mobile-nav.js
   clones the tabs + wires the reveal. Desktop hides both.
   ========================================================= */

/* Always-on Ask Pete AI button — phones only (desktop keeps the search
   box, which already has an Ask-AI fallthrough). */
.nav-ask-ai { display: none; }

/* Bottom section tab bar — phones only. */
.mobile-tabbar { display: none; }

@media (max-width: 743px) {
    .nav-ask-ai {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid var(--accent);
        border-radius: 8px;
        background: var(--accent-soft);
        color: var(--accent);
        font-family: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    .nav-ask-ai svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1150;
        display: flex;
        gap: 2px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        /* Frosted glass, matching the header — content shows through, but
           opaque/blurred enough that the tab labels stay legible while the
           page scrolls behind it. */
        background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 22px rgb(0 0 0 / 14%);
        backdrop-filter: blur(26px) saturate(1.5);
        -webkit-backdrop-filter: blur(26px) saturate(1.5);
        overflow-x: auto;
        scrollbar-width: none;
        transition: transform 220ms ease;
    }

    .mobile-tabbar::-webkit-scrollbar { display: none; }

    .mobile-tabbar.is-hidden { transform: translateY(115%); }

    .mobile-tabbar__item {
        flex: 1 0 auto;
        text-align: center;
        padding: 7px 12px;
        border-radius: 9px;
        color: var(--text-muted);
        font-size: 0.76rem;
        font-weight: 650;
        white-space: nowrap;
        text-decoration: none;
    }

    .mobile-tabbar__item[aria-current="page"] {
        color: var(--accent);
        background: var(--accent-soft);
        font-weight: 750;
    }

    /* The bottom tab bar mirrors .profile-tabs (see mobile-nav.js), so on
       pages that get one, the old sticky top copy is redundant — both were
       showing the same six links on screen at once. Bottom bar takes over
       section nav; the top strip stays for pages without one. */
    body.has-mobile-tabbar .profile-tabs {
        display: none;
    }

    /* Room so the fixed bar never covers the last of the page content. */
    body { padding-bottom: 58px; }

    /* Lift the floating chat launcher above the bottom bar. */
    #chat-toggle { bottom: 70px; }
}

/* =========================================================
   INTERVIEW ME — DIRECTION TOGGLE + "INTERVIEW THE AI"
   (added 2026-07-07) Segmented two-way switch above the studio,
   plus the model-answer card. Shared tokens: adapts to Light and
   Dark Slate automatically.
   ========================================================= */
.iv-direction {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 720px;
    margin: 18px 0 4px;
}

.iv-dir {
    padding: 12px 16px;
    text-align: left;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.iv-dir:hover { transform: translateY(-2px); }

.iv-dir strong {
    display: block;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 750;
}

.iv-dir span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.iv-dir.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.iv-dir.is-active strong { color: var(--accent); }

/* Model-answer card */
.iv-askai__row {
    display: flex;
    gap: 10px;
    margin: 4px 0 14px;
}

.iv-askai__row input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
}

.iv-askai__row input:focus {
    outline: none;
    border-color: var(--accent);
}

.iv-askai__answer p {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.6;
}

.iv-askai__answer .iv-feedback__empty {
    color: var(--text-muted);
}

.iv-askai__note {
    margin-top: 4px;
    color: var(--text-muted) !important;
    font-size: 0.76rem !important;
}

@media (max-width: 620px) {
    .iv-direction { grid-template-columns: 1fr; }
    .iv-askai__row { flex-direction: column; }
}

/* Community keeps its own voice: no Ask Pete AI launcher anywhere under
   The Slate (Pete, 2026-07-17) — the community is about the members, not
   about asking Pete's profile assistant. */
body.the-slate-page #chat-toggle {
    display: none;
}

/* Floating Ask Pete AI launcher: the old gold ghost chip was the last
   piece of the retired gold language — restyle it as the site's navy
   pill (same family as the dark ask bar) on the light theme and the
   landing. Dark Slate keeps the original gold treatment. */
body.slate-light #chat-toggle,
body.peerslate-home-page #chat-toggle {
    color: #ffffff;
    background: linear-gradient(135deg, #0b1f3f, #16305e);
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgb(6 26 58 / 28%);
}

body.slate-light #chat-toggle:hover,
body.slate-light #chat-toggle:focus-visible,
body.peerslate-home-page #chat-toggle:hover,
body.peerslate-home-page #chat-toggle:focus-visible {
    background: linear-gradient(135deg, #10294f, #1d3c72);
    color: #ffffff;
}

/* =========================================================
   SLATE FEED — SHARED IMAGE PLACEHOLDERS (2026-07-07)
   Designed gradient slots that stand in for real media on the
   Pulse and Break feeds until curated news, event photos, and
   inspiration images are wired in. They read as intentional art,
   not broken images — a centered themed glyph over a soft gradient.
   ========================================================= */
.feed-img {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, #e6eefb, #cddcf7);
    color: #2f6fe0;
}
.feed-img > svg {
    width: 34%;
    max-width: 46px;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}
.feed-img--ai   { background: linear-gradient(135deg, #dfeafe, #c3d8fb); color: #2f6fe0; }
.feed-img--city { background: linear-gradient(135deg, #dbe6f4, #b7c9e2); color: #3f5f86; }
.feed-img--calm { background: linear-gradient(135deg, #e7f2ea, #cfe6d8); color: #2f9e64; }
.feed-img--nature { background: linear-gradient(150deg, #dcefe0, #bfe0c8 55%, #e9dfc6); color: #2f8f5b; }
.feed-img--warm { background: linear-gradient(140deg, #f6ead9, #ecd6bd); color: #b9793a; }
.feed-img--duo-before { background: linear-gradient(135deg, #cfd6de, #aeb7c2); color: #5a6572; }
.feed-img--duo-after  { background: linear-gradient(135deg, #e7f0e8, #cfe4d4); color: #3f9d6b; }
.feed-img--mind { background: linear-gradient(135deg, #ede6fa, #d8c8f4); color: #7b52d8; }
/* Tiny "AI" style badge some slots carry (mockup's floating chip). */
.feed-img b {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2f6fe0;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    font-style: normal;
}

/* =========================================================
   SLATE FEED — PULSE VIEW (rebuilt 2026-07-07 to the mockup)
   Three columns on the shared feed shell + design tokens, so it
   matches the Progress/People views and both themes.
   ========================================================= */
.pf-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}
.pf-rail { display: grid; gap: 20px; min-width: 0; }

/* ---- left: filter your feed ---- */
.pf-filter, .pf-following, .pf-side { padding: 18px; }
.pf-filter__head, .pf-following__head, .pf-side__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pf-filter__head h2, .pf-following__head h2, .pf-side__head h2 {
    margin: 0; color: var(--text); font-size: 0.98rem; font-weight: 800;
}
.pf-filter__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; }
.pf-filter__sub { margin: 3px 0 14px; color: var(--text-muted); font-size: 0.78rem; }

.pf-topics { list-style: none; display: grid; gap: 8px; }
.pf-topic {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text);
    font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.pf-topic:hover { border-color: var(--accent); background: var(--accent-soft); }
.pf-topic__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); flex: none; }
.pf-topic__ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pf-following__head { margin-bottom: 12px; }
.pf-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pf-tags li { color: var(--accent); font-size: 0.8rem; font-weight: 650; }
.pf-reset {
    display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text-muted);
    font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.pf-reset:hover { border-color: var(--accent); color: var(--accent); }
.pf-reset svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- center feed ---- */
.pf-center { display: grid; gap: 18px; min-width: 0; }
.pf-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center;
    padding: 24px 150px 24px 26px;
    border-radius: 16px;
    background: linear-gradient(120deg, #eaf1fd 0%, #dbe8fb 60%, #eef4ec 100%);
    border: 1px solid var(--border);
}
.pf-hero p {
    margin: 0; max-width: 420px;
    color: #14213a; font-family: var(--font-serif);
    font-size: 1.25rem; font-weight: 600; line-height: 1.35;
}
.pf-hero__art { position: absolute; right: 14px; bottom: 0; width: 150px; }
.pf-hero__art svg { width: 100%; height: auto; display: block; }

.pf-card { padding: 18px 20px; }

.pf-kicker {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.76rem; font-weight: 800; letter-spacing: 0.01em;
}
.pf-kicker i { font-style: normal; color: var(--text-muted); font-weight: 600; }
.pf-kicker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-kicker--blue { color: #2f6fe0; }
.pf-kicker--green { color: #2f9e64; }
.pf-kicker--violet { color: #7b52d8; }
.pf-card h3 { margin: 9px 0 6px; color: var(--text); font-size: 1.08rem; font-weight: 750; line-height: 1.25; }
.pf-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }

/* news card */
.pf-card--news { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 18px; align-items: stretch; }
.pf-facesmall { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.pf-news__media { display: flex; flex-direction: column; gap: 10px; }
.pf-news__media .feed-img { flex: 1; min-height: 96px; }
.pf-card__acts { display: flex; gap: 8px; }
.pf-act {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 8px; border: 0; background: none; color: var(--text-muted);
    font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: default;
}
.pf-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pf-facepile { display: inline-flex; }
.pf-facepile i {
    display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent);
    border: 2px solid var(--surface); font-size: 0.6rem; font-weight: 800; font-style: normal;
}
.pf-facepile i:first-child { margin-left: 0; }

/* event card */
.pf-card--event { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 18px; align-items: stretch; }
.pf-event__media { position: relative; min-height: 150px; }
.pf-going {
    position: absolute; left: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 6px; border-radius: 999px;
    background: rgb(255 255 255 / 92%); color: #14213a;
    font-size: 0.72rem; font-weight: 700;
}
.pf-going .pf-facepile i { width: 18px; height: 18px; font-size: 0.55rem; }
.pf-event__meta { color: var(--text); font-weight: 650; font-size: 0.84rem; margin: 8px 0; line-height: 1.4; }
.pf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 14px; padding: 9px 18px; border-radius: 9px;
    font-family: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer;
}
.pf-btn--outline { background: var(--surface); border: 1px solid var(--accent); color: var(--accent); }
.pf-btn--full { width: 100%; margin-top: 4px; }

/* post card */
.pf-post__head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.pf-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 0.82rem; flex: none; }
.pf-post__who { display: grid; flex: 1; }
.pf-post__who strong { color: var(--text); font-size: 0.92rem; font-weight: 700; }
.pf-post__who small { color: var(--text-muted); font-size: 0.76rem; }
.pf-more { border: 0; background: none; color: var(--text-muted); cursor: default; padding: 4px; }
.pf-more svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.pf-post__text { color: var(--text) !important; font-size: 0.92rem !important; line-height: 1.55 !important; }
.pf-post__tags { margin-top: 8px !important; color: var(--accent) !important; font-size: 0.84rem !important; font-weight: 650; }
.pf-post__foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pf-react { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text-muted); font-family: inherit; font-size: 0.8rem; font-weight: 650; cursor: default; }
.pf-react svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf-post__spacer { flex: 1; }

/* poll card */
.pf-card--poll { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 16px; overflow: hidden; }
.pf-poll { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.pf-poll li {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 8px; overflow: hidden;
    background: color-mix(in srgb, var(--border) 30%, transparent);
    font-size: 0.85rem; color: var(--text);
}
.pf-poll__fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); z-index: 0; }
.pf-poll__label { position: relative; z-index: 1; font-weight: 600; }
.pf-poll__pct { position: relative; z-index: 1; font-weight: 800; color: var(--accent); }
.pf-poll__votes { display: block; margin-top: 10px; color: var(--text-muted); font-size: 0.78rem; }
.pf-poll__art { position: absolute; right: 0; bottom: 0; width: 150px; height: 120px; border-radius: 16px 0 0 0; }

/* ---- right rail ---- */
.pf-side__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: none; }
.pf-side__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-side__ic--amber { background: #fdeadd; color: #c2611b; }
.pf-side__head { margin-bottom: 14px; }
.pf-link { border: 0; background: none; color: var(--accent); font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-decoration: none; }
.pf-link[aria-disabled="true"] { color: var(--text-muted); cursor: default; }

.pf-saved { list-style: none; display: grid; gap: 14px; }
.pf-saved li { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.pf-thumb { width: 44px; height: 44px; border-radius: 9px; }
.pf-thumb svg { width: 20px; }
.pf-saved__txt { min-width: 0; }
.pf-saved__txt strong { display: block; color: var(--text); font-size: 0.84rem; font-weight: 700; line-height: 1.25; }
.pf-saved__txt small { color: var(--text-muted); font-size: 0.74rem; }
.pf-bookmark { width: 16px; height: 16px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; }

.pf-challenge__body { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pf-ring { position: relative; display: grid; place-items: center; width: 72px; height: 72px; flex: none; }
.pf-ring svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.pf-ring__track { fill: none; stroke: color-mix(in srgb, var(--border) 60%, transparent); stroke-width: 6; }
.pf-ring__val { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.pf-ring strong { position: absolute; color: var(--text); font-size: 0.98rem; font-weight: 800; }
.pf-challenge__copy strong { display: block; color: var(--text); font-size: 0.92rem; font-weight: 750; }
.pf-challenge__copy small { color: var(--accent); font-size: 0.76rem; font-weight: 700; }
.pf-challenge__copy p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }

.pf-rooms { list-style: none; display: grid; gap: 14px; }
.pf-rooms li { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.pf-room__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.pf-room__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-room__txt strong { display: block; color: var(--text); font-size: 0.85rem; font-weight: 700; }
.pf-room__txt small { color: var(--text-muted); font-size: 0.74rem; }
.pf-join { padding: 6px 16px; border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--accent); font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: default; }

.pf-inspire { position: relative; overflow: hidden; }
.pf-inspire h2 { margin-bottom: 8px; }
.pf-inspire__mark { position: absolute; top: 30px; left: 16px; font-family: Georgia, serif; font-size: 3rem; line-height: 0; color: var(--accent); opacity: 0.25; }
.pf-inspire__quote { position: relative; margin: 8px 0 6px; padding-left: 14px; color: var(--text); font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.4; font-weight: 600; }
.pf-inspire__by { color: var(--text-muted); font-size: 0.8rem; }
.pf-inspire__art { display: block; margin: 12px -18px -18px; height: 40px; }
.pf-inspire__art svg { width: 100%; height: 40px; display: block; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
    .pf-layout { grid-template-columns: minmax(0,1fr) 300px; }
    .pf-rail--left { grid-column: 1 / -1; grid-row: 1; }
    .pf-rail--left { grid-template-columns: 1fr 1fr; display: grid; gap: 20px; }
}
@media (max-width: 820px) {
    .pf-layout { grid-template-columns: 1fr; }
    .pf-rail--left { grid-template-columns: 1fr; }
    .pf-card--news, .pf-card--event, .pf-card--poll { grid-template-columns: 1fr; }
    .pf-card--event .pf-event__media { min-height: 160px; order: -1; }
    .pf-poll__art { display: none; }
}

/* =========================================================
   SLATE FEED — BREAK VIEW (rebuilt 2026-07-07 to the mockup)
   Sage-green accent SCOPED to the page (.bk-green) so the page
   reads calm/green while the global header chrome stays blue.
   color-mix keeps the tints correct on Light AND Dark Slate.
   ========================================================= */
.bk-green {
    --accent: #2f9e64;
    --accent-soft: color-mix(in srgb, #2f9e64 14%, var(--surface));
}
.bk-green .sf-tab[aria-current="page"],
.bk-green .sf-tab[aria-current="page"]::after { color: #2f9e64; }
.bk-green .sf-tab[aria-current="page"]::after { background: #2f9e64; }

.bk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}
.bk-center { display: grid; gap: 20px; min-width: 0; }
.bk-rail { display: grid; gap: 20px; min-width: 0; }

/* ---- hero ---- */
.bk-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 26px;
    border-radius: 16px;
    background: linear-gradient(120deg, #eef5ee 0%, #e4f0e6 100%);
    border: 1px solid var(--border);
}
.bk-hero__copy h2 { margin: 0; color: #172e22; font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; }
.bk-hero__copy h2 span { color: #d9a52a; }
.bk-hero__copy p { margin: 6px 0 0; color: #4a6152; font-size: 0.94rem; }
.bk-hero__art { width: 200px; flex: none; }
.bk-hero__art svg { width: 100%; height: auto; display: block; }

/* ---- bento grid ---- */
.bk-bento {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.bk-transform { grid-column: 1; grid-row: 1 / span 2; }
.bk-challenge { grid-column: 2 / span 2; grid-row: 1; }
.bk-poll      { grid-column: 2; grid-row: 2; }
.bk-local     { grid-column: 3; grid-row: 2; }
.bk-save      { grid-column: 1 / -1; grid-row: 3; }

.bk-card { padding: 18px; }
.bk-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bk-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 0.76rem; font-weight: 800; }
.bk-kicker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bk-card h3 { margin: 0 0 8px; color: var(--text); font-size: 1.12rem; font-weight: 750; line-height: 1.22; }
.bk-card p { margin: 0; color: var(--text-muted); font-size: 0.87rem; line-height: 1.5; }
.bk-more, .bk-heart { border: 0; background: none; color: var(--text-muted); cursor: default; padding: 3px; }
.bk-more svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.bk-heart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* transformation */
.bk-transform__lead { color: var(--text) !important; font-weight: 650; font-size: 0.92rem !important; line-height: 1.35 !important; }
.bk-beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.bk-beforeafter .feed-img { position: relative; aspect-ratio: 3 / 4; }
.bk-tag { position: absolute; bottom: 8px; font-size: 0.68rem; font-weight: 700; font-style: normal; padding: 3px 8px; border-radius: 6px; color: #fff; }
.bk-tag--before { left: 8px; background: rgb(40 48 58 / 78%); }
.bk-tag--after  { right: 8px; background: rgb(47 158 100 / 90%); }
.bk-tag--new    { top: 10px; right: 10px; bottom: auto; background: rgb(47 158 100 / 92%); }
.bk-transform__quote { margin: 12px 0; color: var(--text); font-size: 0.92rem; font-style: italic; line-height: 1.45; }
.bk-transform__foot { display: flex; align-items: center; gap: 8px; }
.bk-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 800; }
.bk-transform__foot strong { color: var(--text); font-size: 0.82rem; }
.bk-link { color: var(--accent); font-size: 0.82rem; font-weight: 700; text-decoration: none; margin-left: auto; }
.bk-link[aria-disabled="true"] { cursor: default; }

/* weekend challenge */
.bk-challenge { display: grid; grid-template-columns: minmax(0,1fr) 168px; gap: 16px; }
.bk-challenge__media { position: relative; min-height: 100%; border-radius: 12px; }
.bk-joined { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.bk-facepile { display: inline-flex; }
.bk-facepile i { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -7px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 2px solid var(--surface); font-size: 0.6rem; font-weight: 800; font-style: normal; }
.bk-facepile i:first-child { margin-left: 0; }
.bk-joined small { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.bk-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; border: 0; font-family: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.bk-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bk-btn--soft { width: 100%; justify-content: center; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.bk-btn--soft.is-joined { background: var(--accent); color: #fff; }
.bk-btn--outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; }

/* community poll */
.bk-pollist { list-style: none; display: grid; gap: 7px; margin-bottom: 12px; }
.bk-pollist li { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--border) 30%, transparent); font-size: 0.82rem; }
.bk-poll__fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); z-index: 0; }
.bk-poll__ic { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface); color: var(--accent); flex: none; }
.bk-poll__ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bk-poll__label { position: relative; z-index: 1; flex: 1; color: var(--text); font-weight: 600; }
.bk-poll__pct { position: relative; z-index: 1; color: var(--text); font-weight: 800; }
.bk-poll__foot { color: var(--text-muted) !important; font-size: 0.76rem !important; }

/* local discovery */
.bk-local__place { color: var(--text) !important; font-weight: 700; font-size: 0.9rem !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
.bk-local__place small { display: block; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; }
.bk-local__media { display: block; height: 92px; border-radius: 12px; margin-bottom: 12px; }
.bk-local__link { display: inline-block; }

/* save to board bar */
.bk-save { display: flex; align-items: center; gap: 16px; padding: 16px 18px; flex-wrap: wrap; }
.bk-save__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex: none; }
.bk-save__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bk-save__copy { min-width: 180px; }
.bk-save__copy strong { display: block; color: var(--text); font-size: 0.92rem; font-weight: 750; }
.bk-save__copy small { color: var(--text-muted); font-size: 0.8rem; }
.bk-save__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.bk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.8rem; font-weight: 650; cursor: pointer; }
.bk-chip:hover { border-color: var(--accent); color: var(--accent); }
.bk-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bk-chip--new { border-style: dashed; color: var(--accent); }

/* ---- right rail: mood switch ---- */
.bk-mood__head { display: flex; align-items: center; gap: 9px; }
.bk-mood__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.bk-mood__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bk-mood__head h2 { margin: 0; color: var(--text); font-size: 1rem; font-weight: 800; }
.bk-mood__sub { margin: 8px 0 14px; color: var(--text-muted); font-size: 0.82rem; }
.bk-moods { display: grid; gap: 9px; }
.bk-moodopt {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); font-family: inherit; cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.bk-moodopt:hover { border-color: var(--accent); }
.bk-moodopt__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--border) 34%, transparent); color: var(--text-muted); flex: none; }
.bk-moodopt__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bk-moodopt__txt { flex: 1; min-width: 0; }
.bk-moodopt__txt strong { display: block; color: var(--text); font-size: 0.88rem; font-weight: 700; }
.bk-moodopt__txt small { color: var(--text-muted); font-size: 0.76rem; }
.bk-chevron { width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); flex: none; }
.bk-moodopt.is-active { border-color: var(--accent); background: var(--accent-soft); }
.bk-moodopt.is-active .bk-moodopt__ic { background: var(--accent); color: #fff; }
.bk-moodopt.is-active .bk-moodopt__txt strong { color: var(--accent); }
.bk-moodopt.is-active .bk-chevron { border-color: var(--accent); }

/* quote card */
.bk-quote { position: relative; overflow: hidden; padding-right: 70px; }
.bk-quote__mark { position: absolute; top: 14px; left: 16px; font-family: Georgia, serif; font-size: 3.4rem; line-height: 0; color: var(--accent); opacity: 0.28; }
.bk-quote blockquote { margin: 24px 0 6px; color: var(--text); font-family: var(--font-serif); font-size: 1.08rem; font-style: italic; line-height: 1.45; font-weight: 600; }
.bk-quote__by { color: var(--text-muted); font-size: 0.8rem; }
.bk-quote__leaf { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 44px; }
.bk-quote__leaf svg { width: 100%; height: auto; }
.bk-dots { display: flex; gap: 5px; margin-top: 12px; }
.bk-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.bk-dots i.is-on { background: var(--accent); }

/* pick-me-up */
.bk-pickme__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.bk-pickme__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fdf0d6; color: #d9a52a; }
.bk-pickme__ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bk-pickme__head h2 { margin: 0; flex: 1; color: var(--text); font-size: 0.98rem; font-weight: 800; }
.bk-pickme blockquote { margin: 0; color: var(--text); font-size: 0.92rem; line-height: 1.5; }
.bk-pickme__by { margin-top: 8px; color: var(--text-muted); font-size: 0.8rem; }

/* share something good */
.bk-share { position: relative; overflow: hidden; display: flex; align-items: center; }
.bk-share__copy strong { display: block; color: var(--text); font-size: 0.95rem; font-weight: 750; }
.bk-share__copy small { display: block; margin: 3px 0 12px; color: var(--text-muted); font-size: 0.82rem; }
.bk-share__copy .bk-btn { width: auto; }
.bk-share__spark { position: absolute; right: 14px; top: 14px; width: 34px; color: var(--accent); opacity: 0.6; }
.bk-share__spark svg { width: 100%; fill: currentColor; stroke: none; }

/* ---- bottom band ---- */
.bk-band {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 16px;
    margin-top: 22px; padding: 20px 150px 20px 22px;
    border-radius: 16px;
    background: linear-gradient(120deg, #eef5ee, #e4f0e6);
    border: 1px solid var(--border);
}
.bk-band__leaf { width: 40px; flex: none; }
.bk-band__leaf svg { width: 100%; }
.bk-band__copy { flex: 1; }
.bk-band__copy strong { display: block; color: #172e22; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; }
.bk-band__copy small { color: #4a6152; font-size: 0.85rem; }
.bk-band .bk-btn--outline { background: var(--surface); }
.bk-band__art { position: absolute; right: 12px; bottom: 6px; width: 130px; }
.bk-band__art svg { width: 100%; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
    .bk-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .bk-bento { grid-template-columns: 1fr 1fr; }
    .bk-transform { grid-column: 1; grid-row: auto; }
    .bk-challenge { grid-column: 1 / -1; grid-row: auto; }
    .bk-poll { grid-column: 1; grid-row: auto; }
    .bk-local { grid-column: 2; grid-row: auto; }
    .bk-save { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .bk-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
    .bk-hero__art { width: 150px; }
    .bk-bento { grid-template-columns: 1fr; }
    .bk-transform, .bk-challenge, .bk-poll, .bk-local, .bk-save { grid-column: 1; }
    .bk-challenge { grid-template-columns: 1fr; }
    .bk-band { padding-right: 22px; }
    .bk-band__art { display: none; }
}

/* =========================================================
   INTERVIEW ME — REVAMP (2026-07-07)
   Top bar = experience level; STAR/Behavioral type toggle moved
   to the question card's bottom-right; question banks removed;
   Interview Tips card added to the rail; mock interview is a slim
   standalone bar. Built on the shared tokens (Light + Dark Slate).
   ========================================================= */

/* Question card bottom: links on the left, type toggle on the right. */
.iv-question__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
/* the links row inside the foot loses its own top border/margin now */
.iv-question__foot .iv-question__links {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* STAR / Behavioral segmented toggle (question TYPE). */
.iv-typeswitch {
    display: inline-flex;
    padding: 3px;
    background: color-mix(in srgb, var(--border) 34%, transparent);
    border-radius: 999px;
}
.iv-type {
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease;
}
.iv-type:hover { color: var(--text); }
.iv-type.is-active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 3px rgb(6 26 58 / 12%);
}

/* Slim standalone mock-interview bar (replaced the suggested card). */
.iv-mockbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    border-radius: 12px;
}
.iv-mockbar p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}
.iv-mockbar .btn { flex: none; }

/* Interview Tips card (rail, below the STAR helper). */
.iv-tips__list {
    display: grid;
    gap: 14px;
    margin-top: 4px;
}
.iv-tips__list li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
}
.iv-tips__ic {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
}
.iv-tips__ic svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.iv-tips__list strong {
    display: block;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
}
.iv-tips__list span {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* AI-mode: the feedback card reads as a "why it works" explainer. */
.iv-askai-card + .iv-feedback-card { margin-top: 0; }
.iv-why__point {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
}
.iv-why__point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background:
        var(--accent-soft)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f9e64' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / 10px no-repeat;
}

/* Light-theme primary buttons were still the old dark-era gold gradient
   (base .btn-primary reads --color-gold, which slate-light never remapped),
   which left Interview Me's Record/Get Feedback/Mock buttons gold — the only
   gold on the light site. Make .btn-primary the site blue on light themes. */
body.slate-light .btn-primary {
    color: #ffffff;
    background: var(--accent);
    box-shadow: none;
}
body.slate-light .btn-primary:hover,
body.slate-light .btn-primary:focus-visible {
    background: color-mix(in srgb, var(--accent) 88%, #000);
}

/* =========================================================
   THE SLATE (/the-slate) — built 2026-07-08 from Pete's four
   "The Slate" mockups: one product hub with four internal tabs
   (Slate Feed / My Slate / Daily Slate / Slate Paths).
   Class family: ts-*. Everything reads the shared theme tokens
   (--surface/--border/--text/--accent) so all four site themes
   work with no per-theme rules; cards ride .ps-card so the
   surface-slate stone treatment (end of this file) applies
   automatically. Category chips/tags keep fixed pastel tints,
   same convention as the ps-tint / sf-chip families. (Careful in
   comments here: a "--*" glob followed by "/" reads as a comment
   terminator — it once swallowed the rule below this block.)
   NOTE: this section must stay ABOVE the SURFACE SLATE block —
   that block wins the cascade on purpose.
   ========================================================= */

/* ---- page head: title + subtitle + streak pill ---- */
.ts-head__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.ts-head__copy h1 {
    margin: 0;
    color: var(--text);
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ts-head__copy p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.98rem;
}

.ts-streak {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
}

.ts-streak__flame {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fdeadd;
}

.ts-streak__flame svg {
    width: 18px;
    height: 18px;
    fill: #ea731d;
}

.ts-streak__copy { display: grid; line-height: 1.15; }

.ts-streak__copy strong {
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 800;
}

.ts-streak__copy small {
    color: var(--text-muted);
    font-size: 0.73rem;
    white-space: nowrap;
}

/* ---- the hub's four main tabs (underline style, like the site) ---- */
.ts-tabs {
    display: flex;
    gap: 32px;
    margin-top: 20px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;                 /* phones: the strip scrolls */
    scrollbar-width: none;
}

.ts-tabs::-webkit-scrollbar { display: none; }

.ts-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 2px 14px;
    color: var(--text-muted);
    font-size: 0.97rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.ts-tab svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-tab:hover { color: var(--text); }

.ts-tab[aria-current="page"] { color: var(--accent); }

.ts-tab[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
}

/* ---- per-tab intro row (small h2 + tagline + optional extras) ---- */
.ts-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.ts-intro__copy h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.ts-intro__copy p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* My Slate's at-a-glance stat pills. */
.ts-stats { display: flex; gap: 10px; flex-wrap: wrap; }

.ts-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.83rem;
    font-weight: 600;
}

.ts-stat svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-stat strong {
    color: var(--text);
    font-size: 0.98rem;
    font-weight: 800;
}

/* ---- feed-layer bar (Progress / Pulse / Break / People) ----
   The boxed sub-tab row from the mockups; reuses .sf-tab inside. */
.ts-layerbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
    padding: 0 18px;
}

.ts-layerbar .sf-tabs { gap: 30px; }

.ts-layerbar .sf-tab { padding: 13px 2px 14px; }

.ts-layerbar .sf-tab[aria-current="page"]::after { inset: auto 0 0; }

.ts-layerbar .sf-filter { margin: 8px 0; }

/* ---- the two columns ---- */
.ts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 24px;
    align-items: start;
    margin-top: 20px;
}

.ts-main,
.ts-rail {
    display: grid;
    gap: 20px;
    min-width: 0;
}

/* Grid items default to min-width:auto, which would let a wide child
   (the goal-map canvas, min-width 820px) blow the page open on phones
   instead of scrolling inside its card. */
.ts-main > *,
.ts-rail > * { min-width: 0; }

.ts-rail__sub {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 0.83rem;
}

/* =========================
   SHARED SMALL PIECES
   ========================= */

/* Small action buttons (Connect / Follow / Join / banner CTAs). */
.ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ts-btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-btn--outline {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.ts-btn--outline:hover { background: var(--accent-soft); }

.ts-btn--soft {
    color: var(--accent);
    background: var(--accent-soft);
}

.ts-btn--soft:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.ts-btn[aria-disabled="true"] { cursor: default; }

/* Initial-letter avatars (sample community members). */
.ts-ava {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.ts-ava--green { color: #1d7a4f; background: #ddf0e4; }
.ts-ava--blue { color: #2f5fb3; background: #e3ebfa; }
.ts-ava--violet { color: #6d3fd0; background: #eae4f9; }
.ts-ava--orange { color: #c2611b; background: #fdeadd; }
.ts-ava--sky { color: #1c7391; background: #ddeef5; }
.ts-ava--red { color: #c2314f; background: #fbe1e7; }
.ts-ava--you { color: #ffffff; background: var(--accent); font-size: 0.66rem; }

/* Tiny facepiles. */
.ts-faces { display: inline-flex; }

.ts-faces i {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: #e3ebfa;
    color: #2f5fb3;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 800;
}

.ts-faces i + i { margin-left: -7px; }
.ts-faces i:nth-child(2) { background: #ddf0e4; color: #1d7a4f; }
.ts-faces i:nth-child(3) { background: #eae4f9; color: #6d3fd0; }
.ts-faces i:nth-child(4) { background: #fdeadd; color: #c2611b; }

/* Keyword tags (pastel, fixed tints — same family as .ps-tint). */
.ts-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.ts-tag--green { color: #1d7a4f; background: #ddf0e4; }
.ts-tag--blue { color: #2f5fb3; background: #e3ebfa; }
.ts-tag--violet { color: #6d3fd0; background: #eae4f9; }
.ts-tag--orange { color: #c2611b; background: #fdeadd; }
.ts-tag--sky { color: #1c7391; background: #ddeef5; }
.ts-tag--red { color: #c2314f; background: #fbe1e7; }

/* Public / Private / Draft labels — the privacy concept, everywhere. */
.ts-vis {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.ts-vis--public { color: #1d7a4f; background: #ddf0e4; }

.ts-vis--public::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22a75d;
}

.ts-vis--private {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.ts-vis--draft {
    color: var(--text-muted);
    border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent);
}

/* Progress bars. */
.ts-bar {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 10%, transparent);
    overflow: hidden;
}

.ts-bar b {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

/* =========================
   COMPOSER (Slate Feed + Daily Slate)
   ========================= */

.ts-compose { padding: 20px 22px; }

.ts-compose__title {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 750;
}

.ts-compose--hero .ts-compose__title { font-size: 1.24rem; }

.ts-cats { display: flex; flex-wrap: wrap; gap: 9px; }

.ts-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.ts-cat svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--cat-color, currentColor);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-cat--work { --cat-color: #1d9f5f; --cat-soft: #ddf0e4; --cat-deep: #1d7a4f; }
.ts-cat--career { --cat-color: #8a5cf0; --cat-soft: #eae4f9; --cat-deep: #6d3fd0; }
.ts-cat--project { --cat-color: #3a76e8; --cat-soft: #e3ebfa; --cat-deep: #2f5fb3; }
.ts-cat--health { --cat-color: #e0446b; --cat-soft: #fbe1e7; --cat-deep: #c2314f; }
.ts-cat--education { --cat-color: #e0762f; --cat-soft: #fdeadd; --cat-deep: #c2611b; }
.ts-cat--personal { --cat-color: #2a94ba; --cat-soft: #ddeef5; --cat-deep: #1c7391; }

.ts-cat:hover { border-color: var(--cat-color, var(--accent)); color: var(--text); }

.ts-cat.is-active {
    border-color: var(--cat-color);
    background: var(--cat-soft);
    color: var(--cat-deep);
}

.ts-compose__text {
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 58px;
}

.ts-compose__text::placeholder { color: var(--text-muted); }

.ts-compose__text:focus {
    outline: none;
    border-color: var(--accent);
}

.ts-compose__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ts-privacy { display: inline-flex; gap: 7px; }

.ts-privacy__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
}

.ts-privacy__opt svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-privacy__opt.is-active {
    border-color: #1d9f5f;
    background: #ddf0e4;
    color: #1d7a4f;
}

.ts-privacy__opt[data-privacy="Private"].is-active {
    border-color: color-mix(in srgb, var(--text) 35%, transparent);
    background: color-mix(in srgb, var(--text) 9%, transparent);
    color: var(--text);
}

.ts-compose__count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.ts-compose__count.is-warn { color: #b45309; font-weight: 700; }

.ts-compose .ps-btn {
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.86rem;
}

.ts-compose__post:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
}

.ts-compose__done {
    margin: 10px 0 0;
    color: #1d7a4f;
    font-size: 0.84rem;
    font-weight: 600;
}

.ts-compose__done a { color: var(--accent); }

/* =========================
   SLATE FEED TAB — grouped people
   ========================= */

.ts-group { display: grid; gap: 12px; }

.ts-group__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 6px;
}

.ts-group__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.ts-group__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-group__head h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.04rem;
    font-weight: 750;
}

.ts-group__head .ps-link { margin-left: auto; font-size: 0.83rem; }

.ts-people {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.ts-person {
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 15px;
}

.ts-person__head { display: flex; align-items: center; gap: 10px; }

.ts-person__id { min-width: 0; }

.ts-person__id h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.93rem;
    font-weight: 750;
}

.ts-person__goal {
    margin: 2px 0 0;
    color: var(--accent);
    font-size: 0.79rem;
    font-weight: 650;
    line-height: 1.35;
}

.ts-person__update {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.ts-person__update strong { color: var(--text); font-weight: 650; }

.ts-person__mutual {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.73rem;
}

.ts-person__mutual span { opacity: 0.75; }

.ts-person__acts { display: flex; gap: 8px; margin-top: 2px; }

.ts-person__acts .ts-btn { flex: 1; }

/* =========================
   RIGHT RAIL PANELS (shared)
   ========================= */

.ts-ai,
.ts-heatmap,
.ts-break,
.ts-wins,
.ts-linked,
.ts-rooms,
.ts-trending,
.ts-movers,
.ts-pathpeople,
.ts-updates,
.ts-similar { padding: 19px 19px 17px; }

.ts-ai__tag {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ddf0e4;
    color: #1d7a4f;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.ts-ai__lead {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.5;
}

.ts-ai__panel {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.ts-ai__msg {
    margin: 0;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.55;
}

.ts-ai__acts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ts-ai .ps-btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.8rem;
    box-shadow: none;
}

.ts-ai__done {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 0.83rem;
}

.ts-ai__plan {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

/* display:grid beats the UA hidden rule — restate it (same gotcha as
   the theme dropdown panel). */
.ts-ai__plan[hidden] { display: none; }

.ts-ai__plan li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    font-size: 0.83rem;
    font-weight: 600;
}

.ts-ai__plan li span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 800;
}

/* Heatmap tiles (2-up grid, like the mockup) + Trending paths rows. */
.ts-heat,
.ts-trendlist {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.ts-trendlist li {
    display: flex;
    align-items: center;
    gap: 11px;
}

/* Each heat topic is a small bordered tile: icon + name + count on the
   first row, the popularity bar across the bottom. */
.ts-heat {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.ts-heat li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 11px;
}

/* Lets the strong/bar inside __body participate in the tile grid.
   Placement is explicit: the name owns the whole top row (so long
   topics like "Home Projects" don't truncate in the narrow rail),
   and the bar + flame count share the bottom row. */
.ts-heat .ts-heat__body { display: contents; }

.ts-heat li strong { grid-row: 1; grid-column: 2 / -1; }

.ts-heat .ts-heat__bar { grid-row: 2; grid-column: 1 / 3; align-self: center; }

.ts-heat li .ts-heat__count { grid-row: 2; grid-column: 3; }

.ts-heat__icon {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.ts-heat__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-heat__body { flex: 1; min-width: 0; display: grid; gap: 5px; }

.ts-heat__body strong {
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Tighter type inside the heat tiles so long topics fit two-up. */
.ts-heat li strong {
    font-size: 0.79rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-heat li .ts-heat__count { font-size: 0.7rem; }

.ts-heat__bar {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    overflow: hidden;
}

.ts-heat__bar b {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.ts-heat__count {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.ts-trendlist__rank {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 800;
}

/* Break quote. */
.ts-break__quote {
    margin: 12px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #ddf0e4;
    color: #1d5c3e;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.55;
}

.ts-break__quote cite {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 650;
    opacity: 0.7;
}

/* Pulse — recent wins list. */
.ts-winlist {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.ts-winlist li { display: flex; align-items: center; gap: 11px; }

.ts-winlist .ts-ava { flex-basis: 34px; width: 34px; height: 34px; font-size: 0.68rem; }

.ts-winlist__body {
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.4;
}

.ts-winlist__body strong { color: var(--text); font-weight: 700; }

.ts-winlist__body small {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

/* =========================
   MY SLATE TAB — the goal map
   ========================= */

.ts-board { padding: 17px 17px 13px; }

.ts-board__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ts-filters { display: flex; gap: 7px; flex-wrap: wrap; }

.ts-filter {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.79rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.ts-filter:hover { border-color: var(--accent); color: var(--text); }

.ts-filter.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.ts-board__tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ts-zoom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.ts-zoom__btn {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: default;
}

/* The canvas: % positioned cards + one SVG wire layer that shares the
   same coordinate space (viewBox 0..100 / preserveAspectRatio none). */
.ts-board__scroll { margin-top: 14px; overflow-x: auto; }

.ts-board__canvas {
    position: relative;
    min-width: 820px;
    height: 640px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 14px;
    background-image: radial-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
}

.ts-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 200ms ease;
}

.ts-board__canvas.is-filtered .ts-wires { opacity: 0.25; }

.ts-wire {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
}

.ts-wire--strong { stroke: #22a75d; stroke-width: 2.6px; opacity: 0.9; }
.ts-wire--medium { stroke: #4a83e8; stroke-width: 2px; stroke-dasharray: 7 6; opacity: 0.85; }
.ts-wire--weak { stroke: color-mix(in srgb, var(--text) 32%, transparent); stroke-width: 1.4px; opacity: 0.7; }

.ts-dot--green { fill: #22a75d; }
.ts-dot--blue { fill: #2f6fe0; }
.ts-dot--orange { fill: #e0762f; }

/* Zone labels — the little region flags. */
.ts-zone {
    position: absolute;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.ts-zone--green { color: #1d7a4f; background: #ddf0e4; }
.ts-zone--blue { color: #2f5fb3; background: #e3ebfa; }
.ts-zone--violet { color: #6d3fd0; background: #eae4f9; }
.ts-zone--orange { color: #c2611b; background: #fdeadd; }

/* Goal cards. */
.ts-goal {
    position: absolute;
    width: 28%;
    min-width: 224px;
    padding: 13px 14px;
    transition: opacity 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.ts-goal.is-dim { opacity: 0.28; }

.ts-goal.is-focus {
    box-shadow:
        0 0 0 2px var(--accent),
        0 18px 40px color-mix(in srgb, var(--accent) 25%, transparent);
}

.ts-goal header {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ts-goal__icon {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.ts-goal__icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-goal h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.3;
}

.ts-goal__progress {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 11px;
}

.ts-goal__progress .ts-bar { flex: 1; height: 6px; }

.ts-goal__progress span {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.ts-goal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ts-goal__foot {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 11px;
}

.ts-goal__foot small {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.ts-goal__foot .ts-vis { margin-left: auto; }

.ts-goal__foot .ts-faces i { width: 19px; height: 19px; font-size: 0.56rem; }

.ts-goal__path {
    flex-basis: 100%;
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 750;
    text-align: right;
    text-decoration: none;
}

.ts-goal__path:hover { text-decoration: underline; }

/* Legend + Add Goal. */
.ts-board__legend {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.ts-key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.ts-key__line { width: 26px; height: 0; }

.ts-key__line--strong { border-top: 3px solid #22a75d; border-radius: 3px; }
.ts-key__line--medium { border-top: 2px dashed #4a83e8; }
.ts-key__line--weak { border-top: 1.5px solid color-mix(in srgb, var(--text) 32%, transparent); }

.ts-key__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ts-key--dots .ts-key__dot + .ts-key__dot { margin-left: -3px; }

.ts-board__add { margin-left: auto; }

/* People-linked + Goal Rooms rail lists. */
.ts-linklist,
.ts-roomlist {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.ts-linklist li,
.ts-roomlist li {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    padding: 12px 0;
}

.ts-linklist li + li,
.ts-roomlist li + li {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.ts-linklist__icon,
.ts-roomlist__icon,
.ts-updatelist__icon,
.ts-similarlist__icon {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.ts-linklist__icon svg,
.ts-roomlist__icon svg,
.ts-updatelist__icon svg,
.ts-similarlist__icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-linklist__body { flex: 1; min-width: 0; display: grid; }

.ts-linklist__body strong {
    color: var(--text);
    font-size: 0.87rem;
    font-weight: 750;
}

.ts-linklist__body small {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.ts-linklist__match { color: var(--accent) !important; font-weight: 700; }

.ts-linklist__acts {
    display: flex;
    gap: 7px;
    flex-basis: 100%;
    padding-left: 43px;
}

.ts-roomlist__body { flex: 1; min-width: 0; display: grid; }

.ts-roomlist__body strong {
    color: var(--text);
    font-size: 0.87rem;
    font-weight: 750;
}

.ts-roomlist__body small { color: var(--text-muted); font-size: 0.75rem; }

.ts-roomlist__body small b { color: #1d9f5f; font-weight: 700; }

/* The "public goals connect people" band (all tabs' bottom banner). */
.ts-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 14px;
    background: var(--accent-soft);
}

.ts-banner__icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
}

.ts-banner__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-banner__copy { flex: 1; min-width: 220px; }

.ts-banner__copy strong {
    display: block;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 750;
}

.ts-banner__copy p {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.ts-banner__cta {
    margin-left: auto;
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    padding: 10px 16px;
    font-size: 0.84rem;
}

.ts-banner__cta:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* =========================
   DAILY SLATE TAB
   ========================= */

.ts-dailylist { display: grid; gap: 14px; }

.ts-daily {
    position: relative;
    display: grid;
    grid-template-columns: 26px 96px minmax(0, 1fr) 176px 26px;
    gap: 13px;
    padding: 16px 16px 15px;
}

.ts-daily__dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-top: 2px;
}

.ts-daily__dot.is-done { background: #22a75d; }

.ts-daily__dot.is-done svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-daily__dot.is-going {
    border: 3px solid #4a83e8;
    background: transparent;
}

.ts-daily__who {
    display: grid;
    justify-items: start;
    gap: 3px;
}

.ts-daily__who strong {
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 750;
}

.ts-daily__who small { color: var(--text-muted); font-size: 0.72rem; }

.ts-daily__copy { min-width: 0; }

.ts-daily__copy h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.99rem;
    font-weight: 750;
}

.ts-daily__copy p,
.ts-daily__text {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ts-daily__copy .ts-goal__tags { margin-top: 10px; }

.ts-daily__social {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 11px;
}

.ts-react {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 650;
}

.ts-react b { font-weight: 650; }

.ts-react svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button.ts-react { cursor: pointer; }

button.ts-react:hover { color: #d23b5e; }

.ts-react.is-on { color: #d23b5e; }

.ts-react.is-on svg { fill: #d23b5e; stroke: #d23b5e; }

.ts-daily__side {
    display: grid;
    gap: 6px;
    align-content: start;
    padding-left: 15px;
    border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.ts-daily__meter {
    margin: 0;
    color: var(--text);
    font-size: 1.06rem;
    font-weight: 800;
}

.ts-daily__meter i {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 600;
}

.ts-daily__side .ts-bar { height: 6px; }

.ts-daily__pct {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: right;
}

.ts-daily__peers {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.ts-daily__peers .ts-faces i { width: 18px; height: 18px; font-size: 0.52rem; }

.ts-daily__more { margin-top: 2px; }

/* Visitor-created cards: lighter grid (no progress rail), delete ×. */
.ts-daily--mine { grid-template-columns: 26px 96px minmax(0, 1fr) 26px; }

.ts-daily__delete {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.ts-daily__delete:hover {
    background: color-mix(in srgb, #d23b5e 12%, transparent);
    color: #d23b5e;
}

.ts-movers .ts-moverlist,
.ts-pathpeople .ts-moverlist {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.ts-moverlist li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
}

.ts-moverlist li + li {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.ts-moverlist .ts-ava { flex-basis: 36px; width: 36px; height: 36px; font-size: 0.72rem; }

.ts-moverlist__body { flex: 1; min-width: 0; display: grid; }

.ts-moverlist__body strong {
    color: var(--text);
    font-size: 0.87rem;
    font-weight: 750;
}

.ts-moverlist__body small { color: var(--text-muted); font-size: 0.75rem; }

.ts-movers__more {
    display: inline-flex;
    margin-top: 10px;
    font-size: 0.81rem;
}

/* =========================
   SLATE PATHS TAB
   ========================= */

/* Flattened section (Pete): My Paths is a heading + path cards on the page,
   not a card wrapping cards. */
.ts-featured { padding: 0; }

.ts-featured__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ts-featured__head h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 750;
}

.ts-featured__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-top: 15px;
}

.ts-pathcard {
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
}

.ts-pathcard--orange { background: color-mix(in srgb, #e0762f 6%, var(--surface)); border-color: color-mix(in srgb, #e0762f 22%, var(--border)); }
.ts-pathcard--green { background: color-mix(in srgb, #22a75d 6%, var(--surface)); border-color: color-mix(in srgb, #22a75d 22%, var(--border)); }
.ts-pathcard--blue { background: color-mix(in srgb, #2f6fe0 6%, var(--surface)); border-color: color-mix(in srgb, #2f6fe0 22%, var(--border)); }

.ts-pathcard__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.ts-pathcard__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-pathcard h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.99rem;
    font-weight: 780;
}

.ts-pathcard p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.ts-pathcard__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.ts-pathcard__progress { display: grid; gap: 6px; }

.ts-pathcard__progress .ts-bar { height: 6px; }

.ts-pathcard__progress small {
    color: var(--text-muted);
    font-size: 0.73rem;
    font-weight: 600;
}

.ts-pathcard__progress small b { color: var(--text); font-weight: 800; }

.ts-pathcard__cta { justify-self: start; margin-top: 2px; }

/* Expanded path. */
.ts-path { padding: 22px; }

.ts-path__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
}

.ts-path__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.ts-path__icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-path__id h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--text);
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.ts-ontrack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #ddf0e4;
    color: #1d7a4f;
    font-size: 0.7rem;
    font-weight: 750;
}

.ts-ontrack i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22a75d;
}

.ts-path__id p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.ts-path__stats {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ts-path__overall { display: grid; gap: 3px; min-width: 140px; }

.ts-path__overall strong {
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}

.ts-path__overall small { color: var(--text-muted); font-size: 0.72rem; }

.ts-path__overall .ts-bar { height: 6px; margin-top: 3px; }

.ts-path__streak {
    display: grid;
    justify-items: center;
    gap: 1px;
}

.ts-path__streak svg {
    width: 18px;
    height: 18px;
    fill: #ea731d;
}

.ts-path__streak strong {
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.1;
}

.ts-path__streak small { color: var(--text-muted); font-size: 0.68rem; white-space: nowrap; }

.ts-path__tabs {
    display: flex;
    gap: 2px;
    margin-top: 18px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.ts-path__tabs::-webkit-scrollbar { display: none; }

.ts-path__tab {
    position: relative;
    padding: 9px 14px 12px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.ts-path__tab span { font-weight: 600; opacity: 0.75; }

.ts-path__tab[aria-disabled="true"] { cursor: default; }

.ts-path__tab.is-active { color: var(--accent); font-weight: 750; }

.ts-path__tab.is-active::after {
    content: "";
    position: absolute;
    inset: auto 10px -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
}

.ts-path__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    margin-top: 6px;
}

/* Milestones. */
.ts-miles {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-mile {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: start;
    gap: 13px;
    padding: 14px 0;
}

.ts-mile + .ts-mile {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.ts-mile__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.ts-mile__mark svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-mile.is-done .ts-mile__mark { background: #22a75d; }

.ts-mile.is-current .ts-mile__mark { background: #e0762f; color: #ffffff; }

.ts-mile__copy { display: grid; gap: 3px; }

.ts-mile__copy strong {
    color: var(--text);
    font-size: 0.93rem;
    font-weight: 750;
}

.ts-mile__copy small {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.ts-mile.is-locked .ts-mile__copy { opacity: 0.6; }

.ts-mile__progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
    max-width: 300px;
}

.ts-mile__progress .ts-bar { flex: 1; height: 6px; }

.ts-mile__progress b {
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 750;
    white-space: nowrap;
}

.ts-mile__state {
    display: grid;
    justify-items: end;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 650;
}

.ts-mile__state small { font-size: 0.72rem; font-weight: 600; }

.ts-mile__state--done { color: #1d9f5f; font-weight: 750; }

.ts-mile__state--current { color: #e0762f; font-weight: 800; }

/* Daily Slate check-in inside the path. */
.ts-checkin {
    align-self: start;
    padding: 17px;
    border: 1px solid color-mix(in srgb, #e0762f 26%, var(--border));
    border-radius: 14px;
    background: color-mix(in srgb, #e0762f 6%, var(--surface));
}

.ts-checkin__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-checkin__head svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #e0762f;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-checkin__head h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.99rem;
    font-weight: 780;
}

.ts-checkin__prompt {
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 0.83rem;
}

.ts-checkin__text {
    width: 100%;
    margin-top: 11px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.87rem;
    line-height: 1.5;
    resize: vertical;
}

.ts-checkin__text::placeholder { color: var(--text-muted); }

.ts-checkin__text:focus { outline: none; border-color: #e0762f; }

.ts-checkin__count {
    display: block;
    margin: 5px 0 0 auto;
    text-align: right;
}

/* Quick chips: 4 items → always 2x2 or 4-across (Pete's groups-of-4 rule). */
.ts-checkin__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.ts-quick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.ts-quick svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-quick:hover { border-color: #e0762f; color: var(--text); }

.ts-quick.is-active {
    border-color: #e0762f;
    background: #fdeadd;
    color: #c2611b;
}

.ts-checkin__log {
    width: 100%;
    margin-top: 12px;
    min-height: 42px;
    font-size: 0.88rem;
}

.ts-checkin__log:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
}

.ts-checkin__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 11px 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.ts-checkin__note svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-checkin__done {
    margin: 10px 0 0;
    color: #1d7a4f;
    font-size: 0.84rem;
    font-weight: 650;
    text-align: center;
}

/* Path rail lists. */
.ts-pathpeople__all {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 0.79rem;
    font-weight: 650;
}

.ts-updatelist,
.ts-similarlist {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.ts-updatelist li,
.ts-similarlist li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
}

.ts-updatelist li + li,
.ts-similarlist li + li {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.ts-updatelist__body {
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.4;
}

.ts-updatelist__body strong { color: var(--text); font-weight: 750; }

.ts-updatelist__body b { font-weight: 600; }

.ts-updatelist__body small {
    display: block;
    margin-top: 1px;
    font-size: 0.72rem;
}

.ts-similarlist__body { flex: 1; min-width: 0; display: grid; }

.ts-similarlist__body strong {
    color: var(--text);
    font-size: 0.87rem;
    font-weight: 750;
}

.ts-similarlist__body small { color: var(--text-muted); font-size: 0.75rem; }

.ts-ai h2 b { color: var(--accent); font-weight: 800; }

/* =========================
   THE SLATE — responsive
   ========================= */

@media (max-width: 1240px) {
    .ts-layout { grid-template-columns: minmax(0, 1fr) 312px; }
    .ts-path__body { grid-template-columns: minmax(0, 1fr); }
    .ts-daily { grid-template-columns: 26px 90px minmax(0, 1fr) 156px 26px; }
}

@media (max-width: 1040px) {
    .ts-layout { grid-template-columns: 1fr; }
    .ts-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .ts-people,
    .ts-featured__grid { grid-template-columns: 1fr 1fr; }

    .ts-path__head { grid-template-columns: auto minmax(0, 1fr); }
    .ts-path__stats {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    /* Daily cards restack: dot+who as a top row, side under the copy. */
    .ts-daily {
        grid-template-columns: 26px minmax(0, 1fr) 26px;
        grid-template-areas:
            "dot who more"
            "dot copy copy"
            "dot side side";
    }
    .ts-daily__dot { grid-area: dot; }
    .ts-daily__who {
        grid-area: who;
        display: flex;
        align-items: center;
        gap: 9px;
    }
    .ts-daily__who .ts-ava { flex-basis: 32px; width: 32px; height: 32px; font-size: 0.66rem; }
    .ts-daily__copy { grid-area: copy; }
    .ts-daily__side {
        grid-area: side;
        margin-top: 4px;
        padding-left: 0;
        border-left: 0;
        padding-top: 10px;
        border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    }
    .ts-daily__more,
    .ts-daily__delete { grid-area: more; }
    .ts-daily--mine {
        grid-template-columns: 26px minmax(0, 1fr) 26px;
        grid-template-areas:
            "dot who more"
            "dot copy copy";
    }
}

@media (max-width: 620px) {
    .ts-head__copy h1 { font-size: 1.65rem; }
    .ts-head__copy p { font-size: 0.88rem; }
    .ts-streak { padding: 8px 13px; }
    .ts-tabs { gap: 22px; }
    .ts-intro__copy h2 { font-size: 1.25rem; }
    .ts-layerbar { padding: 0 14px; }
    .ts-layerbar .sf-tabs { gap: 20px; }
    .ts-people,
    .ts-featured__grid { grid-template-columns: 1fr; }
    .ts-compose { padding: 16px; }
    .ts-compose__bar { row-gap: 10px; }
    .ts-compose__count { order: -1; margin-left: 0; width: 100%; }
    .ts-banner__cta { margin-left: 0; }
    .ts-mile__state { display: none; }
    .ts-path__stats { flex-wrap: wrap; gap: 16px; }
}

/* =========================================================
   MY SLATE — merged dashboard (2026-07-08): the goal map, My Paths,
   Today's Goals + Daily Check-in, People & Progress, Upcoming
   Milestones, and Recommended, all on one page (Slate Paths folded in).
   Reuses the ts-* family; these are the additional pieces.
   ========================================================= */

.ts-filters-btn { margin-left: 2px; }

/* Dashboard sub-nav (mockup) */
.ts-subnav {
    display: flex;
    gap: 4px;
    margin-top: 16px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow-x: auto;
    scrollbar-width: none;
}

.ts-subnav::-webkit-scrollbar { display: none; }

.ts-subnav__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.ts-subnav__item svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-subnav__item:hover { color: var(--text); background: var(--accent-soft); }
.ts-subnav__item.is-active { color: var(--accent); background: var(--accent-soft); }
.ts-subnav__item[aria-disabled="true"] { cursor: default; opacity: 0.55; }

/* Spacing between the stacked dashboard sections — a touch more air now
   that some sections are flattened onto the page. */
.ts-section { margin-top: 32px; }

/* Two-column rows */
.ts-two {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ts-two--reco { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* Today's Goals */
.ts-today { padding: 20px; }

.ts-today__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ts-today__head h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.06rem;
    font-weight: 750;
}

.ts-today__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 9px;
    border-radius: 999px;
    background: #ddf0e4;
    color: #14663f;
    font-weight: 800;
    font-size: 0.8rem;
}

.ts-today__count svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.ts-today .ts-miles { margin: 0; }

/* Check-in as a standalone card (reuses .ts-checkin internals). */
.ts-checkin--card { align-self: start; }

/* People & Progress */
.ts-pp { padding: 22px; }

.ts-pp__head h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ts-pp__tabs {
    display: flex;
    gap: 4px;
    margin: 14px 0 6px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.ts-pp__tabs::-webkit-scrollbar { display: none; }

.ts-pp__tab {
    position: relative;
    padding: 9px 13px 12px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.ts-pp__tab[aria-disabled="true"] { cursor: default; }
.ts-pp__tab.is-active { color: var(--accent); font-weight: 750; }

.ts-pp__tab.is-active::after {
    content: "";
    position: absolute;
    inset: auto 8px -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
}

.ts-pp__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 16px;
}

.ts-pp__col { min-width: 0; }

.ts-pp__colhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.ts-pp__colhead h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 750;
}

/* Progress Highlights (avatar + name/goal/bar + percent) */
.ts-highlights {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 13px;
}

.ts-highlights li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.ts-highlights .ts-ava { width: 34px; height: 34px; flex-basis: 34px; font-size: 0.66rem; }

.ts-hl__body { display: grid; gap: 4px; min-width: 0; }

.ts-hl__body strong { color: var(--text); font-size: 0.83rem; font-weight: 700; }

.ts-hl__body small {
    color: var(--text-muted);
    font-size: 0.73rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-hl__body .ts-bar { height: 5px; margin-top: 1px; }

.ts-hl__pct { color: var(--text-muted); font-size: 0.76rem; font-weight: 750; }

/* Achievements */
.ts-achievements { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.ts-achievements li { display: flex; align-items: center; gap: 11px; }

.ts-ach__icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.ts-ach__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.ts-ach__body { display: grid; }
.ts-ach__body strong { color: var(--text); font-size: 0.87rem; font-weight: 750; }
.ts-ach__body small { color: var(--text-muted); font-size: 0.75rem; }

/* Upcoming Milestones */
.ts-upcoming { padding: 20px; }
.ts-upcominglist { margin: 6px 0 0; padding: 0; list-style: none; }
.ts-upcominglist li { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
.ts-upcominglist li + li { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }

.ts-upcoming__date {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.ts-upcoming__date svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ts-upcoming__body { flex: 1; min-width: 0; display: grid; }
.ts-upcoming__body strong { color: var(--text); font-size: 0.87rem; font-weight: 750; }
.ts-upcoming__body small { color: var(--text-muted); font-size: 0.74rem; }
.ts-upcoming__when { color: var(--accent); font-size: 0.76rem; font-weight: 750; white-space: nowrap; }

/* Recommended for You — flattened (heading + reco cards on the page). */
.ts-reco { padding: 0; }

.ts-reco__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.ts-reco__card {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 140ms ease, transform 140ms ease;
}

.ts-reco__card:hover { border-color: var(--accent); transform: translateY(-2px); }

.ts-reco__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.ts-reco__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ts-reco__tag {
    justify-self: start;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ts-reco__card strong { color: var(--text); font-size: 0.85rem; font-weight: 750; }
.ts-reco__card small { color: var(--text-muted); font-size: 0.73rem; line-height: 1.4; }

@media (max-width: 1040px) {
    .ts-two,
    .ts-two--reco { grid-template-columns: 1fr; }
    .ts-pp__cols { grid-template-columns: 1fr; }
    .ts-reco__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .ts-reco__grid { grid-template-columns: 1fr; }
    .ts-subnav { gap: 2px; }
}

/* =========================================================
   SURFACE SLATE — every card, chip, bar and button cut from the SAME
   fixed stone as the page, so nothing is a flat panel and every surface
   matches the background texture. Applied when theme-preview.js sets
   data-surface-slate="on": White Slate (paper-slate) and Dark Slate Stone
   (stone-slate). Plain Dark Slate (gray-slate) keeps its flat cards, and
   the homepage is never surfaced (JS gates it off there).

   HOW IT MATCHES: each surface paints the fixed --slate-photo at
   background-size:cover / attachment:fixed — exactly like the platform
   header and tab strip — so the stone lines up 1:1 with the page behind
   it (same crop, same scale, no seams). A translucent --surf-wash tints
   it toward the surface colour; an edge-light gradient (--slab-hi/lo, per
   theme) + raised shadow (--slab-card-shadow) lift it off the page. This
   is the ONE recipe for cards, chips AND buttons, so their textures can
   never disagree — the old satin --slab-primary button is gone here.
   ========================================================= */

/* Per-theme washes: how much stone shows through each kind of surface. */


/* ---- Cards & panels: raised stone slabs ---- */


/* ---- Chips & small pills: the same stone, lighter wash ---- */


/* ---- Buttons: same stone, accent-tinted so the CTA still reads ---- */


/* Ghost / secondary buttons: plain stone, no accent tint. */


/* ---- The dark "Ask Pete's Slate" bar: dark stone slab ---- */


/* Ask-bar chips sit ON the dark bar, so they stay translucent-white on
   both surface themes (not stone) — they read as controls, not slabs. */


/* The round Ask button inside the bar keeps the accent fill (it sits on
   the dark bar, so a stone-on-stone button would vanish). */

/* =====================================================================
   DEEP NAVY GOLD (PS-BRAND-NAV-002, 2026-07-17)
   The shared light-theme brand system, replacing Iris Foundry. From the
   PeerSlate Color Direction Study "Deep Navy Gold" direction: cloud-white
   canvas, ink-navy primary, marigold-gold highlight. One authoritative
   system applied consistently across every room — navy for primary
   actions, headings, and selected states; marigold for evidence chips,
   progress, and small highlight moments; teal reserved for success.
   The per-room mechanism stays (components read --ps-page-accent) but the
   rooms now share the one navy accent instead of six competing hues.
   Contrast (from the study): ink-on-canvas 16.2:1, white-on-primary
   11.6:1, primary-on-accent-soft 9.2:1. The dark theme block far below
   is scoped under body[data-theme="dark"] and is unaffected. */
:root {
    --ps-canvas: #f6f7fa;          /* cool cloud white */
    --ps-surface: #ffffff;
    --ps-ink: #141a28;             /* ink navy */
    --ps-muted: #5b6472;           /* navy-tinted, 5.6:1 on canvas */
    --ps-border: #dde2eb;          /* cool neutral */
    --ps-primary: #203767;         /* deep ink navy */
    --ps-primary-strong: #132447;
    --ps-primary-soft: #e7ecf4;    /* navy tint for selected/soft fills */
    --ps-bronze: #b87900;          /* marigold — highlight only, not small text */
    --ps-bronze-strong: #8a5a00;   /* text-safe marigold (~5.2:1 on white) */
    --ps-accent: #b87900;          /* alias: the marigold highlight */
    --ps-accent-soft: #f4e4b4;     /* soft marigold fill (evidence chips) */
    --ps-success-teal: #1e725f;
    /* Room accents retained for the plumbing, all pointing at navy so the
       system stays cohesive; marigold is the shared highlight via
       --ps-bronze. */
    --ps-room-teal: #203767;
    --ps-room-plum: #203767;
    --ps-room-amber: #203767;
    --ps-room-pine: #203767;
    --ps-room-ultraviolet: #203767;
    --ps-page-accent: var(--ps-primary);
    --ps-page-accent-strong: var(--ps-primary-strong);
    --ps-page-accent-soft: var(--ps-primary-soft);
}

/* Every room shares the navy accent for a single authoritative system.
   Board and Résumé keep a marigold-soft highlight fill so their evidence/
   goal chips still read gold, matching the study mockups. */
body[data-room="bronze"] {
    --ps-page-accent: var(--ps-primary);
    --ps-page-accent-strong: var(--ps-primary-strong);
    --ps-page-accent-soft: #f4e4b4;
}

body[data-room="teal"] {
    --ps-page-accent: var(--ps-primary);
    --ps-page-accent-strong: var(--ps-primary-strong);
    --ps-page-accent-soft: var(--ps-primary-soft);
}

body[data-room="plum"] {
    --ps-page-accent: var(--ps-primary);
    --ps-page-accent-strong: var(--ps-primary-strong);
    --ps-page-accent-soft: var(--ps-primary-soft);
}

body[data-room="amber"] {
    --ps-page-accent: var(--ps-primary);
    --ps-page-accent-strong: var(--ps-primary-strong);
    --ps-page-accent-soft: #f4e4b4;
}

body[data-room="pine"] {
    --ps-page-accent: var(--ps-primary);
    --ps-page-accent-strong: var(--ps-primary-strong);
    --ps-page-accent-soft: var(--ps-primary-soft);
}

body[data-room="ultraviolet"] {
    --ps-page-accent: var(--ps-primary);
    --ps-page-accent-strong: var(--ps-primary-strong);
    --ps-page-accent-soft: var(--ps-primary-soft);
}

/* =========================================================
   LAYERED INK & SIGNAL GOLD — Iris-Foundry-token layer
   (PS-THEME-002, 2026-07-16). Placed after every body[data-room=...]
   block above so it wins when data-theme="dark" and data-room both sit
   on <body> at once. Room accents collapse to one signal-gold accent —
   the per-room hues stay a light-theme-only distinction. The canvas is
   the near-black page layer; cards sit one layer lighter; the paper pop
   layer is reserved for deliberate feature moments. */
body[data-theme="dark"] {
    --ps-canvas: #0e1d3a;
    --ps-surface: #1a2c4f;
    --ps-surface-soft: #16294c;
    --ps-ink: #f2f4f8;
    --ps-muted: #9aa5b8;
    --ps-border: #2e4573;
    --ps-primary: #e3b83a;
    --ps-primary-strong: #f0c95a;
    --ps-primary-soft: rgb(216 169 40 / 16%);
    --ps-bronze: #d8a928;
    --ps-bronze-strong: #e3b83a;
    --ps-success-teal: #5abf95;
    --ps-gold: #d8a928;
    --ps-gold-hover: #e3b83a;
    --ps-gold-active: #bf8f17;
    --ps-gold-ink: #e3b83a;
    --ps-graphite: #253a61;
    --ps-shadow-static: 0 1px 2px rgb(0 0 0 / 40%);
    --ps-shadow-interactive: 0 2px 6px rgb(0 0 0 / 40%), 0 14px 34px rgb(0 0 0 / 45%);
    --ps-shadow-focal: 0 4px 12px rgb(0 0 0 / 45%), 0 28px 72px rgb(0 0 0 / 55%);
    --ps-shadow-dark: 0 18px 50px rgb(0 0 0 / 60%);
    --ps-focus-ring: 0 0 0 3px var(--ps-canvas), 0 0 0 6px rgb(227 184 58 / 75%);
    /* Room accents collapse to dark-safe bright gold (single accent). */
    --ps-page-accent: #e3b83a;
    --ps-page-accent-strong: #f0c95a;
    --ps-page-accent-soft: rgb(216 169 40 / 16%);
}

/* Primary marketing buttons in dark: button gold ALWAYS carries ink text
   (the generic .ps-btn--primary below pairs the accent with white). */
body[data-theme="dark"] .ps-btn--primary {
    background: #d8a928;
    border-color: #d8a928;
    color: #0a1730;
}

body[data-theme="dark"] .ps-btn--primary:hover,
body[data-theme="dark"] .ps-btn--primary:focus-visible {
    background: #e3b83a;
    border-color: #e3b83a;
    color: #0a1730;
}

/* The global header keeps the room accent for its active link in the
   light theme; in mono the header is ink, so the accent must be the
   bright gold (handled in the shell section) — this guard just makes
   sure the generic data-room hook cannot re-tint it. */
body[data-theme="dark"][data-room] .platform-nav__links a[aria-current="page"] {
    color: #e3b83a;
}

body[data-theme="dark"][data-room] .platform-nav__links a[aria-current="page"]::after {
    background: #d8a928;
}

body[data-theme="dark"][data-room] .profile-tab[aria-current="page"] {
    color: #e3b83a;
}

body[data-theme="dark"][data-room] .profile-tab[aria-current="page"]::after {
    background: #d8a928;
}

body[data-theme="dark"] .global-header,
body[data-theme="dark"].slate-light .global-header {
    background: #0a1730;
}

/* Shared chrome: warm the solid surfaces and let orientation states use
   the room accent. The blue orbit backdrop asset stays until a warm
   canvas asset is approved (recorded in PS-BRAND-NAV-001/08-decisions). */
.global-header,
.peerslate-home-page .global-header,
body.slate-light .global-header {
    background: var(--ps-canvas);
}

body[data-room] .platform-nav__links a[aria-current="page"] {
    color: var(--ps-page-accent);
}

body[data-room] .platform-nav__links a[aria-current="page"]::after {
    background: var(--ps-page-accent);
}

body[data-room] .profile-tab[aria-current="page"] {
    color: var(--ps-page-accent);
}

body[data-room] .profile-tab[aria-current="page"]::after {
    background: var(--ps-page-accent);
}

body.ps-editorial-surface,
.peerslate-home-page .main-content {
    background-color: var(--ps-canvas);
}

.footer .footer-why-link {
    color: var(--ps-page-accent);
    font-weight: 650;
    text-decoration: none;
}

.footer .footer-why-link:hover,
.footer .footer-why-link:focus-visible {
    text-decoration: underline;
}

/* Marketing primary buttons take the page's room accent (Iris on the
   marketing pages) instead of legacy blue. */
.ps-btn--primary {
    background: var(--ps-page-accent);
    border-color: var(--ps-page-accent);
}

.ps-btn--primary:hover,
.ps-btn--primary:focus-visible {
    background: var(--ps-page-accent-strong);
    border-color: var(--ps-page-accent-strong);
}

/* =====================================================================
   MONOCHROME & SIGNAL GOLD — final shell overrides (PS-THEME-001)
   Kept at the END of this file on purpose: the mono theme shares
   specificity with many body.slate-light rules above, and source order
   is what settles those ties. Everything here is scoped to
   body[data-theme="dark"] and cannot affect the default theme.
   ===================================================================== */
body[data-theme="dark"].slate-light .platform-nav__links a { color: #e2e7f0; }
body[data-theme="dark"].slate-light .platform-nav__links a:hover,
body[data-theme="dark"].slate-light .platform-nav__links a:focus-visible { color: #ffffff; }
body[data-theme="dark"].slate-light .platform-nav__links a[aria-current="page"] { color: #e3b83a; }
body[data-theme="dark"].slate-light .platform-nav__links a[aria-current="page"]::after { background: #d8a928; }

body[data-theme="dark"].slate-light .sign-in-btn,
body[data-theme="dark"] .sign-in-btn {
    color: #0a1730;
    background: #d8a928;
}

body[data-theme="dark"] .sign-in-btn:hover,
body[data-theme="dark"] .sign-in-btn:focus-visible {
    filter: none;
    background: #e3b83a;
}

/* Profile band card + avatar shadow: card layer over the page layer. */
body[data-theme="dark"].slate-light .profile-header__inner {
    background: #1a2c4f;
    border-color: #2e4573;
    box-shadow: 0 2px 6px rgb(0 0 0 / 35%), 0 14px 34px rgb(0 0 0 / 40%);
}

body[data-theme="dark"].slate-light .profile-avatar {
    box-shadow: 0 10px 26px rgb(0 0 0 / 50%);
}

/* LinkedIn chip keeps its true brand mark (user-content rule) — only the
   halo shadow warms. */

/* Ask-bar chips + circular arrow button: white with ink text, neutral
   shadows (were navy-tinted). */
body[data-theme="dark"].slate-light .ps-askbar__chips button,
body[data-theme="dark"].slate-light .ps-askbar__chips a {
    color: #0a1730;
    box-shadow: 0 3px 10px rgb(11 12 14 / 22%);
}

body[data-theme="dark"].slate-light .ps-askbar__chips button:hover,
body[data-theme="dark"].slate-light .ps-askbar__chips a:hover {
    box-shadow: 0 5px 14px rgb(11 12 14 / 28%);
}

body[data-theme="dark"].slate-light .ps-askbar .hero-ai-search__button {
    color: #0a1730;
    background: #d8a928;
}

body[data-theme="dark"].slate-light .ps-askbar .hero-ai-answer {
    border-left-color: #d8a928;
}

body[data-theme="dark"].slate-light .ps-askbar .hero-ai-answer__question { color: #e3b83a; }

/* Gold arrow glyph in metric/stat icons (was recolored blue by the
   modern-blue theme block near the top of the file). */
body[data-theme="dark"] #arrow-gold path { fill: #d8a928; }

/* Generic profile-tab active state on every variant. */
body[data-theme="dark"].slate-light .profile-tab[aria-current="page"],
body[data-theme="dark"].slate-light .profile-tabs .profile-tab[aria-current="page"] {
    color: #e3b83a;
}

body[data-theme="dark"].slate-light .profile-tab::after,
body[data-theme="dark"].slate-light .profile-tabs .profile-tab::after {
    background: #d8a928;
}

body[data-theme="dark"].slate-light .profile-tab,
body[data-theme="dark"].slate-light .profile-tabs .profile-tab {
    color: #9aa5b8;
}

body[data-theme="dark"].slate-light .profile-tab:hover,
body[data-theme="dark"].slate-light .profile-tab:focus-visible {
    color: #e3b83a;
}

/* Footer (slate-light variant paints its own glass above). */
body[data-theme="dark"].slate-light .footer {
    background: #081426;
    color: #afb9cb;
}

/* Mobile bottom tab bar: ink bar, gold active pill. */
body[data-theme="dark"] .mobile-tabbar {
    background: rgb(10 23 48 / 96%);
    border-top: 1px solid #253c66;
    box-shadow: 0 -8px 22px rgb(0 0 0 / 45%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-theme="dark"] .mobile-tabbar__item { color: #9aa5b8; }

body[data-theme="dark"] .mobile-tabbar__item[aria-current="page"] {
    color: #e3b83a;
    background: rgb(216 169 40 / 16%);
}

/* Header Ask AI compact button (phones). */
body[data-theme="dark"] .nav-ask-ai {
    border-color: #3b527f;
    background: rgb(255 255 255 / 6%);
    color: #e2e7f0;
}

/* slate-light (applied to almost every page) re-declares the shared vars
   AFTER the dark block far above — re-assert the dark palette here. */
body[data-theme="dark"].slate-light {
    --bg: #0e1d3a;
    --bg-elevated: #1a2c4f;
    --surface: #1a2c4f;
    --surface-soft: #16294c;
    --border: #2e4573;
    --text: #f2f4f8;
    --text-muted: #9aa5b8;
    --accent: #e3b83a;
    --accent-soft: rgb(216 169 40 / 14%);
    --shadow: 0 2px 6px rgb(0 0 0 / 40%), 0 14px 34px rgb(0 0 0 / 45%);
    --tab-active: #e3b83a;
    --button-primary-bg: #d8a928;
    --button-primary-text: #0a1730;
    --askbar-bg: linear-gradient(135deg, #081426, #1a2c4f);
    background: #0e1d3a;
    color: var(--text);
}

/* My Story + Work pages remap the old dark palette to light blue late in
   this file — remap it again to layered ink (off-white text, gold accent). */
body[data-theme="dark"].slate-light .my-story-page,
body[data-theme="dark"].slate-light .work-page {
    --color-text-primary: #f2f4f8;
    --color-text-secondary: #c4ccda;
    --color-text-muted: #9aa5b8;
    --color-text-dark: #0a1730;          /* text that sits ON the gold accent */
    --color-gold: #e3b83a;
    --color-gold-bright: #f0c95a;
    --color-gold-muted: #d8a928;
    --color-gold-dark: #bf8f17;
    --color-blue: #e3b83a;
    --color-cyan: #e3b83a;
    --color-card: #1a2c4f;
    --color-card-elevated: #223a66;
    --color-card-hover: #294578;
    --color-border: #2e4573;
    --color-border-soft: #24375c;
    --color-border-gold: #d8a928;
    --shadow-card: 0 2px 6px rgb(0 0 0 / 35%), 0 14px 34px rgb(0 0 0 / 40%);
    --shadow-gold: 0 0 0 rgb(0 0 0 / 0%);
}

/* Logo pill: the light glass chip reads as a bright hole punched in the
   ink header — swap to a quiet graphite pill (same geometry). */
body[data-theme="dark"] .platform-brand__logo {
    background: linear-gradient(135deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 4%));
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 14%),
        0 0.4rem 1rem rgb(0 0 0 / 30%);
}

/* Floating Ask Pete AI chip: gold primary (the navy pill is the light
   theme's language). */
body[data-theme="dark"].slate-light #chat-toggle,
body[data-theme="dark"].peerslate-home-page #chat-toggle,
body[data-theme="dark"] #chat-toggle {
    color: #0a1730;
    background: #d8a928;
    border: 1px solid #d8a928;
    box-shadow: 0 12px 30px rgb(216 169 40 / 26%);
}

body[data-theme="dark"].slate-light #chat-toggle:hover,
body[data-theme="dark"].slate-light #chat-toggle:focus-visible,
body[data-theme="dark"].peerslate-home-page #chat-toggle:hover,
body[data-theme="dark"].peerslate-home-page #chat-toggle:focus-visible,
body[data-theme="dark"] #chat-toggle:hover,
body[data-theme="dark"] #chat-toggle:focus-visible {
    background: #e3b83a;
    color: #0a1730;
}

/* Foundation-C central tokens (consumed by Interview Studio and other
   application rooms): collapse to layered ink — gold action family,
   near-black canvas. --ps-ink-950 stays true ink: it is the text color
   on white inputs and on gold buttons, both of which keep their light
   surfaces in dark mode. */
body[data-theme="dark"] {
    --ps-cloud-white: #0e1d3a;
    --ps-ink-950: #0a1730;
    --ps-product-indigo: #e3b83a;
    --ps-product-indigo-strong: #f0c95a;
    --ps-connection-azure: #d8a928;
    --ps-ai-cyan: #bf8f17;
    --ps-evidence-amber: #d8a928;
}

/* Marketing landing (/peerslate, the only page without slate-light):
   layered-ink remap of its --home-* palette. The navy bands of the light
   theme become the deepest well layer so the page still alternates
   canvas → card → well as you scroll. */
body[data-theme="dark"] .peerslate-home-page,
body[data-theme="dark"].peerslate-home-page {
    --surface: #1a2c4f;
    --surface-soft: #16294c;
    --border: #2e4573;
    --text: #f2f4f8;
    --text-muted: #9aa5b8;
    --accent: #e3b83a;
    --accent-soft: rgb(216 169 40 / 16%);
    --shadow: 0 12px 30px rgb(0 0 0 / 40%);
    --home-bg: #0e1d3a;
    --home-bg-soft: #16294c;
    --home-surface: rgb(26 44 79 / 96%);
    --home-surface-solid: #1a2c4f;
    --home-surface-soft: #223a66;
    --home-text: #f2f4f8;
    --home-muted: #9aa5b8;
    --home-soft: #8a887f;
    --home-border: #2e4573;
    --home-border-soft: #24375c;
    --home-blue: #d8a928;
    --home-blue-hover: #e3b83a;
    --home-blue-faint: rgb(216 169 40 / 14%);
    --home-teal: #5abf95;
    --home-teal-soft: rgb(47 122 98 / 22%);
    --home-navy: #081426;
    --home-navy-2: #1a2c4f;
    --home-shadow-sm: 0 4px 12px rgb(0 0 0 / 40%);
    --home-shadow-md: 0 12px 30px rgb(0 0 0 / 45%);
    --home-shadow-lg: 0 24px 64px rgb(0 0 0 / 55%);
    --home-shadow-blue: 0 10px 24px rgb(216 169 40 / 24%);
    color: var(--home-text);
}

body[data-theme="dark"].peerslate-home-page .global-header {
    background: #0a1730;
    border-bottom-color: #253c66;
}

/* Marketing landing hardcodes a few light washes — re-paint them as dark
   layers (canvas-tinted hero wash, raised ghost buttons). */
body[data-theme="dark"].peerslate-home-page .ps-hero {
    background: linear-gradient(180deg, #16294c 0%, #132444 46%, rgb(14 29 58 / 0) 100%);
}

body[data-theme="dark"].peerslate-home-page .ps-btn--ghost {
    color: var(--home-text);
    background: #223a66;
    border-color: var(--home-border);
}

/* Preview-card metrics strip stays a white pop layer inside the dark
   card, so its type must stay ink; the AI suggestion chips become raised
   dark chips under the dark ask bar. */
body[data-theme="dark"].peerslate-home-page .preview-main__metrics {
    background: #f6f5f0;
    border-color: rgb(255 255 255 / 16%);
}

body[data-theme="dark"].peerslate-home-page .preview-main__metrics div + div {
    border-left-color: #ddd9d0;
}

body[data-theme="dark"].peerslate-home-page .preview-main__metrics strong { color: #1a1c22; }
body[data-theme="dark"].peerslate-home-page .preview-main__metrics span { color: #66645f; }

body[data-theme="dark"].peerslate-home-page .ai-chip {
    color: var(--home-text);
    background: #223a66;
    border-color: #2e4573;
    box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
}

body[data-theme="dark"].peerslate-home-page .ai-chip__icon { color: var(--home-muted); }

body[data-theme="dark"].peerslate-home-page .ai-chip:hover {
    border-color: #d8a928;
}

body[data-theme="dark"] .peerslate-home-page,
body[data-theme="dark"].peerslate-home-page {
    background: var(--home-bg);
}

/* ============================================================
   SAMPLE COMMUNITY NOTE (2026-07-21)
   Honest disclosure banner for pre-launch community surfaces.
   Self-contained (own bg + fg) so it reads on light OR dark /
   navy community backgrounds. Soft-gold on ink-navy = 13.7:1,
   well past WCAG AA. Markup: partials/sample_community_note.html
   ============================================================ */
.ps-sample-note {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    width: fit-content;
    max-width: 640px;
    margin: .85rem 0 0;
    padding: .55rem .8rem;
    background: var(--ps-soft-gold, #f4e4b4);
    color: #141a28;
    border: 1px solid rgba(20, 26, 40, .14);
    border-radius: 12px;
    font-family: var(--ps-font-ui, "Inter", system-ui, sans-serif);
    font-size: .8rem;
    line-height: 1.45;
    text-align: left;
}
.ps-sample-note svg {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .06rem;
    fill: none;
    stroke: #8a5a00;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ps-sample-note strong { font-weight: 700; }
@media (max-width: 640px) {
    .ps-sample-note { font-size: .76rem; max-width: 100%; }
}

/* Global sign-out button beside My Slate (owner request 2026-07-21). */
.nav-sign-out { display: inline-flex; margin: 0; }
.nav-sign-out__btn {
    background: transparent;
    border: 1px solid rgba(20, 26, 40, .25);
    color: inherit;
    font: inherit;
    font-size: .85rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    cursor: pointer;
}
.nav-sign-out__btn:hover { border-color: rgba(20, 26, 40, .5); }
.nav-sign-out__btn:focus-visible { outline: 2px solid #b87900; outline-offset: 2px; }
body[data-theme="dark"] .nav-sign-out__btn { border-color: rgba(234, 240, 251, .3); }