:root{--paper:#f8f9f5;--surface:#fff;--ink:#192b24;--ink-muted:#6a756e;--line:#dde4dc;--accent:#c9edaa;--green:#366949;--radius:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,.brand{font-family:'Segoe UI',system-ui,sans-serif}h1,h2,h3,p{margin-top:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #679c72;outline-offset:4px}h1:focus{outline:none}.brand{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:800;letter-spacing:-1px;white-space:nowrap}.brand-mark{width:32px;height:32px;display:grid;place-items:center;background:var(--ink);color:white;border-radius:9px;font-size:24px}.brand-dot{color:var(--green);margin-left:-8px}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:16px 24px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:14px;cursor:pointer;transition:transform .15s,background .15s}.button:hover{transform:translateY(-2px)}.button-dark{background:var(--ink);color:white}.button-dark:hover{background:#30493c;color:white}.button-light{background:white;border-color:var(--line)}.button-small{padding:11px 18px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;text-transform:uppercase;color:var(--green)}.muted{color:var(--ink-muted)}.skip-link{position:fixed;top:-80px;left:20px;z-index:100;padding:12px;background:var(--ink);color:white}.skip-link:focus{top:12px}.page-loading{padding:48px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.field label{font-size:13px;font-weight:600}.field input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink)}.field input:focus{border-color:var(--green)}.validation-message,.validation-errors{color:#aa3434;font-size:13px}.alert-error{padding:14px;border-radius:9px;color:#8b2e2e;background:#fcecec;margin-bottom:18px;font-size:14px}.auth-card{width:min(460px,calc(100% - 40px));margin:70px auto;padding:36px;background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 50px #192b2406}.auth-card h1{font-size:30px;letter-spacing:-1px}.auth-card .button{width:100%}.auth-note{font-size:13px;text-align:center;margin:24px 0 0;color:var(--ink-muted)}.auth-note a{text-decoration:underline;color:var(--ink)}.auth-card .eyebrow{margin-bottom:14px}.check-row{display:flex;gap:10px;align-items:center;font-size:13px;margin:4px 0 22px}.check-row input{accent-color:var(--green)}.status-page{max-width:650px;margin:80px auto;padding:32px}.status-page h1{font-size:42px}.status-page p{color:var(--ink-muted);line-height:1.7}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}



/* Approved Slate Studio tokens shared by the preview and Support Admin. */
:is(.slate-studio-preview, .slate-studio-admin) {
    --sidebar-bg: #25334A;
    --topbar-bg: #E9EDF3;
    --page-bg: #F3F5F8;
    --card-bg: #FFFFFF;
    --text-primary: #263347;
    --text-secondary: #68788D;
    --text-muted: var(--text-secondary);
    --border-color: #DFE5ED;
    --accent-primary: #4778C5;
    --elevated-bg: var(--card-bg);
    --sidebar-text: #FFFFFF;
    --sidebar-muted: #C8D4E5;
    --sidebar-active-bg: #3B4C68;
    --bg-main: var(--page-bg);
    --bg-sidebar: var(--sidebar-bg);
    --bg-card: var(--card-bg);
    --bg-elevated: var(--elevated-bg);
    --border: var(--border-color);
    --accent: var(--accent-primary);
    --line: var(--border-color);
    --ink-muted: var(--text-secondary);
    --surface: var(--card-bg);
    --guide-space: 8px;
    --card-radius: 18px;
    --card-padding: 24px;
    --card-gap: 16px;
    --card-shadow: 0 6px 18px #00000012;
    --guide-font: 'Segoe UI', system-ui, sans-serif;
    --font-family: var(--guide-font);
    --font-page-title-mobile: 1.375rem;
    --font-page-title-desktop: 1.75rem;
    --font-page-title: clamp(var(--font-page-title-mobile), 0.8125rem + 1.171875vw, var(--font-page-title-desktop));
    --font-section-title-mobile: 1.125rem;
    --font-section-title-desktop: 1.25rem;
    --font-section-title: clamp(var(--font-section-title-mobile), 0.9375rem + 0.390625vw, var(--font-section-title-desktop));
    --font-subheading-mobile: 1rem;
    --font-subheading-desktop: 1.125rem;
    --font-subheading: clamp(var(--font-subheading-mobile), 0.8125rem + 0.390625vw, var(--font-subheading-desktop));
    --font-card-title: 1rem;
    --font-body: 0.875rem;
    --font-long-form: 1rem;
    --font-navigation: 0.875rem;
    --font-table-header: 0.75rem;
    --font-table-value: 0.875rem;
    --font-form-label: 0.8125rem;
    --font-input: 0.875rem;
    --font-secondary: 0.8125rem;
    --font-metadata: 0.75rem;
    --font-button: 0.8125rem;
    --font-toggle: 0.8125rem;
    --font-status: 0.6875rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-status: 750;
    --line-page-heading: 1.3;
    --line-section-heading: 1.35;
    --line-subheading: 1.4;
    --line-body: 1.6;
    --line-navigation: 1.5;
    --line-button: 1.6;
    --line-table-header: 1.4;
    --line-table-value: 1.5;
    --line-form: 1.5;
    --line-secondary: 1.5;
    --line-metadata: 1.4;
    --button-text: var(--text-primary);
    --input-height: 45px;
    --input-radius: 9999px;
    --input-font-family: var(--font-family);
    --input-font-size: var(--font-input);
    --input-font-weight: var(--weight-regular);
    --input-line-height: var(--line-form);
    --input-padding-x: 16px;
    --input-focus: #4778C5;
    --input-error: #B64B59;
    --input-success: #278662;
    --input-validation-font-size: 0.875rem;
    --input-validation-font-weight: var(--weight-semibold);
    --input-background: var(--page-bg);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-muted);
    --input-border: var(--border-color);
    --input-hover-border: var(--text-secondary);
    --input-disabled-background: var(--elevated-bg);
    --input-error-message: #B64B59;
    --input-success-message: #237553;
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-weight: var(--weight-regular);
    line-height: var(--line-body);
    letter-spacing: normal;
    color-scheme: light;
}
:is(.slate-studio-preview, .slate-studio-admin)[data-theme="dark"] {
    --input-error-message: #F28D99;
    --input-success-message: #74D6AE;
    --sidebar-text: #F2F3F5;
    --sidebar-muted: #B5BAC1;
    --sidebar-bg: #1E1F22;
    --topbar-bg: #35383E;
    --page-bg: #2B2D31;
    --card-bg: #36393F;
    --text-primary: #F2F3F5;
    --text-secondary: #B5BAC1;
    --text-muted: #949BA4;
    --border-color: #404249;
    --accent-primary: #9BBAFF;
    --elevated-bg: #3A3D44;
    --sidebar-active-bg: #36393F;
    color-scheme: dark;
}
/* Retain existing white utility button contrast; Accent Pill styles are untouched. */
.slate-studio-preview .button-light, .slate-studio-preview .button-outline { color: #192b24; }

/* Reusable typography roles. They are active only inside the Style Guide. */
.slate-studio-preview :is(code, pre) { font-family: var(--font-family); }
.slate-studio-preview .sl-type-page { font-size: var(--font-page-title); font-weight: var(--weight-semibold); line-height: var(--line-page-heading); }
.slate-studio-preview .sl-type-section { font-size: var(--font-section-title); font-weight: var(--weight-semibold); line-height: var(--line-section-heading); }
.slate-studio-preview .sl-type-subheading { font-size: var(--font-subheading); font-weight: var(--weight-semibold); line-height: var(--line-subheading); }
.slate-studio-preview .sl-type-card { font-size: var(--font-card-title); font-weight: var(--weight-semibold); line-height: var(--line-subheading); }
.slate-studio-preview .sl-type-body { font-size: var(--font-body); font-weight: var(--weight-regular); line-height: var(--line-body); }
.slate-studio-preview .sl-type-long { font-size: var(--font-long-form); font-weight: var(--weight-regular); line-height: var(--line-body); }
.slate-studio-preview .sl-type-navigation { font-size: var(--font-navigation); font-weight: var(--weight-medium); line-height: var(--line-navigation); }
.slate-studio-preview .sl-type-table-header { font-size: var(--font-table-header); font-weight: var(--weight-semibold); line-height: var(--line-table-header); }
.slate-studio-preview .sl-type-table-value { font-size: var(--font-table-value); font-weight: var(--weight-regular); line-height: var(--line-table-value); }
.slate-studio-preview .sl-type-label { font-size: var(--font-form-label); font-weight: var(--weight-medium); line-height: var(--line-form); }
.slate-studio-preview .sl-type-input { font-size: var(--font-input); font-weight: var(--weight-regular); line-height: var(--line-form); }
.slate-studio-preview .sl-type-secondary { font-size: var(--font-secondary); font-weight: var(--weight-regular); line-height: var(--line-secondary); color: var(--text-secondary); }
.slate-studio-preview .sl-type-metadata { font-size: var(--font-metadata); font-weight: var(--weight-regular); line-height: var(--line-metadata); color: var(--text-muted); }
.slate-studio-preview .sl-type-button { font-family: var(--font-family); font-size: var(--font-button); font-weight: var(--weight-regular); line-height: var(--line-button); letter-spacing: normal; color: var(--button-text); }
@media (max-width: 760px) {
    :is(.slate-studio-preview, .slate-studio-admin) { --font-input: 1rem; }
}

/* Support Admin compatibility aliases and typography. Other workspaces retain their themes. */
.slate-studio-admin { display: block; min-height: 100dvh; background: var(--page-bg); color: var(--text-primary); --ink: var(--text-primary); --green: var(--accent-primary); --paper: var(--page-bg); }
.slate-studio-admin .staff-content :is(h1,h2,h3,p,label,input,select,button,a) { letter-spacing: normal; }
.slate-studio-admin .staff-content h1 { font-size: var(--font-page-title); font-weight: 600; line-height: var(--line-page-heading); }
.slate-studio-admin .staff-content h2 { font-size: var(--font-section-title); font-weight: 600; line-height: var(--line-section-heading); }
.slate-studio-admin .staff-content h3 { font-size: var(--font-card-title); font-weight: 600; line-height: var(--line-subheading); }
.slate-studio-admin .staff-content :is(.user-info h2,.list-row h2) { font-size: var(--font-card-title); }
.slate-studio-admin .staff-content p { font-size: var(--font-body); line-height: var(--line-body); }
.slate-studio-admin .staff-content :is(.muted,small,dt,.eyebrow,.page-heading p,.user-info p,.snapshot-info,.history-note,.footer-note) { color: var(--text-secondary); }
.slate-studio-admin .staff-content :is(.user-info h2 a,.back-link,.actions a,.pagination a) { color: var(--text-primary); }
.slate-studio-admin .staff-content :is(.editor,.search-form,.user-list,.list-row,.panel,.metric) { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--card-padding); }
.slate-studio-admin .staff-content .list-row { margin-bottom: var(--card-gap); }
.slate-studio-admin .staff-content .user-row + .user-row { border-color: var(--border); }
.slate-studio-admin .staff-content :is(.badge,.role-badge,.readonly-badge) { background: var(--bg-elevated); color: var(--text-secondary); }
.slate-studio-admin .staff-content :is(.table-scroll,select,.donut > span) { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); }
.slate-studio-admin .staff-content :is(thead,thead th,.bar-track,.donut.no-samples,.history-empty) { background: var(--bg-elevated); color: var(--text-primary); }
.slate-studio-admin .staff-content th { font-size: var(--font-table-header); line-height: var(--line-table-header); }
.slate-studio-admin .staff-content td { font-size: var(--font-table-value); line-height: var(--line-table-value); }
.slate-studio-admin .staff-content :is(.notice,.alert-error) { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); }
.slate-studio-admin .staff-content .alert-error { border-left-color: var(--input-error); }
.slate-studio-admin .staff-content .notice { border-left-color: var(--input-success); }
.slate-studio-admin .staff-content .validation-summary-errors { color: var(--input-error-message); }
.slate-studio-admin .staff-content :is(.search,.search-form > div,.input-row) { align-items: end; gap: 12px; }
.slate-studio-admin .staff-content :is(.search,.search-form > div,.input-row) > .classic-pill-field { flex: 1; min-width: 0; }
.slate-studio-admin .staff-content .classic-pill-input { border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--input-background); color: var(--input-text); padding: .5rem var(--field-padding-right) .5rem var(--field-padding-left); height: max(var(--input-height),calc(1em * var(--input-line-height) + 1rem + 2px)); font: var(--input-font-weight) var(--input-font-size)/var(--input-line-height) var(--font-family); }
.slate-studio-admin .staff-content .classic-pill-input:focus { border-color: var(--input-focus); outline: 2px solid var(--input-focus); outline-offset: 2px; }
.slate-studio-admin .staff-content .classic-pill-label { font-size: var(--font-form-label); font-weight: 500; color: var(--text-primary); }
.slate-studio-admin .staff-content .validation-message { font-size: var(--input-validation-font-size); font-weight: 600; text-align: right; color: var(--input-error-message); }
.slate-studio-admin .staff-content .classic-pill-field .input-description { color: var(--text-secondary); }
.slate-studio-admin .staff-content .accent-pill { color: #fff; }
.slate-studio-admin .staff-content .button { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }
.slate-studio-admin :is(a,button,input,select):focus-visible { outline-color: var(--accent-primary); }
@media(max-width:600px) {
 .slate-studio-admin .staff-content :is(.search,.search-form > div,.input-row) > .classic-pill-field { flex-basis: 100%; }
 .slate-studio-admin .staff-content :is(.actions,.row-actions) { gap: 12px; }
 .slate-studio-admin .staff-content .editor { padding: 24px; }
}

.slate-studio-admin { --muted: var(--text-secondary); }
.slate-studio-admin .staff-content :is(.filters,.entry) { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--card-shadow); }
.slate-studio-admin .staff-content .entry { margin-top: var(--card-gap); }
.slate-studio-admin .staff-content .classic-pill-input:hover:not(:disabled):not(:focus) { border-color: var(--input-hover-border); }
.slate-studio-admin .staff-content .classic-pill-input:disabled { background: var(--input-disabled-background); color: var(--text-secondary); opacity: .75; cursor: not-allowed; }
.slate-studio-admin .staff-content .search > input[type="hidden"] { display: none; }

.slate-studio-admin .staff-content .range-switch a.selected { background: #3B4C68; border-color: #3B4C68; color: #fff; }
.slate-studio-admin .staff-content .field > label { font-size: var(--font-form-label); font-weight: 500; }
.slate-studio-admin .staff-content input[type="date"] { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); }
.slate-studio-admin .staff-content .entry h2 { font-size: var(--font-card-title); }
.slate-studio-admin .staff-content :is(.row-actions,.actions) .accent-pill { text-decoration: none; }

.slate-studio-admin .staff-content :is(.enquiries article,.join-code) { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--card-shadow); }
.slate-studio-admin .staff-content :is(.sender,.history-note,.section-note,.preview-note,.footer-note) { font-size: var(--font-secondary); line-height: var(--line-secondary); color: var(--text-secondary); }
.slate-studio-admin .staff-content :is(time,.snapshot-info,.target) { font-size: var(--font-metadata); line-height: var(--line-metadata); color: var(--text-muted); }
.slate-studio-admin .staff-content .section-nav a { color: var(--text-primary); }
.slate-studio-admin .staff-content .accent-pill.is-compact { min-height: 36px; }
.slate-studio-admin .staff-content .user-row { padding-inline: 0; }