/* Existing r4 layout and controls, using Daniel's meeting.css palette.
   Red remains reserved for faults, failed checks and destructive actions. */
:root {
  --alfa-canvas: #f5f5ef;
  --alfa-soft: #e8ece3;
  --alfa-paper: #ffffff;
  --alfa-ink: #213b35;
  --alfa-strong: #16312b;
  --alfa-muted: #59695f;
  --alfa-line: #d5ddcf;
  --alfa-forest: #334b40;
  --alfa-dark: #273d33;
  --alfa-yellow: #f5d47b;
  --alfa-warning: #fff0c5;
  color: var(--alfa-ink);
  background: var(--alfa-canvas);
}
body, .service-workspace { background: var(--alfa-canvas); color: var(--alfa-ink); }
:is(.service-work,.service-control,.service-customer,.sip,.sih,.scip,.sao) {
  --red: var(--alfa-forest); --alfa: var(--alfa-forest);
  --ink: var(--alfa-ink); --muted: var(--alfa-muted);
  --line: var(--alfa-line); --paper: var(--alfa-paper);
  --warm: var(--alfa-paper); --yellow: var(--alfa-warning);
  color: var(--alfa-ink);
}
.service-private-media {
  --pm-paper: var(--alfa-paper); --pm-ink: var(--alfa-ink);
  --pm-muted: var(--alfa-muted); --pm-line: var(--alfa-line);
  --pm-red: var(--alfa-forest); background: var(--alfa-canvas);
}
.service-auth { background: var(--alfa-canvas); color: var(--alfa-ink); }
.service-auth-header a, .sih-eyebrow, .cu-brand, .cu-card .cu-count,
.cu-side dd, .cu-label, .cu-choice, .cu-fact p { color: var(--alfa-ink); }
.service-auth input, .service-auth button, .service-workspace button,
.service-customer button, .service-private-media button,
.service-work input:not([type=checkbox]), .service-work select,
.service-work textarea, .service-customer input:not([type=checkbox]),
.service-customer select, .service-customer textarea,
.sih button, .sip button, .sip input, .sip select, .sip textarea,
.scip button, .scip select, .sao button, .sao input, .sao select {
  background: var(--alfa-paper); color: var(--alfa-ink); border-color: #a4b29f;
}
.service-auth button[type=submit], .service-work .sw-primary,
.service-control .sc-primary, .service-customer .cu-primary,
.sih button.sih-primary, .sip .sip-primary, .scip .scip-primary,
.pm-download, .service-private-media .pm-card button {
  background: var(--alfa-forest); color: #fff; border-color: var(--alfa-forest);
}
.service-auth button[type=submit]:hover:not(:disabled),
.sih button.sih-primary:hover:not(:disabled), .sip .sip-primary:hover:not(:disabled) {
  background: var(--alfa-dark); border-color: var(--alfa-dark);
}
.service-workspace button[aria-pressed=true], .sih-nav button[aria-current=page],
.sip .sip-selected, .sao button[aria-pressed=true],
.service-customer .cu-filter button[aria-pressed=true],
.service-work .sw-intents button[aria-pressed=true],
.service-control .sc-tabs button[aria-pressed=true] {
  background: var(--alfa-yellow); border-color: #bd9230;
  color: var(--alfa-strong); box-shadow: none;
}
.service-auth :focus-visible, .service-workspace button:focus-visible,
.service-work :focus-visible, .service-control :focus-visible,
.service-customer :focus-visible, .sip :focus-visible,
.sih :focus-visible, .scip :focus-visible, .sao :focus-visible {
  outline: 3px solid var(--alfa-forest); outline-offset: 3px;
}
.ws-header { background: var(--alfa-soft); border-color: var(--alfa-line); }
.ws-header p, .ws-title p, .ws-card p, .sih-meta, .sih-actors,
.sih-assignee, .sih-ticket, .sih-help, .sw-eyebrow, .sw-label {
  color: var(--alfa-muted);
}
.ws-demo { background: #ecefe6; color: var(--alfa-ink); border-color: var(--alfa-line); }
.ws-card, .ws-dialog section, .ws-start, .sw-header, .sc-header, .cu-header,
.sih-row, .sao-item, .sipl-summary {
  background: var(--alfa-paper); color: var(--alfa-ink); border-color: var(--alfa-line);
}
.sao, .scip, .sip { background: var(--alfa-paper); }
.sih-scope, .sip-draft, .sip-footer, .scip-status, .sao-badge,
.cu-side, .cu-source, .cu-metrics>div, .sw-metrics>div, .sw-intents,
.sc-tabs, .pm-badge { background: var(--alfa-soft); color: var(--alfa-ink); }
.sih-notice, .sih-warning, .sih-empty, .sih-loading,
.sao-notice, .sao-warning, .sip-notice, .sip-warning,
.ws-notice, .ws-warning, .scip-notice, .scip-warning {
  background: var(--alfa-warning); color: #503e17; border-color: #d5bb73;
}
.ws-notice:empty { display: none; }
.sw-task input, .cu-choice input, .sip-check input { accent-color: var(--alfa-forest); }
.sip .sip-unit.ok { background: #edf6ec; border-color: #adcaa7; color: #315b2d; }
.sip .sip-unit.issue { background: #a51c30; border-color: #a51c30; color: #fff; }
.sip .sip-unit.blocked { background: var(--alfa-warning); border-color: #b19345; color: #594011; }
.sip .sip-unit.unchecked { background: #fff; color: var(--alfa-ink); border-color: #879780; }
.sip .sip-selected { box-shadow: inset 0 0 0 1px #bd9230; }
.sao .sao-queue strong { color: var(--alfa-forest); }
.sao-item button { color: var(--alfa-forest); }
.service-workspace .ws-dialog [data-choice=discard] { background: #a72122; border-color: #a72122; color: #fff; }

/* UX revision 17.10.2026. One visual layer over the existing application.
   Keep the actual state, alerts and all controls; only hierarchy and spacing change. */
:root {
  --alfa-canvas: #f4f5ef;
  --alfa-soft: #e8ede3;
  --alfa-line: #dce3d7;
  --alfa-muted: #58695f;
  --alfa-shadow: 0 4px 18px rgb(34 57 44 / 4%);
  --alfa-radius: 16px;
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}
body { -webkit-font-smoothing: antialiased; }
:is(.service-workspace,.service-auth,.sip,.sih,.sao,.scip) { font-family: inherit; }
.service-workspace { line-height: 1.6; }
.service-workspace :is(h1,h2,h3) { color: var(--alfa-strong); text-wrap: balance; }
.service-workspace :is(h1,h2,h3,p) { overflow-wrap: anywhere; }
.service-workspace :is(button,a,input,select,textarea,summary) { touch-action: manipulation; }
.service-workspace button { font-weight: 600; transition: background-color .13s, border-color .13s; }
.service-workspace button:not(:disabled):hover { border-color: #758c7c; }
.service-workspace button:disabled { opacity: .55; }
.service-workspace :is(button,input:not([type=checkbox]),select,textarea) { min-height: 46px; }
.service-workspace input:not([type=checkbox]), .service-workspace select,
.service-workspace textarea { border-radius: 9px; border-color: #a7b5a7; }
.service-workspace input[type=checkbox] { accent-color: var(--alfa-forest); }
.ws-header { min-height: 96px; padding: 22px max(28px,calc((100vw - 1232px)/2)); background: #fdfefa; }
.ws-header p { font-size: 10px; font-weight: 700; letter-spacing: .15em; margin-bottom: 4px; }
.ws-header strong { font-size: 15px; font-weight: 600; }
.ws-header-right { gap: 24px; }
.ws-header img { width: 166px; max-height: 62px; }
.ws-header-right button { font-size: 13px; padding: 9px 16px; }
.ws-main { max-width: 1288px; padding: 26px 28px 80px; }
.ws-navigation { margin: 0 0 32px; padding-bottom: 22px; border-bottom: 1px solid var(--alfa-line); }
.ws-sections { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-sections button { border-color: transparent; background: transparent; padding: 12px 20px; }
.ws-sections button[aria-pressed=true] { background: var(--alfa-forest); color: white; border-color: var(--alfa-forest); }
/* The workspace header already carries the brand. Embedded panels retain their
   headings but do not repeat the decorative logo. Recovery views stay intact. */
.service-workspace :is(.sih-header,.sao-header,.sip-header) > :is(.sih-logo,.sao-logo,.sip-logo) { display: none; }
.service-workspace :is(.sih,.sao,.sip) { max-width: none; padding: 0; margin: 0; background: transparent; }
.service-workspace :is(.sih-header,.sao-header) { padding: 0 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--alfa-line); }
.service-workspace :is(.sih,.sao) h1, .ws-title h1 { font-size: clamp(28px,3vw,36px); font-weight: 650; letter-spacing: -1px; line-height: 1.2; }
.service-workspace :is(.sih-eyebrow,.sao-eyebrow,.sip-eyebrow) { font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.service-workspace :is(.sih,.sao) h2 { font-size: 23px; font-weight: 650; letter-spacing: -.5px; }
.sih-nav { gap: 8px; margin-bottom: 26px; }
.sih-nav button { font-size: 14px; }
.sih-nav button[aria-current=page] { background: var(--alfa-soft); border-color: #a8b59f; color: var(--alfa-strong); }
.sih-nav button[data-hub-action=reload] { margin-left: auto; }
:is(.sih-list,.ws-job-grid,.sao-rows) { gap: 20px; align-items: stretch; }
:is(.sih-row,.ws-card,.sao-item,.sw-card,.sc-card,.cu-card,.sip-editor,.sip-readonly) {
  border: 1px solid var(--alfa-line); border-radius: var(--alfa-radius);
  background: var(--alfa-paper); box-shadow: var(--alfa-shadow);
}
:is(.sih-row,.ws-card,.sao-item) { padding: 24px; }
.sih-row { display: flex; flex-direction: column; align-items: stretch; }
.sih-row h2 { margin: 4px 0 6px; }
.sih-row .sih-date { font-size: 16px; margin: 14px 0 8px; }
.sih-row :is(.sih-actors,.sih-assignee,.sih-ticket) { font-size: 13px; line-height: 1.65; }
.sih-row .sih-meta { margin: 4px 0 12px; gap: 6px 14px; }
.sih-row > .sih-primary { margin-top: auto; padding-top: 12px; padding-bottom: 12px; }
.sih-row > .sih-primary:not(:first-child) { margin-top: 20px; }
.sih-row > button + button { margin-top: 8px; }
.sih-row .sih-eyebrow { color: #55725e; }
.sih-scope { padding: 22px 24px; margin-bottom: 24px; border: 1px solid var(--alfa-line); }
.sih-help { line-height: 1.7; }
.sao > time { display: block; font-size: 12px; }
.sao-queues { gap: 12px; margin: 20px 0 16px; }
.sao .sao-queue { padding: 20px 18px; border: 1px solid var(--alfa-line); background: white; border-radius: 13px; gap: 7px; box-shadow: var(--alfa-shadow); }
.sao .sao-queue strong { font-size: 32px; font-weight: 650; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.sao .sao-queue > span { font-size: 14px; font-weight: 650; }
.sao .sao-queue small { font-size: 12px; line-height: 1.6; }
.sao .sao-queue[aria-pressed=true] { background: #fff5d4; border-color: #c2a352; box-shadow: inset 0 0 0 1px #c2a352; }
.sao > .sao-help { font-size: 12px; line-height: 1.7; }
.sao > form.sao-tools { margin-top: 24px; padding: 20px; background: var(--alfa-soft); border-radius: 13px; gap: 14px; }
.sao-tools { gap: 10px; margin: 20px 0; }
.sao-field { font-size: 13px; }
.sao-results { margin-top: 32px; }
.sao-results > .sao-muted { margin-bottom: 20px; }
.sao-item { display: flex; flex-direction: column; }
.sao-item h3 { font-size: 20px; letter-spacing: -.4px; margin: 3px 0; }
.sao-item p { font-size: 14px; margin: 5px 0; }
.sao-item .sao-muted { font-size: 13px; color: var(--alfa-muted); }
.sao-item .sao-eyebrow { font-size: 10px; margin-bottom: 8px; color: #55725e; }
.sao-item .sao-title { margin-top: 16px; font-weight: 650; }
.sao-item .sao-help { margin: 8px 0; font-size: 12px; line-height: 1.7; }
.sao-tags { margin: 12px 0; }
.sao-badge { font-size: 12px; border-radius: 6px; padding: 5px 9px; }
.sao-item button { margin-top: auto; }
.sao-item button[data-action=open-item] { margin-top: 18px; background: var(--alfa-soft); color: var(--alfa-strong); border-color: #b7c5b3; }
.sao-integrations { margin-top: 36px; padding: 24px; background: #e9eee4; border: 1px solid var(--alfa-line); border-radius: var(--alfa-radius); }
.sao-integrations h2 { margin-top: 0; }
.sao-integrations p { font-size: 13px; color: var(--alfa-muted); }
.sip-header { padding-bottom: 24px; }
.sip-meta { font-size: 14px; color: var(--alfa-muted); gap: 10px 20px; line-height: 1.6; }
.sip-stats { gap: 10px; margin: 24px 0; }
.sip-stat { border-radius: 8px; padding: 9px 13px; font-size: 14px; font-weight: 600; }
.sip-tools { gap: 12px; padding: 20px; border: 1px solid var(--alfa-line); border-radius: 13px; background: #e9eee4; margin-bottom: 24px; }
.sip-tools .sip-field { font-size: 14px; }
.sip-field > span { font-size: 13px; font-weight: 650; }
.sip-area-header { margin: 28px 0 12px; }
.sip-grid { gap: 10px; margin: 20px 0 28px; }
.sip .sip-unit { min-height: 64px; font-size: 18px; font-weight: 650; border-radius: 10px; }
.sip .sip-unit.unchecked { background: #fff; border-style: dashed; border-color: #8b9c89; }
.sip .sip-unit.ok { background: #e8f2e7; border-color: #9cb99a; color: #2f562c; }
.sip-editor { padding: 26px; margin: 24px 0; }
.sip-form { gap: 20px; }
.sip :is(.sip-faults,.sip-actions) { padding: 18px; border-radius: 11px; gap: 10px 18px; }
.sip .sip-check { min-height: 48px; font-size: 14px; gap: 12px; cursor: pointer; }
.sip-check input { margin: 0; }
.sip-form-actions { padding-top: 20px; margin-top: 4px; border-top: 1px solid var(--alfa-line); }
.sip-form-actions .sip-primary { margin-left: auto; min-width: 170px; }
.sip-footer { margin-top: 28px; padding: 20px; border: 1px solid var(--alfa-line); border-radius: 13px; gap: 12px; background: #e8ede3; }
.sip-footer p { width: 100%; }
.sip :is(.sip-notice,.sip-warning,.sip-draft) { margin: 18px 0; line-height: 1.7; }
.sip .sip-help { font-size: 13px; line-height: 1.7; }
.sip-area-name { padding: 12px 15px; border-radius: 8px; background: var(--alfa-soft); font-weight: 650; }
.ws-title { margin: 26px 0 28px; }
.ws-title p:first-child { font-size: 12px; font-weight: 650; }
.ws-card + :is(.ws-card,.ws-job-grid), .ws-job-grid + .ws-card { margin-top: 24px; }
.ws-visit-row { padding: 22px 0; }
.sw-report { margin-top: 24px; }
.sw-task.chosen { background: #edf3e8; }
:is(.sc-summary > div,.sw-metrics > div,.cu-metrics > div) { border: 1px solid var(--alfa-line); background: white; }
:is(.sw-status,.sc-badge,.cu-badge) { font-size: 12px; }
:is(.sw-history p,.sw-history strong) { color: var(--alfa-ink); }
:is(.sw-history small,.sw-report p,.sw-report-summary small,.sw-help,.sw-date) { color: var(--alfa-muted); }
:is(.sc-plans,.sc-requirement,.cu-source,.cu-reviewed,.cu-safe-summary) { background: var(--alfa-soft); color: var(--alfa-ink); }
@media (max-width: 900px) {
  .ws-main { padding: 24px 22px 64px; }
  .sao-queues { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .ws-header { padding: 18px 18px; min-height: 88px; gap: 12px; }
  .ws-header-right { gap: 12px; }
  .ws-header img { width: 128px; }
  .ws-main { padding: 22px 16px 60px; }
  .ws-navigation { padding-bottom: 18px; margin-bottom: 24px; }
  .ws-sections { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ws-sections button { padding: 12px 10px; font-size: 13px; }
  .ws-sections button:first-child:last-child { grid-column: 1/-1; }
  .service-workspace :is(.sih,.sao) h1, .ws-title h1 { font-size: 28px; letter-spacing: -.7px; }
  .service-workspace :is(.sih-header,.sao-header) { margin-bottom: 20px; padding-bottom: 20px; }
  :is(.sih-row,.sao-item,.ws-card) { padding: 21px 18px; border-radius: 14px; }
  .sao-queues { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .sao .sao-queue { padding: 17px 14px; }
  .sao .sao-queue strong { font-size: 29px; }
  .sao > form.sao-tools { padding: 16px; }
  .sao-tools button { flex: 1 1 140px; }
  .sao-results { margin-top: 28px; }
  .sao-integrations { padding: 20px 18px; }
  .sih-nav button { font-size: 13px; padding: 11px 12px; }
  .sih-nav button[data-hub-action=reload] { margin-left: 0; }
  .sip-header { display: block; }
  .sip h1 { font-size: 26px; }
  .sip-tools { padding: 16px; }
  .sip-editor { padding: 20px 16px; }
  .sip-form { gap: 18px; }
  .sip-form-actions .sip-primary { margin-left: 0; }
  .sip-footer { padding: 16px; }
  .sip-footer button { flex: 1 1 100%; }
  .sip :is(input:not([type=checkbox]),select,textarea) { font-size: 16px; }
  .sip .sip-unit { min-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-workspace button { transition: none; }
}

/* Actual desktop review: bring work queues and task rows closer to the fold. */
.ws-header { min-height: 78px; padding-top: 14px; padding-bottom: 14px; }
.ws-main { padding-top: 20px; }
.ws-navigation { padding-bottom: 14px; margin-bottom: 22px; }
.service-workspace :is(.sih-header,.sao-header) { padding-bottom: 18px; margin-bottom: 18px; }
.service-workspace .sao-header h1 { font-size: 32px; margin: 2px 0; }
.service-workspace .sao-header p { margin: 3px 0; }
.sao .sao-queues { margin-top: 16px; gap: 12px; }
.sao .sao-queue { padding: 16px; gap: 5px; }
.sao .sao-queue strong { font-size: 29px; margin-bottom: 2px; }
.sao .sao-queue small { font-size: 12px; line-height: 1.5; }
.sao > form.sao-tools { margin-top: 20px; padding: 16px 18px; }
.sao-results { margin-top: 24px; }
.sao .sao-results > h2 { margin-bottom: 6px; }

/* Completion is one explicit choice. Native radios retain their native semantics. */
.sip .sip-completion-choices { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; min-width: 0; }
.sip .sip-completion-choices > legend { padding: 0; margin-bottom: 14px; font-size: 15px; }
.sip .sip-completion-choice { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid #abb9a8; border-radius: 11px; background: #fff; cursor: pointer; min-height: 112px; }
.sip .sip-completion-choice > input[type=radio] { flex: 0 0 22px; width: 22px; height: 22px; min-height: 22px; max-height: 22px; padding: 0; margin: 2px 0 0; accent-color: var(--alfa-forest); }
.sip .sip-completion-choice > span { min-width: 0; }
.sip .sip-completion-choice strong { display: block; font-size: 15px; line-height: 1.45; color: var(--alfa-strong); }
.sip .sip-completion-choice .sip-help { display: block; margin-top: 7px; font-size: 13px; line-height: 1.6; font-weight: 400; }
.sip .sip-completion-choice:has(input:checked) { border-color: var(--alfa-forest); background: #edf3e8; box-shadow: inset 0 0 0 1px var(--alfa-forest); }
.sip .sip-completion-choice:focus-within { outline: 3px solid var(--alfa-forest); outline-offset: 3px; }
.sip .sip-completion-preview { grid-column: 1/-1; padding: 15px 18px; margin: 4px 0; background: var(--alfa-soft); border-left: 3px solid var(--alfa-forest); border-radius: 8px; line-height: 1.65; font-size: 14px; }
@media(max-width: 700px) {
  .ws-header { min-height: 76px; padding-top: 13px; padding-bottom: 13px; }
  .ws-main { padding-top: 18px; }
  .ws-navigation { padding-bottom: 12px; margin-bottom: 20px; }
  .service-workspace .sao-header h1 { font-size: 28px; }
  .sao .sao-queue { padding: 15px 13px; }
  .sip .sip-completion-choices { grid-template-columns: 1fr; gap: 10px; }
  .sip .sip-completion-choice { min-height: 0; padding: 16px; }
}

/* Actual multi-reason editor review: keep instructions above the choices. */
.sip .sip-blocked-reasons > .sip-help { grid-column: 1/-1; margin: 0 0 4px; }
.sip-form > .sip-field:has(textarea) { grid-column: 1/-1; }

/* Final inspection review: the hub must not inflate the nested work header. */
.service-workspace .sih .sip h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.65px; margin: 2px 0 5px; }
.service-workspace .sip .sip-header { padding-bottom: 13px; gap: 12px; }
.service-workspace .sip .sip-header p { margin: 4px 0; font-size: 14px; }
.service-workspace .sip .sip-header .sip-eyebrow { font-size: 10px; margin: 0 0 5px; }
.service-workspace .sip .sip-ticket { font-size: 15px; }
.service-workspace .sip .sip-meta { padding-top: 12px; gap: 6px 16px; font-size: 13px; }
.service-workspace .sip .sip-meta + .sip-help { margin: 5px 0; font-size: 12px; }
.service-workspace .sip .sip-stats { margin: 15px 0; gap: 8px; }
.service-workspace .sip .sip-stat { padding: 7px 11px; font-size: 13px; }
.service-workspace .sip > .sip-tools { padding: 13px 16px; margin-bottom: 17px; }
.service-workspace .sip .sip-area-header { margin: 17px 0 0; }
.service-workspace .sip .sip-area-header h2 { margin: 0 0 4px; font-size: 21px; }
.service-workspace .sip .sip-area-header .sip-help { margin: 0; font-size: 13px; }
.service-workspace .sip .sip-area-header .sip-tools { padding: 0; margin: 12px 0 0; border: 0; background: transparent; }
.service-workspace .sip .sip-grid { margin-top: 16px; }
.sih:has(> .sih-panel-host) > .sih-nav { margin-bottom: 17px; }
@media(min-width: 1000px) {
  .service-workspace .sip .sip-area-header { display: grid; grid-template-columns: minmax(190px,1fr) auto; column-gap: 20px; align-items: center; }
  .service-workspace .sip .sip-area-header h2 { grid-column: 1; grid-row: 1; }
  .service-workspace .sip .sip-area-header > .sip-help { grid-column: 1; grid-row: 2; }
  .service-workspace .sip .sip-area-header .sip-tools { grid-column: 2; grid-row: 1/3; margin: 0; justify-content: flex-end; gap: 8px; }
  .service-workspace .sip .sip-area-header .sip-tools button { font-size: 13px; padding-left: 12px; padding-right: 12px; }
}
@media(max-width: 700px) {
  .service-workspace .sih .sip h1 { font-size: 24px; }
  .service-workspace .sip .sip-meta { gap: 7px 13px; }
  .service-workspace .sip .sip-meta + .sip-help { font-size: 13px; line-height: 1.6; }
  .service-workspace .sip .sip-area-header .sip-tools { gap: 8px; }
  .service-workspace .sip .sip-area-header .sip-tools button { flex: 1 1 140px; font-size: 13px; }
}