: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}}



/* Connected action surface is shared with the approved Upload control. */
.connected-pill-control { position: relative; display: flex; align-items: center; width: 100%; height: 45px; border: 1px solid var(--border-color, #DFE5ED); border-radius: 999px; background: var(--card-bg, #FFFFFF); color: var(--text-primary, #263347); overflow: hidden; cursor: pointer; }
.connected-pill-icon { display: grid; place-items: center; flex: 0 0 44px; height: 100%; font-size: 18px; border-right: 1px solid var(--border-color, #DFE5ED); }
.connected-pill-label { min-width: 0; padding: 0 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary, #68788D); font: 400 13px/1.6 'Segoe UI', system-ui, sans-serif; }
.connected-pill-control:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--text-secondary, #68788D); }

/* Approved Slate Studio tokens shared by the preview and Support Admin. */
:root[data-realmjar-theme="dark"], :root[data-realmjar-theme="dark"] body {
    background: #2B2D31;
    color-scheme: dark;
}
:is(.slate-studio-preview, .slate-studio-admin, .slate-studio-public) {
    --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: 1.125rem;
    --font-subheading-desktop: 1.25rem;
    --font-subheading: clamp(var(--font-subheading-mobile), 0.9375rem + 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.875rem;
    --font-input: 0.875rem;
    --font-secondary: 0.8125rem;
    --font-metadata: 0.75rem;
    --font-button: 0.875rem;
    --font-toggle: 0.875rem;
    --font-status: 0.75rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-status: 500;
    --line-page-heading: 1.2857;
    --line-section-heading: 1.4;
    --line-subheading: 1.4;
    --line-body: 1.5714;
    --line-navigation: 1.4286;
    --line-button: 1.4286;
    --line-table-header: 1.3333;
    --line-table-value: 1.5714;
    --line-form: 1.4286;
    --line-secondary: 1.5385;
    --line-metadata: 1.3333;
    --button-text: var(--text-primary);
    --input-height: 48px;
    --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: var(--focus-ring);
    --input-error: #B64B59;
    --input-success: #278662;
    --input-validation-font-size: 0.8125rem;
    --input-validation-font-weight: var(--weight-regular);
    --input-background: var(--page-bg);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-muted);
    --input-border: var(--control-outline);
    --input-hover-border: var(--control-outline-hover);
    --input-disabled-background: transparent;
    --input-error-message: #B64B59;
    --input-success-message: #237553;
    /* Slate Studio v2 roles. Brand palette values above are unchanged. */
    --control-outline: #7A8799;
    --control-outline-hover: var(--text-primary);
    --focus-ring: #4270B7;
    --primary: #4270B7;
    --on-primary: #FFFFFF;
    --primary-text: #4270B7;
    --tonal: #DFE6F2;
    --on-tonal: #2E3D57;
    --emphasis: #3D4056;
    --on-emphasis: #FFFFFF;
    --destructive: #B64B59;
    --on-fill: #FFFFFF;
    --status-active-bg: #E1EEE9; --status-active-text: #1E694C;
    --status-new-bg: #E8E9FD; --status-new-text: #4650BF;
    --status-attention-bg: #F5E6E8; --status-attention-text: #973E4A;
    --status-pending-bg: #F3ECE1; --status-pending-text: #7D571F;
    --status-review-bg: #ECE7F4; --status-review-text: #6C4B9A;
    --status-scheduled-bg: #E0EDF0; --status-scheduled-text: #1C6475;
    --status-inactive-bg: #E9EAEB; --status-inactive-text: #575C65;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-full: 9999px;
    --control-height-sm: 36px; --control-height: 40px; --control-height-lg: 48px; --touch-target: 44px;
    --button-standard-size: var(--control-height);
    --shadow-raised: 0 1px 3px #0000001A;
    --shadow-hover: 0 10px 24px #0000001C;
    --shadow-menu: 0 12px 20px #00000014;
    --shadow-dialog: 0 16px 40px #00000033;
    --shadow-sheet: 0 -8px 32px #00000022;
    --state-hover: 0.08; --state-pressed: 0.12; --disabled-content: 0.38; --disabled-container: 0.12;
    --line-card-title: 1.5;
    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, .slate-studio-public)[data-theme="dark"],
:root[data-realmjar-theme="dark"] :is(.slate-studio-preview, .slate-studio-admin, .slate-studio-public) {
    --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;
    --control-outline: #868C96;
    --focus-ring: #9BBAFF;
    --primary: #9BBAFF;
    --on-primary: #1B2A44;
    --primary-text: #9BBAFF;
    --tonal: #3B4C68;
    --on-tonal: #DBE5F7;
    --emphasis: #C9CDE3;
    --on-emphasis: #292C42;
    --status-active-bg: #32504A; --status-active-text: #B3D5C8;
    --status-new-bg: #404675; --status-new-text: #C3C8FA;
    --status-attention-bg: #5C3E47; --status-attention-text: #E5BEC3;
    --status-pending-bg: #584B38; --status-pending-text: #E0CEB4;
    --status-review-bg: #4A4160; --status-review-text: #CDC0E1;
    --status-scheduled-bg: #304E59; --status-scheduled-text: #B2D2DA;
    --status-inactive-bg: #43474E; --status-inactive-text: #C5C7CB;
    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-card-title); }
.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-medium); 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-medium); line-height: var(--line-button); letter-spacing: normal; color: var(--button-text); }
@media (max-width: 760px) {
    :is(.slate-studio-preview, .slate-studio-admin, .slate-studio-public) { --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: var(--input-validation-font-weight); text-align: left; 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: var(--pill-fg); }
.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(--focus-ring); }
@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; }

/* Shared Support Admin shell: only the workspace scrolls, not the document. */
:is(.slate-studio-admin, .slate-studio-preview) {
    --staff-sidebar-width: 250px;
    --scrollbar-thumb: #7F8B99;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overflow: clip;
}
:is(.slate-studio-admin, .slate-studio-preview)[data-theme="dark"],
:root[data-realmjar-theme="dark"] :is(.slate-studio-admin, .slate-studio-preview) { --scrollbar-thumb: #949BA4; }
:is(.slate-studio-admin, .slate-studio-preview) .staff-shell { display: flex; height: 100%; min-width: 0; min-height: 0; }
:is(.slate-studio-admin, .slate-studio-preview) aside.staff-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: var(--staff-sidebar-width);
    height: 100vh;
    height: 100dvh;
    transition: padding .18s ease;
}
:is(.slate-studio-admin, .slate-studio-preview) .staff-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin-left: var(--staff-sidebar-width);
}
:is(.slate-studio-admin, .slate-studio-preview) header.staff-header { min-width: 0; padding-top: max(20px, env(safe-area-inset-top, 0px)); }
:is(.slate-studio-admin, .slate-studio-preview) .staff-workspace-scroll { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
:is(.slate-studio-admin, .slate-studio-preview) .staff-content { width: 100%; margin-inline: auto; padding: 24px 32px; min-width: 0; }
/* Cap page content within the available desktop workspace; keep the shell and mobile layout unchanged. */
@media (min-width: 761px) {
    :is(.slate-studio-admin, .slate-studio-preview) .staff-content,
    .public-shell > main { width: 100%; max-width: 1600px; margin-inline: auto; box-sizing: border-box; }
}
/* Page help (Components/Help/HelpPanel): the open panel takes a column on the right and the page narrows beside it. */
:root { --help-panel-width: 360px; }
:is(.slate-studio-admin, .slate-studio-preview) .staff-main { transition: margin-right .22s ease-out; }
@media (min-width: 1200px) { :root[data-help-panel-open] :is(.slate-studio-admin, .slate-studio-preview) .staff-main { margin-right: var(--help-panel-width); } }
.help-highlight { outline: 2px dashed var(--accent, #4270B7) !important; outline-offset: 3px; }
/* The guest chat button and window float bottom-right; while help is open they move left of the panel instead of covering it. */
:root[data-help-panel-open] #guest-messaging-root :is(.launcher, .messaging-panel) { right: calc(var(--help-panel-width) + 40px); }
@media (prefers-reduced-motion: reduce) { :is(.slate-studio-admin, .slate-studio-preview) .staff-main { transition: none; } }
/* Shared page hierarchy: compact headers and immediate access to the main content. */
.workspace-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 16px; min-width: 0; }
.workspace-page-header > div { flex: 1 1 24rem; min-width: 0; }
.workspace-page-header :is(h2,p) { margin: 0; }
.workspace-page-header p { color: var(--text-secondary, var(--ink-muted)); }
.workspace-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
:is(.staff-content, .workspace-content) .workspace-page-header + .record-container,
:is(.staff-content, .workspace-content) .workspace-page-header + form > .record-container { margin-block: 0; }
:is(.slate-studio-admin, .slate-studio-preview) :is(.staff-workspace-scroll, .scrollbar-demo-body, .scrollbar-horizontal):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
:is(.slate-studio-admin, .slate-studio-preview) dialog.mobile-drawer { padding-top: max(24px, env(safe-area-inset-top, 0px)); padding-left: max(24px, env(safe-area-inset-left, 0px)); }

/* Appearance only: these rules never turn an ordinary card into a scroll region. */
:is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) :where(*) { scrollbar-width: thin; scrollbar-color: transparent transparent; }
:is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) :where(:hover, :focus-within, :active, [data-scroll-active]) { scrollbar-color: var(--scrollbar-thumb, #7F8B99) transparent; }
:is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) :is(.table-scroll, .status-table-scroll, .type-table-scroll, .scrollbar-demo-body, .staff-sidebar nav, .mobile-drawer nav) { scrollbar-gutter: stable; }
@supports selector(::-webkit-scrollbar) {
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) :where(*) { scrollbar-width: auto; scrollbar-color: auto; }
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) ::-webkit-scrollbar { width: 4px; height: 4px; background: transparent; }
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) ::-webkit-scrollbar-track,
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) ::-webkit-scrollbar-corner { background: transparent; }
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) ::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; transition: background-color .18s ease; }
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) :where(:hover, :focus-within, :active, [data-scroll-active])::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #7F8B99); }
}
/* The main scrollbar remains hidden in every interaction state, separately from internal scrolling. */
:is(.slate-studio-admin, .slate-studio-preview) .workspace-scrollbar-hidden { scrollbar-width: none; scrollbar-gutter: auto; -ms-overflow-style: none; }
:is(.slate-studio-admin, .slate-studio-preview) .workspace-scrollbar-hidden::-webkit-scrollbar { display: none; width: 0; height: 0; }

@media (min-width: 761px) {
    :is(.slate-studio-admin, .slate-studio-preview) aside.staff-sidebar[data-collapsed="true"] { width: 80px; }
    :is(.slate-studio-admin, .slate-studio-preview) .staff-sidebar[data-collapsed="true"] + .staff-main { margin-left: 80px; }
}
@media (max-width: 1000px) {
    :is(.slate-studio-admin, .slate-studio-preview) { --staff-sidebar-width: 210px; }
    :is(.slate-studio-admin, .slate-studio-preview) .staff-content { padding: 24px; }
}
@media (max-width: 760px) {
    :is(.slate-studio-admin, .slate-studio-preview) .staff-main { margin-left: 0; }
    :is(.slate-studio-admin, .slate-studio-preview) header.staff-header { padding-top: max(16px, env(safe-area-inset-top, 0px)); }
    :is(.slate-studio-admin, .slate-studio-preview) .staff-content { padding: 20px max(16px, env(safe-area-inset-right, 0px)) calc(108px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
    .slate-studio-preview .mobile-bottom-nav { overflow-x: auto; }
    .slate-studio-preview .mobile-bottom-nav :is(a, .bottom-menu-button) { flex: 1 0 64px; }
}
@media (max-height: 600px) {
    :is(.slate-studio-admin, .slate-studio-preview) :is(aside.staff-sidebar, dialog.mobile-drawer) { padding-block: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-bottom, 0px)); }
    :is(.slate-studio-admin, .slate-studio-preview) :is(aside.staff-sidebar, dialog.mobile-drawer) nav { margin-top: 16px; }
    :is(.slate-studio-admin, .slate-studio-preview) .sidebar-logout { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) ::-webkit-scrollbar-thumb { transition: none; }
}
@media (forced-colors: active) {
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) { --scrollbar-thumb: CanvasText; }
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) :where(*) { scrollbar-color: auto; }
    :is(.slate-studio-admin, .slate-studio-preview, body:has(.slate-studio-admin, .slate-studio-preview)) ::-webkit-scrollbar-thumb { background: CanvasText; }
}

/* Mobile sidebar replacement. Desktop/tablet rules above remain unchanged. */
.mobile-sheet { width: min(100%, 520px); max-width: 100%; max-height: min(85dvh, 760px); margin: auto auto 0; inset: auto 0 0; padding: 16px max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); border: 0; border-radius: 22px 22px 0 0; background: var(--card-bg, #fff); color: var(--text-primary, #263347); box-shadow: 0 -8px 32px #0002; overflow-y: auto; }
.mobile-sheet[open] { display: flex; flex-direction: column; }
.mobile-sheet::backdrop { background: #0006; }
.mobile-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.mobile-sheet-heading h2 { margin: 0; font: 600 18px/24px 'Segoe UI', sans-serif; }
.mobile-sheet-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 24px; }
.mobile-filter-actions { display: none; }
.mobile-filter-sheet .mobile-filter-actions { display: flex; flex-wrap: wrap; gap: 12px; position: sticky; bottom: 0; padding: 12px 0 0; background: var(--card-bg, #fff); }
.mobile-filter-sheet .mobile-filter-actions .accent-pill { height: 45px; font: 400 13px/20px 'Segoe UI', sans-serif; }
.mobile-filter-sheet .desktop-filter-actions, .mobile-filter-sheet [data-desktop-filter-action] { display: none; }
.mobile-filter-sheet .integrated-search.desktop-search-action { --search-button-space: 0px; }
.mobile-filter-sheet form { max-width: 100%; }
.mobile-filter-sheet :is(input, select) { max-width: 100%; }
@media (max-width: 760px) {
    :is(.slate-studio-admin, .slate-studio-preview) header.staff-header, .workspace-shell .workspace-main .workspace-header { display: flex; height: auto; min-height: 64px; padding: max(16px, env(safe-area-inset-top, 0px)) 24px 16px; }
    :is(.slate-studio-admin, .slate-studio-preview) header.staff-header .theme-toggle, .workspace-shell .workspace-header .header-account { display: none; }
    :is(.slate-studio-admin, .slate-studio-preview) .staff-main { grid-template-rows: auto minmax(0, 1fr); }
    :is(.slate-studio-admin,.slate-studio-preview) header.staff-header { display:none; }
    :is(.slate-studio-admin,.slate-studio-preview) .staff-workspace-scroll { grid-row:1 / -1; scroll-padding-bottom:calc(var(--mobile-navigation-height,64px) + 24px + env(safe-area-inset-bottom,0px)); }
    .slate-studio-admin .staff-content { padding-bottom:calc(var(--mobile-navigation-height,64px) + 24px + env(safe-area-inset-bottom,0px)); }
    :is(.slate-studio-admin, .slate-studio-preview) .staff-content { padding-top: max(24px, env(safe-area-inset-top, 0px)); }
    .workspace-shell .workspace-main .workspace-content { padding-top: max(24px, env(safe-area-inset-top, 0px)); }
    :is(.slate-studio-admin, .slate-studio-preview) .staff-content:has(.filter-eligible), .workspace-content:has(.filter-eligible) { padding-bottom: calc(144px + env(safe-area-inset-bottom, 0px)); }
}
.staff-heading { min-width: 0; flex: 1; }
.desktop-filter-actions { display: contents; }
.filter-preview .existing-filter-slot .mobile-filter-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Existing page form rules can target every child div; mobile actions stay out of inline forms. */
.mobile-filter-host:not(.filter-preview) .existing-filter-slot .mobile-filter-actions { display: none !important; }

/* Workspace composition: approved tokens/components; compact content hierarchy. */
.workspace-standard :is(.staff-content,.workspace-content) > section { width:100%; max-width:none; margin:0; min-width:0; }
.workspace-standard :is(.staff-content,.workspace-content) :is(.workspace-page-header,.workspace-page-actions) { gap:8px 12px; }
.workspace-standard :is(.staff-content,.workspace-content) :is(.list,.record-list) { display:block; gap:0; margin:0; }
.workspace-standard :is(.staff-content,.workspace-content) :is(.list-row,.record-row,.participant-row) { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:10px 12px; margin:0; border:0; border-bottom:1px solid var(--border,var(--line)); border-radius:0; box-shadow:none; background:var(--bg-card,var(--surface)); }
.workspace-standard :is(.list-row,.record-row,.participant-row) > div:first-child { flex:1 1 260px; min-width:0; }
.workspace-standard :is(.list-row,.record-row,.participant-row) :is(h2,p) { margin:0; overflow-wrap:anywhere; }
.workspace-standard :is(.list-row,.record-row) dl { display:flex; flex-wrap:wrap; gap:4px 20px; margin:4px 0 0; }
.workspace-standard :is(.list-row,.record-row) dl > div { display:flex; gap:6px; align-items:baseline; }
.workspace-standard :is(.list-row,.record-row) dd { margin:0; }
.workspace-standard :is(.list-row,.record-row,.participant-row) .actions { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.workspace-standard :is(.staff-content,.workspace-content) .editor { margin:12px 0; padding:16px; max-width:none; }
.workspace-standard :is(.staff-content,.workspace-content) .field { margin-bottom:12px; gap:6px; }
.workspace-standard :is(.staff-content,.workspace-content) fieldset { min-width:0; margin:12px 0; padding:12px; border:1px solid var(--border,var(--line)); border-radius:var(--card-radius,18px); }
/* Dropdown menus built on <details data-realmjar-menu> are not sections, so they never get the card look. :where keeps the selector's weight unchanged. */
.workspace-standard :is(.staff-content,.workspace-content) :is(details:where(:not([data-realmjar-menu])),.workspace-panel) { background:var(--bg-card,var(--surface)); border:1px solid var(--border,var(--line)); border-radius:var(--card-radius,18px); padding:16px; margin:12px 0; box-shadow:var(--card-shadow,0 6px 18px #00000012); }
.workspace-standard :is(.staff-content,.workspace-content) details > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; }
/* display:flex removes the browser marker, so collapsible sections draw their own chevron; menus (data-realmjar-menu) and icon-only summaries keep theirs. */
.workspace-standard :is(.staff-content,.workspace-content) details:not([data-realmjar-menu]) > summary:not([aria-label])::after { content:"\F0140"; font-family:"Material Design Icons"; font-weight:400; font-size:20px; line-height:1; margin-left:auto; padding-left:8px; color:var(--text-secondary); transition:transform .2s ease; }
.workspace-standard :is(.staff-content,.workspace-content) details[open]:not([data-realmjar-menu]) > summary:not([aria-label])::after { transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .workspace-standard :is(.staff-content,.workspace-content) details:not([data-realmjar-menu]) > summary:not([aria-label])::after { transition:none; } }
.workspace-standard :is(.staff-content,.workspace-content) :is(.workspace-panel,.editor) .editor { padding:0; border:0; box-shadow:none; }
.workspace-standard :is(.staff-content,.workspace-content) .back-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:0; }
.workspace-standard :is(.staff-content,.workspace-content) :is(.actions,.pagination):empty { display:none; }
.workspace-standard :is(.staff-content,.workspace-content) textarea { min-height:80px; }
.workspace-table { width:100%; border-collapse:collapse; }
.workspace-table th { text-align:left; font-size:var(--font-table-header,12px); font-weight:var(--weight-medium,500); line-height:var(--line-table-header,1.33); color:var(--text-secondary,var(--ink-muted)); }
.workspace-table td { font-variant-numeric:tabular-nums; }
.workspace-table :is(th,td) { padding:var(--space-3,12px) var(--space-4,16px); vertical-align:middle; border-bottom:1px solid var(--border,var(--line)); overflow-wrap:break-word; }
/* Words stay whole: a cell breaks a word only when it is longer than the cell (an email or reference), and headers never break mid-word ("Suppli er"). */
.workspace-table th { overflow-wrap:normal; }
/* With words kept whole a wide table can need more room than a narrow desktop gives; it then scrolls inside its card instead of widening the page. */
.workspace-standard :is(.staff-content,.workspace-content) .workspace-panel:has(> .workspace-table) { overflow-x:auto; min-width:0; }
/* A list's scroll area takes its container's width rather than its table's, so the table scrolls there. */
.workspace-standard :is(.staff-content,.workspace-content) .record-scroll { width:0; min-width:100%; }
.workspace-table td:last-child,.workspace-table th:last-child { text-align:right; }
.workspace-table .row-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.workspace-table small { display:block; color:var(--text-secondary,var(--ink-muted)); }
@media(max-width:760px) {
 .workspace-standard :is(.staff-content,.workspace-content) { padding:12px 12px calc(var(--mobile-navigation-height,64px) + 24px + env(safe-area-inset-bottom,0px)); }
 .workspace-standard :is(.staff-content,.workspace-content):has(.filter-eligible) { padding-bottom:calc(max(calc(var(--mobile-navigation-height,64px) + 24px),144px) + env(safe-area-inset-bottom,0px)); }
 .workspace-standard :is(.list-row,.record-row,.participant-row) { padding:10px 0; }
 .workspace-standard :is(.list-row,.record-row,.participant-row) .actions { margin-left:0; }
 .workspace-standard :is(.staff-content,.workspace-content) :is(.editor,details:where(:not([data-realmjar-menu])),.workspace-panel) { padding:12px; }
 .workspace-standard .accent-pill.is-compact { min-height:var(--control-height); height:var(--control-height); }
 /* Phones: each row reads as a list item. The first cell is its title, the other cells sit side by side with small labels,
    and a row's only action becomes an icon button at its end (the pill keeps its accessible name). */
 .workspace-table thead { display:none; }
 .workspace-table,.workspace-table tbody { display:block; }
 .workspace-table tr { position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 16px; border-bottom:1px solid var(--border,var(--line)); padding:12px 0; }
 .workspace-table td { display:block; min-width:0; max-width:100%; padding:0; border:0; text-align:left; }
 .workspace-table td::before { content:attr(data-label); display:inline; margin-right:6px; color:var(--text-secondary,var(--ink-muted)); font-size:12px; }
 .workspace-table td:first-child { flex:1 1 100%; font-weight:var(--weight-medium,500); }
 .workspace-table td:first-child::before,.workspace-table td[data-label="Actions"]::before { display:none; }
 .workspace-table td:last-child { flex:1 1 100%; text-align:left; }
 .workspace-table .row-actions { justify-content:flex-start; }
 .workspace-table tr:has(> td[data-label="Actions"]:last-child > .accent-pill:only-child) { padding-right:56px; }
 .workspace-standard .workspace-table td[data-label="Actions"]:last-child:has(> .accent-pill:only-child) { position:absolute; top:50%; right:0; flex:none; transform:translateY(-50%); }
 .workspace-standard .workspace-table td[data-label="Actions"]:last-child > .accent-pill:only-child { width:44px; min-width:44px; height:44px; }
 .workspace-standard .workspace-table td[data-label="Actions"]:last-child > .accent-pill:only-child .pill-label { display:none; }
 .workspace-standard .workspace-table td[data-label="Actions"]:last-child > .accent-pill:only-child .pill-icon { left:calc(50% - 14px); }
}

.workspace-standard :is(.staff-content,.workspace-content) .editor { gap:12px; }
.workspace-standard .workspace-table th:last-child { text-align:left; }
.workspace-standard .workspace-table td:last-child { text-align:left; }
.workspace-standard [data-label="Actions"] { text-align:right; }
.workspace-standard :is(.staff-content,.workspace-content) .workspace-table details { box-shadow:none; padding:0 8px; margin:4px 0 0; }
.workspace-standard :is(.staff-content,.workspace-content) :is(.editor,.workspace-panel,details) { scroll-margin-top:70px; }
.workspace-standard :is(.staff-content,.workspace-content) :is(input,select,textarea,button,a) { scroll-margin-block:70px 80px; }
.workspace-standard :is(.staff-content,.workspace-content) > section .editor { gap:12px; padding:16px; margin:12px 0; }
.workspace-standard :is(.staff-content,.workspace-content) :is(.actions,.row-actions) .accent-pill { color:var(--pill-fg); text-decoration:none; }
.workspace-standard :is(.staff-content,.workspace-content) .record-summary { display:grid; grid-template-columns:120px minmax(0,1fr); gap:6px 16px; margin:0; }
.workspace-standard :is(.staff-content,.workspace-content) .record-summary dd { margin:0; overflow-wrap:anywhere; }
@media(max-width:760px) {
 .workspace-standard :is(.staff-content,.workspace-content) .accent-pill.is-compact { min-height:var(--control-height); height:var(--control-height); }
 .workspace-standard :is(.staff-content,.workspace-content) > section .editor { padding:12px; }
 .workspace-standard :is(.staff-content,.workspace-content) .record-summary { grid-template-columns:90px minmax(0,1fr); gap:6px 12px; }
}

/* Phones. Pages without a visible title of their own keep the header's title above the content; its other controls live in the bottom navigation. */
@media(max-width:760px) {
 :is(.slate-studio-admin,.slate-studio-preview) .staff-main:not(:has(.staff-content :is(.workspace-page-header,.quote-page-header) :is(h1,h2):not(.visually-hidden))) header.staff-header:not(.guest-workspace-header) { display:flex; min-height:0; height:auto; padding:max(14px,env(safe-area-inset-top,0px)) 12px 2px; border:0; background:var(--page-bg); }
 :is(.slate-studio-admin,.slate-studio-preview) .staff-main:not(:has(.staff-content :is(.workspace-page-header,.quote-page-header) :is(h1,h2):not(.visually-hidden))):has(> header.staff-header:not(.guest-workspace-header)) .staff-workspace-scroll { grid-row:2; }
 :is(.slate-studio-admin,.slate-studio-preview) header.staff-header .header-account-actions { display:none; }
 :is(.slate-studio-admin,.slate-studio-preview) header.staff-header :is(h1,.workspace-page-title) { margin:0; font-size:20px; line-height:1.35; }
 /* Page actions stay on one line and scroll sideways rather than stacking a row per button. */
 .workspace-standard :is(.staff-content,.workspace-content) .workspace-page-header > .workspace-page-actions { flex:1 1 100%; flex-wrap:nowrap; min-width:0; margin-inline:-12px; padding:2px 12px; overflow-x:auto; scrollbar-width:none; }
 .workspace-standard :is(.staff-content,.workspace-content) .workspace-page-header > .workspace-page-actions::-webkit-scrollbar { display:none; }
 .workspace-standard :is(.staff-content,.workspace-content) .workspace-page-header > .workspace-page-actions > * { flex:0 0 auto; }
 /* Rows that scroll sideways fade the edge with more to show (WorkspaceStandards.razor.js sets the flags). */
 .workspace-standard [data-more-end] { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent); }
 .workspace-standard [data-more-start] { -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent); }
 .workspace-standard [data-more-start][data-more-end] { -webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent); }
}

/* Apply approved foundations to remaining pages without changing specialised controls. */
.slate-studio-public { --ink: var(--text-primary); --ink-muted: var(--text-secondary); --green: var(--accent-primary); --paper: var(--page-bg); background: var(--page-bg); color: var(--text-primary); }
.public-shell.slate-studio-public :is(.status-page,.error-page-card,.no-organisation,.empty-workspace) h1 { font-size: var(--font-page-title); font-weight: var(--weight-semibold); line-height: var(--line-page-heading); letter-spacing: normal; }
.slate-studio-public h2 { font-size: var(--font-section-title); font-weight: var(--weight-semibold); line-height: var(--line-section-heading); }
.slate-studio-public p { font-size: var(--font-body); line-height: var(--line-body); }
.public-shell.slate-studio-public :is(.error-page-card,.no-organisation) { background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--card-shadow); }
.public-shell.slate-studio-public .error-page-icon { background: var(--elevated-bg); color: var(--input-error); }
.slate-studio-public :is(small,.muted) { color: var(--text-secondary); }
.slate-studio-public :is(a,button):focus-visible { outline-color: var(--focus-ring); }
.slate-studio-admin .staff-content .approved-page { min-width: 0; color: var(--text-primary); }
.slate-studio-admin .staff-content .approved-page :is(.profile-card,.organisation-list article,.selection) { background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--card-shadow); }
.slate-studio-admin .staff-content .guest-enquiry form { background: var(--card-bg); border-color: var(--border-color); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.slate-studio-admin .staff-content .approved-page :is(.fields,.line-fields) { min-width: 0; }
/* Native numeric/bound controls retain their names, values and parsing behaviour. */
.slate-studio-admin .staff-content .approved-page :is(.field > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),.route-lab > label input,.route-lab fieldset label input) { box-sizing: border-box; width: 100%; min-width: 0; height: max(var(--input-height),calc(1em * var(--input-line-height) + 1rem + 2px)); padding: .5rem var(--input-padding-x); border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--input-background); color: var(--input-text); font: var(--input-font-weight) var(--input-font-size)/var(--input-line-height) var(--input-font-family); }
.slate-studio-admin .staff-content .approved-page :is(.field > input,.route-lab label input):hover:not(:disabled):not(:focus) { border-color: var(--input-hover-border); }
.slate-studio-admin .staff-content .approved-page :is(.field > input,.route-lab label input):focus { border-color: var(--input-focus); outline: 2px solid var(--input-focus); outline-offset: 2px; }
.slate-studio-admin .staff-content .approved-page :is(.field > input,.route-lab label input):disabled { background: var(--input-disabled-background); color: var(--text-secondary); opacity: .75; }
/* These specialised native compositions have no approved replacement specimen. */
.slate-studio-admin .staff-content .approved-page :is(textarea,.field > select) { min-width: 0; max-width: 100%; color: var(--text-primary); background: var(--card-bg); border-color: var(--border-color); font-family: var(--font-family); }
.slate-studio-admin .staff-content .approved-page textarea { resize: vertical; }
.slate-studio-admin .staff-content .approved-page fieldset { min-width: 0; border-color: var(--border-color); }
.slate-studio-admin .staff-content .approved-page .field > label { color: var(--text-primary); font-size: var(--font-form-label); font-weight: var(--weight-medium); }
.slate-studio-admin .staff-content .approved-page .invalid { border-color: var(--input-error); }
.slate-studio-admin .staff-content .approved-page :is(.list-row,.policy-row,.participant-row) { flex-wrap: wrap; }
.slate-studio-admin .staff-content .approved-page :is(.list-row,.policy-row,.participant-row) > div { flex: 1 1 160px; }
.slate-studio-admin .staff-content .approved-page :is(.lookup,.actions,.pagination) { gap: var(--card-gap); }
@media(max-width:640px) {
    .slate-studio-admin .staff-content .approved-page :is(.fields,.line-fields) { grid-template-columns: minmax(0,1fr); }
    .slate-studio-admin .staff-content .approved-page :is(.list-row,.policy-row,.participant-row) { align-items: flex-start; }
}
/* Guest organisation placeholders use the supplied artwork in the active theme. */
:root[data-realmjar-theme="dark"] img[src$="/images/organisations/placeholder-light.png"] {
    content: none;
}

/* Compact phone chrome for the travel libraries and package workspace only. */
@media(max-width:760px) {
    .slate-studio-admin:has(:is(.package-library,.package-planner,.package-preview,.location-browser,.brochure-library)) header.staff-header { min-height:64px; padding:12px 16px; }
    .slate-studio-admin:has(:is(.package-library,.package-planner,.package-preview,.location-browser,.brochure-library)) header.staff-header h1 { font-size:20px; line-height:1.35; }
    .slate-studio-admin:has(.package-planner) .staff-workspace-scroll { scroll-padding-bottom:170px; }
}

@media(max-width:760px) {
    dialog.realmjar-modal:has(.location-browser) { width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
    dialog.realmjar-modal:has(.location-browser) .modal-heading-copy { flex:1; }
    dialog.realmjar-modal:has(.location-browser) .modal-body { flex:1; }
    dialog.realmjar-modal:has(.location-browser) .modal-footer { padding-bottom:max(16px,env(safe-area-inset-bottom,0px)); }
}
@media(max-width:360px) {
    .slate-studio-admin:has(.package-planner) .package-breadcrumb { flex-direction:column; align-items:flex-start; gap:2px; }
    .slate-studio-admin:has(.package-planner) .package-breadcrumb > .mdi { display:none; }
    .slate-studio-admin:has(.package-planner) .package-breadcrumb a { font-size:var(--font-metadata); }
}

/* Floating menu panels (RealmJar.floating in App.razor.js) open in the browser top layer. Neutralise the
   browser's popover defaults so each panel keeps its own approved styling; any panel rule overrides these. */
:where([data-realmjar-floating]) { border: 0; padding: 0; color: inherit; background: transparent; overflow: visible; }

/* Artwork follows the explicit site theme, including enhanced navigation. */
:root:not([data-realmjar-theme="dark"]) .theme-artwork-dark,
:root[data-realmjar-theme="dark"] .theme-artwork-light {
    display: none !important;
}

/* The Help control pulses while the first-visit pointer (Components/Help) is waiting to be dismissed. */
.help-attention { animation: help-attention 2.4s ease-out infinite; }
@keyframes help-attention { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary, #4778C5) 55%, transparent); } 60%, 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .help-attention { outline: 3px solid color-mix(in srgb, var(--accent-primary, #4778C5) 55%, transparent); outline-offset: 2px; } }

/* Static account forms share the approved input and action system. */
.auth-panel fieldset{border:0;padding:0;margin:0;min-width:0}.auth-panel fieldset:disabled{opacity:.65}.auth-panel .validation-errors{padding-left:20px}.account-form{max-width:560px}.account-form .auth-field{margin-bottom:20px}