/* Shared presentation for the operator and provider consoles. No role or action logic. */
body:is([data-role="operator"], [data-role="provider"]) {
  --console-ink: #16344f;
  --console-muted: #52697c;
  --console-blue: #194e7b;
  --console-accent: #bd3825;
  --console-line: #d8e2eb;
  --console-soft: #f2f6fa;
  --console-surface: #fff;
  background: #f5f7fa;
  color: var(--console-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color-scheme: light;
}

body:is([data-role="operator"], [data-role="provider"]) > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding: 21px max(28px, calc((100vw - 1240px) / 2));
  background: var(--console-surface);
  border-bottom: 1px solid var(--console-line);
}

body:is([data-role="operator"], [data-role="provider"]) .brand {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .09em;
}

body:is([data-role="operator"], [data-role="provider"]) .brand span {
  margin-top: 3px;
  color: var(--console-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
}

body:is([data-role="operator"], [data-role="provider"]) .notice {
  max-width: 540px;
  margin: 0;
  color: var(--console-muted);
  font-size: 13px;
  line-height: 1.7;
}

body:is([data-role="operator"], [data-role="provider"]) > main {
  width: 100%;
  max-width: 1296px;
  margin: 30px auto 64px;
  padding: 0 28px;
}

body:is([data-role="operator"], [data-role="provider"]) :where(section, article, aside, form, div) {
  min-width: 0;
}

body:is([data-role="operator"], [data-role="provider"]) :where(h1, h2, h3, h4, p, a, label, button, summary, td, th) {
  overflow-wrap: anywhere;
}

body:is([data-role="operator"], [data-role="provider"]) :where(h1, h2, h3, h4) {
  color: inherit;
  letter-spacing: .01em;
}

/* Dashboards own their typography and controls, including text on dark heroes. */
body:is([data-role="operator"], [data-role="provider"]) h1:not(:where(.operator-dashboard *, .provider-dashboard *)) {
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.45;
}

body:is([data-role="operator"], [data-role="provider"]) h2:not(:where(.operator-dashboard *, .provider-dashboard *)) {
  font-size: 23px;
  line-height: 1.5;
}

body:is([data-role="operator"], [data-role="provider"]) h3:not(:where(.operator-dashboard *, .provider-dashboard *)) {
  font-size: 19px;
  line-height: 1.5;
}

body:is([data-role="operator"], [data-role="provider"]) :where(p) {
  margin: 12px 0;
}

body:is([data-role="operator"], [data-role="provider"]) :where(a) {
  color: var(--console-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body:is([data-role="operator"], [data-role="provider"]) :where(small) {
  color: var(--console-muted);
  font-size: 13px;
}

body:is([data-role="operator"], [data-role="provider"]) #workspace > .bar {
  align-items: center;
  gap: 14px;
  margin: 0;
}

body:is([data-role="operator"], [data-role="provider"]) #heading {
  margin: 0;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.45;
}

body:is([data-role="operator"], [data-role="provider"]) #identity {
  color: var(--console-muted);
  margin: 5px 0 20px;
  font-size: 14px;
}

body:is([data-role="operator"], [data-role="provider"]) #logout {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--console-line);
  background: var(--console-surface);
  color: var(--console-muted);
  font-size: 14px;
}

body:is([data-role="operator"], [data-role="provider"]) .role-navigation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  margin: 0 0 30px;
  border: 1px solid var(--console-line);
  border-radius: 14px;
  background: var(--console-surface);
}

body[data-role="provider"] .role-navigation {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

body:is([data-role="operator"], [data-role="provider"]) .role-navigation .role-navigation__button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  margin: 0;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--console-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: none;
}

body:is([data-role="operator"], [data-role="provider"]) .role-navigation .role-navigation__button[aria-current="page"] {
  border-color: #dae5ef;
  background: #edf3f8;
  color: var(--console-ink);
  box-shadow: inset 0 -3px var(--console-accent);
}

body:is([data-role="operator"], [data-role="provider"]) .navigation-unread {
  flex: 0 0 auto;
  background: var(--console-accent);
  color: #fff;
}

body:is([data-role="operator"], [data-role="provider"]) :where(button):not(:where(.operator-dashboard *, .provider-dashboard *)) {
  max-width: 100%;
  min-height: 48px;
  margin: 10px 0;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--console-blue);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  white-space: normal;
  transition: background-color 160ms ease, border-color 160ms ease, transform 90ms ease;
}

body:is([data-role="operator"], [data-role="provider"]) :where(button.secondary, button.home-secondary):not(:where(.operator-dashboard *, .provider-dashboard *)) {
  border: 1px solid var(--console-line);
  background: var(--console-surface);
  color: var(--console-blue);
}

body:is([data-role="operator"], [data-role="provider"]) button:disabled:not(:where(.operator-dashboard *, .provider-dashboard *)) {
  opacity: .56;
  cursor: not-allowed;
}

body:is([data-role="operator"], [data-role="provider"]) button:not(:disabled):active:not(:where(.operator-dashboard *, .provider-dashboard *)) {
  transform: translateY(1px);
}

body:is([data-role="operator"], [data-role="provider"]) :where(label) {
  display: block;
  margin: 18px 0 8px;
  color: var(--console-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}

body:is([data-role="operator"], [data-role="provider"]) :where(input, select, textarea) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-top: 7px;
  padding: 12px 13px;
  border: 1px solid #acbecd;
  border-radius: 9px;
  background: var(--console-surface);
  color: var(--console-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  accent-color: var(--console-blue);
}

body:is([data-role="operator"], [data-role="provider"]) :where(input, textarea)::placeholder {
  color: #60768a;
  opacity: 1;
}

body:is([data-role="operator"], [data-role="provider"]) :where(input, select, textarea):disabled {
  background: #edf1f5;
  color: #617587;
}

body:is([data-role="operator"], [data-role="provider"]) :where(input[readonly]) {
  background: #f3f6fa;
}

body:is([data-role="operator"], [data-role="provider"]) :where(textarea) {
  min-height: 120px;
  resize: vertical;
}

body:is([data-role="operator"], [data-role="provider"]) :where(input[type="checkbox"], input[type="radio"]) {
  display: inline-block;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0 8px 0 0;
  padding: 0;
  vertical-align: middle;
}

body:is([data-role="operator"], [data-role="provider"]) label:has(> input:is([type="checkbox"], [type="radio"])) {
  min-height: 48px;
  padding: 12px 0;
  font-weight: 400;
  cursor: pointer;
}

body:is([data-role="operator"], [data-role="provider"]) :where(input[type="file"]) {
  padding: 9px;
  overflow: hidden;
  font-size: 14px;
}

body:is([data-role="operator"], [data-role="provider"]) input[type="file"]::file-selector-button {
  min-height: 38px;
  margin-right: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: #edf3f8;
  color: var(--console-blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

body:is([data-role="operator"], [data-role="provider"]) :where(fieldset) {
  min-width: 0;
  margin: 24px 0;
  padding: 18px;
  border: 1px solid var(--console-line);
  border-radius: 10px;
  background: #f7f9fc;
}

body:is([data-role="operator"], [data-role="provider"]) :where(legend) {
  max-width: 100%;
  padding: 0 8px;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body:is([data-role="operator"], [data-role="provider"]) :where(details) {
  margin: 14px 0;
  padding: 0 15px;
  border: 1px solid var(--console-line);
  border-radius: 9px;
  background: #fff;
}

body:is([data-role="operator"], [data-role="provider"]) :where(details[open]) {
  padding-bottom: 16px;
}

body:is([data-role="operator"], [data-role="provider"]) :where(summary) {
  min-height: 48px;
  padding: 14px 0;
  color: var(--console-blue);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-panel {
  margin: 0 0 32px;
}

body:is([data-role="operator"], [data-role="provider"]) :where(.menu-panel, .stay-panel, .home-panel) > h2:first-child {
  margin-top: 0;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin: 20px 0 28px;
  align-items: start;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--console-line);
  border-radius: 13px;
  background: var(--console-surface);
}

body:is([data-role="operator"], [data-role="provider"]) .menu-card > :first-child:not(.menu-photo) {
  margin-top: 0;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-card h3 {
  margin: 10px 0 12px;
  font-size: 21px;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-card :where(p) {
  font-size: 15px;
  line-height: 1.8;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-card button {
  margin-right: 7px;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-meta {
  color: var(--console-muted);
  font-size: 13px;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-filter {
  gap: 9px;
  margin: 16px 0;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-filter button {
  margin: 0;
  padding: 10px 15px;
  border: 1px solid var(--console-line);
  border-radius: 24px;
  background: #fff;
  color: var(--console-blue);
  font-size: 14px;
}

body:is([data-role="operator"], [data-role="provider"]) :where(.menu-editor, .home-editor) {
  width: 100%;
  max-width: 820px;
  margin: 28px 0;
  padding: 28px;
  border: 1px solid var(--console-line);
  border-radius: 13px;
  background: #fff;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-panel > form:not(.menu-editor) {
  max-width: 650px;
  padding: 22px 24px;
  border: 1px solid var(--console-line);
  border-radius: 13px;
  background: #fff;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-panel > :where(select, label) {
  max-width: 440px;
}

body:is([data-role="operator"], [data-role="provider"]) .menu-panel > section {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--console-line);
}

body:is([data-role="operator"], [data-role="provider"]) .menu-panel > section > .menu-card {
  margin: 15px 0;
}

body:is([data-role="operator"], [data-role="provider"]) :where(.menu-status, #status) {
  color: #962f22;
  font-size: 15px;
  line-height: 1.75;
}

body:is([data-role="operator"], [data-role="provider"]) :where([role="status"]):empty {
  display: none;
}

body:is([data-role="operator"], [data-role="provider"]) .stay-panel {
  padding: 26px;
  margin: 0 0 30px;
  border: 1px solid var(--console-line);
  border-radius: 13px;
  background: var(--console-surface);
}

body:is([data-role="operator"], [data-role="provider"]) .stay-panel > label {
  max-width: 560px;
}

body:is([data-role="operator"], [data-role="provider"]) .stay-panel > form {
  max-width: 720px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--console-line);
}

body:is([data-role="operator"], [data-role="provider"]) .stay-panel .message {
  padding: 22px;
  margin: 22px 0;
  border: 1px solid var(--console-line);
  border-radius: 11px;
  background: #f7f9fc;
  white-space: normal;
}

body:is([data-role="operator"], [data-role="provider"]) .layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

body:is([data-role="operator"], [data-role="provider"]) .layout > aside {
  padding: 20px;
  border: 1px solid var(--console-line);
  border-radius: 13px;
  background: #edf3f8;
}

body:is([data-role="operator"], [data-role="provider"]) .layout > aside h2 {
  margin: 0 0 15px;
  font-size: 18px;
}

body:is([data-role="operator"], [data-role="provider"]) .thread {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 15px;
  border: 1px solid var(--console-line);
  border-radius: 9px;
  background: #fff;
  color: var(--console-ink);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}

body:is([data-role="operator"], [data-role="provider"]) .thread.active {
  border-color: #7699b7;
  background: #fff;
  color: var(--console-blue);
  box-shadow: inset 3px 0 var(--console-accent);
  font-weight: 700;
}

body:is([data-role="operator"], [data-role="provider"]) .conversation {
  padding: 26px;
  border: 1px solid var(--console-line);
  border-radius: 13px;
  background: #fff;
}

body:is([data-role="operator"], [data-role="provider"]) #conversation-title {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--console-line);
  font-size: 22px;
}

body:is([data-role="operator"], [data-role="provider"]) #messages {
  min-height: 180px;
  max-height: 530px;
  padding: 3px 10px 10px 3px;
  overscroll-behavior: contain;
  scrollbar-color: #a4b7c8 transparent;
}

body:is([data-role="operator"], [data-role="provider"]) #messages .message {
  width: fit-content;
  max-width: 88%;
  margin: 15px 0;
  padding: 14px 17px;
  border-radius: 13px 13px 13px 3px;
  background: #f0f4f8;
  color: var(--console-ink);
  font-size: 16px;
  line-height: 1.8;
}

body:is([data-role="operator"], [data-role="provider"]) #messages .message-own {
  margin-left: auto;
  border-radius: 13px 13px 3px 13px;
  background: #e6eff7;
}

body:is([data-role="operator"], [data-role="provider"]) .message small {
  color: var(--console-muted);
  font-size: 12px;
}

body:is([data-role="operator"], [data-role="provider"]) #send-form {
  padding-top: 12px;
  border-top: 1px solid var(--console-line);
}

body:is([data-role="operator"], [data-role="provider"]) #send-form p {
  color: var(--console-muted);
  font-size: 13px;
}

body:is([data-role="operator"], [data-role="provider"]) #send {
  min-width: 130px;
  background: var(--console-accent);
}

body:is([data-role="operator"], [data-role="provider"]) .reservation-panel {
  margin-top: 30px;
  padding-top: 22px;
  border-color: var(--console-line);
}

body:is([data-role="operator"], [data-role="provider"]) .reservation-panel > form {
  padding: 20px;
  border: 1px solid var(--console-line);
  border-radius: 11px;
  background: #f7f9fc;
}

body:is([data-role="operator"], [data-role="provider"]) .reservation-panel .message {
  padding: 22px;
  margin: 22px 0;
  border: 1px solid var(--console-line);
  border-radius: 11px;
  background: #fff;
  white-space: normal;
}

body:is([data-role="operator"], [data-role="provider"]) .reservation-panel .message > form {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--console-line);
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel {
  margin-top: 0;
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel .home-hero {
  border-color: var(--console-line);
  border-radius: 14px;
  background: #f1f5f9;
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel :where(.home-place, .home-help, .home-save-state, .home-preview-label) {
  color: var(--console-muted);
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel .home-publication {
  border-color: var(--console-blue);
  background: #edf3f8;
  color: var(--console-ink);
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel :where(.home-editor, .home-photo-editor, .home-published-preview, .home-draft-preview) {
  border-color: var(--console-line);
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel :where(.home-photo-editor, .home-draft-preview, .home-hero-photo) {
  background: #f5f8fb;
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel .home-hero-photo figcaption {
  background: #f5f8fb;
  color: var(--console-muted);
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel .home-status {
  color: var(--console-blue);
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel .home-status-error {
  border-color: var(--console-accent);
  background: #fff0eb;
  color: #962f22;
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel .home-secondary {
  border-color: var(--console-line);
  background: #fff;
  color: var(--console-blue);
}

body:is([data-role="operator"], [data-role="provider"]) .home-panel .home-check input {
  accent-color: var(--console-blue);
}

body:is([data-role="operator"], [data-role="provider"]) .menu-photo-editor {
  border-color: var(--console-line);
  background: #f7f9fc;
}

body:is([data-role="operator"], [data-role="provider"]) :where(table) {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

body:is([data-role="operator"], [data-role="provider"]) :where(th, td) {
  padding: 13px 12px;
  border-bottom: 1px solid var(--console-line);
  text-align: left;
  vertical-align: top;
}

body:is([data-role="operator"], [data-role="provider"]) :where(th) {
  background: #f0f4f8;
  color: var(--console-muted);
  font-size: 13px;
  font-weight: 650;
}

body:is([data-role="operator"], [data-role="provider"]) :where(img, video, svg) {
  max-width: 100%;
}

body:is([data-role="operator"], [data-role="provider"]) [hidden] {
  display: none !important;
}

body:is([data-role="operator"], [data-role="provider"]) :focus-visible {
  outline: 3px solid #246496;
  outline-offset: 4px;
}

body:is([data-role="operator"], [data-role="provider"]) .role-navigation .role-navigation__button:focus-visible,
body:is([data-role="operator"], [data-role="provider"]) .home-panel :focus-visible {
  outline: 3px solid #246496;
  outline-offset: 4px;
}

/* Optional entry-page class; the authenticated workspace retains its full width. */
body:is([data-role="operator"], [data-role="provider"]).console-entry > main {
  max-width: 820px;
  margin-top: 42px;
}

body:is([data-role="operator"], [data-role="provider"]).console-entry :where(main > form, main > section) {
  margin: 26px 0;
  padding: 26px;
  border: 1px solid var(--console-line);
  border-radius: 13px;
  background: #fff;
}

@media (hover: hover) {
  body:is([data-role="operator"], [data-role="provider"]) :where(button):not(:disabled):hover:not(:where(.operator-dashboard *, .provider-dashboard *)) {
    filter: brightness(.96);
  }

  body:is([data-role="operator"], [data-role="provider"]) .role-navigation .role-navigation__button:hover {
    border-color: var(--console-line);
    background: #f4f7fa;
    color: var(--console-ink);
  }

  body:is([data-role="operator"], [data-role="provider"]) .role-navigation .role-navigation__button[aria-current="page"]:hover {
    background: #e6eef5;
  }
}

@media (max-width: 900px) {
  body:is([data-role="operator"], [data-role="provider"]) .layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .conversation {
    padding: 20px;
  }
}

@media (max-width: 700px) {
  body:is([data-role="operator"], [data-role="provider"]) > header {
    padding: 18px 20px;
    gap: 10px;
  }

  body:is([data-role="operator"], [data-role="provider"]) > main {
    padding: 0 20px;
    margin-top: 22px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .brand {
    font-size: 26px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .notice {
    max-width: none;
    font-size: 12px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .role-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 5px;
    padding: 6px;
    margin-bottom: 24px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .role-navigation .role-navigation__button {
    min-height: 52px;
    padding: 11px 8px;
    font-size: 14px;
  }

  body:is([data-role="operator"], [data-role="provider"]) #workspace > .bar {
    align-items: flex-start;
  }

  body:is([data-role="operator"], [data-role="provider"]) #logout {
    max-width: 120px;
    padding: 10px;
    font-size: 12px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-role="operator"], [data-role="provider"]) #threads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .thread {
    margin: 0;
    min-height: 54px;
    padding: 12px;
    font-size: 14px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .menu-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body:is([data-role="operator"], [data-role="provider"]) :is(.menu-card, .stay-panel, .menu-editor, .home-panel .home-editor) {
    padding: 20px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .reservation-panel :is(.message, form),
  body:is([data-role="operator"], [data-role="provider"]) .stay-panel .message {
    padding: 16px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .reservation-panel .message > form {
    padding-left: 0;
    padding-right: 0;
  }

  body:is([data-role="operator"], [data-role="provider"]) .home-panel .home-photo-editor,
  body:is([data-role="operator"], [data-role="provider"]) .menu-photo-editor {
    padding: 12px;
  }

  body:is([data-role="operator"], [data-role="provider"]) :where(th, td) {
    padding: 10px 7px;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  body:is([data-role="operator"], [data-role="provider"]) > header {
    padding: 16px;
  }

  body:is([data-role="operator"], [data-role="provider"]) > main {
    padding: 0 14px;
  }

  body:is([data-role="operator"], [data-role="provider"]) #heading {
    font-size: 24px;
  }

  body:is([data-role="operator"], [data-role="provider"]) :is(.menu-card, .stay-panel, .menu-editor, .conversation, .home-panel .home-editor) {
    padding: 16px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .menu-panel > form:not(.menu-editor) {
    padding: 16px;
  }

  body:is([data-role="operator"], [data-role="provider"]) #messages .message {
    max-width: 95%;
    padding: 12px 14px;
  }

  body:is([data-role="operator"], [data-role="provider"]) .menu-card button,
  body:is([data-role="operator"], [data-role="provider"]) .stay-panel button {
    margin-right: 0;
  }

  body:is([data-role="operator"], [data-role="provider"]).console-entry :where(main > form, main > section) {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is([data-role="operator"], [data-role="provider"]) :where(*) {
    scroll-behavior: auto;
  }

  body:is([data-role="operator"], [data-role="provider"]) :where(button):not(:where(.operator-dashboard *, .provider-dashboard *)) {
    transition: none;
  }

  body:is([data-role="operator"], [data-role="provider"]) button:not(:disabled):active:not(:where(.operator-dashboard *, .provider-dashboard *)) {
    transform: none;
  }
}

@media (forced-colors: active) {
  body:is([data-role="operator"], [data-role="provider"]) .role-navigation .role-navigation__button[aria-current="page"],
  body:is([data-role="operator"], [data-role="provider"]) .thread.active {
    border: 2px solid Highlight;
    text-decoration: underline;
  }
}

/* Refero-informed Yuntaku presentation, 2026-09-16.
   Shared last stylesheet: console-shell.css. Business behavior is unchanged.
   See DESIGN.md for sources and adaptation rationale. */
:root {
  
  
  
  
  
  
  
  
  --yt-font: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
}
body, body.console-entry, body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) {
   
   
   
  
   
  font-family: var(--yt-font); line-height: 1.7;
}
body > header, body.console-entry > header,
body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) > header {
   
  
  padding: 20px max(24px, calc((100vw - 1240px) / 2));
}
body .brand, body.console-entry .brand,
body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) .brand {
   font-size: 28px; letter-spacing: .04em; font-weight: 700;
}
body .brand span, body .notice, body .entry-role, body .entry-note,
body.console-entry .entry-lead, body.console-entry .entry-features span {
  
}
body a {  text-underline-offset: 4px; }
body :is(input, textarea, select) {  border-radius: 8px; }
body :is(button, input, select, summary, .button) { min-height: 44px; }
body :is(button, .button) { border-radius: 8px; }
body :is(input, textarea, select, button, a, summary):focus-visible {
   outline-offset: 4px;
}
body [hidden] { display: none !important; }

/* Entry: calm workspace, an unmistakable sign-in action. */
body.console-entry > main { max-width: 1240px; gap: 64px; margin-top: 56px; }
body.console-entry .entry-intro { padding: 20px 0; }
body.console-entry h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.6; letter-spacing: -.025em; }
body.console-entry .eyebrow {  letter-spacing: .02em; }
body.console-entry .entry-features { margin-top: 32px; }
body.console-entry .entry-features li {  padding: 20px 0; }
body.console-entry .entry-card {   border-radius: 12px; padding: 32px;  }
body.console-entry :is(button, .entry-link-button) {  border-radius: 8px; }
body.console-entry .password-toggle {    }
body.console-entry button:disabled {   }
body.console-entry a:not(.entry-link-button) {  }
body.console-entry details {  }
body.console-entry .entry-state {  }

/* Shared navigation has a stable active shape, not color alone. */
body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) .role-navigation {
  gap: 6px; padding: 6px; 
  border-radius: 12px;  margin-bottom: 28px;
}
body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) .role-navigation .role-navigation__button {
    
  border-radius: 8px;  padding: 10px 16px; margin: 0;
  min-height: 48px; font-size: 15px; line-height: 1.5;
}
body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) .role-navigation .role-navigation__button[aria-current="page"] {
    font-weight: 700;
  
}
body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) .role-navigation .role-navigation__button:hover,
body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) .role-navigation .role-navigation__button[aria-current="page"]:hover {
   
}
body:is([data-role="operator"], [data-role="provider"]) :is(.conversation, .layout > aside) {
   border-radius: 12px; 
}

/* Operator and provider: readable work surfaces and restrained status color. */
body .operator-dashboard {
    
    
   font-family: var(--yt-font);
}
body .provider-dashboard {
    
    font-family: var(--yt-font);
}
body .operator-dashboard .od-welcome, body .provider-dashboard .pd-hero {
    
  border-radius: 12px; padding: 32px;
}
body .operator-dashboard .od-welcome :is(.od-eyebrow, p:last-child),
body .provider-dashboard .pd-hero :is(.pd-eyebrow, .pd-hero-description) {  }
body .operator-dashboard :is(.od-metric, .od-publication),
body .provider-dashboard :is(.pd-metric, .pd-menu-section, .pd-conversation-row) {
    border-radius: 12px; 
}
body .operator-dashboard .od-metrics { gap: 16px; margin: 24px 0 32px; }
body .operator-dashboard .od-value, body .provider-dashboard .pd-metric-value {
   font-weight: 600; font-variant-numeric: tabular-nums;
}
body .operator-dashboard .od-work { padding: 24px;   border-radius: 12px; }
body .operator-dashboard .od-side, body .provider-dashboard .pd-help {  border-radius: 12px; }
body .operator-dashboard .od-count-attention {   }
body .operator-dashboard .od-primary, body .provider-dashboard .pd-primary {
    padding: 13px 20px; border-radius: 8px;
}
body .operator-dashboard .od-primary:hover, body .provider-dashboard .pd-primary:hover {  }

/* Guest: an island guide, with images and actual content doing the work. */
body .guest-home {
    
    
    font-family: var(--yt-font);
}
body[data-role="guest"] :is(.gh-category, .gh-menu-card, .gh-booking, .menu-card, .conversation, .thread) {
    border-radius: 12px;
}
body[data-role="guest"] .gh-hero { border-radius: 16px; }
body[data-role="guest"] .gh-hero:not(:has(.gh-hero-photo img:not([hidden]))) {    }
body[data-role="guest"] .gh-hero:not(:has(.gh-hero-photo img:not([hidden])))::after { }
body[data-role="guest"] .gh-menu-card { padding: 20px;  }
body[data-role="guest"] .gh-rail {  border-radius: 12px; }
body[data-role="guest"] .gh-category { padding: 16px; min-height: 76px; }
body[data-role="guest"] .gh-category:hover {   }
body[data-role="guest"] :is(.gh-primary, #send, #new-thread button) {   border-radius: 8px; }
body[data-role="guest"] .gh-primary:hover {  }
body[data-role="guest"] .thread.active {    }
body[data-role="guest"] .message {   }
body[data-role="guest"] .message-own {  }
body[data-role="guest"] .gh-empty { padding: 24px;  border-radius: 12px;  }

/* Portal/tablet use portal.css and have no role attribute. */
body:not([data-role]):not(.console-entry) > main {  }
body:not([data-role]):not(.console-entry) :is(button, .button) {  }
body:not([data-role]):not(.console-entry) button.secondary {   }
body:not([data-role]):not(.console-entry) nav button {    }
body:not([data-role]):not(.console-entry) :is(article, .card) {  border-radius: 12px;  }
body:not([data-role]):not(.console-entry) #status {  }
body:not([data-role]):not(.console-entry) #login {    border-radius: 12px; padding: 32px; max-width: 650px; margin: 40px auto; }
@media(max-width:800px) {
  body.console-entry > main { grid-template-columns: minmax(0,1fr); gap: 24px; margin-top: 24px; max-width: 660px; }
  body.console-entry .entry-card { padding: 24px; }
  body.console-entry .entry-features { margin: 20px 0; }
  body.console-entry .entry-features li { padding: 14px 0; }
  body .operator-dashboard .od-welcome, body .provider-dashboard .pd-hero { padding: 24px; }
}
@media(max-width:480px) {
  body > header, body.console-entry > header,
  body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) > header { padding: 16px; }
  body.console-entry > main { padding: 0 16px; }
  body.console-entry .entry-card { padding: 20px; }
  body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) .role-navigation .role-navigation__button { padding: 10px; font-size: 14px; }
  body .operator-dashboard .od-work { padding: 18px; }
  body[data-role="guest"] .gh-category { padding: 12px; }
  body:not([data-role]):not(.console-entry) #login { padding: 24px; }
}
@media(min-width:1000px) {
  body[data-role="operator"] .role-navigation { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
body input:is([type="checkbox"], [type="radio"]) { min-height: auto; }
@media(forced-colors:active) {
  body:is([data-role="operator"], [data-role="provider"], [data-role="guest"]) .role-navigation .role-navigation__button[aria-current="page"] {  text-decoration: underline; }
}
@media(prefers-reduced-motion:reduce) {
  body :is(button, .button, .entry-link-button) { transition: none; }
  body :is(button, .button, .entry-link-button):active { transform: none; }
}