@import url("../fonts/editorial/geist.css");
@import url("../fonts/editorial/geist-mono.css");
/* Bold Editorial UI. See UI_STYLE_SPEC.md. Shared surfaces and control recipes. */
:root {
  --ui-paper-rgb: 239 232 210;
  --ui-surface-rgb: 247 243 231;
  --ui-ink: #101422;
  --ui-paper: #efe8d2;
  --ui-accent: #ef6b2e;
  --ui-muted: #575246;
  --ui-focus: #167d80;
}
.ui-app { color: var(--ui-ink); background: var(--ui-paper); font-family: 'Geist', system-ui, sans-serif; }
.ui-app h1, .ui-title { font-weight: 900; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -.045em; overflow-wrap: anywhere; }
.ui-app h2, .ui-app h3 { font-weight: 800; letter-spacing: -.025em; }
.ui-app h2 { line-height: 1.15; }
.ui-eyebrow { color: #9d3c1d; font: 750 .875rem/1.4 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.ui-app :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-focus); outline-offset: 3px;
}
.ui-app :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='color']), select, textarea) {
  background-color: rgb(var(--ui-surface-rgb)); color: var(--ui-ink); border: 2px solid var(--ui-ink);
  border-radius: 0; box-shadow: none; font: inherit; font-size: 1rem; min-height: 44px;
}
.ui-app :where(input, textarea)::placeholder { color: #706957; opacity: 1; }
.ui-app :where(input[type='checkbox'], input[type='radio']) { accent-color: var(--ui-ink); }
.ui-app label { color: var(--ui-ink); }
.ui-app select { padding-right: 2rem; }
.ui-app th { color: var(--ui-muted); font-family: 'Geist Mono', monospace; font-size: .875rem; font-weight: 700; letter-spacing: .02em; }
.ui-app summary { min-height: 44px; align-content: center; }
.ui-button {
  min-height: 44px; border: 2px solid var(--ui-ink); border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1rem; font: 750 .875rem/1.35 'Geist Mono', monospace;
  letter-spacing: .035em; text-align: center; white-space: normal;
  transition: box-shadow 120ms ease, background-color 120ms ease;
}
.ui-button-primary { background: var(--ui-ink); color: var(--ui-paper); border-width: 3px; box-shadow: 4px 4px 0 var(--ui-accent); }
.ui-button-primary:hover { background: #242a3c; color: var(--ui-paper); box-shadow: 2px 2px 0 var(--ui-accent); }
.ui-button-primary:active { box-shadow: 1px 1px 0 var(--ui-accent); }
.ui-button-secondary { background: rgb(var(--ui-surface-rgb)); color: var(--ui-ink); box-shadow: none; }
.ui-button-secondary:hover { background: #e3dac2; }
.ui-button:disabled, .ui-button[aria-disabled='true'] { background: #ded7c6; color: #575246; border-color: #918978; box-shadow: none; cursor: not-allowed; }
.ui-panel { background: rgb(var(--ui-surface-rgb)); border: 2px solid var(--ui-ink); border-radius: 0; box-shadow: none; }
.ui-decision { background: var(--ui-paper); border: 3px solid var(--ui-ink); border-radius: 0; box-shadow: 7px 7px 0 var(--ui-accent); }
.ui-decision h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 900; }
.ui-sidebar { background: #101422; color: #efe8d2; border-right: 2px solid #101422; }
.ui-sidebar nav { font-size: .875rem; }
.ui-sidebar :where(a, button) { color: #efe8d2; }
.ui-sidebar :where(a, button):hover { background-color: #282d3c; color: #efe8d2; }
.ui-sidebar svg { color: #b5ad98; }
.ui-sidebar :where(a, button).bg-ui-wash { background: #efe8d2; color: #101422; box-shadow: 3px 3px 0 #ef6b2e; }
.ui-sidebar :where(a, button).bg-ui-wash svg { color: #101422; }
.ui-sidebar :where(.text-ui-muted, .text-ui-rust) { color: #d6d1c5; }
.ui-sidebar :focus-visible { outline-color: #54e9ff; }
.ui-brand { font-weight: 900; font-size: 1.35rem; letter-spacing: -.04em; }
.ui-mobile-header { border-bottom: 2px solid var(--ui-ink); background: var(--ui-paper); }
.ui-mobile-header > div:first-of-type { font-weight: 850; }
.ui-group-tabs a { border: 2px solid var(--ui-ink); border-radius: 0; font-family: 'Geist Mono', monospace; }
.ui-group-tabs a[aria-current='page'] { background: var(--ui-ink); color: var(--ui-paper); box-shadow: 3px 3px 0 var(--ui-accent); }
.ui-group-tabs a[aria-current='page']::before { content: '✓'; }
.ui-person-list { border: 2px solid var(--ui-ink); border-radius: 0; }
.ui-person-list > li > a:hover { background: #e3dac2; }
.ui-app [data-role-badge] { box-shadow: 0 0 0 1px #10142233; }
.ui-calendar-heading { font-family: 'Geist Mono', monospace; font-weight: 700; }
.ui-app .appointment-editor { border: 2px solid var(--ui-ink); border-radius: 0; }
.ui-app .appointment-editor-actions { border-radius: 0; border-top: 2px solid var(--ui-ink); padding-right: max(1.25rem, env(safe-area-inset-right)); }
.ui-app .appointment-editor details[open] > summary { color: #9d3c1d; }
.ui-app [data-editor-heading] { font-weight: 900; font-size: 1.65rem; line-height: 1.1; }
.ui-app [data-editor-heading]:focus { outline: none; }
.ui-login-wrap { max-width: 36rem; margin: 2rem auto; padding: 0 1rem 1rem; }
.ui-login-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
.ui-login-card h1 { margin: .75rem 0 1.5rem; }
.ui-app [data-create-appointment], .ui-app [data-mobile-create-link] { margin-bottom: 4px; }
@media (max-width: 639px) {
  .ui-app h1 { font-size: 2.25rem; }
  .ui-decision { box-shadow: 5px 5px 0 var(--ui-accent); }
  .ui-login-wrap { margin: 1rem auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-app *, .ui-app *::before, .ui-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  :root { --ui-paper-rgb: 255 255 255; --ui-surface-rgb: 255 255 255; --ui-paper: #fff; }
  .ui-app { background: white; color: black; }
  .ui-decision, .ui-button-primary { box-shadow: none; }
}
@media (max-height: 480px) {
  .ui-login-wrap { margin-top: 0; }
  .ui-login-card { padding: 1rem; }
  .ui-login-card h1 { font-size: 2rem; margin: .5rem 0 1rem; }
}

.ui-sidebar .ui-sidebar-popover :where(a, button, svg) { color: var(--ui-ink); }
.ui-sidebar .ui-sidebar-popover :where(a, button):hover { background: #e3dac2; }
.ui-app .ui-calendar h1 { font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -.025em; line-height: 1.15; }
.ui-app .ui-calendar header :where(a, button) { min-height: 44px; min-width: 44px; }

/* Reflow controls by available space, including enlarged browser text. */
.ui-group-tabs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.ui-group-tabs a { overflow-wrap: anywhere; }
.ui-app [role='search'] > div { flex-wrap: wrap; }
.ui-app #employee-search { flex-basis: min(100%, 14rem); }
.ui-mobile-header { gap: 1rem; }

/* Shared working components. Keep depth on decisions, not on every row. */
.ui-control, .ui-icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; min-width: 44px; border: 2px solid var(--ui-ink);
  border-radius: 0; background: rgb(var(--ui-surface-rgb)); color: var(--ui-ink);
  box-shadow: none; font: 700 .875rem/1.4 'Geist Mono', monospace;
  padding: .5rem .75rem; white-space: normal;
}
.ui-icon-button { padding: .5rem; flex-shrink: 0; }
.ui-control:hover, .ui-icon-button:hover { background: #e3dac2; color: var(--ui-ink); }
.ui-control[aria-pressed='true'], .ui-control[aria-current='page'] {
  background: var(--ui-ink); color: var(--ui-paper);
}
.ui-control-danger { border-color: #991b1b; color: #991b1b; }
.ui-control-danger:hover { background: #fef2f2; color: #7f1d1d; }
.ui-control-positive { border-color: #166534; color: #166534; }
.ui-control-positive:hover { background: #f0fdf4; color: #14532d; }
.ui-control:disabled, .ui-icon-button:disabled {
  color: var(--ui-muted); background: #ded7c6; border-color: #918978; cursor: not-allowed;
}
.ui-action {
  display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .5rem;
  font-weight: 700; text-decoration: underline; text-underline-offset: .2em;
}
.ui-action:hover { background: #e3dac2; }
.ui-popover {
  border: 2px solid var(--ui-ink); border-radius: 0;
  background: rgb(var(--ui-surface-rgb)); color: var(--ui-ink);
  box-shadow: 4px 4px 0 var(--ui-ink); max-width: calc(100vw - 32px);
}
.ui-popover :where(a, button:not(.ui-control):not(.ui-icon-button)) {
  min-height: 44px; align-content: center;
}
.ui-popover :where(a, button):hover { background-color: #e3dac2; }
.ui-popover :where(a, button):focus-visible { outline-offset: -3px; }
.ui-select-trigger { width: 100%; justify-content: space-between; font-family: 'Geist', sans-serif; font-weight: 500; text-align: left; }
.ui-select-trigger > span { white-space: normal; overflow-wrap: anywhere; }
.ui-select-options { max-height: min(20rem, 50dvh); overflow-y: auto; }
.ui-dialog {
  border: 3px solid var(--ui-ink); border-radius: 0;
  background: var(--ui-paper); box-shadow: 6px 6px 0 var(--ui-accent);
}
.ui-dialog h2 { font-size: 1.5rem; line-height: 1.15; }
.ui-toolbar { border-bottom: 2px solid var(--ui-ink); box-shadow: none; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table thead { background: #e3dac2; border-bottom: 2px solid var(--ui-ink); }
.ui-table tbody tr + tr { border-top: 1px solid #b5ad98; }
.ui-table tbody tr:hover { background: #efe8d2; }
.ui-table th, .ui-table td { vertical-align: middle; }
.ui-table th { white-space: normal; }
.ui-table td { font-variant-numeric: tabular-nums; }
.ui-tabs { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; background: transparent; }
.ui-notice {
  border: 2px solid var(--ui-ink); border-left-width: 6px;
  background: var(--ui-paper); color: var(--ui-ink); box-shadow: 4px 4px 0 var(--ui-ink);
}
.ui-notice p { overflow-wrap: anywhere; }
.ui-notice-success { border-left-color: #166534; }
.ui-notice-error { border-left-color: #991b1b; }
.ui-notice-warning { border-left-color: #92400e; }
.ui-tooltip { background: var(--ui-ink); color: var(--ui-paper); border: 1px solid var(--ui-paper); box-shadow: none; }
.ui-app .touch-hold-ring .bg { stroke: #10142233; }
.ui-app .touch-hold-ring .progress { stroke: var(--ui-ink); }
.ui-calendar-filter form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ui-calendar-filter form > .relative { min-width: 10rem; max-width: 14rem; }
.ui-calendar-filter label { white-space: nowrap; }
.ui-nav-group { display: flex; gap: 0; border: 2px solid var(--ui-ink); }
.ui-nav-group > a { border: 0; border-radius: 0; font-family: 'Geist Mono', monospace; }
.ui-nav-group > a + a { border-left: 1px solid var(--ui-ink); }
.ui-colour-picker { max-height: calc(100dvh - 32px); overflow-y: auto; }
.ui-colour-picker button:hover { outline: 2px solid var(--ui-ink); outline-offset: 1px; }
.ui-voice-control { border: 3px solid var(--ui-ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ui-accent); }
.ui-settings > .ui-panel form { flex-wrap: wrap; }
.ui-settings > .ui-panel form > .flex-1 { min-width: min(100%, 14rem); }
.ui-settings > .ui-panel form > .flex { flex-wrap: wrap; }
.ui-settings .flow-root > div { margin-inline: 0; max-width: 100%; }
.ui-dialog .appointment-editor { border: 0; }
@media print {
  .ui-dialog, .ui-popover, .ui-notice { box-shadow: none; }
}
