/* ============================================================================
 * Mycelium One — Portal theme
 * Earth-tone palette + IBM Plex Sans + Iowan Old Style; per visual-7-user-portal-v0_8.jsx.
 * Additive layer over the existing diamond-layout/* — operator dashboard untouched.
 * ============================================================================ */

:root {
    --mln-engine:  #b45309;
    --mln-mln:     #1a6847;
    --mln-uci:     #2d5a8e;
    --mln-archive: #8b6914;
    --mln-kosmos:  #7a4b2a;
    --mln-funder:  #6b3d8a;
    --mln-ambass:  #385e3c;

    --mln-bg:          #f7f8f4;     /* matches admin layout background */
    --mln-surface:     #ffffff;
    --mln-text:        #2c2416;
    --mln-text-muted:  #6b5e4f;
    --mln-text-light:  #9a8d7e;
    --mln-divider:     #ece4d6;

    --mln-radius:      4px;
    --mln-radius-lg:   8px;

    --mln-font-display: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;
    --mln-font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --mln-font-mono:    "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;
}

.mln-portal-body {
    background: var(--mln-bg);
    color: var(--mln-text);
    font-family: var(--mln-font-body);
    margin: 0;
}

.mln-portal-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Topbar ---------- */
.mln-portal-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--mln-surface);
    border-bottom: 1px solid var(--mln-divider);
    position: sticky; top: 0; z-index: 200;
}

.mln-portal-topbar-left, .mln-portal-topbar-right {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}

.mln-portal-brand {
    display: inline-flex; align-items: center; gap: 0.5rem;
    text-decoration: none; color: var(--mln-text);
    font-family: var(--mln-font-display); font-size: 1.1rem; font-weight: 600;
}
.mln-portal-brand:hover { text-decoration: none; }
.mln-portal-logo { height: 28px; width: auto; }

.mln-portal-context-form { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }

/* V1.1 — header buttons are FLUSH with the header: no fill, no border, dark
   text/icons on the surface (supersedes the old solid-green-fill treatment,
   where even p-button-text like Logout rendered on a green pill). Reorder +
   icon-only (globe / shield) are set in topbar-portal.xhtml. */
.mln-portal-topbar-right .ui-button {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--mln-text) !important;
}
.mln-portal-topbar-right .ui-button .ui-button-icon,
.mln-portal-topbar-right .ui-button .ui-icon,
.mln-portal-context-button .ui-button .ui-icon { color: var(--mln-text) !important; }

.mln-portal-topbar-right .ui-button:hover,
.mln-portal-topbar-right .ui-button:focus {
    background: rgba(0,0,0,0.06) !important;
    color: var(--mln-mln) !important;
}
.mln-portal-topbar-right .ui-button:hover .ui-button-icon,
.mln-portal-topbar-right .ui-button:hover .ui-icon,
.mln-portal-context-button .ui-button:hover .ui-icon { color: var(--mln-mln) !important; }

.mln-scheme-dark .mln-portal-topbar-right .ui-button:hover,
.mln-scheme-dim  .mln-portal-topbar-right .ui-button:hover,
.mln-scheme-dark .mln-portal-topbar-right .ui-button:focus,
.mln-scheme-dim  .mln-portal-topbar-right .ui-button:focus { background: rgba(255,255,255,0.10) !important; }

/* icon-only header buttons — comfortable square tap target */
.mln-portal-directory-link.ui-button-icon-only,
.mln-portal-operator-toggle.ui-button-icon-only { width: 2.5rem; height: 2.5rem; padding: 0; }

/* ---------- Main + footer ---------- */
.mln-portal-main {
    flex: 1 1 auto;
    padding: 2rem 1.5rem 3rem;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.mln-portal-footer {
    /* O5 — belt-and-suspenders with .mln-portal-main's flex-grow: pin the footer
       to the viewport bottom on short pages, below content on long ones. */
    margin-top: auto;
    border-top: 1px solid var(--mln-divider);
    padding: 1rem 1.5rem;
    text-align: center;
    color: var(--mln-text-light);
    font-size: 0.85rem;
}

/* ---------- Hero ---------- */
.mln-portal-hero {
    background: linear-gradient(135deg, var(--mln-mln), var(--mln-uci));
    color: #fff;
    padding: 2.5rem 2rem;
    border-radius: var(--mln-radius-lg);
    margin-bottom: 2rem;
}

.mln-portal-hero h1 { font-family: var(--mln-font-display); font-size: 2rem; margin: 0 0 0.5rem; }
.mln-portal-hero-aim { margin: 0; max-width: 60ch; line-height: 1.5; font-size: 1.05rem; opacity: 0.92; }

/* ---------- Profile picker ---------- */
.mln-portal-picker { margin-top: 2rem; }
.mln-portal-picker h2 { font-family: var(--mln-font-display); margin: 0 0 0.25rem; font-size: 1.4rem; }
.mln-portal-picker p  { color: var(--mln-text-muted); margin: 0 0 1.25rem; }

.mln-portal-picker-card {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 1.25rem;
    background: var(--mln-surface);
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius);
    color: var(--mln-text); text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
    box-sizing: border-box;
}

.mln-portal-picker-card:hover {
    border-color: var(--mln-mln);
    box-shadow: 0 2px 8px rgba(26, 104, 71, 0.08);
}

.mln-portal-picker-card-header { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.mln-portal-picker-icon { color: var(--mln-text-muted); font-size: 1.1rem; }
.mln-portal-picker-card-title { font-size: 1.05rem; }
.mln-portal-picker-card-role  { color: var(--mln-text-muted); font-size: 0.9rem; }
.mln-portal-picker-card-cta   { color: var(--mln-mln); font-size: 0.85rem; margin-top: auto; }

.mln-portal-picker-self        { border-left: 3px solid var(--mln-engine); }
.mln-portal-picker-land_node   { border-left: 3px solid var(--mln-mln); }
.mln-portal-picker-organization { border-left: 3px solid var(--mln-uci); }
.mln-portal-picker-funder      { border-left: 3px solid var(--mln-funder); }
.mln-portal-picker-course      { border-left: 3px solid var(--mln-archive); }

.mln-portal-picker-card-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: flex-start;
}
.mln-portal-status-pending  { background: rgba(180, 83, 9, 0.12);  color: var(--mln-engine); }
.mln-portal-status-verified { background: rgba(26, 104, 71, 0.12); color: var(--mln-mln); }
.mln-portal-status-declined { background: rgba(139, 105, 20, 0.12); color: var(--mln-archive); }
.mln-portal-status-revoked  { background: rgba(154, 141, 126, 0.12); color: var(--mln-text-light); }

/* ---------- Pulse type chips ---------- */
.mln-pulse-class-uci     { background: rgba(45, 90, 142, 0.12);   color: var(--mln-uci); }
.mln-pulse-convening     { background: rgba(26, 104, 71, 0.12);   color: var(--mln-mln); }
.mln-pulse-invite-t3plus { background: rgba(107, 61, 138, 0.12);  color: var(--mln-funder); }
.mln-pulse-seasonal      { background: rgba(139, 105, 20, 0.12);  color: var(--mln-archive); }
.mln-pulse-default       { background: var(--mln-divider); color: var(--mln-text-muted); }

[class^="mln-pulse-"] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ---------- Tier ladder ---------- */
.mln-tier-ladder { display: flex; gap: 0.25rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.mln-tier {
    flex: 1 1 0;
    min-width: 110px;
    padding: 0.6rem 0.75rem;
    text-align: center;
    border-radius: var(--mln-radius);
    font-size: 0.85rem;
    border: 1px solid var(--mln-divider);
    background: var(--mln-surface);
    color: var(--mln-text-muted);
}
.mln-tier-current { background: var(--mln-mln); color: #fff; border-color: var(--mln-mln); font-weight: 600; }
.mln-tier-past    { background: rgba(26, 104, 71, 0.12); color: var(--mln-mln); border-color: rgba(26, 104, 71, 0.3); }
.mln-tier-future  { background: var(--mln-surface); color: var(--mln-text-light); border-style: dashed; }

/* ---------- State pills + visibility chips ---------- */
.mln-state {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.mln-state-active   { background: rgba(26, 104, 71, 0.16); color: var(--mln-mln); }
.mln-state-open     { background: rgba(45, 90, 142, 0.16); color: var(--mln-uci); }
.mln-state-seasonal { background: rgba(139, 105, 20, 0.16); color: var(--mln-archive); }
.mln-state-closed   { background: var(--mln-divider); color: var(--mln-text-muted); }

.mln-visibility {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid transparent;
}
.mln-visibility-public    { background: rgba(26, 104, 71, 0.12); color: var(--mln-mln); }
.mln-visibility-protected { background: rgba(45, 90, 142, 0.12); color: var(--mln-uci); }
.mln-visibility-private   { background: var(--mln-divider); color: var(--mln-text-muted); }

/* ---------- Hero photo bands ---------- */
.mln-hero-band {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    background: var(--mln-divider);
    border-radius: var(--mln-radius-lg);
    margin-bottom: 1.5rem;
}

/* ---------- Section + card primitives ---------- */
.mln-section {
    background: var(--mln-surface);
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.mln-section h2 { font-family: var(--mln-font-display); margin: 0 0 1rem; font-size: 1.3rem; }

.mln-section h3 {
    font-family: var(--mln-font-body);
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
    color: var(--mln-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.mln-card {
    background: var(--mln-surface);
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.mln-aim-statement {
    font-family: var(--mln-font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--mln-text);
    line-height: 1.5;
    border-left: 3px solid var(--mln-mln);
    padding-left: 1rem;
    margin: 1rem 0;
}

/* ---------- Trajectory bands ---------- */
.mln-trajectory-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
    .mln-trajectory-grid { grid-template-columns: repeat(3, 1fr); }
}
.mln-trajectory-band h3 { font-size: 0.85rem; margin-bottom: 0.5rem; }

/* ---------- Architecture diagram ---------- */
.mln-architecture-plane {
    background: var(--mln-surface);
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
}
.mln-architecture-plane.mln-plane-portal {
    border-color: var(--mln-mln);
    box-shadow: 0 0 0 2px rgba(26, 104, 71, 0.1);
}
.mln-architecture-arrow { text-align: center; color: var(--mln-text-muted); margin: 0.25rem 0; font-size: 1.5rem; }

/* ---------- Auth pages (signup, verify, reset, etc.) ---------- */
.mln-auth-container {
    max-width: 440px;
    margin: 4rem auto;
    padding: 2rem;
    background: var(--mln-surface);
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.mln-auth-container h1 {
    font-family: var(--mln-font-display);
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
}
.mln-auth-subtitle { color: var(--mln-text-muted); margin: 0 0 1.5rem; }
.mln-auth-form { display: flex; flex-direction: column; gap: 0.75rem; }
.mln-auth-form label { font-size: 0.85rem; color: var(--mln-text-muted); margin-bottom: 0.25rem; }
.mln-auth-form .ui-inputtext, .mln-auth-form .ui-password { width: 100%; }

/* Opt out of the column-flex layout above for auth forms that use the app-wide
   PrimeFlex .grid/.field system instead (signup, accept-invitation).
   Two layout systems cannot both own the same form: as a flex item, .grid's
   -0.5rem side margins overflow the card horizontally and .field's 1rem
   margin-bottom stacks on top of the flex gap, giving uneven double spacing.
   login / forgot-password / reset-password still use the bare label+input flow
   above, so the base rule stays exactly as it was. */
.mln-auth-form--grid { display: block; gap: 0; }
/* .grid's negative side margins are meant to cancel .col padding; without this the
   row would hang 0.5rem outside the card on both sides. */
.mln-auth-form--grid > .grid { margin-left: 0; margin-right: 0; }
.mln-auth-form--grid .field { margin-bottom: 0.75rem; }
/* .field>label is inline-block in PrimeFlex; make it block so the control always
   starts on its own line, which is what every other form in the app looks like. */
.mln-auth-form--grid .field > label { display: block; }
.mln-auth-actions { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mln-auth-aside { text-align: center; margin-top: 1.5rem; color: var(--mln-text-muted); font-size: 0.85rem; }
.mln-auth-aside a { color: var(--mln-mln); }

.mln-auth-success-icon, .mln-auth-error-icon {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.mln-auth-success-icon { color: var(--mln-mln); }
.mln-auth-error-icon { color: var(--mln-engine); }

/* ---------- Access denied ---------- */
.mln-portal-access-denied {
    max-width: 480px;
    margin: 4rem auto;
    text-align: center;
    padding: 2rem;
}
.mln-portal-access-denied-icon { font-size: 3rem; color: var(--mln-text-light); margin-bottom: 1rem; }
.mln-portal-access-denied h1 { font-family: var(--mln-font-display); margin-bottom: 0.5rem; }
.mln-portal-access-denied-reason { color: var(--mln-text-muted); margin-bottom: 1.5rem; }

/* ---------- Picker entity-type chip (acting-as cards) ---------- */
.mln-portal-picker-card-entity-type {
    display: inline-block;
    background: var(--mln-card-emphasis, #f0f4ea);
    color: var(--mln-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
    margin-right: 0.4rem;
}

/* ---------- Preview-as-user banner (admin tool) ---------- */
.mln-preview-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    background: #fff3cd;
    border-bottom: 2px solid #b58e3a;
    color: #5a4015;
    font-size: 0.9rem;
}
.mln-preview-banner-icon { font-size: 1rem; }
.mln-preview-banner-text { flex: 1; }
.mln-preview-banner h:form { margin: 0; }

/* ---------- §1 Seasonal context strip ---------- */
.mln-seasonal-strip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: var(--mln-card-emphasis, #f6faf2);
    border-left: 4px solid var(--mln-mycelium, #6b8e23);
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}
.mln-seasonal-icon { color: var(--mln-mycelium, #6b8e23); }
.mln-seasonal-label { font-weight: 600; }
.mln-seasonal-note { color: var(--mln-text-muted); font-size: 0.85rem; }

/* ---------- §1 Tier ladder dates ---------- */
.mln-tier-date {
    display: block;
    font-size: 0.65rem;
    color: var(--mln-text-muted);
    margin-top: 0.15rem;
}

/* ---------- §1 Bioregion pulse feed ---------- */
.mln-pulse-card { border-left: 3px solid var(--mln-mycelium-light, #c2d29a); }
.mln-pulse-tier-gate {
    background: var(--mln-text-light);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
}

/* ---------- Teacher Course Provider badge ---------- */
.mln-course-provider-badge {
    display: inline-block;
    background: var(--mln-mycelium, #6b8e23);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* ---------- Steward Match Inbox ---------- */
.mln-match-inbox-card { border-left: 3px solid #b58e3a; }
.mln-match-score {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 0.6rem;
    background: var(--mln-card-emphasis, #f0f4ea);
    color: var(--mln-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ---------- §5 Recognition tiles + opening matches ---------- */
.mln-recognition-tile { border-left: 3px solid var(--mln-mycelium, #6b8e23); }
.mln-opening-match    { border-left: 3px solid #b58e3a; }
.mln-tier-pill {
    display: inline-block;
    background: var(--mln-mycelium, #6b8e23);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 0.6rem;
    margin-left: 0.4rem;
}
.mln-impact-pill {
    display: inline-block;
    background: var(--mln-card-emphasis, #f0f4ea);
    color: var(--mln-text-muted);
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 0.6rem;
    margin-left: 0.4rem;
}

/* ---------- §4 Affiliation split (operate-as vs member) ---------- */
.mln-section4-subhead {
    font-family: var(--mln-font-display);
    font-size: 1rem;
    color: var(--mln-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.5rem 0 0.5rem;
}
.mln-affiliation-operate-as {
    border-left: 4px solid var(--mln-mycelium, #6b8e23);
    background: var(--mln-card-emphasis, #f6faf2);
}
.mln-affiliation-member {
    border-left: 3px solid var(--mln-text-light);
}
.mln-affiliation-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mln-affiliation-badge-operate-as {
    background: var(--mln-mycelium, #6b8e23);
    color: #fff;
}
.mln-member-grid { margin-top: 0.5rem; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .mln-portal-topbar { padding: 0.5rem 1rem; }
    .mln-portal-main   { padding: 1rem; }
    .mln-portal-hero   { padding: 1.5rem 1rem; }
    .mln-portal-hero h1 { font-size: 1.5rem; }
    .mln-portal-brand-name { display: none; }
    .mln-auth-container { margin: 1rem; padding: 1.5rem; }
}


/* ============================================================================
 * V0.8 MOCKUP DESIGN SYSTEM — appended from temp-files/mockup-in-java
 * Adds:  --{engine,mln,uci,kosmos,archive,funder,ambass}-{main,bg,border,light}
 *        palette tokens and component classes (.card, .tag, .profile-chip,
 *        .section-header, .hero-band, .metric-row, .audit-row, etc.) used by
 *        the new tab-bar portal frame and the four lens screens.
 *
 * Coexists with the original portal-theme classes above (no overrides at
 * matching selectors). The mockup-defined classes are scoped to the portal
 * pages by virtue of their CSS class names (no body-tag overrides).
 * ============================================================================ */


:root {
    /* ---- Base palette ---- */
    --bg: #faf8f5;
    --surface: #ffffff;
    --surface-alt: #fdfbf7;
    --text: #2c2416;
    --text-muted: #6b5e4f;
    --text-light: #9a8d7e;
    --divider: #ece4d6;
    --div-soft: #f0e9dc;

    /* ---- Engine (warm amber — primary brand) ---- */
    --engine-main: #b45309;
    --engine-bg: #fef3e2;
    --engine-border: #e8a549;
    --engine-light: #fdf6ec;

    /* ---- MLN (forest green — land/steward) ---- */
    --mln-main: #1a6847;
    --mln-tint-bg: #e8f5ee;
    --mln-border: #4aad7a;
    --mln-light: #f0f9f4;

    /* ---- UCI (blue — institutional) ---- */
    --uci-main: #2d5a8e;
    --uci-bg: #e8f0f8;
    --uci-border: #5a8ec2;
    --uci-light: #f0f5fb;

    /* ---- Kosmos (clay brown — partner) ---- */
    --kosmos-main: #7a4b2a;
    --kosmos-bg: #f5ede5;
    --kosmos-border: #b8875e;
    --kosmos-light: #faf4ee;

    /* ---- Archive (gold — reference / structure) ---- */
    --archive-main: #8b6914;
    --archive-bg: #fdf8ea;
    --archive-border: #d4a94a;
    --archive-light: #fefbf2;

    /* ---- Funder (purple) ---- */
    --funder-main: #6b3d8a;
    --funder-bg: #f1e9f5;
    --funder-border: #a37bc0;
    --funder-light: #f7f1fa;

    /* ---- Ambassador (sage green) ---- */
    --ambass-main: #385e3c;
    --ambass-bg: #e8efe9;
    --ambass-border: #7ba07f;
    --ambass-light: #eff4ef;

    /* ---- Flow / system ---- */
    --flow: #c4b49a;
    --flow-active: #8b7355;
    --warning: #a05a2c;
    --warning-bg: #fdf1e6;

    /* ---- Typography ---- */
    --font-display: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;
    --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;
}

/* =============================================================
   Global reset (scoped to portal so we don't fight PrimeFaces)
   ============================================================= */

body.mycelium-portal {
    margin: 0;
    background: var(--bg);
    font-family: var(--font-body);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.mycelium-portal * {
    box-sizing: border-box;
}

.mycelium-portal .portal-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 28px 48px 28px;
}

/* =============================================================
   Title block (top of page)
   ============================================================= */

.portal-title {
    text-align: center;
    margin-bottom: 28px;
}

.portal-title-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.portal-title-h1 {
    font-size: 38px;
    font-family: var(--font-display);
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.portal-title-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin: 10px auto 0;
    line-height: 1.55;
    max-width: 660px;
}

/* =============================================================
   Tab navigation (overrides PrimeFaces TabView)
   ============================================================= */

.mycelium-portal .ui-tabs.ui-tabs-top > .ui-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
}

.mycelium-portal .ui-tabs.ui-tabs-top > .ui-tabs-nav li {
    background: transparent;
    border: 1px solid var(--divider);
    border-radius: 4px;
    margin: 0;
}

.mycelium-portal .ui-tabs.ui-tabs-top > .ui-tabs-nav li > a {
    padding: 10px 16px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-muted);
    letter-spacing: 0.02em;
    border: 0;
    background: transparent;
}

.mycelium-portal .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-state-active {
    background: var(--engine-main);
    border-color: var(--engine-main);
}

.mycelium-portal .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-state-active > a {
    color: #fff;
}

.mycelium-portal .ui-tabs .ui-tabs-panels {
    background: transparent;
    border: 0;
    padding: 0;
}

.mycelium-portal .ui-tabs .ui-tabs-panel {
    padding: 0;
}

/* Group divider in tab nav */
.tab-group-divider {
    width: 1px;
    height: 22px;
    background: var(--divider);
    margin: 0 6px;
    align-self: center;
}

/* =============================================================
   Hero band
   ============================================================= */

.hero-band {
    position: relative;
    border-radius: 6px;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--divider);
    background-size: cover;
    background-position: center 60%;
}

.hero-band--photo {
    height: 140px;
}

.hero-band--photo.h-100 { height: 100px; }
.hero-band--photo.h-130 { height: 130px; }
.hero-band--photo.h-150 { height: 150px; }

.hero-band-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(250,248,245,0.05) 0%, rgba(250,248,245,0.55) 100%);
}

.hero-band-content {
    position: relative;
    z-index: 1;
    padding: 18px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.hero-band-caption {
    font-size: 11px;
    color: #fff;
    font-style: italic;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(40,30,20,0.6);
}

/* Placeholder hero (dashed) */
.hero-band--placeholder {
    background: repeating-linear-gradient(
        45deg,
        var(--engine-light) 0,
        var(--engine-light) 8px,
        var(--surface-alt) 8px,
        var(--surface-alt) 16px
    );
    border: 2px dashed var(--engine-border);
}

.hero-placeholder-tag {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    color: var(--engine-main);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--surface);
    border: 1px solid var(--engine-border);
    padding: 3px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
}

.hero-placeholder-mood {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    font-size: 9.5px;
    color: var(--text-muted);
    font-style: italic;
    background: var(--surface);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid var(--divider);
    max-width: 360px;
    line-height: 1.4;
}

.hero-placeholder-caption {
    position: relative;
    z-index: 1;
    padding: 18px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    color: var(--text);
    font-size: 11px;
    font-style: italic;
    letter-spacing: 0.04em;
}

/* =============================================================
   Screen header (eyebrow + title + subtitle + right chip)
   ============================================================= */

.screen-header {
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.screen-header-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: var(--engine-main);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.screen-header-title {
    font-size: 28px;
    font-family: var(--font-display);
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 6px;
}

.screen-header-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 720px;
}

/* =============================================================
   Section header (within a screen)
   ============================================================= */

.section-header {
    padding-top: 18px;
    padding-bottom: 14px;
    border-top: 1px solid var(--div-soft);
    margin-bottom: 14px;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.section-header-main { flex: 1; }

.section-header-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: var(--engine-main);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.section-header-title {
    font-size: 22px;
    font-family: var(--font-display);
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.2;
    margin-bottom: 6px;
}

.section-header-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 760px;
}

.section-header-help {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--engine-main);
    white-space: nowrap;
    padding-top: 4px;
}

/* =============================================================
   Card
   ============================================================= */

.card {
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 14px;
}

.card--accent-engine  { border-top: 3px solid var(--engine-main); }
.card--accent-mln     { border-top: 3px solid var(--mln-main); }
.card--accent-archive { border-top: 3px solid var(--archive-main); }
.card--accent-uci     { border-top: 3px solid var(--uci-main); }
.card--accent-funder  { border-top: 3px solid var(--funder-main); }
.card--accent-ambass  { border-top: 3px solid var(--ambass-main); }
.card--accent-warning { border-top: 3px solid var(--warning); }

.card-title {
    margin-bottom: 14px;
}

.card-title-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 4px;
}

.card-title-h {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-body);
}

.card-title-h.color-engine  { color: var(--engine-main); }
.card-title-h.color-mln     { color: var(--mln-main); }
.card-title-h.color-archive { color: var(--archive-main); }
.card-title-h.color-uci     { color: var(--uci-main); }
.card-title-h.color-funder  { color: var(--funder-main); }
.card-title-h.color-ambass  { color: var(--ambass-main); }
.card-title-h.color-warning { color: var(--warning); }

/* =============================================================
   Tag
   ============================================================= */

.tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.2;
    border: 1px solid;
}

.tag--engine  { color: var(--engine-main);  background: var(--engine-bg);  border-color: rgba(232,165,73,0.55); }
.tag--mln     { color: var(--mln-main);     background: var(--mln-tint-bg); border-color: rgba(74,173,122,0.55); }
.tag--uci     { color: var(--uci-main);     background: var(--uci-bg);     border-color: rgba(90,142,194,0.55); }
.tag--kosmos  { color: var(--kosmos-main);  background: var(--kosmos-bg);  border-color: rgba(184,135,94,0.55); }
.tag--archive { color: var(--archive-main); background: var(--archive-bg); border-color: rgba(212,169,74,0.55); }
.tag--funder  { color: var(--funder-main);  background: var(--funder-bg);  border-color: rgba(163,123,192,0.55); }
.tag--ambass  { color: var(--ambass-main);  background: var(--ambass-bg);  border-color: rgba(123,160,127,0.55); }

.tag--filled.tag--engine  { color: #fff; background: var(--engine-main);  border-color: var(--engine-main); }
.tag--filled.tag--mln     { color: #fff; background: var(--mln-main);     border-color: var(--mln-main); }
.tag--filled.tag--uci     { color: #fff; background: var(--uci-main);     border-color: var(--uci-main); }
.tag--filled.tag--kosmos  { color: #fff; background: var(--kosmos-main);  border-color: var(--kosmos-main); }
.tag--filled.tag--archive { color: #fff; background: var(--archive-main); border-color: var(--archive-main); }
.tag--filled.tag--funder  { color: #fff; background: var(--funder-main);  border-color: var(--funder-main); }
.tag--filled.tag--ambass  { color: #fff; background: var(--ambass-main);  border-color: var(--ambass-main); }

/* =============================================================
   Mini-bar (used in metric rows)
   ============================================================= */

.mini-bar { margin-bottom: 10px; }
.mini-bar-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 3px;
    color: var(--text-muted);
}
.mini-bar-row b { font-weight: 600; }
.mini-bar-row b.color-engine { color: var(--engine-main); }
.mini-bar-row b.color-mln { color: var(--mln-main); }

.mini-bar-track {
    height: 5px;
    background: var(--div-soft);
    border-radius: 3px;
    overflow: hidden;
}
.mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--engine-main);
}
.mini-bar-fill.color-mln { background: var(--mln-main); }

/* =============================================================
   Crumb / FlowBadge / Meta
   ============================================================= */

.crumb {
    font-size: 10px;
    color: var(--text-light);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.flow-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-style: italic;
    background: var(--engine-light);
    color: var(--engine-main);
    padding: 3px 7px;
    border-radius: 3px;
    border: 1px dashed rgba(232,165,73,0.4);
}

.flow-badge.color-mln {
    color: var(--mln-main);
    background: var(--mln-light);
    border-color: rgba(74,173,122,0.4);
}

/* =============================================================
   Meaning strip (icon + label + body, left-rule)
   ============================================================= */

.meaning-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--archive-light);
    border: 1px solid rgba(212,169,74,0.33);
    border-left: 3px solid var(--archive-main);
    border-radius: 4px;
    margin-bottom: 14px;
}

.meaning-strip-icon {
    font-size: 14px;
    color: var(--archive-main);
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 1px;
    font-weight: 700;
}

.meaning-strip-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--archive-main);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.meaning-strip-body {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* =============================================================
   Action chip (icon + label + hint card)
   ============================================================= */

.action-chip {
    flex: 1;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid rgba(232,165,73,0.33);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-chip-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-chip-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--engine-bg);
    border: 1px solid var(--engine-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--engine-main);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: var(--font-display);
}

.action-chip-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
}

.action-chip-hint {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.5;
    padding-left: 34px;
}

/* =============================================================
   Profile chip (currently operating-as)
   ============================================================= */

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 5px;
    background: var(--engine-light);
    border: 1px solid rgba(232,165,73,0.4);
    cursor: pointer;
    text-decoration: none !important;
    color: var(--text, #2c2416);
}
.profile-chip:hover {
    text-decoration: none !important;
    filter: brightness(0.97);
}

.profile-chip.color-mln    { background: var(--mln-light);    border-color: rgba(74,173,122,0.4); }
.profile-chip.color-funder { background: var(--funder-light); border-color: rgba(163,123,192,0.4); }

.profile-chip-logo {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--engine-bg);
    border: 1px solid var(--engine-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--engine-main);
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--font-display);
    flex-shrink: 0;
    overflow: hidden;
}

.profile-chip-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-chip-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--engine-main);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-chip.color-mln    .profile-chip-eyebrow { color: var(--mln-main); }
.profile-chip.color-funder .profile-chip-eyebrow { color: var(--funder-main); }

.profile-chip-name {
    font-size: 11.5px;
    font-weight: 600;
}

.profile-chip-caret {
    font-size: 20px;
    opacity: 0.7;
    line-height: 1;
}

/* =============================================================
   Avatar / logo placeholder (dashed, with initials)
   ============================================================= */

.avatar-placeholder {
    border-radius: 50%;
    background: var(--engine-bg);
    border: 1.5px dashed var(--engine-border);
    color: var(--engine-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-display);
    flex-shrink: 0;
}

.logo-placeholder {
    border-radius: 6px;
    background: var(--mln-light);
    border: 1.5px dashed var(--mln-border);
    color: var(--mln-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-display);
    flex-shrink: 0;
    position: relative;
}

.logo-placeholder--mono {
    background: var(--archive-light);
    border-color: var(--archive-border);
    color: var(--archive-main);
}

.logo-placeholder-variant-tag {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 6.5px;
    font-family: var(--font-mono);
    color: inherit;
    opacity: 0.55;
    line-height: 1;
    letter-spacing: 0.05em;
}

/* =============================================================
   Three-layer identity model (ProfilePicker)
   ============================================================= */

.layer-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 12px;
}

.layer-card {
    padding: 14px;
    border-radius: 5px;
    border: 1px solid;
    border-left-width: 3px;
}

.layer-card--engine  { background: var(--engine-light);  border-color: rgba(232,165,73,0.33);   border-left-color: var(--engine-main); }
.layer-card--archive { background: var(--archive-light); border-color: rgba(212,169,74,0.33);   border-left-color: var(--archive-main); }
.layer-card--mln     { background: var(--mln-light);     border-color: rgba(74,173,122,0.33);   border-left-color: var(--mln-main); }

.layer-card-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.layer-card--engine  .layer-card-eyebrow { color: var(--engine-main); }
.layer-card--archive .layer-card-eyebrow { color: var(--archive-main); }
.layer-card--mln     .layer-card-eyebrow { color: var(--mln-main); }

.layer-card-h {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.layer-card-body {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

.layer-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 18px;
    font-weight: 700;
}

.layer-explainer-foot {
    padding: 10px 14px;
    background: var(--surface-alt);
    border-radius: 4px;
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.55;
    font-style: italic;
}

.layer-explainer-foot b {
    font-weight: 700;
    font-style: normal;
}

/* =============================================================
   Operate-as profile cards (3-up grid in ProfilePicker)
   ============================================================= */

.profiles-row-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}

.profiles-row-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profiles-row-aside {
    font-size: 10px;
    color: var(--text-light);
    font-style: italic;
}

.profiles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.profile-card {
    background: var(--surface);
    border: 1.5px solid;
    border-radius: 6px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    position: relative;
    transition: all 0.15s;
    width: 100%;
}

.profile-card.profile-card--engine  { border-color: rgba(232,165,73,0.4); }
.profile-card.profile-card--mln     { border-color: rgba(74,173,122,0.4); }
.profile-card.profile-card--funder  { border-color: rgba(163,123,192,0.4); }

.profile-card.profile-card--current { border-width: 2px; }
.profile-card.profile-card--current.profile-card--engine  { border-color: var(--engine-main);  box-shadow: 0 0 0 4px var(--engine-bg); }
.profile-card.profile-card--current.profile-card--mln     { border-color: var(--mln-main);     box-shadow: 0 0 0 4px var(--mln-tint-bg); }
.profile-card.profile-card--current.profile-card--funder  { border-color: var(--funder-main);  box-shadow: 0 0 0 4px var(--funder-bg); }

.profile-card-currentTag {
    position: absolute;
    top: -10px;
    left: 12px;
    padding: 2px 8px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 3px;
}

.profile-card-currentTag.color-engine { background: var(--engine-main); }
.profile-card-currentTag.color-mln    { background: var(--mln-main); }
.profile-card-currentTag.color-funder { background: var(--funder-main); }

.profile-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.profile-card-logo {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--engine-bg);
    border: 1px solid var(--engine-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--engine-main);
}

.profile-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-card-typeline {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-light);
    text-transform: uppercase;
}

.profile-card-name {
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
}

.profile-card-name.color-engine { color: var(--engine-main); }
.profile-card-name.color-mln    { color: var(--mln-main); }
.profile-card-name.color-funder { color: var(--funder-main); }

.profile-card-role {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.profile-card-role b { font-weight: 600; }
.profile-card-role b.color-engine { color: var(--engine-main); }
.profile-card-role b.color-mln    { color: var(--mln-main); }
.profile-card-role b.color-funder { color: var(--funder-main); }

.profile-card-scope {
    font-size: 9.5px;
    color: var(--text-light);
    font-family: var(--font-mono);
    background: var(--surface-alt);
    padding: 5px 8px;
    border-radius: 3px;
    margin-bottom: 10px;
    border: 1px solid var(--div-soft);
    line-height: 1.4;
}

.profile-card-flight {
    font-size: 10.5px;
    color: var(--text);
    line-height: 1.5;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--div-soft);
    margin-bottom: 10px;
}

.profile-card-flight b { font-weight: 600; }
.profile-card-flight b.color-engine { color: var(--engine-main); }
.profile-card-flight b.color-mln    { color: var(--mln-main); }
.profile-card-flight b.color-funder { color: var(--funder-main); }
.profile-card-flight span { color: var(--text-muted); }

.profile-card-foot {
    font-size: 9.5px;
    color: var(--text-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-card-foot em { font-style: italic; }
.profile-card-foot b { font-weight: 600; }
.profile-card-foot b.color-engine { color: var(--engine-main); }
.profile-card-foot b.color-mln    { color: var(--mln-main); }
.profile-card-foot b.color-funder { color: var(--funder-main); }

/* =============================================================
   Pending affiliations list
   ============================================================= */

.pending-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--div-soft);
}

.pending-row:first-of-type {
    border-top: 0;
}

.pending-target {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
}

.pending-scope {
    font-size: 9.5px;
    color: var(--text-light);
    font-family: var(--font-mono);
    background: var(--surface-alt);
    padding: 3px 7px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid var(--div-soft);
}

.pending-status {
    font-size: 11px;
    color: var(--warning);
    font-weight: 600;
    margin-bottom: 2px;
}

.pending-initiated {
    font-size: 9.5px;
    color: var(--text-light);
    font-style: italic;
}

.btn-row { display: flex; gap: 6px; }

.btn-primary,
.btn-secondary {
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    color: #fff;
    background: var(--engine-main);
    border-color: var(--engine-main);
}

.btn-primary.color-uci    { background: var(--uci-main);    border-color: var(--uci-main); }
.btn-primary.color-kosmos { background: var(--kosmos-main); border-color: var(--kosmos-main); }
.btn-primary.color-mln    { background: var(--mln-main);    border-color: var(--mln-main); }

.btn-secondary {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--divider);
}

.btn-link {
    background: transparent;
    border: 1px dashed var(--engine-border);
    color: var(--engine-main);
    width: 100%;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
}

/* =============================================================
   Linked accounts + audit grid
   ============================================================= */

.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.three-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.fourteen-col-1fr {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}

.linked-acct-box {
    padding: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--div-soft);
    border-radius: 4px;
    margin-bottom: 10px;
}

.linked-acct-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.linked-acct-email {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-mono);
}

.linked-acct-meta {
    font-size: 9.5px;
    color: var(--text-light);
    margin-top: 2px;
}

/* Audit row */
.audit-row {
    padding: 8px 0;
    border-top: 1px solid var(--div-soft);
    font-size: 10.5px;
}

.audit-row:first-of-type { border-top: 0; }

.audit-row-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.audit-row-from {
    font-weight: 600;
    color: var(--text);
}

.audit-row-when {
    font-size: 9.5px;
    color: var(--text-light);
    font-style: italic;
}

.audit-row-action {
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 3px;
}

.audit-row-tag {
    font-size: 9px;
    font-family: var(--font-mono);
    color: var(--text-light);
    background: var(--surface-alt);
    padding: 2px 6px;
    border-radius: 2px;
    display: inline-block;
    border: 1px solid var(--div-soft);
}

/* =============================================================
   Account header card (logged-in row)
   ============================================================= */

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.account-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--engine-bg);
    border: 1.5px solid var(--engine-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--engine-main);
    font-family: var(--font-display);
}

.account-layer-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.account-layer-line {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.account-layer-line code {
    color: var(--engine-main);
    font-family: var(--font-mono);
    font-size: 12px;
}

.account-meta {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 3px;
}

.account-meta a {
    color: var(--engine-main);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

/* =============================================================
   Metric (label + big value)
   ============================================================= */

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
}

.metric-label {
    font-size: 11px;
    color: var(--text-muted);
}

.metric-value {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--engine-main);
    line-height: 1;
}

.metric-value.color-mln    { color: var(--mln-main); }
.metric-value.color-funder { color: var(--funder-main); }

/* =============================================================
   Aim block (italic quote with side rule)
   ============================================================= */

.aim-quote {
    padding: 12px 16px;
    background: var(--mln-light);
    border-left: 3px solid var(--mln-main);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 14px;
}

.subheading {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    margin-top: 8px;
}

.tag-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* =============================================================
   Trust tier callout
   ============================================================= */

.trust-callout {
    margin-top: 14px;
    padding: 12px;
    background: var(--mln-light);
    border: 1px solid rgba(74,173,122,0.33);
    border-radius: 5px;
}

.trust-callout-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.trust-callout-body {
    font-size: 11.5px;
    color: var(--text);
    line-height: 1.5;
}

.trust-callout-body strong { color: var(--mln-main); }

/* =============================================================
   ScreenComingSoon (full-card empty state)
   ============================================================= */

.coming-soon-card {
    background: var(--surface);
    border: 1px solid var(--divider);
    border-top: 3px solid var(--engine-main);
    border-radius: 6px;
    padding: 32px;
    text-align: center;
}

.coming-soon-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: var(--engine-main);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.coming-soon-title {
    font-size: 22px;
    font-family: var(--font-display);
    color: var(--text);
    line-height: 1.25;
    margin: 0 auto 14px;
    max-width: 620px;
}

.coming-soon-body {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto;
}

.coming-soon-aside {
    margin-top: 26px;
    padding: 14px 18px;
    background: var(--surface-alt);
    border: 1px dashed var(--divider);
    border-radius: 5px;
    max-width: 480px;
    margin: 26px auto 0;
    text-align: left;
}

.coming-soon-aside-eyebrow {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.coming-soon-aside-body {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* =============================================================
   Footer
   ============================================================= */

.portal-footer {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--divider);
    text-align: center;
    font-size: 10px;
    color: var(--text-light);
    letter-spacing: 0.05em;
}

/* =============================================================
   Utility helpers
   ============================================================= */

.flex-row { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-start { display: flex; align-items: flex-start; }
.flex-end { display: flex; align-items: flex-end; }
.gap-6 { gap: 6px; }
.gap-10 { gap: 10px; }
.gap-14 { gap: 14px; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.mb-18 { margin-bottom: 18px; }
.mb-24 { margin-bottom: 24px; }
.mt-12 { margin-top: 12px; }
.text-mono { font-family: var(--font-mono); }
.text-italic { font-style: italic; }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }

/* Right-aligned chip in screen header */
.screen-header-aside { padding-top: 4px; }


/* ============================================================================
 * Mycelium One additions on top of the v0.8 mockup design system
 * - Tab bar (.mln-portal-tabbar)
 * - Field-tooltip info icon (.mln-field-info)
 * - Section subtitle (.mln-section-subtitle)
 * - Back pill on detail pages exists in detail-page.css (admin), not here.
 * ============================================================================ */

/* ---- Persistent top tab bar (sits below the topbar) ---- */
.mln-portal-tabbar {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 18px 16px 0;
    margin: 0 auto 14px;
    max-width: 1180px;
    flex-wrap: wrap;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid var(--mln-divider);
}

.mln-portal-tabbar form { margin: 0; display: contents; }

.mln-portal-tabbar .ui-button,
.mln-portal-tab {
    padding: 14px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    /* Unselected tab — lighter tint of the active color so the tab strip
       reads as a cohesive group with the selected tab as the strongest. */
    background: var(--mln-light, #f0f9f4) !important;
    color: var(--mln-text-muted, #6b5e4f) !important;
    border: 1px solid var(--mln-divider, #ece4d6) !important;
    border-radius: 6px !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 10px;
    /* Tabs are <a> elements; kill the default underline whether hovered or not. */
    text-decoration: none !important;
}

.mln-portal-tabbar .ui-button:hover,
.mln-portal-tab:hover {
    /* Hover bumps the tab to a mid-tone between the lighter unselected and the
       full-color active state — and keeps no underline. */
    background: var(--mln-tint-bg, #e8f5ee) !important;
    color: var(--mln-main, #1a6847) !important;
    text-decoration: none !important;
}

.mln-portal-tab--active,
.mln-portal-tabbar .ui-button.mln-portal-tab--active {
    background: var(--mln-engine, #b45309) !important;
    color: #fff !important;
    border-color: var(--mln-engine, #b45309) !important;
    text-decoration: none !important;
}

.mln-portal-tab--active:hover,
.mln-portal-tabbar .ui-button.mln-portal-tab--active:hover {
    /* Keep the active tab anchored to its full color even on hover. */
    background: var(--mln-engine, #b45309) !important;
    color: #fff !important;
}

.mln-portal-tab--comingsoon {
    font-style: italic;
    color: var(--mln-text-light, #9a8d7e) !important;
}

/* Group divider — between identity and practical tab groups */
.mln-portal-tabbar .tab-group-divider {
    width: 1px;
    height: 22px;
    background: var(--mln-divider, #ece4d6);
    margin: 0 6px;
    align-self: center;
}

/* ---- Field info icon (paired with PrimeFaces p:tooltip) ---- */
.mln-field-info {
    font-size: 0.85em;
    color: var(--mln-text-light, #9a8d7e);
    margin-left: 6px;
    cursor: help;
    vertical-align: baseline;
    transition: color 0.15s ease;
}
.mln-field-info:hover,
.mln-field-info:focus {
    color: var(--mln-engine, #b45309);
    outline: none;
}

/* ---- Section subtitle (one line under H2 on Trajectory / Snapshot etc.) ---- */
.mln-section-subtitle {
    font-size: 0.92rem;
    color: var(--mln-text-muted, #6b5e4f);
    line-height: 1.5;
    max-width: 760px;
    margin: 0.25rem 0 1rem;
    font-style: italic;
}

/* inputNumber and inputDate helpers */
.inputNumber > .ui-inputnumber > input, .inputDate > .ui-calendar > .hasDatepicker {
    width: 100%;
}
/* =============================================================
   EPIC B.2/B.4 — seat switcher, quick links, and claim surface
   ============================================================= */

.mln-seat-switcher-row {
    max-width: 1180px;
    margin: 0 auto 14px;
    padding: 8px 16px 0;
}
.mln-seat-switcher-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* V1.2 — the acting-as chip is the FIRST row and the tabs sit beneath it
       (V1.1 had the reverse). Both blocks are flex-basis:100%, so each claims a
       full row and DOM order decides which comes first; each centers its own
       contents. Reordering is therefore a markup change in
       portal-seat-switcher.xhtml, not a CSS one. */
    justify-content: center;
    gap: 12px;
}
.mln-seat-switcher-form .mln-seat-actingas {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
}
.mln-seat-switcher-form .mln-seat-quicklinks { flex-basis: 100%; justify-content: center; }
.mln-seat-trigger { min-width: 200px; }
.mln-seat-trigger-btn { font-weight: 600; }

/* Dropdown overlay list */
.mln-seat-overlay { padding: 6px; min-width: 320px; max-width: 420px; }
.mln-seat-overlay-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mln-text-muted, #6b6152);
    padding: 6px 10px;
}
.mln-seat-list { list-style: none; margin: 0; padding: 0; }
.mln-seat-list li { margin: 0; }
.mln-seat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    text-decoration: none !important;
    color: var(--text, #2c2416);
    border-left: 3px solid transparent;
}
.mln-seat-item:hover { background: rgba(0,0,0,0.04); text-decoration: none !important; }
.mln-seat-item--active { background: var(--mln-light, rgba(26,104,71,0.10)); }
.mln-seat-item-icon { width: 22px; text-align: center; color: var(--mln-text-muted, #6b6152); flex-shrink: 0; }
.mln-seat-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mln-seat-item-name { font-size: 13px; font-weight: 600; }
.mln-seat-item-meta { font-size: 11px; color: var(--mln-text-muted, #6b6152); }
.mln-seat-item-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mln-seat-item-check { color: var(--mln-mln, #1a6847); font-weight: 700; }

.mln-seat-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
}
.mln-seat-badge--edit { background: rgba(26,104,71,0.12); color: var(--mln-mln, #1a6847); }

/* Grid dialog cards reuse .mln-portal-picker-card; active gets a ring */
.mln-seat-grid .mln-portal-picker-card { height: 100%; }
.mln-seat-card--active { box-shadow: 0 0 0 2px var(--mln-mln, #1a6847) inset; }

/* Quick links row (replaces the old always-on tabs) */
.mln-seat-quicklinks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mln-seat-quicklink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    color: var(--mln-text-muted, #6b6152);
}
.mln-seat-quicklink:hover { background: rgba(0,0,0,0.05); color: var(--text, #2c2416); }
.mln-seat-quicklink--accent { color: var(--mln-mln, #1a6847); font-weight: 600; }
/* V1.1 — current-page indicator, derived from the request path (portalShell.tabActive).
   Distinct from --accent (a text-only CTA): the active tab gets a soft green pill so the
   clicked tab clearly becomes active and "Overview" is no longer permanently highlighted. */
.mln-seat-quicklink.is-active {
    color: var(--mln-mln, #1a6847);
    font-weight: 700;
    background: var(--mln-light, rgba(26,104,71,0.12));
}
.mln-seat-quicklink.is-active:hover { background: var(--mln-light, rgba(26,104,71,0.18)); color: var(--mln-mln, #1a6847); }
/* Overview renders as a p:commandLink (.ui-commandlink) whose theme link color
   would override the muted quicklink color; pin it so inactive Overview matches
   its plain-anchor siblings and only the active pill is emphasized. */
.mln-seat-switcher-row .mln-seat-quicklink.ui-commandlink { color: var(--mln-text-muted, #6b6152); }
.mln-seat-switcher-row .mln-seat-quicklink.ui-commandlink.is-active { color: var(--mln-mln, #1a6847); }

/* Claim surface */
.mln-claim-wrap { max-width: 820px; margin: 0 auto; }
.mln-claim-card {
    background: #fff;
    border: 1px solid var(--mln-border, #e5e0d6);
    border-radius: 10px;
    padding: 22px 24px;
    margin: 16px 0;
}
.mln-claim-card h2 { font-family: var(--mln-font-display); margin: 0 0 4px; font-size: 1.2rem; }
.mln-claim-field { margin: 18px 0; display: flex; flex-direction: column; gap: 6px; }
.mln-claim-submit { margin-top: 4px; }
.mln-claim-note { color: var(--mln-text-muted, #6b6152); font-size: 12.5px; margin-top: 12px; }
.mln-claim-table { margin-top: 8px; }

/* Specificity bump — Diamond base styles `ul` inside content panels; ensure
   the seat list stays flush + unbulleted inside the overlay. */
.mln-seat-overlay ul.mln-seat-list { list-style: none; margin: 0; padding: 0; }
.mln-seat-overlay ul.mln-seat-list li { list-style: none; margin: 0; }
.mln-seat-overlay .mln-seat-item { display: flex; align-items: center; gap: 10px; }

/* =============================================================
   EPIC B.8 — data-sovereignty panel + directory-visible toggle
   ============================================================= */
.mln-sovereignty .mln-sov-count {
    font-size: 12px; font-weight: 600; color: var(--mln-mln, #1a6847);
    margin-left: 8px;
}
.mln-sov-row { display: flex; flex-direction: column; gap: 6px; }
.mln-sov-head { display: flex; align-items: center; gap: 10px; }
.mln-sov-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(26,104,71,0.12); color: var(--mln-mln, #1a6847);
}
.mln-sov-value { font-size: 13px; }
.mln-sov-novalue { font-style: italic; opacity: 0.7; }
.mln-sov-controls { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mln-sov-annot { flex: 1; min-width: 220px; }
.mln-directory-visible { border-left: 3px solid var(--mln-mln, #1a6847); }

/* E.5 — verified-data report tiers (findings / sourced / self-reported) */
.mln-report-metric { display: flex; align-items: baseline; gap: 10px; }
.mln-report-metric-num { font-size: 28px; font-weight: 800; color: var(--mln-mln, #1a6847); }
.mln-report-tier { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mln-text-muted, #6b5e4f); margin: 18px 0 6px; }
.mln-report-row { border-left: 3px solid var(--mln-divider, #e5e2da); }
.mln-report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mln-report-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.mln-report-badge-verified { background: rgba(26,104,71,0.12); color: var(--mln-mln, #1a6847); }
.mln-report-badge-sourced { background: rgba(45,90,142,0.12); color: var(--mln-uci, #2d5a8e); }
.mln-report-badge-selfreported { background: rgba(180,83,9,0.12); color: var(--mln-engine, #b45309); }

/* =============================================================
   EPIC B.5 — Light / Dim / Dark schemes (flip CSS variables).
   The portal is ~98% var()-driven, so overriding the neutral
   variables on the body re-themes the whole surface.
   ============================================================= */
.mln-scheme-dark {
    --bg: #14170f; --surface: #1c2018; --surface-alt: #22271d;
    --text: #e9e4d6; --text-muted: #a89e8c; --text-light: #7d7364;
    --divider: #2e3428; --div-soft: #262b20;
    --mln-bg: #14170f; --mln-surface: #1c2018; --mln-text: #e9e4d6;
    --mln-text-muted: #a89e8c; --mln-text-light: #7d7364; --mln-divider: #2e3428;
    --engine-light: #2a2113; --engine-bg: #2a2113;
    --mln-light: #16241c; --mln-tint-bg: #16241c;
    --uci-light: #152030; --uci-bg: #152030;
    --kosmos-light: #241a12; --kosmos-bg: #241a12;
    background: var(--bg); color: var(--text);
}
.mln-scheme-dim {
    --bg: #2b2a26; --surface: #33322d; --surface-alt: #3a3833;
    --text: #ece7db; --text-muted: #b3ab9a; --text-light: #8d8474;
    --divider: #403e37; --div-soft: #3a3833;
    --mln-bg: #2b2a26; --mln-surface: #33322d; --mln-text: #ece7db;
    --mln-text-muted: #b3ab9a; --mln-divider: #403e37;
    --engine-light: #3a3020; --mln-light: #24312a; --uci-light: #232e3a; --kosmos-light: #322820;
    background: var(--bg); color: var(--text);
}
/* keep cards/topbar reading the surface variable in every scheme */
.mln-scheme-dark .mln-card, .mln-scheme-dim .mln-card,
.mln-scheme-dark .mln-portal-topbar, .mln-scheme-dim .mln-portal-topbar,
.mln-scheme-dark .mln-section, .mln-scheme-dim .mln-section {
    background: var(--surface); color: var(--text);
}

/* =============================================================
   EPIC B.6/B.7/B.10/B.11/B.12 — community / resources / roadmap
   ============================================================= */
.mln-community-wrap { max-width: 900px; margin: 0 auto; }
.mln-community-banner h1 { font-family: var(--mln-font-display); margin: 0 0 6px; }
.mln-community-lede { font-size: 1.05rem; margin: 0 0 6px; }

.mln-community-strip {
    display: flex; align-items: center; gap: 14px;
    max-width: 1180px; margin: 12px auto; padding: 14px 18px;
    border-radius: var(--mln-radius-lg, 8px);
    background: var(--mln-light, #f0f9f4);
    border: 1px solid var(--mln-border, #4aad7a);
    text-decoration: none !important; color: var(--text, #2c2416);
}
.mln-community-strip:hover { filter: brightness(0.98); }
.mln-community-strip-icon { font-size: 1.4rem; color: var(--mln-mln, #1a6847); }
.mln-community-strip-text { display: flex; flex-direction: column; flex: 1; }
.mln-community-strip-text strong { color: var(--mln-mln, #1a6847); }
.mln-community-strip-arrow { color: var(--mln-mln, #1a6847); }

.mln-notify-card { display: flex; flex-direction: column; gap: 8px; height: 100%; align-items: flex-start; }
.mln-notify-icon { font-size: 1.5rem; color: var(--mln-mln, #1a6847); }

/* Roadmap timeline */
.mln-roadmap { list-style: none; margin: 12px 0 0; padding: 0; }
.mln-roadmap-item { display: flex; gap: 14px; padding: 0 0 20px 4px; position: relative; }
.mln-roadmap-item:not(:last-child)::before {
    content: ""; position: absolute; left: 9px; top: 16px; bottom: 0;
    width: 2px; background: var(--divider, #ece4d6);
}
.mln-roadmap-dot {
    width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; flex-shrink: 0;
    z-index: 1; border: 2px solid var(--surface, #fff);
}
.mln-roadmap-shipped    .mln-roadmap-dot { background: var(--mln-mln, #1a6847); }
.mln-roadmap-in_progress .mln-roadmap-dot { background: var(--mln-engine, #b45309); }
.mln-roadmap-planned    .mln-roadmap-dot { background: var(--text-light, #9a8d7e); }
.mln-roadmap-content { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mln-roadmap-head { display: flex; align-items: center; gap: 10px; }
.mln-roadmap-status {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px;
}
.mln-roadmap-status-shipped     { background: rgba(26,104,71,0.12);  color: var(--mln-mln, #1a6847); }
.mln-roadmap-status-in_progress { background: rgba(180,83,9,0.12);   color: var(--mln-engine, #b45309); }
.mln-roadmap-status-planned     { background: rgba(154,141,126,0.15); color: var(--text-muted, #6b5e4f); }

/* Resource links */
.mln-resource-card {
    display: flex; align-items: center; gap: 12px; height: 100%;
    text-decoration: none !important; color: var(--text, #2c2416);
}
.mln-resource-card:hover { filter: brightness(0.98); }
.mln-resource-icon { font-size: 1.4rem; color: var(--mln-mln, #1a6847); flex-shrink: 0; }
.mln-resource-text { display: flex; flex-direction: column; flex: 1; }
.mln-resource-ext { color: var(--text-light, #9a8d7e); font-size: 0.85rem; }

/* =============================================================
   UP-3 — Mycelium Passport (immersive booklet with page turns)
   ============================================================= */
.mln-passport-head { margin-bottom: 12px; }
.mln-passport-count {
    font-size: 12px; font-weight: 600; color: var(--mln-mln, #1a6847); margin-left: 8px;
    background: var(--div-soft, #f0e9dc); border-radius: 999px; padding: 2px 10px;
}

/* Book shell — centres the passport and provides the 3D perspective. */
.mln-passport-book {
    max-width: 460px; margin: 4px auto 0; outline: none;
}

/* No-JS / pre-build fallback: a plain scrollable grid of stamps. */
.mln-passport-stage {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px; margin-top: 10px;
}

/* The 3D stage the sheets live in (portrait, passport-like). */
.mln-passport-viewport {
    position: relative; width: 100%; aspect-ratio: 3 / 4;
    perspective: 1800px; margin-top: 6px;
    /* V1.1 re-do — FLAT stacking context here (NOT preserve-3d): the sheets stack
       by z-index so the current page is always the visible top sheet. Each sheet
       keeps its OWN preserve-3d (below) for the two-face flip. Making the viewport
       preserve-3d put the coplanar sheets in one 3D space where z-index is ignored,
       so they z-fought — the current page's stamps vanished and only flashed at the
       end of a turn. perspective alone gives the flip its depth; z-index does the
       stacking. */
    transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.35, 1);
}
/* V1.1 — once a page is turned, slide the booklet right so the leaf swinging around
   the left spine reads as the left page of an open book instead of sprawling off the
   left edge onto the page background. */
.mln-passport-viewport.is-open { transform: translateX(50%); }

/* Each page is a sheet pinned at the left spine; turning rotates it away.
   P2 — backface-visibility moved to the two FACES (front/back) below; the sheet
   itself must stay visible through the whole turn so its back face can show. */
.mln-passport-sheet {
    position: absolute; inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.55, 0.05, 0.35, 1);
    border-radius: 4px 10px 10px 4px;
    box-shadow: 0 10px 26px rgba(20, 40, 30, 0.22);
}
.mln-passport-sheet.is-flipped { transform: rotateY(-180deg); }

/* The visible page surface — a parchment leaf bound at the spine.
   P2 — each sheet now has a front + back face, each hiding its own backface, so a
   flipped (left) page shows its back instead of vanishing. */
.mln-passport-face {
    position: absolute; inset: 0; overflow: hidden;
    display: flex; flex-direction: column;
    padding: 16px 16px 12px;
    border-radius: 4px 10px 10px 4px;
    backface-visibility: hidden;
    background:
        repeating-radial-gradient(circle at 18% 12%, rgba(26,104,71,0.05) 0 1px, transparent 1px 7px),
        linear-gradient(135deg, #fbf6ec 0%, #f3ead7 100%);
    border: 1px solid var(--divider, #ece4d6);
    border-left: 6px solid rgba(26,104,71,0.35); /* stitched spine */
}
/* P2 — the reverse of each leaf (shown once the page has turned to the left). A
   calm parchment back with a faded crest, so turned pages read as a real booklet. */
.mln-passport-face--back {
    transform: rotateY(180deg);
    align-items: center; justify-content: center; text-align: center; gap: 10px;
    border-left: 1px solid var(--divider, #ece4d6);
    border-right: 6px solid rgba(26,104,71,0.35); /* spine mirrors to the right when flipped */
    color: rgba(26,104,71,0.45);
}
.mln-passport-back-crest {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    color: rgba(26,104,71,0.4); border: 2px solid rgba(26,104,71,0.25);
}
.mln-passport-back-title {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; opacity: 0.7;
}
.mln-passport-page-header {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--mln-mln, #1a6847); font-weight: 700; opacity: 0.75;
    border-bottom: 1px dashed rgba(26,104,71,0.25); padding-bottom: 6px;
}
.mln-passport-page-grid {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr; gap: 10px; padding: 10px 2px; align-content: center;
}
.mln-passport-page-foot {
    font-size: 10px; color: var(--text-light, #9a8d7e); text-align: right;
    font-style: italic; border-top: 1px dashed rgba(26,104,71,0.2); padding-top: 6px;
}

/* Cover leaf — green "leather" with a gold crest. Scope to the FRONT face only so
   the cover's BACK stays the parchment back-face (matches the other leaves) when the
   cover is turned; otherwise the flipped cover showed a green back. */
.mln-passport-cover .mln-passport-face--front {
    align-items: center; justify-content: center; text-align: center; gap: 8px;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 6px),
        linear-gradient(160deg, #1f7d55 0%, #145038 100%);
    border-left: 6px solid rgba(0,0,0,0.25);
    color: #f6efdd;
}
.mln-passport-crest {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    color: #e9c96b; border: 2px solid #e9c96b;
    box-shadow: 0 0 0 4px rgba(233,201,107,0.18);
}
.mln-passport-cover-title { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.04em; }
.mln-passport-cover-tagline { font-size: 0.8rem; opacity: 0.85; max-width: 80%; }
.mln-passport-cover-holder { margin-top: 8px; font-weight: 700; }
.mln-passport-cover-count {
    font-size: 0.75rem; opacity: 0.85; letter-spacing: 0.08em;
    border: 1px solid rgba(233,201,107,0.6); border-radius: 999px; padding: 2px 12px;
}

/* Stamps on a page. */
.mln-passport-stamp {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    text-align: center; gap: 4px; padding: 6px 4px;
}
.mln-passport-badge {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    flex-shrink: 0;
}
.mln-passport-stamp.is-earned .mln-passport-badge {
    background: radial-gradient(circle at 30% 30%, #4aad7a, var(--mln-mln, #1a6847));
    color: #fff; border: 2px solid rgba(20,80,56,0.9);
    box-shadow: 0 3px 10px rgba(26,104,71,0.35), inset 0 0 0 3px rgba(255,255,255,0.25);
    transform: rotate(-8deg);
    animation: mln-stamp-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mln-passport-stamp.is-locked { opacity: 0.5; }
.mln-passport-stamp.is-locked .mln-passport-badge {
    background: transparent; color: var(--text-light, #9a8d7e);
    border: 2px dashed var(--text-light, #9a8d7e);
}
.mln-passport-label { font-weight: 700; font-size: 11.5px; line-height: 1.15; color: #33291d; }
.mln-passport-stamp.is-locked .mln-passport-label { color: var(--text-light, #9a8d7e); }
.mln-passport-desc {
    font-size: 9.5px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Navigation controls. */
.mln-passport-controls {
    display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px;
}
.mln-passport-btn {
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--divider, #ece4d6); background: var(--surface, #fff);
    color: var(--mln-mln, #1a6847); font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.mln-passport-btn:hover:not(:disabled) { background: var(--div-soft, #f0e9dc); transform: scale(1.06); }
.mln-passport-btn:disabled { opacity: 0.35; cursor: default; }
.mln-passport-pageno { font-size: 12px; font-weight: 600; color: var(--text-light, #9a8d7e); min-width: 44px; text-align: center; }

@keyframes mln-stamp-in {
    0%   { transform: scale(0.3) rotate(-30deg); opacity: 0; }
    100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}

/* Accessibility: no page-turn / stamp animation for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
    .mln-passport-sheet { transition: none; }
    .mln-passport-stamp.is-earned .mln-passport-badge { animation: none; }
    .mln-passport-btn { transition: none; }
}

/* ============================================================================
 * P4a — Profile Manager redesign. Calm identity header + "My profiles" cards as
 * the hero + a "How profiles work" explainer dialog + Activity tabs (pending +
 * history). Maps claude/prototypes/profile-manager-redesign.html to the
 * portal-theme tokens; scheme-aware via --surface/--text/--divider (redefined
 * per .mln-scheme-*). Revoke/withdraw actions preserved from the old screen.
 * ============================================================================ */
.mln-pm-wrap { max-width: 940px; margin: 0 auto; }

/* identity header */
.mln-pm-identity {
    display: flex; align-items: center; gap: 16px; margin-top: 4px;
    background: linear-gradient(135deg, var(--mln-mln), #0f4d34);
    color: #f3efe2; border-radius: 14px; padding: 18px 20px;
    box-shadow: 0 12px 30px rgba(20,40,30,0.14);
}
.mln-pm-avatar {
    width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; color: #fff;
    background: rgba(255,255,255,0.16); border: 2px solid rgba(255,255,255,0.35);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mln-font-display); font-size: 1.4rem; font-weight: 700;
}
.mln-pm-who { flex: 1; min-width: 0; }
.mln-pm-who h1 { font-family: var(--mln-font-display); font-size: 1.35rem; margin: 0; color: #fff; }
.mln-pm-email { opacity: 0.85; font-size: 0.9rem; margin: 2px 0 0; }
.mln-pm-badges { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mln-pm-badge {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 3px 9px;
    border-radius: 999px; background: rgba(255,255,255,0.16);
    display: inline-flex; align-items: center; gap: 5px;
}
.mln-pm-badge--verified { background: rgba(201,162,75,0.30); }
.mln-pm-help-btn.ui-button {
    border: 1px solid rgba(255,255,255,0.4) !important; background: transparent !important;
    color: #f3efe2 !important; border-radius: 8px !important; white-space: nowrap; flex: 0 0 auto;
}
.mln-pm-help-btn.ui-button:hover { background: rgba(255,255,255,0.12) !important; }

/* section heads */
.mln-pm-section-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 2px 12px; }
.mln-pm-section-head h2 { font-family: var(--mln-font-display); font-size: 1.15rem; margin: 0; color: var(--text, #2c2416); }
.mln-pm-count {
    color: var(--text-light, #9a8d7e); font-size: 0.78rem; font-weight: 700;
    background: var(--div-soft, #f0e9dc); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums;
}
.mln-pm-spacer { flex: 1; }
.mln-pm-link { color: var(--mln-mln); font-weight: 600; font-size: 0.85rem; text-decoration: none; }
.mln-pm-link:hover { text-decoration: underline; }

/* profiles grid — the hero */
.mln-pm-profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.mln-pm-card {
    position: relative; background: var(--surface, #fff); border: 1px solid var(--divider, #ece4d6);
    border-left: 4px solid var(--mln-mln); border-radius: 14px; padding: 16px 16px 16px 18px;
    box-shadow: 0 6px 18px rgba(20,40,30,0.05); display: flex; flex-direction: column;
}
.mln-pm-status {
    position: absolute; top: 14px; right: 14px; font-size: 0.62rem; font-weight: 700;
    padding: 3px 9px; border-radius: 999px;
}
.mln-pm-status--ok { background: rgba(26,104,71,0.12); color: var(--mln-main, #1a6847); }
.mln-pm-etype { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: var(--text-muted, #6b5e4f); }
.mln-pm-card h3 { font-family: var(--mln-font-display); font-size: 1.05rem; margin: 4px 0 2px; }
.mln-pm-role { font-size: 0.9rem; color: var(--text, #2c2416); }
.mln-pm-since { font-size: 0.78rem; color: var(--text-light, #9a8d7e); margin-top: 2px; }
.mln-pm-actions { display: flex; gap: 8px; margin-top: 14px; }

/* pm buttons (style the JSF-rendered commandlink/button too) */
.mln-pm-btn, a.mln-pm-btn {
    display: inline-flex; align-items: center; gap: 5px; border-radius: 8px;
    padding: 8px 13px; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-decoration: none; border: 0;
}
.mln-pm-btn--primary, a.mln-pm-btn--primary { background: var(--mln-mln) !important; color: #fff !important; border: 0 !important; }
.mln-pm-btn--primary:hover { filter: brightness(1.08); text-decoration: none; }
.mln-pm-btn--ghost.ui-button, .mln-pm-btn--ghost {
    background: transparent !important; color: var(--text-muted, #6b5e4f) !important;
    border: 1px solid var(--divider, #ece4d6) !important;
}
.mln-pm-btn--danger.ui-button, .mln-pm-btn--danger { color: #b4402c !important; }
.mln-pm-btn--danger.ui-button:hover, .mln-pm-btn--danger:hover { background: rgba(180,64,44,0.08) !important; }

/* empty / first-run */
.mln-pm-empty {
    background: var(--surface, #fff); border: 1px dashed var(--divider, #ece4d6); border-radius: 14px;
    padding: 30px; text-align: center; color: var(--text-muted, #6b5e4f);
}
.mln-pm-empty-big { font-size: 2rem; }
.mln-pm-empty h3 { font-family: var(--mln-font-display); color: var(--text, #2c2416); margin: 0.5rem 0 0.3rem; }
.mln-pm-empty .mln-pm-btn--primary { margin-top: 10px; }

/* activity tabview */
.mln-pm-activity.ui-tabs { border: 1px solid var(--divider, #ece4d6); border-radius: 14px; background: var(--surface, #fff); overflow: hidden; }
.mln-pm-tab-empty { padding: 6px 2px; color: var(--text-light, #9a8d7e); font-size: 0.88rem; }
.mln-pm-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--divider, #ece4d6); font-size: 0.88rem; }
.mln-pm-row:last-child { border-bottom: 0; }
.mln-pm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-light, #9a8d7e); flex: 0 0 auto; }
.mln-pm-dot--warn { background: #b4741f; }
.mln-pm-row-main { display: flex; flex-direction: column; min-width: 0; }
.mln-pm-row-main b { font-size: 0.9rem; }
.mln-pm-row-sub { color: var(--text-muted, #6b5e4f); font-size: 0.78rem; }
.mln-pm-when { margin-left: auto; color: var(--text-light, #9a8d7e); font-size: 0.76rem; white-space: nowrap; }

/* explainer dialog */
.mln-pm-how-intro { color: var(--text-muted, #6b5e4f); font-size: 0.88rem; margin: 0 0 0.6rem; }
.mln-pm-layer { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--divider, #ece4d6); }
.mln-pm-layer:last-child { border-bottom: 0; }
.mln-pm-layer-ico {
    width: 34px; height: 34px; border-radius: 9px; background: var(--div-soft, #f0e9dc); color: var(--mln-mln);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 1rem;
}
.mln-pm-layer b { display: block; font-size: 0.92rem; }
.mln-pm-layer span { color: var(--text-muted, #6b5e4f); font-size: 0.84rem; line-height: 1.45; }

@media (max-width: 640px) {
    .mln-pm-identity { flex-wrap: wrap; }
    .mln-pm-help-btn.ui-button { width: 100%; margin-top: 8px; }
}