:root { --control-border: #6b7c68; --text-primary: #15231b; --text-secondary: #39473f; --text-link: #234431; --text-danger: #821b1b; font-family: var(--font-ui); color: var(--text-primary); background: #f3f5f1; color-scheme: light; }
/* Shared text roles. Use these tokens in page styles instead of local scales.
   Caption: metadata/badges; small: help text; control: labels/actions.
   Decorative story headings and icon glyphs intentionally have their own scale. */
:root {
    /* Page geometry belongs here; feature styles only size inner content. */
    --page-max-width: 1440px;
    --page-gutter: 24px;
    --page-padding-block: 32px;
    --page-heading-gap: 28px;
    --page-section-gap: 24px;
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: Georgia, "Times New Roman", serif;
    --font-code: ui-monospace, SFMono-Regular, monospace;
    --text-caption: .75rem;
    --text-small: .875rem;
    --text-control: .875rem;
    --text-body: 1rem;
    --text-heading-1: clamp(1.75rem, 4vw, 2.375rem);
    --text-heading-2: 1.5rem;
    --text-heading-3: 1.125rem;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-body: 1.6;
    --leading-heading: 1.25;
    --tracking-heading: -.025em;
    --tracking-label: .08em;
}
body { font-size: var(--text-body); line-height: var(--leading-body); }
h1, h2, h3, h4 { font-weight: var(--weight-bold); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; overflow-wrap: anywhere; }
h1 { margin: 0 0 10px; font-size: var(--text-heading-1); }
h2 { font-size: var(--text-heading-2); }
h3 { font-size: var(--text-heading-3); }
h4 { font-size: var(--text-body); }
button, input, select, textarea { font-family: var(--font-ui); }
button { font-size: var(--text-control); font-weight: var(--weight-semibold); line-height: 1.5; }
label, legend { font-size: var(--text-control); font-weight: var(--weight-semibold); }
small { font-size: var(--text-caption); }
code, kbd, pre { font-family: var(--font-code); }
.eyebrow, .auth-eyebrow, .notification-eyebrow, .notification-label, .design-section-label { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); }
.hint, .muted, .page-note, .notification-help { font-size: var(--text-small); line-height: var(--leading-body); color: var(--text-secondary); }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--text-link); text-underline-offset: 3px; }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
main { width: 100%; flex-shrink: 0; max-width: var(--page-max-width); margin: 0 auto; padding: var(--page-padding-block) var(--page-gutter); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .table-scroll:focus-visible { outline: 3px solid #587d61; outline-offset: 3px; }
.portal-header { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 16px 24px; background: #fff; border-bottom: 1px solid #dce3dc; }
.portal-menu { display: flex; align-items: center; flex: 1; flex-wrap: wrap; gap: 20px; min-width: 0; }
.portal-menu[hidden], .portal-menu-toggle[hidden] { display: none; }
.portal-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 8px 12px; border: 1px solid var(--control-border); border-radius: 8px; background: #fff; color: var(--text-link); cursor: pointer; }
.portal-menu-toggle:hover { background: #edf2eb; }
.portal-menu-toggle svg { flex-shrink: 0; }
.portal-menu-icon-close, .portal-menu-toggle[aria-expanded="true"] .portal-menu-icon-open { display: none; }
.portal-menu-toggle[aria-expanded="true"] .portal-menu-icon-close { display: block; }
.portal-brand { font-weight: var(--weight-bold); text-decoration: none; }
.portal-nav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.portal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.portal-nav a:hover { background: #f3f5f1; }
.portal-nav a[aria-current="page"] { background: #e3ecdf; font-weight: var(--weight-bold); text-decoration: underline; }
.nav-group { position: relative; }
.nav-group summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--text-link); cursor: pointer; list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-group[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.nav-group summary:hover, .nav-group[open] summary { background: #f3f5f1; }
.nav-group.is-current > summary { background: #e3ecdf; font-weight: var(--weight-bold); }
.nav-group summary:focus-visible { outline: 3px solid #587d61; outline-offset: 3px; }
.portal-nav .nav-children { position: absolute; top: 100%; left: 0; z-index: 20; display: flex; flex-direction: column; gap: 4px; min-width: 240px; padding: 8px; border: 1px solid #cfd8cf; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #15231b1a; }
.nav-children li, .portal-nav .nav-children a { width: 100%; }
/* Collapse before the full operator navigation and account details crowd the header. */
@media (max-width: 1100px) {
    .portal-menu { order: 3; flex: 1 1 100%; align-items: stretch; flex-direction: column; gap: 16px; }
    .portal-menu:has(.portal-nav) { padding-top: 16px; border-top: 1px solid #dce3dc; }
    .portal-nav > ul { display: grid; gap: 4px; }
    .portal-nav > ul > li > a { width: 100%; }
    .nav-group summary { justify-content: space-between; }
    .portal-nav .nav-children { position: static; min-width: 0; margin: 4px 0 8px 12px; box-shadow: none; }
}
.portal-account { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.portal-email { overflow-wrap: anywhere; font-size: var(--text-small); }
.portal-role { border-radius: 6px; padding: 5px 10px; background: #edf2eb; font-size: var(--text-caption); }
.portal-account button { width: auto; min-height: 44px; padding: 8px 12px; border: 1px solid var(--control-border); background: white; color: var(--text-link); border-radius: 8px; font: inherit; font-size: var(--text-control); font-weight: var(--weight-semibold); line-height: 1.5; cursor: pointer; }
.account-menu { position: relative; }
.account-menu > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--control-border); border-radius: 8px; background: #fff; color: var(--text-link); font-size: var(--text-control); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { background: #edf2eb; }
.account-menu.is-current > summary { background: #e3ecdf; }
.account-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: min(300px, calc(100vw - 32px)); padding: 8px; border: 1px solid #cfd8cf; border-radius: 10px; background: #fff; max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
.account-identity { display: grid; justify-items: start; gap: 8px; padding: 12px; border-bottom: 1px solid #dce3dc; margin-bottom: 8px; }
.account-popover nav { display: grid; }
.account-popover a, .account-popover button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 6px; background: #fff; color: var(--text-link); text-decoration: none; font-size: var(--text-control); text-align: left; }
.account-popover a:hover, .account-popover button:hover { background: #edf2eb; }
.account-popover a[aria-current="page"] { background: #e3ecdf; font-weight: var(--weight-bold); text-decoration: underline; }
.account-popover form { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #dce3dc; }
/* Right-side utilities remain reachable while the mobile navigation is closed. */
.portal-account .notification-bell-label { display: none; }
.portal-account .notification-popover { left: auto; right: 0; width: min(390px, calc(100vw - 104px)); }
@media (max-width: 1100px) {
    .portal-account { margin-left: 0; }
    .account-menu-label { display: none; }
    .account-menu > summary { padding: 8px; }
    .portal-header:not(:has(.portal-menu-toggle)) .portal-account { margin-left: auto; }
}
@media (max-width: 540px) {
    .portal-header:has(.portal-menu-toggle) { column-gap: 8px; }
    .portal-account .notification-menu > summary { width: 44px; padding: 8px; }
    .portal-account .notification-count { position: absolute; top: -7px; right: -5px; min-width: 20px; padding: 1px 4px; }
    .portal-menu-toggle { width: 44px; padding: 8px; }
    .portal-menu-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .portal-brand { gap: 6px; font-size: var(--text-small); }
}
.skip-link { position: absolute; top: 8px; left: 16px; transform: translateY(-200%); padding: 12px; background: white; z-index: 40; }
.skip-link:focus { transform: translateY(0); }
#main-content { min-width: 0; }
@media (max-width: 700px) { .portal-header { padding: 16px; gap: 12px; } .portal-nav { width: 100%; } .portal-account { margin-left: 0; } :root { --page-gutter: 16px; --page-padding-block: 28px; } }


.portal-footer { margin-top: auto; border-top: 1px solid #b7c7b4; background: #e4ebe0; box-shadow: inset 0 1px 0 #ffffff80; color: var(--text-secondary); }
.portal-footer-inner { max-width: var(--page-max-width); margin: 0 auto; padding: 32px var(--page-gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; font-size: var(--text-caption); }
.portal-footer-brand { display: grid; gap: 6px; }
.portal-footer-name { font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--text-primary); }
.portal-footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.portal-footer-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 0; text-decoration: none; border-radius: 3px; touch-action: manipulation; }
.portal-footer-links a:hover { text-decoration: underline; color: var(--text-primary); }
@media (max-width: 700px) { .portal-footer-inner { padding-block: 24px; } }

.portal-brand { display: inline-flex; align-items: center; gap: 10px; }
.portal-mark { flex: 0 0 32px; border-radius: 9px; }

.pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #dce5d6; font-size: var(--text-small); }
.pagination p { margin: 0; color: var(--text-secondary); }
.pagination > div { display: flex; gap: 12px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--control-border); border-radius: 8px; }
.pagination a { background: #f8faf5; }
.pagination [aria-disabled] { color: var(--text-secondary); border-color: #e3e9de; }

/* Shared button and link variants. Page styles must preserve these states. */
a, button, summary { touch-action: manipulation; }
summary:focus-visible { outline: 3px solid #587d61; outline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.button-link,
button.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #345744;
    border-radius: 8px;
    font: inherit;
    font-size: var(--text-control);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.button-link:not(.secondary) { background: #345744; color: #fff; }
.button-link:hover { background: #264332; color: #fff; }
.button-link.secondary,
button.secondary {
    background: #fff;
    border-color: var(--control-border);
    color: var(--text-link);
}
.button-link.secondary:hover,
.design-workspace .button-link.secondary:hover,
button.secondary:hover:enabled { background: #edf2eb; border-color: #6d8773; color: var(--text-link); }
button.secondary.danger { background: #fff; border-color: #a66055; color: var(--text-danger); }
button.secondary.danger:hover:enabled { background: #fff0ed; border-color: #a66055; }
button.secondary.danger:active:enabled { background: #f9e0da; }
button.secondary.danger:focus-visible { outline-color: #821b1b; }
button:disabled { cursor: not-allowed; }
button.secondary:disabled { opacity: .55; }
.portal-account button:hover:enabled { background: #edf2eb; border-color: #6d8773; }
.design-text-button { min-height: 44px; padding-inline: 10px; border-radius: 8px; }
.design-text-button:hover:enabled { background: #e2ecd9; }
.design-package h3 a:hover { text-decoration: underline; }
.design-asset-body > form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e3e8df; }

/* Shared return navigation, matching the design workspace's sage back control. */
a.back-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: #e9eee3;
    color: var(--text-link);
    font-size: var(--text-control);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    text-decoration: none;
    vertical-align: middle;
}
a.back-link svg { flex: 0 0 16px; }
a.back-link:hover { border-color: #c3d0b9; background: #dfe9d5; color: #213d2b; }
a.back-link:active { background: #e2ecd9; }