/* ============================================================================
 * 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;
}

/* The rail sits beside everything else; the old column layout moves into
   .mln-portal-col so the topbar, banners, main and footer still stack. */
.mln-portal-wrapper { display: flex; min-height: 100vh; }
.mln-portal-col {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-width: 0; min-height: 100vh;
}

/* ============================================================
   Portal sidebar
   ============================================================ */
.mln-side {
    --side-w: 260px;
    width: var(--side-w);
    flex: 0 0 var(--side-w);
    display: flex; flex-direction: column;
    background: var(--mln-surface);
    border-right: 1px solid var(--mln-divider);
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto; overflow-x: hidden;
    transition: width .18s ease, flex-basis .18s ease;
    z-index: 300;
}

.mln-side-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; padding: 1.1rem 1rem 0.9rem;
}
.mln-side-mark {
    display: inline-flex; align-items: center; min-width: 0;
    text-decoration: none; color: var(--mln-text);
}
.mln-side-mark:hover { text-decoration: none; }
.mln-side-logo { height: 30px; width: auto; display: block; }
.mln-side-collapse {
    background: none; border: 0; cursor: pointer; padding: 0.3rem;
    color: var(--mln-text-light); border-radius: 6px; line-height: 1;
}
.mln-side-collapse:hover { background: var(--mln-surface-2, #eef3f0); color: var(--mln-text); }

.mln-side-acting { padding: 0 0.75rem 0.9rem; }
/* The rail's chip is .profile-chip stretched to the column: full width, the name
   allowed to ellipsize, and the caret pinned right. Everything else — amber wash,
   logo tile, eyebrow — is inherited, so the two chips cannot drift apart. */
.mln-side-acting-chip { display: flex; width: 100%; box-sizing: border-box; }
.mln-side-acting-text {
    display: flex; flex-direction: column; gap: 1px;
    flex: 1 1 auto; min-width: 0; text-align: left;
}
.mln-side-acting-chip .profile-chip-name {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mln-side-acting-chip .profile-chip-caret { margin-left: auto; flex: 0 0 auto; }
.mln-seat-menu { min-width: 232px; }

.mln-side-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.6rem; }

.mln-side-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.65rem; border-radius: 8px;
    color: var(--mln-text); text-decoration: none; font-size: 0.9rem;
}
.mln-side-item:hover { background: var(--mln-surface-2, #eef3f0); text-decoration: none; color: var(--mln-text); }
/* Current page. A wash alone reads as hover, so the rail also carries an inset
   left bar — the one cue that survives the collapsed 64px rail, where the label
   that would otherwise carry the weight is gone. */
.mln-side-item.is-on,
.mln-side-group-head.is-on {
    background: var(--mln-move-connect-wash);
    color: var(--mln-move-connect-ink);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--mln-mln);
}
.mln-side-move.is-on {
    background: var(--move-wash, var(--mln-move-connect-wash));
    box-shadow: inset 3px 0 0 var(--move, var(--mln-mln));
}
.mln-side-move.is-on .mln-side-move-label { font-weight: 600; }
.mln-side-label { flex: 1 1 auto; min-width: 0; }
.mln-side-soon {
    font-size: 0.6rem; letter-spacing: .1em; text-transform: uppercase;
    padding: 0.1rem 0.4rem; border-radius: 999px;
    background: var(--mln-move-learn-wash); color: var(--mln-move-learn-ink);
}

.mln-side-divider { height: 1px; background: var(--mln-divider); margin: 0.7rem 0.65rem; }

/* ---- the onboarding pathway group ---- */
.mln-side-group-head {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.55rem 0.65rem; border: 0; background: none; cursor: pointer;
    border-radius: 8px; color: var(--mln-text); font-size: 0.9rem; text-align: left;
    font-family: inherit;
}
.mln-side-group-head:hover { background: var(--mln-surface-2, #eef3f0); }
.mln-side-caret { font-size: 0.7rem; transition: transform .18s ease; transform: rotate(-90deg); }
.mln-side-group.is-open .mln-side-caret { transform: rotate(0deg); }
.mln-side-pct {
    font-size: 0.68rem; font-weight: 600;
    padding: 0.1rem 0.4rem; border-radius: 999px;
    background: var(--mln-surface-2, #eef3f0); color: var(--mln-text-muted);
}
/* Collapsed by default; the group opens when .is-open is present, which the server
   sets while onboarding is unfinished and the caret toggles thereafter. */
.mln-side-moves { display: none; flex-direction: column; gap: 0.2rem; padding: 0.25rem 0 0.4rem 0.5rem; }
.mln-side-group.is-open .mln-side-moves { display: flex; }

.mln-side-move {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.45rem 0.6rem; border-radius: 8px;
    text-decoration: none; color: var(--mln-text);
}
.mln-side-move:hover { background: var(--mln-surface-2, #eef3f0); text-decoration: none; color: var(--mln-text); }
.mln-side-move-top { display: flex; align-items: center; gap: 0.45rem; }
.mln-side-move-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; flex: 0 0 auto;
    border-radius: 999px; font-size: 0.66rem; font-weight: 700;
    background: var(--move-wash, var(--mln-surface-2)); color: var(--move-ink, var(--mln-text-muted));
}
.mln-side-move.is-complete .mln-side-move-badge { background: var(--move); color: #fff; }
.mln-side-move-label { flex: 1 1 auto; font-size: 0.84rem; min-width: 0; }
.mln-side-move-pct { font-size: 0.65rem; color: var(--mln-text-light); white-space: nowrap; }
.mln-side-move-bar { height: 3px; border-radius: 999px; background: var(--mln-divider); overflow: hidden; }
.mln-side-move-fill { display: block; height: 100%; background: var(--move, var(--mln-primary)); transition: width .3s ease; }
.mln-side-move-overview .mln-side-move-top { color: var(--mln-text-muted); }

/* ---- donate ---- */
.mln-side-donate { margin-top: auto; padding: 1rem 0.9rem 1.2rem; }
.mln-side-donate-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.6rem 0.8rem; border-radius: 999px;
    background: var(--mln-activation); color: var(--mln-activation-ink);
    font-size: 0.84rem; font-weight: 600; text-decoration: none;
}
.mln-side-donate-btn:hover { text-decoration: none; color: var(--mln-activation-ink); filter: brightness(.96); }
.mln-side-donate-note { margin: 0.55rem 0 0; font-size: 0.68rem; line-height: 1.45; color: var(--mln-text-light); }

.mln-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- collapsed rail (desktop) ---- */
.mln-side-collapsed .mln-side { --side-w: 64px; }
/* The logo goes with them. It is wider than the collapsed rail, and .mln-side-top
   is space-between, so leaving it in pushes the collapse button past the rail's
   clipped overflow — which is how the rail became impossible to reopen. */
.mln-side-collapsed .mln-side-label,
.mln-side-collapsed .mln-side-mark,
.mln-side-collapsed .mln-side-pct,
.mln-side-collapsed .mln-side-soon,
.mln-side-collapsed .mln-side-acting,
.mln-side-collapsed .mln-side-moves,
.mln-side-collapsed .mln-side-move-pct,
.mln-side-collapsed .mln-side-donate-note,
.mln-side-collapsed .mln-side-donate-btn span { display: none; }
/* .mln-side-group.is-open .mln-side-moves is (0,3,0) and wins over a plain
   .mln-side-collapsed descendant rule, so the step list has to be re-hidden at
   equal reach — that leak is what cropped the rail's content. */
.mln-side-collapsed .mln-side-group.is-open .mln-side-moves { display: none; }
.mln-side-collapsed .mln-side-top { justify-content: center; padding: 1.1rem 0 0.9rem; }
.mln-side-collapsed .mln-side-nav { padding: 0 0.4rem; }
.mln-side-collapsed .mln-side-item,
.mln-side-collapsed .mln-side-group-head { justify-content: center; padding: 0.55rem 0; }
.mln-side-collapsed .mln-side-divider { margin: 0.7rem 0.4rem; }
.mln-side-collapsed .mln-side-donate { padding: 1rem 0.4rem 1.2rem; }
.mln-side-collapsed .mln-side-donate-btn { padding: 0.6rem 0; }
.mln-side-collapsed .mln-side-caret { display: none; }
.mln-side-collapsed .mln-side-collapse .pi { transform: rotate(180deg); }

.mln-side-scrim { display: none; }

/* The rail carries its own collapse control on desktop, so the burger is mobile-only. */
.mln-portal-burger { display: none; background: none; border: 0; cursor: pointer;
    padding: 0.4rem; color: var(--mln-text); border-radius: 6px; line-height: 1; }
.mln-portal-burger:hover { background: var(--mln-surface-2, #eef3f0); }

/* ---- drawer (mobile) ---- */
@media (max-width: 1024px) {
    .mln-side {
        position: fixed; top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--mln-shadow-lg);
    }
    .mln-side-open .mln-side { transform: translateX(0); }
    .mln-side-open .mln-side-scrim {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.35); z-index: 299;
    }
    .mln-portal-col { min-width: 100%; }
    .mln-portal-burger { display: inline-flex; }
}

/* ---------- 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;
}

/* The lens page title — exactly one per lens, and the top of its heading outline.
   The section titles below are h2, so this level MUST exist or heading navigation
   starts mid-outline. */
.mln-lens-title {
    font-family: var(--mln-font-display);
    font-size: 1.5rem;
    margin: 0 0 1rem;
    color: var(--mln-text);
}

.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;
}

/* Marks a card as a different KIND of act, not a more important one: consenting on an
   organization's behalf beside accepting a handover yourself. */
.mln-card--accent { border-left: 3px solid var(--mln-accent); }

.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; }

/* Signup only. The nine-chip language picker and the consent block do not fit the
   shared 440px card without the chips collapsing to one per row; login, forgot-password
   and reset-password keep the narrow card. */
.mln-auth-container--wide { max-width: 640px; }

.mln-auth-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mln-text-light);
    margin: 0 0 0.6rem;
}
.mln-auth-lede {
    color: var(--mln-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}
.mln-field-help {
    color: var(--mln-text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

/* ---- language chips ----
   Restyles p:selectManyCheckbox rather than hand-rolling inputs, so the control keeps
   its real checkboxes and stays keyboard- and screen-reader-navigable.

   Selectors are the ones PrimeFaces 15 ACTUALLY emits for layout="responsive":
     .ui-selectmanycheckbox.ui-grid-responsive > .ui-g > .ui-g-12.ui-md-4 > (.ui-chkbox + label)
   Not .ui-grid-row / .ui-grid-col-N, which is what the docs imply and what this rule
   first targeted — it matched nothing and the chips rendered as bare checkboxes.

   The .ui-g rows are display:contents so every cell joins ONE wrapping flex line;
   otherwise the fixed three-per-row grid leaves ragged gaps at narrow widths. */
.mln-lang-chips.ui-selectmanycheckbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border: 0;
    width: 100%;
}
.mln-lang-chips.ui-selectmanycheckbox > .ui-g {
    display: contents;
}
.mln-lang-chips.ui-selectmanycheckbox [class*="ui-g-"] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    flex: 0 0 auto;
    padding: 0.42rem 0.85rem;
    border: 1px solid var(--mln-stone, #d3d1be);
    border-radius: var(--mln-r-pill, 999px);
    background: var(--mln-surface);
    transition: border-color .18s, background .18s;
}
.mln-lang-chips.ui-selectmanycheckbox [class*="ui-g-"]:hover {
    border-color: var(--mln-primary, #00594c);
}
/* The chip reads as selected, not just the 18px box inside it. :has() carries this —
   PrimeFaces marks the state on a descendant, and there is no class on the cell. */
.mln-lang-chips.ui-selectmanycheckbox [class*="ui-g-"]:has(.ui-state-active) {
    border-color: var(--mln-primary, #00594c);
    background: var(--mln-move-connect-wash, #e4efec);
}
.mln-lang-chips.ui-selectmanycheckbox label {
    margin: 0;
    font-size: 0.88rem;
    color: var(--mln-text);
    cursor: pointer;
    white-space: nowrap;
}

/* ---- consent block ---- */
.mln-consent-block {
    padding: 1rem 1.1rem;
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius-lg);
    background: var(--mln-surface-2, #f7f8f4);
}
.mln-consent-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mln-primary, #00594c);
    margin: 0 0 0.5rem;
}
.mln-consent-body {
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--mln-text-muted);
    margin: 0;
}
.mln-consent-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.7rem;
    font-size: 0.82rem;
}
.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); }

/* ============================================================
   Onboarding — the four moves
   Each move owns a colour. .mln-move-<code> sets --move on the block, and everything
   inside reads it, so a step, a card and a sidebar row tint from one declaration.
   ============================================================ */
.mln-move-connect    { --move: var(--mln-move-connect);    --move-ink: var(--mln-move-connect-ink);    --move-wash: var(--mln-move-connect-wash); }
.mln-move-explore    { --move: var(--mln-move-explore);    --move-ink: var(--mln-move-explore-ink);    --move-wash: var(--mln-move-explore-wash); }
.mln-move-experience { --move: var(--mln-move-experience); --move-ink: var(--mln-move-experience-ink); --move-wash: var(--mln-move-experience-wash); }
.mln-move-learn      { --move: var(--mln-move-learn);      --move-ink: var(--mln-move-learn-ink);      --move-wash: var(--mln-move-learn-wash); }

.mln-step-head { margin-bottom: 2rem; }
.mln-step-crumb {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;
}
/* -ink, not --move: this is small text, and three of the four brand hues fail AA
   against the portal ground at this size. See mln-tokens.css. */
.mln-step-eyebrow {
    font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--move-ink, var(--mln-text-muted));
    font-weight: 600;
}
.mln-step-dot { opacity: .5; margin: 0 0.35rem; }
.mln-step-title {
    font-family: var(--mln-font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1.15; margin: 0 0 0.75rem;
}
.mln-step-lede {
    max-width: 62ch; color: var(--mln-text-muted);
    line-height: 1.65; margin: 0 0 1.25rem;
}

.mln-step-progress { display: flex; align-items: center; gap: 0.75rem; }
.mln-step-progress-bar {
    flex: 1 1 auto; max-width: 320px; height: 5px;
    background: var(--mln-divider); border-radius: 999px; overflow: hidden;
}
.mln-step-progress-fill {
    display: block; height: 100%;
    background: var(--move, var(--mln-primary));
    border-radius: 999px; transition: width .3s ease;
}
.mln-step-progress-label {
    font-size: 0.76rem; color: var(--mln-text-muted); white-space: nowrap;
}

/* ---- the four move cards on the pathway overview ---- */
.mln-move-cards {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mln-move-card {
    display: flex; flex-direction: column; gap: 0.75rem;
    padding: 1.15rem; text-decoration: none;
    background: var(--mln-surface);
    border: 1px solid var(--mln-divider);
    border-top: 3px solid var(--move, var(--mln-primary));
    border-radius: var(--mln-radius-lg);
    color: var(--mln-text);
    transition: box-shadow .2s, transform .2s;
}
.mln-move-card:hover {
    text-decoration: none; color: var(--mln-text);
    box-shadow: var(--mln-shadow-md); transform: translateY(-2px);
}
.mln-move-card-top { display: flex; align-items: center; gap: 0.6rem; }
.mln-move-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.55rem; height: 1.55rem; flex: 0 0 auto;
    border-radius: 999px; font-size: 0.78rem; font-weight: 600;
    background: var(--move-wash); color: var(--move-ink);
}
.mln-move-card.is-complete .mln-move-badge {
    background: var(--move, var(--mln-primary)); color: #fff;
}
.mln-move-card-label { font-weight: 600; color: var(--move-ink); }
.mln-move-card-desc {
    font-size: 0.86rem; color: var(--mln-text-muted); line-height: 1.5;
    flex: 1 1 auto;
}

/* ---------- Coming-soon panel ----------
   Used wherever a feature is behind a flag: the surface still exists and says what is
   coming, rather than the nav item vanishing. */
.mln-coming-soon {
    padding: 2.5rem 2rem;
    border: 1px dashed var(--mln-stone, #d3d1be);
    border-radius: var(--mln-radius-lg);
    background: var(--mln-move-learn-wash, #faeee2);
    text-align: center;
}
.mln-coming-soon-badge {
    display: inline-block; margin-bottom: 0.9rem;
    padding: 0.2rem 0.7rem; border-radius: 999px;
    font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
    background: var(--mln-move-learn-ink, #8a5020); color: #fff;
}
.mln-coming-soon h2 {
    font-family: var(--mln-font-display); margin: 0 0 0.7rem;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}
.mln-coming-soon p { margin: 0 auto; max-width: 56ch; color: var(--mln-text-muted); line-height: 1.65; }

/* ---------- Email-verification banner ---------- */
.mln-verify-banner {
    display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
    padding: 0.7rem 1.25rem;
    background: var(--mln-move-learn-wash, #faeee2);
    border-bottom: 1px solid var(--mln-stone, #d3d1be);
    color: var(--mln-text);
}
.mln-verify-banner-icon { color: var(--mln-move-learn-ink, #8a5020); display: inline-flex; }
.mln-verify-banner-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 320px; }
.mln-verify-banner-text strong { font-size: 0.9rem; }
.mln-verify-banner-text span { font-size: 0.82rem; color: var(--mln-text-muted); }

/* ---------- 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; flex-wrap: wrap; row-gap: 0.5rem; }
    /* flex-wrap on the cluster cannot help while the cluster itself refuses to
       shrink below its content: min-width:0 is what lets the wrap happen, and
       without it the topbar is the only thing that scrolls a phone viewport. */
    .mln-portal-topbar-left,
    .mln-portal-topbar-right { min-width: 0; }
    .mln-portal-topbar-right { justify-content: flex-end; }
    .mln-portal-context-form { min-width: 0; flex-wrap: wrap; }
    .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;
}

/* V1.3 — "how to earn this" on a stamp that is still locked. Criteria are data now,
   so this is the first time the booklet can answer that question. Clamped to two
   lines like the description above, because a stamp tile is a fixed size. */
.mln-passport-criteria {
    margin-top: 3px; font-size: 8.5px; line-height: 1.3; font-style: italic; opacity: .85;
    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; }
}

/* ============================================================================
 * Profile Manager. Scheme-aware via --surface/--text/--divider, which are
 * redefined per .mln-scheme-*.
 * ============================================================================ */
.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; }
}


/* =====================================================================
   Post-course liminal space (Stefan's Course Admin feedback, learner side).

   Lives in portal-theme.css because that is the stylesheet template-portal.xhtml
   loads — a rule for this block placed in detail-page.css would simply not exist
   on the portal.

   Visually a threshold rather than another card: warm ground, brand rule on top,
   and three equal doors. It sits ABOVE section 1, so it must read as a moment,
   not as a permanent panel.
   ===================================================================== */

.mln-liminal {
    background: linear-gradient(180deg, #fdfbf6 0%, var(--mln-surface) 100%);
    border: 1px solid var(--mln-divider);
    border-top: 3px solid var(--mln-mln);
    border-radius: var(--mln-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.mln-liminal-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.mln-liminal-icon {
    font-size: 1.6rem;
    color: var(--mln-mln);
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.mln-liminal-title {
    font-family: var(--mln-font-display);
    font-size: 1.25rem;
    margin: 0;
    color: var(--mln-text);
}

.mln-liminal-sub {
    margin: 0.3rem 0 0;
    color: var(--mln-text-muted);
    font-size: 0.95rem;
}

/* Three across on desktop, stacked on a phone. auto-fit rather than a fixed
   three-column grid so a future fourth door does not need a media-query edit. */
.mln-liminal-doors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.9rem;
}

.mln-liminal-door {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem;
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius-lg);
    background: var(--mln-surface);
    text-decoration: none;
    color: var(--mln-text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.mln-liminal-door:hover,
.mln-liminal-door:focus-visible {
    border-color: var(--mln-mln);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Keyboard users get the same affordance as the hover state. */
.mln-liminal-door:focus-visible {
    outline: 2px solid var(--mln-mln);
    outline-offset: 2px;
}

.mln-liminal-door-icon {
    font-size: 1.4rem;
    color: var(--mln-mln);
}

.mln-liminal-door-title {
    font-weight: 600;
    font-size: 1rem;
}

.mln-liminal-door-note {
    color: var(--mln-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* The rating ask inside the liminal space. Separated from the doors by a rule so it
   reads as a second, optional act rather than a fourth door. */
.mln-liminal-rate {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--mln-divider);
}

.mln-liminal-rate-title {
    font-family: var(--mln-font-body);
    font-size: 1rem;
    margin: 0;
}

.mln-liminal-rate-sub {
    margin: 0.2rem 0 0.8rem;
    color: var(--mln-text-muted);
    font-size: 0.85rem;
}

.mln-liminal-rate-rows {
    display: grid;
    gap: 0.6rem;
}

.mln-liminal-rate-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.mln-liminal-rate-row label {
    font-size: 0.9rem;
    color: var(--mln-text);
}

.mln-liminal-rate-done {
    display: flex;
    align-items: center;
    color: var(--mln-mln);
    font-size: 0.92rem;
}

/* 1-5 buttons: keep them compact so the row does not dominate the panel. */
.mln-star-picker .ui-button {
    min-width: 2.4rem;
    padding: 0.3rem 0.6rem;
}

/* ============================================================================
 * V1.5 — profile picture in the portal identity header.
 *
 * The portal loads portal-theme.css and NOT mln-avatar.css, so the rules it needs
 * live here. Reuses the existing .mln-pm-avatar circle (56px, translucent on the
 * green gradient) as the initials fallback and gives the <img> variant the same
 * geometry, so swapping a photograph in does not move the header.
 * ========================================================================== */
.mln-pm-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.mln-pm-avatar--img {
    /* .mln-pm-avatar already sets 56px + border-radius; these two only matter for
       a non-square historical URL, since uploads are centre-cropped square. */
    object-fit: cover;
    background: rgba(255,255,255,0.16);
}
.mln-pm-avatar-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
/* ---------------------------------------------------------------------------
   V1.5 — the avatar circle AS the upload control, portal copy.
   These rules are duplicated from mln-avatar.css on purpose: the portal template
   loads portal-theme.css and NOT mln-avatar.css, and a rule that lives only in a
   stylesheet this host never loads is a rule that silently does not exist.
   Geometry comes from the existing .mln-pm-avatar (56px circle on the green
   gradient); only the button wrapper and overlay are added here.
   --------------------------------------------------------------------------- */
.mln-avatar-btn {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    line-height: 0;
    outline-offset: 3px;
}
/* On the dark header a white ring reads; the green primary would disappear. */
.mln-avatar-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.85); }
.mln-avatar-btn:focus:not(:focus-visible) { outline: none; }

.mln-pm-avatar-btn .mln-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 30, 20, 0.6);
    color: #fff;
    opacity: 0;
    transition: opacity 0.16s ease;
    pointer-events: none;
}
.mln-pm-avatar-btn:hover .mln-avatar-overlay,
.mln-pm-avatar-btn:focus-visible .mln-avatar-overlay { opacity: 1; }
.mln-pm-avatar-btn .mln-avatar-overlay i { font-size: 1.1rem; }

/* No hover on touch, so the affordance is permanent there — a small corner badge
   rather than a wash, so the picture stays visible. */
@media (hover: none) {
    .mln-pm-avatar-btn .mln-avatar-overlay {
        opacity: 1;
        inset: auto -2px -2px auto;
        width: 1.5rem;
        height: 1.5rem;
        background: var(--mln-mln, #14472f);
        border: 1px solid rgba(255,255,255,0.5);
    }
    .mln-pm-avatar-btn .mln-avatar-overlay i { font-size: 0.7rem; }
}

/* The circle replaces PrimeFaces' Choose button. Hidden, not removed — the
   p:fileUpload component still owns the hidden file input and the upload. */
.mln-pm-avatar-actions .ui-fileupload-buttonbar { display: none; }
/* Same specificity fix as the admin stylesheet — the theme's own
   `.ui-fileupload .ui-fileupload-content` rule otherwise leaves an empty white
   box under the circle. */
.mln-pm-avatar-actions .ui-fileupload,
.mln-pm-avatar-actions .ui-fileupload .ui-fileupload-content {
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
}

/* Same correction as the admin stylesheet: hiding the whole content box also
   hid PrimeFaces' client-side validation messages, so a rejected file failed
   silently. Only the redundant staged-file row is hidden. */
.mln-pm-avatar-actions .ui-fileupload-content {
    background: transparent;
    border: 0;
    padding: 0;
}
.mln-pm-avatar-actions .ui-fileupload-files { display: none; }
.mln-pm-avatar-actions .ui-fileupload-content .ui-messages {
    margin: 4px 0 0;
    font-size: 0.66rem;
    text-align: left;
}
.mln-pm-avatar-actions .ui-button {
    font-size: 0.68rem;
    padding: 2px 8px;
}
.mln-pm-avatar-actions .ui-button.p-button-danger { color: #ffd9d0; }

/* p:inputNumber full width. styleClass lands on the wrapper span, which is
   display:inline (so width is inert) and whose inner input is sized by its own
   `size` attribute. PrimeFaces 15 has no inputStyleClass, so this MUST be CSS.
   Keyed on .mln-num-full so components that did not ask keep their natural size. */
.mln-num-full.ui-inputnumber {
    display: inline-block;
    width: 100%;
}
.mln-num-full.ui-inputnumber > input,
.mln-num-full.ui-inputnumber > .ui-inputfield {
    width: 100%;
    box-sizing: border-box;
}

/* Footer switchers — the directory's quiet-button look, re-expressed in PORTAL
   tokens. The portal template does not load mln-directory.css, so that class and
   the four variables it depends on are undefined here. Uses --mln-text-muted /
   --mln-text / --mln-divider, which are redefined per scheme, so this follows
   light, dim and dark without a per-scheme rule. */
.mln-portal-footer .mln-quiet-btn.ui-button,
.mln-portal-footer .mln-quiet-btn .ui-button {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--mln-text-muted) !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
    border-radius: 999px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
/* PrimeFaces positions the button icon absolutely and reserves ~2.1em of left
   padding on the label to clear it. At this size that gap reads as a gulf, so
   the icon is pulled in and the label's reserved space trimmed to match. */
.mln-portal-footer .mln-quiet-btn .ui-button-icon-left { left: 0.6rem !important; }
.mln-portal-footer .mln-quiet-btn .ui-button-text { padding: 0 0 0 1.4rem !important; }
.mln-portal-footer .mln-quiet-btn.ui-button:hover,
.mln-portal-footer .mln-quiet-btn .ui-button:hover {
    background: var(--mln-divider) !important;
    color: var(--mln-text) !important;
}
.mln-portal-footer .mln-quiet-btn.ui-button:focus-visible,
.mln-portal-footer .mln-quiet-btn .ui-button:focus-visible {
    outline: 2px solid var(--mln-main);
    outline-offset: 2px;
}
/* The icon inherits the label colour rather than the theme's default. */
.mln-portal-footer .mln-quiet-btn .ui-button-icon-left { color: inherit !important; }

/* ============================================================
   Portal Home — the four-block feed and the roadmap
   ============================================================ */
.mln-home-welcome {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.mln-home-welcome-text { flex: 1 1 32rem; min-width: 0; }
.mln-home-roadmap-jump {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.6rem 1rem; border-radius: 999px;
    border: 1px solid var(--mln-stone, #d3d1be);
    background: var(--mln-surface); color: var(--mln-text);
    font-size: 0.85rem; text-decoration: none; white-space: nowrap;
}
.mln-home-roadmap-jump:hover { border-color: var(--mln-primary); color: var(--mln-text); text-decoration: none; }

/* Two columns on wide screens, one below — the blocks are independent, so they wrap
   rather than sharing a fixed grid that would leave a hole when one is empty. */
.mln-home-columns {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.mln-feed-block {
    padding: 1.25rem;
    background: var(--mln-surface);
    border: 1px solid var(--mln-divider);
    border-top: 3px solid var(--move, var(--mln-primary));
    border-radius: var(--mln-radius-lg);
}
.mln-feed-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.mln-feed-eyebrow {
    font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 600; color: var(--move-ink, var(--mln-text-muted)); margin-bottom: 0.25rem;
}
.mln-feed-head h2 { font-family: var(--mln-font-display); font-size: 1.15rem; margin: 0; }
.mln-see-more {
    font-size: 0.8rem; color: var(--move-ink, var(--mln-primary));
    text-decoration: none; white-space: nowrap;
}
.mln-see-more:hover { text-decoration: underline; }

/* The "see the full public record" link at the foot of the portal's node actions. Sized
   as a destination rather than a crumb — it leaves the portal — but kept quiet so it does
   not compete with the actions above it. */
.mln-node-directory-link {
    display: inline-flex; align-items: center; gap: 0.45rem;
    margin-top: 1.1rem; padding: 0.55rem 0.9rem;
    border: 1px solid var(--mln-stone, #d3d1be); border-radius: var(--mln-radius);
    background: var(--mln-surface);
    font-size: 0.85rem; font-weight: 600; color: var(--mln-primary);
    text-decoration: none !important;
}
.mln-node-directory-link:hover {
    border-color: var(--mln-primary); color: var(--mln-primary-700);
}
.mln-node-directory-link .pi { font-size: 0.8rem; }

.mln-feed-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.mln-feed-card {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius);
    background: var(--mln-move-connect-wash, var(--mln-surface-2));
    background: var(--move-wash, var(--mln-surface-2));
}
.mln-feed-card h3 { margin: 0; font-size: 0.95rem; font-family: var(--mln-font-display); }
.mln-feed-where, .mln-feed-when { font-size: 0.78rem; color: var(--mln-text-muted); margin-top: 0.2rem; }
.mln-feed-when { margin: 0 0 0.25rem; text-transform: uppercase; letter-spacing: .08em; font-size: 0.66rem; }
.mln-feed-person { display: flex; align-items: center; gap: 0.7rem; }
.mln-feed-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; flex: 0 0 auto; border-radius: 999px;
    background: var(--move, var(--mln-primary)); color: #fff; font-weight: 600;
}
/* Every block gets an empty state, not just the first-run one. */
.mln-feed-empty {
    padding: 1.1rem; border: 1px dashed var(--mln-stone, #d3d1be);
    border-radius: var(--mln-radius); color: var(--mln-text-muted);
    font-size: 0.85rem; line-height: 1.55;
}

/* ---- roadmap ---- */
.mln-roadmap { margin-top: 2.5rem; }
.mln-rm-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.mln-rm-item { display: flex; gap: 0.9rem; padding: 1rem 0; border-bottom: 1px solid var(--mln-divider); }
.mln-rm-item:last-child { border-bottom: 0; }
.mln-rm-dot {
    width: 9px; height: 9px; flex: 0 0 auto; margin-top: 0.45rem; border-radius: 999px;
    background: var(--mln-text-light);
}
.mln-rm-shipped .mln-rm-dot     { background: var(--mln-move-explore); }
.mln-rm-in_progress .mln-rm-dot { background: var(--mln-move-learn); }
.mln-rm-body { flex: 1 1 auto; min-width: 0; }
.mln-rm-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mln-rm-pill {
    font-size: 0.6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    padding: 0.12rem 0.5rem; border-radius: 999px;
}
.mln-rm-pill-shipped     { background: var(--mln-move-explore-wash); color: var(--mln-move-explore-ink); }
.mln-rm-pill-in_progress { background: var(--mln-move-learn-wash);   color: var(--mln-move-learn-ink); }
.mln-rm-pill-planned     { background: var(--mln-surface-2, #eef3f0); color: var(--mln-text-muted); }
.mln-rm-desc { margin: 0.35rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--mln-text-muted); }
.mln-rm-actions {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-top: 0.8rem;
}
.mln-rm-stages { display: flex; gap: 0.3rem; flex: 1 1 22rem; min-width: 0; }
.mln-rm-stage { flex: 1 1 0; min-width: 0; }
.mln-rm-stage-bar { height: 4px; border-radius: 999px; background: var(--mln-divider); }
.mln-rm-stage.is-on .mln-rm-stage-bar { background: var(--mln-move-explore); }
.mln-rm-stage.is-current .mln-rm-stage-bar { background: var(--mln-move-learn); }
.mln-rm-stage-label {
    margin-top: 0.3rem; font-size: 0.58rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--mln-text-light);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mln-rm-stage.is-current .mln-rm-stage-label { color: var(--mln-move-learn-ink); font-weight: 600; }
.mln-rm-alive {
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
    color: var(--mln-move-explore-ink);
}
.mln-rm-notify.is-on .ui-button-text { font-weight: 600; }

/* ============================================================
   Onboarding step forms
   ============================================================ */
.mln-ob-block {
    padding: 1.1rem 1.2rem; margin-bottom: 1.5rem;
    background: var(--mln-surface-2, #eef3f0);
    border: 1px solid var(--mln-divider); border-radius: var(--mln-radius-lg);
}
.mln-ob-eyebrow {
    font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 600; color: var(--mln-text-muted); margin-bottom: 0.4rem;
}
.mln-ob-actions { margin-top: 1.5rem; }

/* The multi-select pickers. Same restyle as the language chips but boxed rather than
   pilled — these lists run to 25 options and a pill row becomes unscannable.

   GRID, not wrapping flex. `flex: 1 1 15rem` sized every tile from the leftovers on its
   own line, so the 25 options rendered at three different widths across ten different
   left edges — no two rows lined up. auto-fill + 1fr gives one column width for the
   whole picker, and stretch + min-height squares the rows off. */
.mln-pick-grid.ui-selectmanycheckbox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.5rem; border: 0; width: 100%; align-items: stretch;
}
.mln-pick-grid.ui-selectmanycheckbox > .ui-g { display: contents; }
/* PrimeFaces' .ui-grid / .ui-g carry a float clearfix (`content:""; display:table`). Under
   `display: grid` a container's own ::before is a GRID ITEM, so it silently occupied the
   first cell and pushed every option one column right — the phantom column. The rows'
   clearfixes do the same once `display: contents` promotes their children. */
.mln-pick-grid.ui-selectmanycheckbox::before,
.mln-pick-grid.ui-selectmanycheckbox::after,
.mln-pick-grid.ui-selectmanycheckbox > .ui-g::before,
.mln-pick-grid.ui-selectmanycheckbox > .ui-g::after { content: none; display: none; }
.mln-pick-grid.ui-selectmanycheckbox [class*="ui-g-"] {
    display: flex; align-items: center; gap: 0.6rem;
    width: auto; max-width: none; min-width: 0; min-height: 3.15rem;
    box-sizing: border-box;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--mln-stone, #d3d1be);
    border-radius: var(--mln-radius); background: var(--mln-surface);
    transition: border-color .18s, background .18s;
}
.mln-pick-grid.ui-selectmanycheckbox [class*="ui-g-"]:hover { border-color: var(--mln-primary); }
.mln-pick-grid.ui-selectmanycheckbox [class*="ui-g-"]:has(.ui-state-active) {
    border-color: var(--mln-primary); background: var(--mln-move-connect-wash);
}
.mln-pick-grid.ui-selectmanycheckbox label {
    margin: 0; font-size: 0.85rem; line-height: 1.35; cursor: pointer; color: var(--mln-text);
    min-width: 0; overflow-wrap: anywhere;
    flex: 1 1 auto;
}

/* The tick sits on the trailing edge and the label reads from the leading one.
   row-reverse rather than reordering the markup: PrimeFaces emits checkbox-then-label and
   the label's `for` has to keep pointing at the input next to it. */
.mln-pick-grid.ui-selectmanycheckbox [class*="ui-g-"],
.mln-lang-chips.ui-selectmanycheckbox [class*="ui-g-"] { flex-direction: row-reverse; }
.mln-lang-chips.ui-selectmanycheckbox label { flex: 1 1 auto; }

/* ---- the checkmark that replaces the box ----
   The square is gone but its 1.05rem slot is not: the slot is what keeps every label in
   a picker on the same left edge whether or not it is ticked. PrimeFaces marks state on
   .ui-chkbox-box, so the tick is that element's ::after — two borders rotated into a
   check, scaled in with a slight overshoot.

   The real <input> is untouched inside .ui-helper-hidden-accessible, so the control
   stays keyboard-reachable and still announces its state. The box keeps the Diamond
   theme's 1.5rem footprint — it is the hit target, and overriding it would mean
   out-specifying `body .ui-chkbox .ui-chkbox-box` for no gain. */
.mln-pick-grid .ui-chkbox,
.mln-lang-chips .ui-chkbox,
.mln-consent-block .ui-chkbox { flex: 0 0 auto; }

.mln-pick-grid .ui-chkbox-box,
.mln-lang-chips .ui-chkbox-box,
.mln-consent-block .ui-chkbox-box {
    position: relative;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}
/* PrimeFaces swaps in its own pi-check on the icon span; it would sit under the tick. */
.mln-pick-grid .ui-chkbox-box .ui-chkbox-icon,
.mln-lang-chips .ui-chkbox-box .ui-chkbox-icon,
.mln-consent-block .ui-chkbox-box .ui-chkbox-icon { display: none !important; }

.mln-pick-grid .ui-chkbox-box::after,
.mln-lang-chips .ui-chkbox-box::after,
.mln-consent-block .ui-chkbox-box::after {
    content: "";
    position: absolute; left: 50%; top: 48%;
    width: 0.36rem; height: 0.72rem;
    border: 2px solid var(--mln-primary, #00594c);
    border-top: 0; border-left: 0;
    transform: translate(-50%, -55%) rotate(45deg) scale(0.2);
    opacity: 0;
    transition: transform .2s cubic-bezier(.2, .85, .3, 1.5), opacity .12s ease;
}
.mln-pick-grid .ui-chkbox-box.ui-state-active::after,
.mln-lang-chips .ui-chkbox-box.ui-state-active::after,
.mln-consent-block .ui-chkbox-box.ui-state-active::after {
    transform: translate(-50%, -55%) rotate(45deg) scale(1);
    opacity: 1;
}
/* Keyboard focus has to land somewhere once the box is invisible.

   Two gates, because neither is sufficient alone. PrimeFaces' .ui-state-focus stays on
   after a mouse click, so it is not used. :focus-visible is not enough either: Chrome
   matches it on a checkbox that was CLICKED, which rang every box the pointer touched.
   The modality attribute (mln-a11y.js) is the second gate; its ABSENCE MUST read as
   keyboard, so a failure to load that file costs nobody their focus ring. */
:root:not([data-input-modality="pointer"]) .mln-pick-grid .ui-helper-hidden-accessible:has(input:focus-visible) + .ui-chkbox-box::before,
:root:not([data-input-modality="pointer"]) .mln-lang-chips .ui-helper-hidden-accessible:has(input:focus-visible) + .ui-chkbox-box::before,
:root:not([data-input-modality="pointer"]) .mln-consent-block .ui-helper-hidden-accessible:has(input:focus-visible) + .ui-chkbox-box::before {
    content: "";
    position: absolute; inset: -3px;
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--mln-primary, #00594c);
}
@media (prefers-reduced-motion: reduce) {
    .mln-pick-grid .ui-chkbox-box::after,
    .mln-lang-chips .ui-chkbox-box::after,
    .mln-consent-block .ui-chkbox-box::after { transition: none; }
}

/* PrimeFaces sizes a selectOneMenu to its widest OPTION and writes that inline as
   `min-width`, which `.w-full`'s `width: 100%` cannot shrink past — the Explore step's
   Country menu rendered 303px inside a 190px field. Scoped to `.w-full`, the explicit
   "fill this field" signal, so a deliberately wide menu elsewhere is untouched. */
.mln-portal-main .ui-selectonemenu.w-full,
.mln-portal-main .ui-inputfield.w-full,
.mln-auth-container .ui-selectonemenu.w-full,
.mln-auth-container .ui-inputfield.w-full {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}
.mln-portal-main .ui-selectonemenu.w-full .ui-selectonemenu-label,
.mln-auth-container .ui-selectonemenu.w-full .ui-selectonemenu-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* ---- the photo on the Connect step ----
   mln-avatar.css is the admin shell's stylesheet and the portal never loads it, so the
   circle-as-upload-control treatment is restated here rather than shared. A rule that
   only exists in a stylesheet the host page does not load is a rule that does not exist. */
.mln-ob-avatar { display: flex; align-items: center; gap: 1.1rem; margin: 0.9rem 0 1.4rem; flex-wrap: wrap; }
.mln-ob-avatar-btn {
    position: relative; display: inline-block; padding: 0; border: 0; cursor: pointer;
    background: none; border-radius: 50%; line-height: 0;
}
.mln-ob-avatar-img, .mln-ob-avatar-initials {
    width: 84px; height: 84px; border-radius: 50%; display: block;
}
.mln-ob-avatar-img { object-fit: cover; }
.mln-ob-avatar-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--mln-move-connect-wash); color: var(--mln-move-connect-ink);
    font-weight: 700; font-size: 1.6rem; box-sizing: border-box;
}
.mln-ob-avatar-btn .mln-avatar-overlay {
    position: absolute; inset: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.42); color: #fff; opacity: 0; transition: opacity .15s;
}
.mln-ob-avatar-btn:hover .mln-avatar-overlay,
.mln-ob-avatar-btn:focus-visible .mln-avatar-overlay { opacity: 1; }
.mln-ob-avatar-btn:focus-visible { outline: 2px solid var(--mln-primary); outline-offset: 3px; }
.mln-ob-avatar-side { flex: 1 1 16rem; min-width: 0; }
.mln-ob-avatar-label { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.15rem; }
/* The circle is the ONLY control. PrimeFaces' widget stays mounted because it owns the file
   input the circle forwards to, but every visible part of it is hidden — a second "Upload a
   picture" button beside the clickable avatar was two controls for one job. */
.mln-avatar-upload-hidden .ui-fileupload-buttonbar,
.mln-avatar-upload-hidden .ui-fileupload-content { display: none !important; }
.mln-avatar-upload-hidden { border: 0 !important; background: none !important; padding: 0 !important; }

/* ---- Explore's inline map ----
   Not the operator geo-picker's modal: the map is part of the step, so it sits in
   the flow and a pick re-renders the panel under it. */
.mln-map-card {
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius-lg);
    background: var(--mln-surface);
    margin-bottom: 1.25rem;
}
.mln-map-search { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
.mln-map-search .mln-map-q { flex: 1 1 auto; min-width: 0; }
.mln-map-search:focus-within .mln-map-q { border-color: var(--mln-primary); }
/* The results float OVER the map rather than pushing it down, and close on an outside
   press — the same sheet and the same open/close behaviour as the claim search on
   Affiliations, driven by the same script. The wrapper is the positioning context and
   carries the state, because ajax re-renders the panel itself. */
.mln-map-search-wrap { position: relative; }
.mln-map-hits {
    position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 60;
    list-style: none; margin: 0; padding: 0.3rem;
    flex-direction: column;
    max-height: 13rem; overflow-y: auto;
    border: 1px solid var(--mln-stone, #d3d1be);
    border-radius: var(--mln-radius-lg);
    background: var(--mln-surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}
/* Closed by default; the wrapper's class is what opens it. */
.mln-map-hits { display: none; }
.mln-map-search-wrap.is-open .mln-map-hits { display: flex; }
.mln-map-hits:empty { display: none !important; }
.mln-map-hit {
    display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
    padding: 0.5rem 0.6rem; border: 0; border-radius: var(--mln-radius);
    background: none; cursor: pointer; font: inherit; color: var(--mln-text);
    font-size: 0.84rem; line-height: 1.35;
}
.mln-map-hits li + li .mln-map-hit { border-top: 1px solid var(--mln-divider); border-radius: 0; }
.mln-map-hit:hover { background: var(--mln-surface-2, #eef3f0); }
.mln-map-hit:focus-visible { outline: 2px solid var(--mln-primary); outline-offset: -2px; }
.mln-map-hit .pi { color: var(--mln-move-explore-ink); flex: 0 0 auto; }
/* Leaflet needs a resolved height on the container or it renders one tile row. */
.mln-map-canvas {
    height: min(380px, 48vh); margin-top: 0.8rem;
    border: 1px solid var(--mln-divider); border-radius: var(--mln-radius);
    overflow: hidden; z-index: 0;
}
/* The pin. CSS-drawn, because the CSP blocks Leaflet's own marker PNGs. */
.mln-explore-pin-shape {
    display: block; width: 18px; height: 18px;
    border-radius: 50% 50% 50% 0;
    background: var(--mln-move-explore-ink, #2f6b40);
    border: 2px solid #fff;
    transform: rotate(-45deg);
    box-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.mln-map-picked {
    display: flex; align-items: flex-start; gap: 0.45rem;
    margin: 0 0 1rem; font-size: 0.85rem; color: var(--mln-text-muted);
}
.mln-map-picked .pi { color: var(--mln-move-explore-ink); margin-top: 0.15rem; }

.mln-community-suggest {
    margin-top: 1.25rem; padding: 1.1rem 1.2rem;
    border: 1px solid var(--mln-move-explore-ink);
    border-radius: var(--mln-radius-lg);
    background: var(--mln-move-explore-wash);
}
.mln-community-suggest-name {
    margin: 0.25rem 0 0.4rem; font-family: var(--mln-font-display);
    font-size: 1.05rem; color: var(--mln-move-explore-ink);
}
.mln-community-suggest-body { margin: 0 0 0.7rem; font-size: 0.85rem; line-height: 1.5; }
.mln-community-suggest-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.84rem; font-weight: 600; color: var(--mln-move-explore-ink);
}
.mln-community-suggest-actions {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.9rem;
}
.mln-community-joined {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.84rem; font-weight: 600; color: var(--mln-move-explore-ink);
}

.mln-feed-note { margin: 0 0 0.7rem; font-size: 0.78rem; color: var(--mln-text-light); }
.mln-feed-more {
    display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.8rem;
    font-size: 0.82rem; font-weight: 600; color: var(--mln-text-muted);
}
.mln-feed-more:hover { color: var(--mln-primary); }
.mln-feed-distance { margin-top: 0.3rem; font-size: 0.72rem; color: var(--mln-move-explore-ink); font-weight: 600; }

/* Explore's two columns: the form on the left, what it surfaces on the right. */
.mln-ob-split { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.mln-ob-split-left, .mln-ob-split-right { min-width: 0; }

.mln-bio-panel {
    padding: 1.1rem 1.2rem; margin-top: 1.25rem;
    border: 1px solid var(--mln-move-explore); border-radius: var(--mln-radius-lg);
    background: var(--mln-move-explore-wash);
}
.mln-bio-msg { margin: 0; font-size: 0.92rem; color: var(--mln-text); }

/* ---------- Passport page: the next-stamp prompt above the booklet ---------- */
.mln-pp-next {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: 1.4rem 1.5rem; margin-bottom: 2rem;
    border: 1px solid var(--mln-divider);
    border-left: 4px solid var(--move, var(--mln-primary));
    border-radius: var(--mln-radius-lg);
    background: var(--mln-surface);
}
.mln-pp-next-body { flex: 1 1 24rem; min-width: 0; }
.mln-pp-next-body h2 {
    font-family: var(--mln-font-display); font-size: 1.2rem; margin: 0 0 0.5rem;
}
.mln-pp-next-hint { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.55; color: var(--mln-text-muted); }
.mln-pp-next-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border-radius: 999px;
    background: var(--move, var(--mln-primary)); color: #fff;
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.mln-pp-next-btn:hover { color: #fff; text-decoration: none; filter: brightness(.94); }
.mln-pp-next-stamp { flex: 0 0 auto; max-width: 14rem; }

/* ---------- Catalog chrome (courses + events) ---------- */
.mln-cat-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mln-cat-tabs .ui-button.mln-cat-tab {
    background: transparent; border: 1px solid var(--mln-divider);
    color: var(--mln-text-muted); border-radius: 999px; padding: 0.4rem 1rem;
}
.mln-cat-tabs .ui-button.mln-cat-tab.is-on {
    background: var(--mln-move-connect-wash); border-color: var(--mln-primary);
    color: var(--mln-move-connect-ink); font-weight: 600;
}
.mln-cat-search {
    display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem;
}
.mln-cat-search .ui-inputtext { flex: 1 1 20rem; min-width: 0; }
.mln-cat-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mln-cat-heading { font-family: var(--mln-font-display); font-size: 1.1rem; margin: 0 0 0.9rem; }
.mln-cat-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.mln-cat-card {
    padding: 1rem 1.1rem; background: var(--mln-surface);
    border: 1px solid var(--mln-divider); border-radius: var(--mln-radius-lg);
}
.mln-cat-card h3 { margin: 0; font-family: var(--mln-font-display); font-size: 1rem; }
.mln-cat-desc {
    margin: 0.5rem 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--mln-text-muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Affiliations: the two shields ---------- */
/* ---- affiliations identity strip ---- */
.mln-affil-identity {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1.25rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--mln-divider); border-radius: var(--mln-radius-lg);
    background: var(--mln-surface);
}
.mln-affil-id-left { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.mln-affil-id-avatar, .mln-affil-id-avatar-img {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
}
.mln-affil-id-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mln-move-connect-wash); color: var(--mln-move-connect-ink);
    font-weight: 700; font-size: 1rem; letter-spacing: 0.02em;
}
.mln-affil-id-avatar-img { object-fit: cover; }
/* The circle as the upload control, same treatment as the Connect step. */
.mln-affil-id-avatar-btn {
    position: relative; display: inline-block; padding: 0; border: 0; cursor: pointer;
    background: none; border-radius: 50%; line-height: 0; flex: 0 0 auto;
}
.mln-affil-id-avatar-btn .mln-avatar-overlay {
    position: absolute; inset: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.42); color: #fff; opacity: 0; transition: opacity .15s;
    font-size: 0.9rem;
}
.mln-affil-id-avatar-btn:hover .mln-avatar-overlay,
.mln-affil-id-avatar-btn:focus-visible .mln-avatar-overlay { opacity: 1; }
.mln-affil-id-avatar-btn:focus-visible { outline: 2px solid var(--mln-primary); outline-offset: 3px; }
.mln-affil-id-body { min-width: 0; }
.mln-affil-id-name { font-weight: 600; font-size: 0.98rem; }
.mln-affil-id-email { font-size: 0.8rem; color: var(--mln-text-muted); overflow: hidden; text-overflow: ellipsis; }
.mln-affil-id-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.mln-id-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.5rem; border-radius: 999px;
    font-size: 0.68rem; font-weight: 600;
    background: var(--mln-surface-2, #eef3f0); color: var(--mln-text-muted);
}
.mln-id-pill.is-authed { background: var(--mln-move-explore-wash); color: var(--mln-move-explore-ink); }
.mln-id-pill .pi { font-size: 0.7rem; }

.mln-affil-help-lede { margin: 0 0 1rem; font-size: 0.86rem; line-height: 1.55; color: var(--mln-text-muted); }
.mln-affil-help-list { display: flex; flex-direction: column; gap: 1rem; }
.mln-affil-help-row { display: flex; align-items: flex-start; gap: 0.8rem; }
.mln-affil-help-row b { display: block; font-size: 0.92rem; margin-bottom: 0.2rem; }
.mln-affil-help-row span { font-size: 0.83rem; line-height: 1.55; color: var(--mln-text-muted); }
.mln-affil-help-icon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mln-move-connect-wash); color: var(--mln-move-connect-ink);
}

.mln-shields { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.mln-shield {
    padding: 1.25rem; min-width: 0;
    background: var(--mln-surface);
    border: 1px solid var(--mln-divider);
    border-top: 3px solid var(--move, var(--mln-primary));
    border-radius: var(--mln-radius-lg);
}
.mln-shield-title { font-family: var(--mln-font-display); font-size: 1.1rem; margin: 0 0 1rem; color: var(--move-ink); }
/* The communities shield carries the explainer and both request paths; at one column the
   prose set to half the measure of the two shields beside it. */
.mln-shield--wide { grid-column: 1 / -1; }
.mln-shield-explain {
    margin: -0.4rem 0 1.1rem; font-size: 0.85rem; line-height: 1.6; color: var(--mln-text-muted);
    max-width: 62ch;
}

/* ---- Home: what you are waiting on ---- */
.mln-home-pending {
    padding: 1.1rem 1.2rem 1.2rem; margin-bottom: 1.5rem;
    border: 1px solid var(--mln-move-learn-ink); border-radius: var(--mln-radius-lg);
    background: var(--mln-move-learn-wash);
}
.mln-home-pending .mln-feed-head h2 { color: var(--mln-move-learn-ink); }
.mln-pending-row {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,.06);
}
.mln-pending-row:last-of-type { border-bottom: 0; }
.mln-pending-kind {
    flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 999px;
    background: var(--mln-surface); color: var(--mln-move-learn-ink);
}
.mln-pending-name { flex: 1 1 12rem; min-width: 0; font-size: 0.9rem; font-weight: 600; }
.mln-pending-status { flex: 0 0 auto; font-size: 0.74rem; color: var(--mln-text-muted); }

/* ---- claim search ---- */
.mln-claim-search {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0 0.7rem; margin-bottom: 0.4rem;
    border: 1px solid var(--mln-stone, #d3d1be); border-radius: var(--mln-radius);
    background: var(--mln-surface);
}
.mln-claim-search:focus-within { border-color: var(--mln-primary); }
.mln-claim-search .pi { color: var(--mln-text-light); flex: 0 0 auto; }
.mln-claim-search .mln-claim-search-input {
    flex: 1 1 auto; min-width: 0; border: 0 !important; background: none !important;
    box-shadow: none !important; padding: 0.55rem 0;
}
/* The WRAPPER carries the focus indicator (:focus-within above), because the icon is part
   of the control. The input's own outline drawn inside it reads as a second border, so it
   is suppressed here and only here — nothing else loses its focus ring. */
.mln-claim-search .mln-claim-search-input:focus,
.mln-claim-search .mln-claim-search-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
/* The results float over what follows instead of pushing it down — a search that shoves
   the Create button off the card every keystroke is unusable. The wrapper is the
   positioning context; the panel is the bordered sheet. */
.mln-claim-search-wrap { position: relative; }
.mln-claim-hits {
    position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 60;
    max-height: 18rem; overflow-y: auto;
    padding: 0.3rem;
    border: 1px solid var(--mln-stone, #d3d1be);
    border-radius: var(--mln-radius-lg);
    background: var(--mln-surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}
/* Closed by default. The wrapper carries the state because ajax re-renders the panel
   itself on every keystroke and would reset anything held on it. */
.mln-claim-hits { display: none; }
.mln-claim-search-wrap.is-open .mln-claim-hits { display: block; }
/* Nothing found and nothing typed: no empty sheet hanging under the field. */
.mln-claim-hits:empty { display: none !important; }
.mln-claim-hit {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    padding: 0.5rem 0.6rem; border-radius: var(--mln-radius);
    text-decoration: none !important; color: var(--mln-text);
}
.mln-claim-hit + .mln-claim-hit { border-top: 1px solid var(--mln-divider); }
.mln-claim-hit:hover { background: var(--mln-surface-2, #eef3f0); }
.mln-claim-hit-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mln-claim-hit-name { font-size: 0.87rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mln-claim-hit-where { font-size: 0.72rem; color: var(--mln-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mln-claim-pill {
    flex: 0 0 auto; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 999px;
}
.mln-claim-pill.is-claimed { background: var(--mln-surface-2, #eef3f0); color: var(--mln-text-muted); }
.mln-claim-pill.is-open    { background: var(--mln-move-explore-wash); color: var(--mln-move-explore-ink); }

/* ---- confirm / create dialogs ---- */
.mln-confirm-lede { margin: 0 0 0.9rem; font-size: 0.88rem; line-height: 1.6; color: var(--mln-text-muted); }
.mln-confirm-name {
    margin: 0 0 1.1rem; font-family: var(--mln-font-display); font-size: 1.05rem; color: var(--mln-text);
}
.mln-confirm-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }
/* PrimeFaces sizes a selectOneMenu to its widest OPTION and writes that inline as
   `min-width`, NOT `width` — the land-node picker rendered 791px inside a 556px shield.
   `width: 100%` cannot shrink past an inline min-width, so that has to be overridden
   too; overriding width alone looks right in the stylesheet and changes nothing. */
.mln-shield { min-width: 0; }
.mln-shield .ui-selectonemenu,
.mln-shield .ui-inputfield,
.mln-shield .ui-inputtextarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}
.mln-shield .ui-selectonemenu-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
/* The overlay panel is body-level, so it is not covered by the .mln-shield rules and
   must be capped on its own or the list itself reopens the same overflow. */
.ui-selectonemenu-panel { max-width: min(28rem, 92vw); }
.ui-selectonemenu-panel .ui-selectonemenu-item {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mln-shield-sub {
    font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 600; color: var(--mln-text-light); margin: 1.1rem 0 0.5rem;
}
.mln-shield-sub:first-of-type { margin-top: 0; }
.mln-claim-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.6rem 0.8rem; margin-bottom: 0.4rem;
    border: 1px solid var(--mln-divider); border-radius: var(--mln-radius);
    background: var(--mln-surface-2, #eef3f0); font-size: 0.88rem;
}
.mln-claim-row.is-confirmed { border-left: 3px solid var(--mln-move-explore); }
.mln-claim-row.is-pending   { border-left: 3px solid var(--mln-move-learn); }
.mln-claim-row.is-declined  { border-left: 3px solid var(--mln-divider); opacity: .7; }
.mln-claim-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mln-claim-status { font-size: 0.7rem; color: var(--mln-text-muted); white-space: nowrap; }
.mln-claim-empty {
    padding: 0.7rem 0.8rem; border: 1px dashed var(--mln-stone, #d3d1be);
    border-radius: var(--mln-radius); color: var(--mln-text-muted); font-size: 0.82rem;
}

/* ---------- Land node detail: the action rail and the trust ladder ---------- */
.mln-acts { display: flex; flex-direction: column; gap: 0.6rem; }
.mln-act {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--mln-divider); border-radius: var(--mln-radius-lg);
    background: var(--mln-surface);
}
.mln-act.is-gated { opacity: .72; }
.mln-act-text { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.mln-act-text b { font-size: 0.92rem; }
.mln-act-text small { font-size: 0.76rem; color: var(--mln-text-muted); line-height: 1.4; }

.mln-tierbox {
    padding: 1.15rem; border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius-lg); background: var(--mln-surface);
}
.mln-ladder { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.mln-rung {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.8rem; color: var(--mln-text-light);
}
.mln-rung.is-on { color: var(--mln-text); font-weight: 500; }
.mln-rung-dot {
    width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto;
    background: var(--mln-divider);
}
.mln-rung.is-on .mln-rung-dot { background: var(--mln-move-explore); }
/* A feed card that is a link still reads as a card, not as link text. */
.mln-feed-card-link { display: block; text-decoration: none; color: var(--mln-text); }
.mln-feed-card-link:hover { text-decoration: none; color: var(--mln-text); border-color: var(--move, var(--mln-primary)); }

/* ---------- Portal detail pages: course, event, organization, community ----------
   Siblings of the land-node detail page, so they reuse .mln-ob-split, .mln-acts,
   .mln-act and .mln-tierbox. Only what those did not already cover is below. */

/* A row or card that is a link still reads as a row or card, not as link text. */
.mln-claim-row-link,
.mln-cat-card-link { text-decoration: none; color: inherit; }
.mln-claim-row-link:hover,
.mln-cat-card-link:hover {
    text-decoration: none; color: inherit;
    border-color: var(--mln-primary);
}
/* h:outputLink renders an <a>, which is inline; the plain-row twin beside it is a
   block. Without this the linked rows collapse to their text width and the two
   states of the same list do not line up. */
.mln-claim-row-link { display: flex; }
.mln-cat-card-link  { display: block; }

.mln-detail-body {
    margin: 0 0 0.75rem; font-size: 0.9rem; line-height: 1.6; color: var(--mln-text);
}
.mln-detail-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.mln-detail-chip {
    padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.74rem;
    border: 1px solid var(--mln-divider); background: var(--mln-surface-2, #eef3f0);
    color: var(--mln-text-muted);
}

/* Key/value facts. A <dl> rather than rows of divs: these are term-definition pairs,
   and the grid is what keeps the two columns aligned across a wrapping value. */
.mln-facts {
    display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem;
    margin: 0.5rem 0 0; font-size: 0.82rem;
}
.mln-facts dt { color: var(--mln-text-muted); }
.mln-facts dd { margin: 0; color: var(--mln-text); min-width: 0; overflow-wrap: anywhere; }

/* The trailing control in an .mln-act row when it is a link or a note rather than a
   p:commandButton. Sized to match the p-button-sm beside it on the node page. */
.mln-act-link {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto;
    padding: 0.4rem 0.75rem; border-radius: var(--mln-radius);
    border: 1px solid var(--mln-primary); background: var(--mln-primary);
    color: #fff; font-size: 0.82rem; text-decoration: none; white-space: nowrap;
}
.mln-act-link:hover { text-decoration: none; color: #fff; filter: brightness(1.06); }
.mln-act-none { flex: 0 0 auto; font-size: 0.76rem; color: var(--mln-text-muted); white-space: nowrap; }
.mln-act-form { flex: 0 0 auto; margin: 0; }

@media (max-width: 640px) {
    .mln-facts { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .mln-facts dd { margin-bottom: 0.45rem; }
}

/* ---------- Content links on the portal detail pages ----------
   A bare <a> inside the body of a detail page — an organization's website, an event's
   site — was inheriting the USER-AGENT blue (#0000EE), because nothing in this stylesheet
   had ever claimed a plain anchor in portal content. Scoped to the two content wrappers
   rather than set on `a` globally: the rail, the topbar, the cards and the tag chips all
   style their own anchors and MUST NOT be repainted.

   `.mln-cat-card-link` and `.mln-feed-card-link` are excluded on purpose — a card that is
   a link still reads as a card, which is the rule the two rules above this one set. */
.mln-ob-split a:not([class]),
.mln-facts a:not([class]),
.mln-detail-body a:not([class]) {
    color: var(--mln-primary);
    text-decoration: none;
}
.mln-ob-split a:not([class]):hover,
.mln-facts a:not([class]):hover,
.mln-detail-body a:not([class]):hover {
    color: var(--mln-primary-700);
    text-decoration: underline;
}

/* The event name in the Upcoming / Past tables. These read as a column of links, unlike
   the discovery cards above them where the whole card is the target. */
.mln-section .ui-datatable td a {
    color: var(--mln-primary);
    text-decoration: none;
    font-weight: 600;
}
.mln-section .ui-datatable td a:hover {
    color: var(--mln-primary-700);
    text-decoration: underline;
}

/* ---------- The "where is this" map on a detail page ----------
   Sized to the land-node detail map (300px) so the two read as the same component.
   Lives in portal-theme.css because BOTH surfaces load it — the directory template pulls
   this stylesheet in too, so the public pages inherit the same box without a second copy. */
.mln-place-map-wrap { margin-top: 0.5rem; }
.mln-place-map {
    position: relative; height: 300px;
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius-lg);
    overflow: hidden;
}
/* Says whose coordinates these are when the record borrowed them, or that the outline is
   a region rather than a point. Never decorative — it is the honesty line under the map. */
.mln-place-map-note {
    margin: 0.45rem 0 0;
    font-size: 0.78rem; line-height: 1.45;
    color: var(--mln-text-muted);
}

@media (max-width: 640px) {
    .mln-place-map { height: 220px; }
}

/* The way out of a lens. Sits above the lens title, so it is spaced as a crumb rather
   than as one of the page's actions. p:commandLink renders an <a>, which is inline. */
.mln-lens-back {
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* ---------- Task 3: the theme's own underline on a command link ----------
   Diamond ships `body .ui-commandlink:hover { text-decoration: underline }` — specificity
   (0,2,1), which beat the .mln-claim-row-link:hover rule above at (0,2,0). A row that is a
   link still reads as a row, so it is matched here at equal weight rather than with
   !important. MEASURED: without this the affiliation rows underline their whole contents
   on hover. */
body .ui-commandlink.mln-claim-row-link:hover,
body .ui-commandlink.mln-claim-row-link:hover * {
    text-decoration: none;
}

/* ---------- A card whose entity has no public page yet ----------
   Carries a native title=, so the explanation arrives on hover with no JS and no
   custom tooltip layer. Muted rather than disabled-looking: the CONTENT is real and
   worth reading, it is only the onward link that does not exist. */
.mln-feed-card-soon,
.mln-cat-card-soon { cursor: help; }
.mln-feed-card-soon h3,
.mln-cat-card-soon h3 { color: var(--mln-text-muted); }
.mln-soon-text { cursor: help; color: var(--mln-text-muted); }

/* ==========================================================================
   The profile grid on the onboarding overview.

   Ported from claude/reference/prototypes/mycelium-onboarding.html — six cards
   under the four move cards: Identity & aim, Practitioner type, Trust tier,
   Pathways, Consent & visibility, Affiliations.

   The prototype's own palette is NOT copied. Its --sage/--paper-2/--soil map onto
   this app's tokens, so the cards inherit the theme and the light/dark switch
   instead of pinning the prototype's hex values.
   ========================================================================== */

.mln-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    /* Cards in a row share the tallest one's height, so the row reads as a band
       rather than a ragged edge. */
    align-items: stretch;
}
/* A card holding a working list rather than a summary takes the whole row — in one
   column it becomes a tall strip beside two columns of whitespace. */
.mln-profile-card-wide { grid-column: 1 / -1; }

.mln-profile-card {
    background: var(--mln-surface);
    border: 1px solid var(--mln-divider);
    border-radius: var(--mln-radius-lg);
    padding: 1.25rem;
    text-align: left;
}

/* Title row: serif heading, optional action link pushed right, hairline under. */
.mln-profile-card-head {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.9rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mln-divider);
}
.mln-profile-card-head h2,
.mln-profile-card-head h3 {
    font-family: var(--mln-font-display);
    font-size: 1.1rem; margin: 0; flex: 1; font-weight: 600;
}
/* A card head's action reads as a quiet link, not a button competing with the
   heading beside it. Opt-in per control: a head carrying two actions that differ
   in weight MUST keep them as buttons, or they flatten into one another. */
.mln-profile-card-head .ui-button.mln-card-action,
.mln-profile-card-head .ui-commandlink.mln-card-action {
    font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--mln-text-muted);
    background: transparent; border: none; padding: 0;
    border-bottom: 1px solid transparent;
}
.mln-profile-card-head .ui-button.mln-card-action:hover,
.mln-profile-card-head .ui-commandlink.mln-card-action:hover {
    color: var(--mln-primary); background: transparent;
    border-bottom-color: currentColor; text-decoration: none;
}
.mln-profile-card-head .ui-button.mln-card-action .ui-button-text { padding: 0; }

/* A card's actions when they do not fit its head: their own row beneath it. */
.mln-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.mln-card-actions .ui-button { flex: 0 1 auto; }
/* Diamond ships no p-button-outlined, so a secondary action styled with it renders
   identical to the primary beside it. This is that missing weight. */
.ui-button.mln-button-quiet {
    background: transparent; color: var(--mln-primary);
    border: 1px solid var(--mln-primary);
}
.ui-button.mln-button-quiet:hover {
    background: var(--mln-primary); color: #fff;
}

/* Key/value rows. A fixed key column so the values line up down the card. */
.mln-pf-row {
    display: grid; grid-template-columns: 110px 1fr;
    gap: 0.75rem; margin-bottom: 0.65rem; align-items: start;
}
.mln-pf-row:last-child { margin-bottom: 0; }
.mln-pf-k {
    font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--mln-text-muted); font-weight: 700; padding-top: 0.15rem;
}
.mln-pf-v { font-size: 0.86rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.mln-pf-note {
    font-size: 0.72rem; color: var(--mln-text-muted);
    margin: 0.6rem 0 0; line-height: 1.45;
}

/* Trust tier: four cells, the reached one filled, the rest dashed outlines. */
.mln-tier-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.mln-tier-cell {
    padding: 0.7rem 0; border-radius: var(--mln-radius); text-align: center;
    font-size: 0.75rem; letter-spacing: .14em; color: var(--mln-text-muted);
    border: 1px dashed var(--mln-divider); background: transparent;
    /* tierClass() also emits .mln-tier, whose flex-ladder min-width is wider than a
       quarter of this card. Four of those overflow the card instead of sharing it. */
    min-width: 0;
}
/* Class names come from PortalPractitionerView.tierClass(): mln-tier-current for the
   tier held, mln-tier-past for one already passed, bare for one still ahead. */
.mln-tier-cell.mln-tier-current {
    background: var(--mln-primary); color: #fff;
    border-style: solid; border-color: var(--mln-primary); font-weight: 600;
}
/* A tier already passed reads as held, not as still to come. */
.mln-tier-cell.mln-tier-past {
    background: var(--mln-surface-2, #eef3f0);
    border-style: solid; color: var(--mln-text);
}

/* Consent rows: label + note on the left, the control on the right. */
.mln-consent-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0;
    border-bottom: 1px dashed var(--mln-divider);
}
.mln-consent-row:last-of-type { border-bottom: none; }
.mln-consent-row > div:first-child { flex: 1; min-width: 0; }
.mln-consent-row b { font-size: 0.86rem; font-weight: 600; }
.mln-consent-note {
    display: block; font-size: 0.72rem; color: var(--mln-text-muted);
    margin-top: 0.15rem; line-height: 1.4;
}

@media (max-width: 640px) {
    .mln-profile-grid { grid-template-columns: 1fr; }
    .mln-pf-row { grid-template-columns: 1fr; gap: 0.15rem; }
}