/* Shared workplace semantics. Loaded after the brand and workspace styles. */
html:root[lang] {
  --one-page: #f1f5fa; --one-surface: #ffffff; --one-surface-soft: #e7effa;
  --one-line: #ced8e5; --one-edge: #687b94; --one-text: #172235; --one-muted: #526176;
  --one-blue: #1256a6; --one-teal: #1256a6; --one-focus: #1256a6;
  --primary: #1256a6; --primary-text: #ffffff; --accent: #1256a6;
  --one-active: #e2edff; --one-success: #165c40; --one-success-bg: #e5f3eb;
  --one-warning: #754900; --one-warning-bg: #fff1cc; --one-error: #a32036; --one-error-bg: #fff0f2;
  --background: var(--one-page); --surface: var(--one-surface); --surface-soft: var(--one-surface-soft);
  --line: var(--one-line); --line-strong: var(--one-edge);
  --surface-muted: var(--one-surface-soft); --surface-tint: var(--one-active); --surface-raised: var(--one-surface);
  --one-surface-muted: var(--one-surface-soft); --one-surface-tint: var(--one-active);
  --border: var(--one-line); --text: var(--one-text); --muted: var(--one-muted);
  --danger: var(--one-error); --red: var(--one-error); --teal: var(--one-blue);
  --one-control-height: 44px; --one-touch-control-height: 48px; --one-control-radius: 6px;
  --one-shadow: 0 3px 14px #14284410;
}
html:root[lang][data-theme="dark"] {
  --one-page: #131619; --one-surface: #20262c; --one-surface-soft: #2b3642;
  --one-line: #485464; --one-edge: #8192a8; --one-text: #f3f6fa; --one-muted: #becbda;
  --one-blue: #a6caff; --one-teal: #a6caff; --one-focus: #a6caff;
  --primary: #a6caff; --primary-text: #122d4e; --accent: #a6caff; --one-active: #293e59;
  --one-success: #94dfb8; --one-success-bg: #193c2d; --one-warning: #ffda8b; --one-warning-bg: #463617;
  --one-error: #ffb6c2; --one-error-bg: #49222c; --one-shadow: 0 3px 14px #0003;
}
@media (prefers-color-scheme: dark) {
  html:root[lang]:not([data-theme="light"]) {
    --one-page: #131619; --one-surface: #20262c; --one-surface-soft: #2b3642;
    --one-line: #485464; --one-edge: #8192a8; --one-text: #f3f6fa; --one-muted: #becbda;
    --one-blue: #a6caff; --one-teal: #a6caff; --one-focus: #a6caff;
    --primary: #a6caff; --primary-text: #122d4e; --accent: #a6caff; --one-active: #293e59;
    --one-success: #94dfb8; --one-success-bg: #193c2d; --one-warning: #ffda8b; --one-warning-bg: #463617;
    --one-error: #ffb6c2; --one-error-bg: #49222c; --one-shadow: 0 3px 14px #0003;
  }
}
body { background-color: var(--one-page); color: var(--one-text); }
:where(h1,h2,h3,h4,p,button,label,input,select,textarea) { letter-spacing: 0; }
:where(.panel,.card,.event-card,.setup-panel,.module-card,.metric-grid,.week-strip) {
  background-color: var(--one-surface); border-color: var(--one-line); color: var(--one-text);
}
:where(.panel,.card,.event-card,.module-card) { border-radius: 8px; box-shadow: var(--one-shadow); }
:where(.panel .panel,.card .card,.panel .card) { box-shadow: none; }
:where(.metric,.event-metrics > div,.week-day) { background: var(--one-surface); color: var(--one-text); }
.metric-grid { gap: 0; border: 1px solid var(--one-line); border-radius: 8px; overflow: hidden; }
.metric-grid > .metric { border-radius: 0; border: 0; border-inline-end: 1px solid var(--one-line); }
.metric-grid > .metric:last-child { border-inline-end: 0; }
.week-day { border: 1px solid var(--one-line); border-radius: 6px; }
.week-day.today { background: var(--one-active); color: var(--one-text); box-shadow: inset 0 -3px var(--primary); }
.week-day.today small { color: var(--one-muted); opacity: 1; }
:where(.calendar-day.outside,.calendar-day.other-month) { color: var(--one-muted); background: var(--one-page); opacity: 1; }
:where(.muted,.metric small,.week-day small,.event-card small) { color: var(--one-muted); }
:where(button,input,select,textarea) { font-size: 14px; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea) {
  background-color: var(--one-surface); color: var(--one-text); border-color: var(--one-edge);
}
:where(input,textarea)::placeholder { color: var(--one-muted); opacity: 1; }
:where(.secondary-button,.icon-button,.ghost-button,.nav-item) { color: var(--one-text); }
.primary-button, button.primary, .login-panel button { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--one-focus); outline-offset: 3px;
}
:where(button,a):not(:disabled):hover { text-decoration-thickness: 2px; }
:where(.secondary-button,.icon-button,.nav-item):not(:disabled):hover { background: var(--one-active); }
:where(button,input,select,textarea):disabled { cursor: not-allowed; border-style: dashed; }
.badge.success { color: var(--one-success); background: var(--one-success-bg); }
.badge.warning { color: var(--one-warning); background: var(--one-warning-bg); }
:where(.badge.danger,.badge.error,.field-error) { color: var(--one-error); }
.nav-item.active { background: var(--one-active); color: var(--primary); box-shadow: inset 3px 0 var(--primary); }
.workplace-context { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 8px 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--one-line); font-size: 12px; color: var(--one-muted); }
.workplace-context > span { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border: 1px solid var(--one-line); border-radius: 7px; background: var(--one-surface); }
.workplace-context > span > svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--primary); }
.workplace-context > span > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.workplace-context strong { color: var(--one-text); font-size: 13px; }
.workplace-modules { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 12px; }
.workplace-modules button { display: flex; text-align: left; align-items: center; gap: 14px; padding: 16px; background: var(--one-surface); border: 1px solid var(--one-line); border-radius: 8px; min-height: 64px; color: var(--one-text); }
.workplace-modules button span { flex: 1; }
.workplace-bottomnav { display: none; }
body:has(#sidebar.open) .workplace-bottomnav { display: none; }
body:has(#unsaved-dialog[open], #action-confirm-dialog[open]) #app-dialog { visibility: hidden; }
.workplace-bottomnav svg { width: 24px; height: 24px; flex: 0 0 24px; }
.main-content:has(.event-workspace) > .page-heading { display: none; }
html:root[lang] .event-workspace {
  --event-page: var(--one-page); --event-surface: var(--one-surface);
  --event-surface-raised: var(--one-surface); --event-surface-soft: var(--one-surface-soft);
  --event-surface-active: var(--one-active); --event-text: var(--one-text); --event-muted: var(--one-muted);
  --event-line: var(--one-line); --event-line-strong: var(--one-edge); --event-primary: var(--primary);
  --event-primary-text: var(--primary-text); --event-brand: var(--primary); --event-focus: var(--one-focus);
  --event-success: var(--one-success); --event-success-soft: var(--one-success-bg);
  --event-warning: var(--one-warning); --event-warning-soft: var(--one-warning-bg);
  --event-danger: var(--one-error); --event-danger-soft: var(--one-error-bg);
}
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 1000; padding: 12px; background: var(--one-surface); color: var(--primary); }
.skip-link:focus { top: 12px; }
#app-dialog[data-dialog-size="workspace"] { width: calc(100vw - 32px); max-width: 1200px; height: calc(100dvh - 32px); max-height: calc(100dvh - 32px); }
#app-dialog[data-dialog-size="workspace"] .dialog-shell { height: 100%; max-height: 100%; }
@media (max-width: 780px) {
  html:root[lang] { --one-control-height: 48px; --one-control-compact-height: 48px; }
  .compact-user-form { --one-touch-control-height: 48px; }
  #manual-user-form :is(input:not([type="checkbox"]),select), .access-module-row select, .compact-toggle { min-height: 48px; height: 48px; }
  .steps nav button, .topbar .button, .area-templates button { min-height: 44px; }
  #workspace .main-content { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  .workplace-bottomnav { position: fixed; inset: auto 0 0; z-index: 45; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: var(--one-surface); border-top: 1px solid var(--one-edge); padding-bottom: env(safe-area-inset-bottom); }
  .workplace-bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px; padding: 8px 2px; border: 0; border-radius: 0; background: transparent; color: var(--one-muted); font-size: 13px; }
  .workplace-bottomnav button[aria-current="page"] { background: var(--one-active); color: var(--primary); box-shadow: inset 0 3px var(--primary); font-weight: 700; }
  .workplace-context { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; font-size: 12px; }
  .workplace-context > span { padding: 7px 8px; }
  .workplace-context > span:last-child { grid-column: 1 / -1; }
  :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size: 16px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-grid > .metric { border-inline-end: 0; border-bottom: 1px solid var(--one-line); min-height: 66px; }
  .metric-grid > .metric:last-child { border-bottom: 0; }
  #app-dialog[data-dialog-size="workspace"] { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
}
@media (max-width: 980px) {
  .workspace:has(> .steps), .workspace.test-workspace:has(> .steps) {
    display: flex; flex-direction: column; min-width: 0;
  }
  .workspace:has(> .steps) > .test-mode-banner { position: static; min-height: 44px; flex-wrap: wrap; }
  .workspace:has(> .steps) > .topbar { top: 0; flex-wrap: wrap; padding: 12px 16px; }
  .workspace:has(> .steps) .topbar-status { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .workspace:has(> .steps) > .steps { min-width: 0; overflow: visible; }
  .workspace:has(> .steps) .steps nav { min-width: 0; flex-wrap: wrap; gap: 6px; }
  .workspace:has(> .steps) .steps nav button { flex: 1 1 130px; text-align: left; scroll-margin-top: 230px; }
  .workspace:has(> .steps) > .content { width: 100%; min-width: 0; }
}
@media (max-width: 899px) {
  #sidebar:not(.open) { visibility: hidden; }
}
@media (max-width: 900px) {
  .workspace:not(.nav-open) .control-sidebar { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}