/* Shared design tokens, document defaults, navigation, and page chrome. */

:root {
    color-scheme: light;
    --sb-bg: #e9ecef;
    --sb-surface: #efeff2;
    --sb-input-bg: #ffffff;
    --sb-readonly-bg: #f0f0f0;
    --sb-surface-alt: #f8fafc;
    --sb-panel-bg: #eaf2f8;
    --sb-panel-border: #c7d7e4;
    --sb-header: #132235;
    --sb-header-2: #1b3048;
    --sb-text: #172033;
    --sb-text-soft: #667386;
    --sb-border: #d5dce5;
    --sb-border-strong: #bcc7d4;
    --sb-primary: #1769aa;
    --sb-primary-hover: #10588f;
    --sb-primary-soft: #e8f2fa;
    --sb-success: #257a4b;
    --sb-success-hover: #1d653d;
    --sb-success-soft: #e8f5ed;
    --sb-warning: #a7650b;
    --sb-warning-soft: #fff5df;
    --sb-danger: #b23a3a;
    --sb-danger-hover: #982f2f;
    --sb-danger-soft: #fdecec;
    --sb-info-soft: #e9f3fb;
    --sb-radius: 6px;
    --sb-radius-sm: 4px;
    --sb-shadow: 0 1px 2px rgba(18, 35, 54, .06), 0 4px 14px rgba(18, 35, 54, .035);
    --sb-focus: 0 0 0 3px rgba(23, 105, 170, .16);
    --sb-control-h: 25px;
    --sb-control-pad-x: 0px;
    --sb-font-xs: .75rem;
    --sb-font-sm: .8125rem;
    --sb-font-md: .875rem;
    --sb-font-lg: 1rem;
    --sb-font-2xl: 1.5rem;
    --sb-layout-max: 1830px;
    --portcall-color-chip-width: 24px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--sb-text);
    background: var(--sb-bg);
}

* { box-sizing: border-box; }
html {
    min-height: 100%;
    background: var(--sb-bg);
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
body {
    min-height: 100%;
    margin: 0;
    background: var(--sb-bg);
    color: var(--sb-text);
    font-size: var(--sb-font-md);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--sb-primary); text-decoration: none; }
a:hover { color: var(--sb-primary-hover); text-decoration: underline; }
button, input, select, textarea { font: inherit; }
.hidden, .search-hidden, [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, var(--sb-header-2), var(--sb-header));
    border-bottom: 1px solid #0d1c2d;
    box-shadow: 0 2px 8px rgba(5, 18, 32, .16);
}
.app-header__inner {
    width: min(100%, var(--sb-layout-max));
    min-height: 46px;
    margin: 0 auto;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand {
    flex: 0 0 auto;
    color: #fff;
    font-size: var(--sb-font-lg);
    font-weight: 850;
    letter-spacing: .12em;
    white-space: nowrap;
}
.brand:hover { color: #fff; text-decoration: none; }
.main-nav {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    overflow: visible;
}
.main-nav a,
.main-nav__pin--readonly {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--sb-radius-sm);
    color: #dbe5ef;
    font-size: var(--sb-font-xs);
    font-weight: 750;
    letter-spacing: .025em;
    line-height: 1;
    white-space: nowrap;
}
.main-nav a:hover,
.main-nav a.is-active {
    color: #fff;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    text-decoration: none;
}
.main-nav__pin {
    background: transparent;
    border-color: transparent;
}
.main-nav .main-nav__pin:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
}
.main-nav__pin--readonly { color: #c8d5e2; }
.user-area {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cbd6e1;
    font-size: var(--sb-font-xs);
    white-space: nowrap;
}
.user-area > span { font-size: var(--sb-font-xs); font-weight: 750; }
.user-area form { margin: 0; }
.editor-nav { display: flex; align-items: center; gap: 4px; }
.app-header .btn {
    min-height: 28px;
    padding: 5px 9px;
    font-size: var(--sb-font-xs);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #f4f7fa;
}
.editor-nav .btn { background: transparent; border-color: transparent; color: #dbe5ef; }
.editor-nav .btn:hover,
.editor-nav .btn.is-active { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); }
.app-header .logout-button { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); color: #fff; }
.app-header .btn:hover { background: rgba(255,255,255,.15); color: #fff; }

.app-main {
    width: min(100%, var(--sb-layout-max));
    margin: 0 auto;
    padding: 10px 14px 16px;
}

.page-generation-timing {
    margin-top: 10px;
    color: var(--sb-text-soft);
    font-size: var(--sb-font-xs);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Typography / page chrome
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
h1, h2, h3, h4 { margin-top: 0; color: var(--sb-text); }
p { margin: 0 0 .55rem; }
.page-header {
    min-height: 42px;
    margin: 0 0 8px;
    padding: 1px 0 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--sb-border-strong);
}
.page-header__copy { min-width: 0; flex: 1 1 auto; }

.page-header--selector > .page-header__copy { order: 1; }
.page-header--selector > .page-actions--selector-hub {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
}
.page-header h1 {
    margin: 0;
    color: #20314a;
    font-size: clamp(1.25rem, 1.7vw, var(--sb-font-2xl));
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.1;
}
.page-header p {
    max-width: 960px;
    margin: 3px 0 0;
    color: var(--sb-text-soft);
    font-size: var(--sb-font-sm);
}
.page-actions,
.actions,
.actions-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.actions--end { justify-content: flex-end; }
.text-end { text-align: right !important; }
.mt-4 { margin-top: 12px !important; }
.mb-4 { margin-bottom: 12px !important; }
.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.section-heading h2,
.section-heading h3 { margin: 0; font-size: .95rem; font-weight: 800; }
.section-heading p { margin: 2px 0 0; color: var(--sb-text-soft); font-size: var(--sb-font-xs); }
.section-wrapper { margin: 5px 0; }
.section-header {
    margin: 0 0 6px;
    padding: 2px 0 5px;
    border-bottom: 1px solid #b8cad9;
    color: #244c6d;
    font-size: var(--sb-font-sm);
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}