/* Dasho Survey: Obsidian theme adapter.
 * Values and assets come from staff/src/index.css and the matching Command
 * palette in admin/src/themes/command/tokens/command.tokens.css.
 * Keep this after styles.css and admin.css. See assets/README.md for provenance.
 */
:root {
  color-scheme: dark;
  --paper: #0b0d10;
  --white: #14171c;
  --panel-raised: #1a1e24;
  --ink: #f5f2ea;
  --text: #f5f2ea;
  --muted: #b5b3ad;
  --accent: #d9b36a;
  --accent-dark: #efcb88;
  --accent-light: rgba(217,179,106,.12);
  --on-accent: #1a1608;
  --line: rgba(245,242,234,.11);
  --line-strong: rgba(239,203,136,.38);
  --hover: rgba(245,242,234,.06);
  --amber: #f2b765;
  --danger: #f07878;
  --success: #63d6a2;
  --info: #79b8ff;
  --morning: #38bdf8;
  --afternoon: #fbbf24;
  --night: #a78bfa;
  --off: #94a3b8;
  --radius: 20px;
  --shadow: 0 16px 42px rgba(0,0,0,.14);
  --font-ui: 'General Sans','Alexandria',system-ui,sans-serif;
  --font-display: 'Clash Display','Alexandria',system-ui,sans-serif;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  font-synthesis: none;
}
html[data-mode='light'] {
  color-scheme: light;
  --paper: #faf8f3;
  --white: #fff;
  --panel-raised: #f3efe6;
  --ink: #16181d;
  --text: #16181d;
  --muted: #69645b;
  --accent: #8f6b26;
  --accent-dark: #76551c;
  --accent-light: rgba(143,107,38,.09);
  --on-accent: #faf8f3;
  --line: rgba(23,21,18,.13);
  --line-strong: rgba(143,107,38,.4);
  --hover: rgba(23,21,18,.04);
  --amber: #80500f;
  --danger: #a92f2f;
  --success: #176b4a;
  --info: #285f98;
  --morning: #0369a1;
  --afternoon: #92400e;
  --night: #6d28d9;
  --off: #475569;
  --shadow: 0 12px 32px rgba(73,58,31,.06);
}
html, body, .app-shell, .workspace, .login-page { background: var(--paper); color: var(--text); }
body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
h1, h2, .brand-type, .brand-name, .admin-stat > strong, .progress-count > strong { font-family: var(--font-display); font-weight: 600; }
h1 { letter-spacing: -.035em; }
h2, h3, strong { color: var(--ink); }
.eyebrow, .text-link, a { color: var(--accent); }
.eyebrow { font-size: 11px; letter-spacing: .18em; font-weight: 600; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-light); border-color: var(--accent) !important; }
::selection { color: var(--on-accent); background: var(--accent); }
.card, dialog, .staff-meta, .login-calendar, .toast, .skip-link { color: var(--text); background: var(--white); border-color: var(--line); box-shadow: var(--shadow); }
.sidebar { background: var(--white); border-color: var(--line); }
.topbar { background: color-mix(in srgb,var(--paper) 92%,transparent); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { gap: 10px; }
.dasho-brand-logo { display: block; width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.brand-type, .brand-name { font-size: 22px; letter-spacing: .11em; color: var(--ink); }
.brand-name { display: block; min-width: 0; line-height: 1.15; }
.brand-name small { display: block; font-family: var(--font-ui); font-size: 8px; font-weight: 500; letter-spacing: .15em; color: var(--accent); margin-top: 6px; line-height: 1.5; }
.login-story h1, .page-heading h1, .admin-page-heading h1, .section-heading h2, .login-card h2 { font-weight: 600; }
.brand-type > span, .brand-subtitle { font-family: var(--font-ui); font-size: 9px; letter-spacing: .2em; color: var(--accent); font-weight: 600; }
.workspace-label { color: var(--muted); font-size: 10px; letter-spacing: .16em; }
.nav-item { color: var(--muted); border: 1px solid transparent; border-radius: 14px; font-size: 13px; }
.nav-item.active { background: var(--accent-light); border-color: color-mix(in srgb,var(--accent) 20%,transparent); color: var(--accent); }
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item.active:hover { background: var(--accent-light); color: var(--accent); }
.connected-card { background: var(--paper); border-color: var(--line); border-radius: 16px; }
.connected-icon, .subtle-icon, .empty-icon, .progress-icon, .login-emblem, .choice-icon, .admin-modal-icon { color: var(--accent); background: var(--accent-light); }
.connected-card p, .sidebar-foot, .breadcrumb, .breadcrumb span, .preview-pill, .user-chip small, .workspace-footer,
.page-heading p, .section-heading p, .staff-meta span, .week-tools > span, .day-label small,
.progress-card > p, .summary-pairs, .summary-pairs strong, .progress-card .eyebrow, .card-note,
.roster-row, .survey-actions > .save-state, .option-card, .availability-row > label, .inline-help,
.attachment-placeholder, .attachment-placeholder strong, .attachment-placeholder p, .holiday-question small,
.review-identity small, .review-days > div > span, .review-detail p, .review-consent,
.receipt-heading p, .receipt-notes p, .receipt-bottom p, .history-row,
.login-story > p, .story-points, .workspace-choice small, .demo-explanation, .login-footer,
.mini-week span, .mini-week small, .login-calendar > .row, .calendar-caption,
.selected-shift-time, .muted { color: var(--muted); }
.breadcrumb strong, .user-chip strong, .staff-meta strong, .day-label strong, .review-days strong,
.history-row > strong, .login-calendar > .row strong { color: var(--ink); }
.staff-meta svg, .section-heading svg, .story-points svg, .workspace-choice > svg { color: var(--accent); }
.button { border-radius: 999px; min-height: 44px; background: var(--panel-raised); color: var(--text); font-size: 13px; }
.button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 8px 24px var(--accent-light); }
.button.primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.button.secondary { border-color: var(--line); background: var(--panel-raised); color: var(--text); }
.button.secondary:hover:not(:disabled), .button.ghost:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.button.ghost { background: transparent; color: var(--muted); }
.button.danger { color: var(--danger); background: color-mix(in srgb,var(--danger) 10%,transparent); border-color: color-mix(in srgb,var(--danger) 24%,transparent); }
.button.small { min-height: 36px; font-size: 12px; }
.badge { border-radius: 999px; color: var(--muted); background: var(--panel-raised); font-size: 11px; font-weight: 600; }
.badge.green { color: var(--success); background: color-mix(in srgb,var(--success) 12%,transparent); }
.badge.amber { color: var(--amber); background: color-mix(in srgb,var(--amber) 12%,transparent); }
.badge.gray { color: var(--muted); background: var(--panel-raised); }
.input, .shift-select { color: var(--text); background: var(--panel-raised); border-color: var(--line); border-radius: 12px; min-height: 44px; font-size: 13px; }
.input:disabled { background: var(--paper); color: var(--muted); }
.input.invalid { border-color: var(--danger); background: color-mix(in srgb,var(--danger) 5%,var(--white)); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
.avatar { color: var(--accent); background: var(--accent-light); border: 1px solid var(--line-strong); }
.holiday-notice, .holiday-notice.unverified { color: var(--amber); background: color-mix(in srgb,var(--amber) 6%,var(--white)); border-color: color-mix(in srgb,var(--amber) 24%,transparent); border-radius: 16px; }
.holiday-icon { color: var(--amber); background: color-mix(in srgb,var(--amber) 12%,transparent); }
.holiday-content strong { color: var(--amber); }
.holiday-content > p, .holiday-detail { color: var(--muted); font-size: 12px; }
.holiday-events { border-color: var(--line); }
.holiday-date { background: var(--panel-raised); color: var(--ink); }
.source-link { color: var(--accent); font-size: 11px; }
.step { color: var(--muted); font-size: 13px; }
.step b { border-color: var(--line); border-radius: 7px; }
.step.current b { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.step.complete { color: var(--success); }
.step.complete b { background: color-mix(in srgb,var(--success) 10%,transparent); border-color: color-mix(in srgb,var(--success) 22%,transparent); }
.week-table-head, .admin-table th { background: var(--panel-raised); border-color: var(--line); color: var(--muted); }
.day-row, .day-row.weekend { background: var(--white); border-color: var(--line); }
.day-row:hover { background: color-mix(in srgb,var(--white) 98%,var(--accent)); }
.day-initial { background: var(--panel-raised); color: var(--muted); }
.weekend .day-initial { background: var(--accent-light); color: var(--accent); }
.day-check { color: var(--line-strong); }
.day-check.done { color: var(--success); }
.progress-count > strong > span { color: var(--muted); }
.segmented-progress > span, .admin-progress, .admin-bar { background: var(--panel-raised); }
.segmented-progress > .filled, .admin-progress > span, .admin-bar span { background: var(--accent); }
.summary-pairs, .roster-row, .holiday-question, .review-days > div, .history-row,
.admin-section-top, .admin-switch-row, .admin-table-footer, .admin-form-footer,
.admin-modal-footer, .admin-detail-meta, .admin-answer-row { border-color: var(--line); }
.planning-note, .admin-planning-note, .admin-info-banner { color: var(--accent); background: var(--accent-light); border-color: color-mix(in srgb,var(--accent) 20%,transparent); }
.planning-note > span, .planning-note h3, .admin-planning-note > svg, .admin-planning-note strong, .admin-info-banner > svg { color: var(--accent); }
.planning-note p, .admin-planning-note p { color: var(--muted); }
.roster-row strong { color: var(--morning); background: color-mix(in srgb,var(--morning) 10%,transparent); }
.roster-row strong.off { color: var(--off); background: color-mix(in srgb,var(--off) 10%,transparent); }
.message.warning, .admin-impact-note { color: var(--amber); background: color-mix(in srgb,var(--amber) 7%,var(--white)); border-color: color-mix(in srgb,var(--amber) 24%,transparent); }
.message.neutral { color: var(--info); background: color-mix(in srgb,var(--info) 7%,var(--white)); border-color: color-mix(in srgb,var(--info) 24%,transparent); }
.option-card { background: var(--white); border-color: var(--line); border-radius: 14px; }
.option-card.selected { color: var(--accent); border-color: var(--line-strong); background: var(--accent-light); }
.option-card svg { color: currentColor; }
.attachment-placeholder { border-color: var(--line-strong); background: var(--paper); }
.review-identity { background: var(--panel-raised); }
.review-consent { background: var(--accent-light); }
.review-days .missing { color: var(--danger); }
.receipt-icon { color: var(--success); background: color-mix(in srgb,var(--success) 12%,transparent); }
.history-dot { background: var(--accent); }
.schedule-day, .schedule-day.rest { background: var(--panel-raised); color: var(--muted); border-color: var(--line); }
.schedule-day > strong, .schedule-day h3, .schedule-day.rest > strong, .schedule-day.rest h3 { color: var(--ink); }
.schedule-day p { color: var(--muted); }
.schedule-day > div > svg { color: var(--morning); }
.schedule-day.rest > div > svg { color: var(--off); }
.login-card { box-shadow: var(--shadow); }
.workspace-choice { color: var(--ink); background: var(--white); border-color: var(--line); border-radius: 16px; }
.workspace-choice:hover { background: var(--accent-light); border-color: var(--line-strong); }
.workspace-choice strong { font-size: 14px; }
.workspace-choice small { font-size: 12px; }
.demo-explanation p { font-size: 12px; }
.login-calendar { transform: none; }
.mini-week b { color: var(--morning); background: color-mix(in srgb,var(--morning) 10%,transparent); }
.mini-week b.rest { color: var(--off); background: color-mix(in srgb,var(--off) 10%,transparent); }
.calendar-caption, .login-footer { border-color: var(--line); }
dialog { border-radius: 24px; box-shadow: 0 28px 80px rgba(0,0,0,.4); }
dialog::backdrop { background: rgba(3,4,6,.75); backdrop-filter: blur(5px); }
.toast { color: var(--success); border-color: color-mix(in srgb,var(--success) 24%,transparent); }
.toast.error, .admin-form-error { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 28%,transparent); background: color-mix(in srgb,var(--danger) 6%,var(--white)); }

/* Admin views use the same surfaces, control sizes and semantic colors. */
.admin-stat-top, .admin-stat > small, .admin-progress-row, .admin-table td, .admin-table-footer,
.admin-person small, .admin-month-field > span, .admin-switch-row small, .admin-deadline,
.admin-deadline strong, .admin-preference-label, .admin-footnote, .admin-shift-time,
.admin-label, .admin-shift-count span, .admin-icon-button, .admin-default-options > div,
.admin-default-options p, .admin-filter, .admin-checkbox-card small, .admin-settings-help p,
.admin-settings-help small, .admin-inline-check, .admin-detail-heading p, .admin-detail-meta,
.admin-answer-row > span, .admin-answer-row small, .admin-choice-divider,
.admin-detail-additional p, .admin-detail-bottom { color: var(--muted); }
.admin-person strong, .admin-month-field .input, .admin-shift-count strong,
.admin-default-options strong, .admin-settings-form .field > span, .admin-shift-form .field > span,
.admin-checkbox-card strong, .admin-weekday-field legend, .admin-color-field legend,
.admin-answer-row > div { color: var(--ink); }
.admin-card-icon, .admin-settings-form .admin-section-top > svg, .admin-settings-help .admin-card-title { color: var(--accent); }
.admin-tone-neutral { color: var(--muted); background: var(--panel-raised); }
.admin-tone-teal { color: var(--success); background: color-mix(in srgb,var(--success) 12%,transparent); }
.admin-tone-amber { color: var(--amber); background: color-mix(in srgb,var(--amber) 12%,transparent); }
.admin-tone-purple { color: var(--night); background: color-mix(in srgb,var(--night) 12%,transparent); }
.admin-stat > strong { font-weight: 600; color: var(--ink); }
.admin-progress-row strong { color: var(--accent); }
.admin-table td { border-color: var(--line); }
.admin-table tbody tr:hover { background: var(--hover); }
.admin-person-avatar { background: var(--accent-light); border-color: var(--line-strong); color: var(--accent); }
.admin-note-mark { border-color: color-mix(in srgb,var(--accent) 20%,transparent); }
.admin-live-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb,var(--success) 10%,transparent); }
.admin-live-dot.is-off { background: var(--muted); box-shadow: 0 0 0 4px var(--hover); }
.admin-toggle { background: var(--muted); width: 42px; height: 25px; }
.admin-toggle > span { width: 19px; height: 19px; background: var(--paper); }
.admin-toggle.is-on { background: var(--accent); }
.admin-toggle:focus-visible { outline-color: var(--accent); }
.admin-shift-catalogue .admin-section-top, .admin-settings-form .admin-section-top, .admin-shift-row { border-color: var(--line); }
.admin-shift-row.is-retired { background: var(--paper); }
.admin-color-teal, .admin-color-blue { --admin-shift-bg: color-mix(in srgb,var(--morning) 12%,transparent); --admin-shift-color: var(--morning); }
.admin-color-amber { --admin-shift-bg: color-mix(in srgb,var(--afternoon) 12%,transparent); --admin-shift-color: var(--afternoon); }
.admin-color-purple { --admin-shift-bg: color-mix(in srgb,var(--night) 12%,transparent); --admin-shift-color: var(--night); }
.admin-color-rose { --admin-shift-bg: color-mix(in srgb,var(--danger) 12%,transparent); --admin-shift-color: var(--danger); }
.admin-color-slate { --admin-shift-bg: color-mix(in srgb,var(--off) 12%,transparent); --admin-shift-color: var(--off); }
.admin-day-pills > span { background: var(--paper); color: var(--muted); border-color: var(--line); }
.admin-day-pills > span.is-active { background: var(--accent-light); color: var(--accent); border-color: var(--line-strong); }
.admin-icon-button:hover { color: var(--danger); }
.admin-search { color: var(--muted); background: var(--panel-raised); border-color: var(--line); border-radius: 12px; }
.admin-search input { color: var(--text); }
.admin-search input::placeholder { color: var(--muted); }
.admin-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.admin-checkbox-card { border-color: var(--line); background: var(--panel-raised); border-radius: 14px; }
.admin-checkbox-card input, .admin-inline-check input { accent-color: var(--accent); }
.admin-form-footer, .admin-domain { background: var(--panel-raised); border-color: var(--line); }
.admin-domain { color: var(--accent); }
.admin-weekday-options span { color: var(--muted); background: var(--panel-raised); border-color: var(--line); border-radius: 10px; }
.admin-weekday-options input:checked + span { color: var(--accent); background: var(--accent-light); border-color: var(--line-strong); }
.admin-weekday-options input:focus-visible + span, .admin-color-options input:focus-visible + span { outline-color: var(--accent); }
.admin-color-options span { border-color: var(--white); }
.admin-answer-list { border-color: var(--line); }
.admin-identity-details .admin-answer-row > div, .admin-identity-details .admin-answer-row strong { overflow-wrap: anywhere; }
.admin-identity-current { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.admin-identity-current > summary { color: var(--accent); font-size: 12px; cursor: pointer; }
.admin-attachment-block .button { max-width: 100%; text-align: start; justify-content: flex-start; }
.admin-attachment-block .button > span { min-width: 0; overflow-wrap: anywhere; }
.admin-shift-code { display: inline-block; padding: 3px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; font-size: 11px; }
.admin-table th, .admin-label, .admin-person small, .admin-detail-meta, .admin-answer-row small, .admin-footnote { font-size: 11px; }
.admin-table td, .admin-person strong, .admin-shift-time, .admin-small-copy, .admin-default-options p { font-size: 12px; }
.admin-section-top h2, .admin-card-title h2 { font-size: 18px; }
.admin-settings-form .input, .admin-shift-form .input { font-size: 13px; }

/* Profile values and survey evidence retain the account/schedule relationship. */
.account-card { padding: 22px 24px; margin-bottom: 22px; }
.account-card > .row { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.account-card h2 { font-size: 19px; }
.account-card > p { font-size: 12px; color: var(--muted); margin-top: 6px; }
.account-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-top: 20px; }
.account-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.account-field > span, .account-field > small { color: var(--muted); font-size: 11px; }
.account-field > strong { color: var(--ink); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.attachment-panel { margin-top: 22px; padding: 18px; background: var(--panel-raised); border: 1px solid var(--line); border-radius: 16px; }
.attachment-info { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.attachment-info > svg { color: var(--accent); }
.attachment-info > div { min-width: 0; flex: 1; }
.attachment-info strong { font-size: 13px; overflow-wrap: anywhere; }
.attachment-info p, .attachment-info small, .attachment-panel > p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 5px; }
.attachment-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.attachment-actions input[type='file'] { max-width: 100%; min-width: 0; font-size: 12px; color: var(--muted); }
.attachment-actions input[type='file']::file-selector-button { color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; margin-inline-end: 12px; font: inherit; cursor: pointer; }
.selected-commitment { background: var(--accent-light); border: 1px solid var(--line-strong); color: var(--accent); border-radius: 14px; padding: 14px 16px; margin-block: 14px; }
.source-note { color: var(--muted); font-size: 11px; line-height: 1.8; margin-top: 10px; }
.theme-toggle { width: 40px; min-height: 40px; border-radius: 999px; flex: 0 0 auto; }
.shift-coded, .roster-row strong.shift-coded, .schedule-day.shift-coded, .admin-shift-symbol.shift-coded { color: var(--shift-accent,var(--accent)); background: var(--shift-bg,var(--accent-light)); border-color: color-mix(in srgb,var(--shift-solid,var(--accent)) 30%,transparent); }
.shift-coded > svg, .schedule-day.shift-coded > div > svg, .schedule-day.shift-coded h3, .schedule-day.shift-coded p { color: var(--shift-accent,var(--accent)); }
html[data-mode='light'] .shift-coded, html[data-mode='light'] .roster-row strong.shift-coded, html[data-mode='light'] .schedule-day.shift-coded, html[data-mode='light'] .admin-shift-symbol.shift-coded, html[data-mode='light'] .shift-coded > svg, html[data-mode='light'] .schedule-day.shift-coded > div > svg, html[data-mode='light'] .schedule-day.shift-coded h3, html[data-mode='light'] .schedule-day.shift-coded p { color: var(--shift-solid,var(--accent)); }
.selected-shift-time.shift-coded { display: inline-block; padding: 3px 8px; border-radius: 7px; font-size: 12px; margin-top: 7px; }

/* Arabic uses the same self-hosted face as Dasho, with comfortable line height. */
html[dir='rtl'], [dir='rtl'] body { --font-ui: 'Alexandria','General Sans',system-ui,sans-serif; --font-display: 'Alexandria','Clash Display',system-ui,sans-serif; }
[dir='rtl'] .brand-type, [dir='rtl'] .brand-name { font-family: 'Clash Display',sans-serif; letter-spacing: .11em; }
[dir='rtl'] .brand-name small { font-family: 'Alexandria',sans-serif; letter-spacing: 0; }
[dir='rtl'] .eyebrow, [dir='rtl'] .workspace-label, [dir='rtl'] .week-table-head { letter-spacing: 0; }
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3 { letter-spacing: 0; line-height: 1.6; }
[dir='rtl'] .login-calendar { transform: none; }
[dir='rtl'] .admin-day-pills > span { font-size: 10px; }
[dir='rtl'] .admin-table, [dir='rtl'] .field { line-height: 1.8; }

@media(min-width:981px) {
  .sidebar { width: 256px; padding-inline: 16px; }
  .workspace { margin-inline-start: 256px; }
  .topbar { height: 72px; }
}
@media(max-width:980px) and (min-width:521px) {
  .sidebar > .brand { justify-content: center; }
  .sidebar .brand-name { display: none; }
  .dasho-brand-logo { width: 38px; height: 38px; }
}
@media(max-width:760px) {
  .account-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-heading p, .section-heading p, .holiday-content > p, .holiday-detail { font-size: 12px; }
  .holiday-content strong { font-size: 12px; }
  .holiday-content .badge { font-size: 10px; }
  .step { font-size: 11px; }
  .step b { font-size: 10px; }
  .staff-meta span { font-size: 11px; }
  .staff-meta > div strong { font-size: 12px; }
  .card-note, .planning-note p, .summary-pairs, .summary-pairs strong { font-size: 12px; }
  .progress-card .eyebrow { font-size: 10px; }
  .notes-field small, .review-consent p, .receipt-bottom p { font-size: 12px; }
  .admin-stat-top { font-size: 12px; }
  .admin-stat > small { font-size: 11px; }
  .admin-day-pills { flex-wrap: wrap; }
  .admin-day-pills > span, [dir='rtl'] .admin-day-pills > span { font-size: 10px; }
  .admin-shift-actions .button { font-size: 12px; min-height: 38px; }
}
@media(max-width:520px) {
  .account-card { padding: 18px 16px; }
  .account-grid { gap: 15px 12px; }
  .account-field > strong { font-size: 12px; }
  .attachment-panel { padding: 15px; }
  .attachment-actions { align-items: stretch; }
  .attachment-actions .button { flex: 1 1 auto; }
  .dasho-brand-logo { width: 34px; height: 34px; }
  .sidebar .brand-name { font-size: 20px; }
  .sidebar .brand-name small { font-size: 7px; }
  .sidebar .brand-type { font-size: 20px; }
  .sidebar .brand-type > span { font-size: 8px; }
  .sidebar nav .nav-item { border-radius: 10px 10px 0 0; min-height: 44px; }
  .sidebar nav .nav-item span { font-size: 10px; }
  .topbar { min-height: 56px; height: auto; padding-block: 8px; gap: 10px; }
  .topbar-actions { gap: 8px; }
  .topbar .button { min-height: 38px; font-size: 11px; }
  .page-heading { flex-wrap: wrap; gap: 12px; }
  .page-heading h1 { font-size: 29px; }
  .page-heading .eyebrow { font-size: 10px; }
  .page-heading p { max-width: none; font-size: 13px; }
  .campaign-badge { margin-top: 0; font-size: 11px; padding: 6px 9px; }
  .stepper { gap: 10px; }
  .step { font-size: 11px; gap: 5px; }
  .step b { width: 22px; height: 22px; font-size: 10px; }
  .section-heading h2 { font-size: 20px; }
  .week-tools > span, .week-tools .button { font-size: 11px; }
  .day-label strong { font-size: 13px; }
  .day-label small { font-size: 11px; }
  .shift-select { font-size: 13px; min-height: 46px; }
  .selected-shift-time { color: var(--muted); font-size: 12px; }
  .survey-aside { grid-template-columns: 1fr; }
  .planning-note h3 { font-size: 14px; }
  .survey-actions .button { min-height: 44px; font-size: 12px; padding: 10px 15px; }
  .commitment-options { grid-template-columns: 1fr; }
  .option-card { font-size: 13px; min-height: 52px; }
  .option-card input { width: 17px; height: 17px; }
  .availability-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 28px; gap: 8px; }
  .availability-row > label:first-child { grid-column: 1 / -1; }
  .availability-row > label { font-size: 11px; }
  .availability-row .input { font-size: 12px; min-height: 42px; }
  .busy-block > .row { flex-wrap: wrap; }
  .busy-block p { font-size: 12px; }
  .busy-block .button { font-size: 12px; }
  .holiday-question { flex-direction: column; align-items: stretch; }
  .holiday-question .input { max-width: none; font-size: 13px; }
  .review-days > div, .review-days strong, .review-detail p { font-size: 12px; }
  .review-days > div { flex-wrap: wrap; }
  .receipt-heading h2 { font-size: 20px; }
  .receipt-heading p, .receipt-heading .eyebrow { font-size: 11px; }
  .login-card { padding: 24px; }
  .login-story h1 { font-size: 42px; }
  .login-story > p { font-size: 14px; }
  .login-story .eyebrow { font-size: 10px; }
  .login-card > p { font-size: 13px; }
  .login-card h2 { font-size: 25px; }
  .login-footer { font-size: 11px; flex-wrap: wrap; gap: 8px; }
  .modal-content { padding: 32px 20px 24px; }
  .admin-modal-heading h2, .admin-confirm-modal h2 { font-size: 23px; }
  .admin-weekday-options { flex-wrap: wrap; }
  .admin-weekday-options label { flex: 0 0 calc(25% - 5px); }
  .admin-weekday-options span { font-size: 12px; min-height: 44px; }
  .admin-color-options { flex-wrap: wrap; }
  .admin-color-options span { width: 36px; height: 36px; }
  .admin-answer-row { grid-template-columns: 1fr; gap: 5px; }
  .admin-answer-row > span, .admin-answer-row > div, .admin-detail-additional p { font-size: 12px; }
  .admin-detail-bottom { flex-wrap: wrap; font-size: 11px; }
  .admin-default-options > div { white-space: normal; }
  .admin-domain { overflow-wrap: anywhere; word-break: break-word; }
  .admin-modal-footer { flex-wrap: wrap; }
  .admin-modal-footer .button { flex: 1 1 auto; }
  [dir='rtl'] .step { font-size: 10px; }
  [dir='rtl'] .page-heading h1 { font-size: 26px; }
  [dir='rtl'] .login-story h1 { font-size: 34px; }
  [dir='rtl'] .admin-stat-top { font-size: 11px; }
}