:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #182c3d;
  background: #f3f6f8;
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 2rem 1rem; }
main {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3rem);
  background: #fff;
  border: 1px solid #cdd8df;
  border-radius: 1rem;
  overflow-wrap: anywhere;
}
h1 { margin: 0 0 1rem; font-size: clamp(1.65rem, 4vw, 2.25rem); line-height: 1.2; }
p { margin: 1rem 0; max-width: 70ch; }
a { color: #075d86; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .15em; }
p > a, td a { display: inline-block; max-width: 100%; padding: .6rem 0; }
:focus-visible { outline: 3px solid #075d86; outline-offset: 4px; }
button {
  min-height: 44px;
  padding: .65rem 1.25rem;
  border: 2px solid #075d86;
  border-radius: .4rem;
  background: #075d86;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: #064363; }
button:disabled { opacity: .65; cursor: wait; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 1.5rem 0; }
caption { text-align: left; font-weight: 600; padding: .75rem 0; }
th, td { text-align: left; vertical-align: top; padding: .8rem; border-bottom: 1px solid #cdd8df; }
th { background: #edf3f6; }
tbody tr:nth-child(even) { background: #f7f9fa; }
dl { padding: 1rem; border-left: 3px solid #075d86; background: #f3f6f8; }
dt { font-weight: 600; }
dd { margin: 0 0 .75rem; }
dd:last-child { margin-bottom: 0; }
#sign-out-status:empty { margin: 0; }
@media (max-width: 36rem) {
  body { padding: .5rem; }
  main { border-radius: .5rem; }
  th, td { padding: .65rem .35rem; font-size: .875rem; }
}

form label { display: block; font-weight: 600; }
form input {
  display: inline-block;
  width: min(100%, 25rem);
  min-height: 44px;
  margin: 0 .5rem .75rem 0;
  padding: .65rem;
  border: 1px solid #607785;
  border-radius: .4rem;
  font: inherit;
}

.time-range{margin:1rem 0;max-width:900px;border:1px solid #aab4bf;border-radius:8px;padding:12px}
.time-range summary{cursor:pointer;font-weight:600;padding:8px}
.range-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0}
.range-scroll{max-height:360px;overflow:auto;border:1px solid #ccd3da}
.range-grid{display:grid;grid-template-columns:repeat(7,minmax(85px,1fr));min-width:595px;position:relative}
.range-grid .range-day{position:sticky;top:0;background:#eef2f6;padding:8px 2px;font-size:12px;text-align:center;z-index:1}
.range-grid button{height:32px;min-height:32px;margin:0;padding:2px;border:1px solid #d9e0e7;border-radius:0;background:#fff;color:#172b4d;font-size:12px;touch-action:none;user-select:none}
.range-grid button.selected{background:#174ea6;color:white}
.range-grid button:focus-visible{outline:3px solid #d87700;outline-offset:-3px;z-index:2}
.range-help,.range-status{font-size:.9rem}.range-week{text-align:center;font-size:.85rem}

/* Service operations design system. No external fonts, scripts or imagery. */
:root{color-scheme:light dark;--canvas:#f5f5f2;--surface:#ffffff;--ink:#182b2b;--muted:#526463;--accent:#12675d;--tint:#e6f1ed;--line:#c8d2cc;--field:#788b83;--danger:#a52b31;background:var(--canvas);color:var(--ink);font-size:16px;line-height:1.55}
body{padding:2rem 1rem}
a{color:var(--accent)}
main{max-width:80rem;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:clamp(1.25rem,3vw,3rem)}
h1{font-size:clamp(1.8rem,3vw,2.7rem);letter-spacing:-.045em;font-weight:650;line-height:1.15;margin:0 0 1rem}
h2{font-size:1.35rem;letter-spacing:-.025em;margin:2.2rem 0 1rem;line-height:1.3}
h3{font-size:1.05rem;margin:1.5rem 0 .7rem}p{max-width:75ch}
.page-intro{font-size:1.1rem;color:var(--muted);max-width:58ch}
.app-shell{display:grid;grid-template-columns:15rem minmax(0,1fr);min-height:100vh}
body:has(.app-shell){padding:0}
.app-sidebar{background:var(--surface);border-right:1px solid var(--line);padding:1.75rem 1rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);font-size:.95rem;font-weight:700;margin-bottom:2rem}
.brand small{display:block;font-size:.6rem;letter-spacing:.16em;color:var(--muted);margin-top:.25rem}
.brand-mark{display:grid;place-items:center;background:var(--accent);color:var(--surface);font-size:1.75rem;letter-spacing:-.1em;width:2.7rem;height:2.7rem;border-radius:12px;padding-right:.18rem}
.nav-group{font-size:.68rem;font-weight:650;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:0 .75rem;margin:1.3rem 0 .4rem}
.app-sidebar nav a{display:block;padding:.7rem .75rem;min-height:44px;border-radius:8px;text-decoration:none;font-size:.9rem;color:var(--muted);margin:.12rem 0;border:1px solid transparent}
.app-sidebar nav a:hover{background:var(--canvas);color:var(--ink)}
.app-sidebar nav a[aria-current=page]{background:var(--tint);color:var(--accent);font-weight:650;border-color:var(--line);box-shadow:inset 3px 0 var(--accent)}
.workspace-role{padding:.85rem .75rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);margin-top:2rem}
.app-content{min-width:0}
.workspace-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;padding:1.2rem clamp(1.25rem,3vw,3rem);border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted);background:var(--surface)}
.workspace-bar span:first-child{color:var(--ink);font-weight:600}
.app-content main{margin:0;border:0;background:transparent;border-radius:0;max-width:100rem;min-height:calc(100vh - 4rem)}
.skip-link{position:fixed;top:-5rem;left:1rem;z-index:20;background:var(--surface);padding:.8rem 1.1rem;border:2px solid var(--accent);border-radius:8px}
.skip-link:focus{top:1rem}
.workspace-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;margin:2rem 0}
.workspace-tools p{margin:0;padding:1.15rem 1.3rem;border:1px solid var(--line);background:var(--surface);border-radius:12px;min-height:5.2rem}
.workspace-tools a{font-weight:600;text-decoration:none;padding:.6rem 0}
.workspace-tools p:hover{border-color:var(--accent)}
button{background:var(--accent);border:1px solid var(--accent);border-radius:8px;font-size:.92rem;min-height:44px;padding:.7rem 1.1rem;line-height:1.3;color:var(--surface)}
button:hover{background:var(--ink);border-color:var(--ink)}button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
form{margin:1rem 0 1.5rem}form label{font-size:.9rem;line-height:1.5;margin:.65rem 0 .35rem;font-weight:600}
form input,form select,form textarea{font:inherit;font-size:1rem;min-height:44px;padding:.65rem .8rem;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--ink);max-width:100%;width:min(100%,32rem);margin:.3rem .5rem .6rem 0}
form textarea{display:block;min-height:7rem;resize:vertical}
form input[type=checkbox],form input[type=radio]{width:1.25rem;min-height:1.25rem;height:1.25rem;vertical-align:middle;accent-color:var(--accent);margin:.5rem}
form label:has(input[type=checkbox]){font-weight:400;display:flex;align-items:center;gap:.35rem}
fieldset{border:1px solid var(--line);border-radius:12px;padding:1.2rem;min-width:0;margin:1rem 0}legend{font-weight:600;padding:0 .5rem}
.schedule-action{padding:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:12px}
details{margin:1rem 0}summary{cursor:pointer;min-height:44px;padding:.65rem 0;font-weight:600}
nav:not(.app-sidebar nav){display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:1.25rem 0}nav:not(.app-sidebar nav) a{padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
table{background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:.9rem;font-variant-numeric:tabular-nums}
th,td{border-color:var(--line);padding:1rem .8rem;overflow-wrap:anywhere}th{background:var(--tint);font-size:.8rem;color:var(--muted)}tbody tr:nth-child(even){background:var(--canvas)}
dl{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:1.2rem}dt{font-size:.8rem;color:var(--muted)}dd{margin:.2rem 0 1.1rem}
[role=status]:not(:empty),[role=alert]:not(:empty){padding:.85rem 1rem;background:var(--tint);border-left:3px solid var(--accent);border-radius:6px}
[role=alert]:not(:empty){border-left-color:var(--danger)}
pre{white-space:pre-wrap;overflow-wrap:anywhere}code{font-size:.85em}
.time-range{max-width:none;background:var(--surface);border-color:var(--line);padding:1rem;border-radius:10px}
.range-scroll{max-height:28rem;border-color:var(--line);border-radius:8px;overscroll-behavior:contain}
.range-grid{grid-template-columns:repeat(7,minmax(85px,1fr))}.range-grid .range-day{background:var(--tint);color:var(--ink);font-size:.8rem;padding:.7rem .25rem}
.range-grid button{background:var(--surface);color:var(--muted);border-color:var(--line);height:36px;min-height:36px;font-size:.75rem}
.range-grid button:hover{background:var(--tint)}.range-grid button.selected{background:var(--accent);color:var(--surface)}.range-grid button:focus-visible{outline:3px solid var(--ink)}
.range-toolbar button,.range-apply,#sign-out{background:var(--surface);color:var(--accent)}.range-toolbar button:hover,.range-apply:hover,#sign-out:hover{background:var(--tint)}
.range-help{color:var(--muted);font-size:.85rem}.range-week{font-variant-numeric:tabular-nums}
@media(prefers-color-scheme:dark){:root{--canvas:#141d1c;--surface:#1d2927;--ink:#e9f0ed;--muted:#b1c3bc;--accent:#8cdbbd;--tint:#263c34;--line:#455b52;--field:#82988e;--danger:#ffa6aa}}
@media(max-width:60rem){.app-shell{grid-template-columns:12rem minmax(0,1fr)}.brand{font-size:.8rem;gap:.4rem}.brand-mark{width:2rem;height:2rem;font-size:1.4rem}.app-sidebar{padding:1rem .6rem}}
@media(max-width:44rem){.app-shell{display:block}.app-sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:1rem}.brand{margin:0 0 .75rem;font-size:1rem}.app-sidebar nav{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem}.app-sidebar nav a{flex:none;margin:0;white-space:nowrap}.nav-group,.workspace-role{display:none}.workspace-bar{padding:.8rem 1rem}.app-content main{padding:1.5rem 1rem}.range-toolbar{flex-wrap:wrap}.range-week{order:-1;width:100%}table{display:block;overflow-x:auto;table-layout:auto}th,td{min-width:8rem;padding:.8rem;font-size:.9rem}.workspace-tools{gap:.65rem}body{padding:.75rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(prefers-contrast:more){:root{--line:var(--muted);--field:var(--ink)}a{text-decoration:underline}}
@media(forced-colors:active){.app-sidebar nav a[aria-current=page],.range-grid button.selected{border:3px solid Highlight}}
@media print{.app-sidebar,.workspace-bar,.skip-link{display:none}.app-shell{display:block}.app-content main{padding:0;background:white;color:black}button{display:none}}
.workspace-tools .tool-card{display:flex;flex-direction:column;gap:.65rem;padding:1.35rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:400;text-decoration:none}
.tool-card strong{font-size:1.05rem;letter-spacing:-.02em}.tool-card>span{font-size:.88rem;color:var(--muted);max-width:35ch}.tool-card .tool-open{margin-top:auto;padding-top:.5rem;font-size:.8rem;font-weight:600;color:var(--accent)}
.workspace-tools .tool-card:hover{border-color:var(--accent);background:var(--tint)}
.tool-card[href='/staff/requests'],.tool-card[href='/staff/schedule']{border-top:3px solid var(--accent)}
main[data-view=schedule]>form:not(.schedule-action){display:flex;align-items:end;flex-wrap:wrap;gap:.8rem;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:10px}
main[data-view=schedule]>form:not(.schedule-action) label{flex:1 1 10rem;margin:0}main[data-view=schedule]>form:not(.schedule-action) button{margin-bottom:.6rem}
main[data-view=schedule]>section{background:var(--surface);border:1px solid var(--line);padding:1.25rem;border-radius:12px;margin:1rem 0}main[data-view=schedule]>section>h2{margin-top:0}
.schedule-action:has(.time-range){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem}
.schedule-action>.time-range,.schedule-action>label:has(select[name=request]),.schedule-action>label:has(input[type=checkbox]),.schedule-action:has(.time-range)>button{grid-column:1/-1}
.schedule-action:has(.time-range)>button{justify-self:start}
@media(max-width:44rem){.schedule-action:has(.time-range){grid-template-columns:minmax(0,1fr)}}
form label>select,form label>textarea{display:block}

.dispatch-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }
.dispatch-tabs a { padding:.65rem 1rem; border:1px solid currentColor; border-radius:.6rem; text-decoration:none; }
.dispatch-tabs a[aria-current="page"] { font-weight:700; text-decoration:underline; text-underline-offset:.3em; }

/* Platform onboarding authoring controls. */
#onboarding-root button { margin: .25rem .5rem .25rem 0; }
#onboarding-root fieldset { margin: 1rem 0; padding: 1rem; }

/* Owner answers use the page content width, including review and test feedback. */
#owner-root label { display: block; margin: .65rem 0 .35rem; }
#owner-root textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 7rem;
  margin: .5rem 0 1rem;
  padding: .75rem;
  border: 1px solid var(--field);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

#owner-root .voice-suggested-answer { outline: 3px solid #087f73; outline-offset: 4px; scroll-margin-block: 1rem; }

/* Large, responsive selectors for owner setup and Business Knowledge. */
#owner-root select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: .5rem 0 1rem;
  padding: .75rem;
  border: 1px solid var(--field);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
}

/* Knowledge section editor: a stable navigator above the active section. */
#owner-root .knowledge-section-navigation { margin-bottom: 1.75rem; }
#owner-root .knowledge-section-panel { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .5rem; }
#owner-root .knowledge-section-panel h3 { font-size: 1.4rem; margin: 1rem 0; }
#owner-root .knowledge-section-entry { padding: 0 0 1.75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
#owner-root .knowledge-section-entry h4 { font-size: 1.1rem; margin: 1rem 0 .5rem; }
#owner-root .knowledge-section-entry details { margin: 1rem 0; }
#owner-root .knowledge-section-entry summary { cursor: pointer; padding: .65rem 0; min-height: 44px; }
#owner-root .knowledge-section-entry textarea { min-height: 13rem; line-height: 1.6; }
#owner-root button { margin: .35rem .5rem .35rem 0; }
#owner-root pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width:36rem) { #owner-root .knowledge-section-panel button { width:100%; margin-right:0; } }
