/* Use the public Hub palette underneath the workspace's component styles. */
@import url("/assets/website-fonts.css");
@import url("/assets/health-hub.css") layer(public-hub);

:root[lang][data-theme="light"] { --white: white; }
:root[lang][data-theme] {
  --ui: "DM Sans", "Segoe UI", sans-serif;
  --display: Fraunces, Georgia, serif;
  --control-line: color-mix(in srgb, var(--hub-ink) 60%, var(--hub-surface));
  --border: var(--line);
  --green: var(--accent);
  --mint: var(--tint);
  --portal-bg: var(--paper);
  --portal-surface: var(--white);
  --portal-sidebar: var(--wash);
  --portal-inset: var(--wash);
  --portal-accent: var(--accent);
  --portal-on-accent: var(--inverse);
  --appearance-surface: var(--white);
  --appearance-inset: var(--wash);
  --appearance-selected: var(--tint);
  --appearance-border: var(--control-line);
  --appearance-text: var(--ink);
  --appearance-muted: var(--muted);
  color: var(--ink);
  background: var(--paper);
  font-family: var(--ui);
}
:root[lang] :is(body,.appearance-control) { font-family: var(--ui); }
:root[lang] :is(h1,h2,.brand,.overview-metrics strong) { font-family: var(--display); font-weight: 550; letter-spacing: -.035em; }
:root[lang] .brand { gap: 8px; font-weight: 600; letter-spacing: -.05em; }
:root[lang] :is(.sidebar,.auth-brand) .brand > span:last-child { margin-left: -8px; color: inherit; }
:root[lang] .brand-mark { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--hub-ink); color: var(--hub-paper); }
:root[lang] .brand-mark svg { width: 22px; height: 22px; }
:root[lang][data-theme] .auth-brand {
  isolation: isolate; background: var(--wash); color: var(--ink); border-right: 1px solid var(--line);
  justify-content: flex-start; padding: clamp(26px,4vw,64px); gap: clamp(20px,3vh,34px);
}
.auth-brand > .brand { order: 0; }
.auth-brand > :is(div:not(.brand),h1) { order: 1; }
.auth-brand::after {
  content: ""; order: 2; flex: 1 1 14rem; min-height: 12rem; max-height: 27rem;
  background: url("/assets/hub-river.webp") 58% 52% / cover; border-radius: 16px;
}
.auth-brand > .auth-foot { order: 3; }
:root[lang] .auth-brand h1 { font-size: calc((clamp(40px,4vw,64px)) * var(--text-scale, 1)); line-height: 1.04; margin: .25em 0 .2em; }
:root[lang][data-theme] .auth-brand p { margin-block: 0; color: var(--hub-muted); }
:root[lang] .auth-main { background: var(--hub-paper); }
:root[lang] .auth-panel { max-width: 30rem; padding: clamp(20px,3vw,34px); border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
:root[lang] .auth-toolbar { flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
:root[lang] .auth-panel h2 { font-size: calc((clamp(31px,3vw,43px)) * var(--text-scale, 1)); line-height: 1.08; }
:root[lang][data-theme] .auth-safety { padding: 14px; border-radius: 10px; background: var(--wash); }
:root[lang][data-theme] .sidebar { color: var(--ink); background: var(--portal-sidebar); border-right: 1px solid var(--line); }
:root[lang][data-theme] .sidebar nav button:not(.active), :root[lang][data-theme] .sidebar-bottom { color: var(--ink); }
:root[lang][data-theme] .sidebar nav button.active { color: var(--inverse); background: var(--accent); border-radius: 9px; }
:root[lang][data-theme] .sidebar nav button:not(.active):hover { background: var(--white); color: var(--ink); }
:root[lang][data-theme] .topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
:root[lang] .workspace-main .page-heading {
  padding: clamp(15px,2vw,26px); margin-block: 8px 22px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--wash); color: var(--ink);
}
:root[lang] .workspace-main .page-heading h1 { font-size: calc((clamp(32px,3.5vw,52px)) * var(--text-scale, 1)); line-height: 1.08; overflow-wrap: anywhere; }
:root[lang] :is(.panel,.form-dialog,.overview-metrics button) { background: var(--white); border-color: var(--line); border-radius: 14px; }
:root[lang] :is(.primary,.secondary,.preview-button) { border-radius: 9px; }
:root[lang][data-theme] :is(.overview-metrics button,.topbar .icon-button) { color: var(--ink); }
:root[lang][data-theme] :is(.overview-metrics button:hover,.owner-toolkit-grid article) { background: var(--wash); }
:root[lang][data-theme] .workspace-main th { background: var(--wash); }

@media (max-width: 650px) {
  .auth-layout { display: block; }
  :root[lang][data-theme] .auth-brand { display: flex; justify-content: center; min-height: 84px; padding: 16px 22px; gap: 0; border-right: 0; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
  .auth-brand > :is(div:not(.brand),h1,.auth-foot) { display: none; }
  .auth-brand::after { position: absolute; z-index: -1; inset: 0 0 0 55%; min-height: 0; max-height: none; border-radius: 0; background-image: linear-gradient(90deg,var(--wash),transparent 72%),url("/assets/hub-river.webp"); }
  :root[lang] .auth-main { padding: 18px 12px 24px; }
  :root[lang] .auth-panel { padding: 18px 16px; min-width: 0; }
  :root[lang] .auth-toolbar { margin-bottom: 20px; }
  :root[lang] .workspace-main .page-heading { padding: 14px 15px; }
}

/* Daily work shares the same navigation, paper surfaces and type as the Hub. */
.appointments > header {
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid var(--hub-line);
  border-radius: 14px;
  background: var(--hub-banner);
}
.appointments > header h1 { margin: 0; font-size: calc((clamp(32px, 3.5vw, 52px)) * var(--text-scale, 1)); line-height: 1.08; }
.appointments > header p:last-child { margin: 8px 0 0; color: var(--hub-muted); }

.owner-calendar .calendar-switch, .appointments .appointment-tabs, .business nav[aria-label="Money tools"] {
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--hub-line);
  border-radius: 14px;
  background: var(--hub-banner);
}
:root[lang][data-theme] :is(.calendar-switch, .appointment-tabs, nav[aria-label="Money tools"]) button[aria-pressed] {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--hub-ink);
  background: transparent;
  font-weight: 650;
  line-height: 1.25;
}
:root[lang][data-theme] :is(.calendar-switch, .appointment-tabs, nav[aria-label="Money tools"]) button[aria-pressed="true"] {
  background: var(--hub-ink);
  color: var(--hub-paper);
}
:root[lang][data-theme] :is(.calendar-switch, .appointment-tabs, nav[aria-label="Money tools"]) button[aria-pressed="false"]:hover {
  background: var(--hub-surface);
}
.owner-calendar .calendar-viewbar { justify-content: flex-start; gap: 10px; }
.calendar-viewbar .calendar-switch { margin-inline-end: auto; }
.owner-calendar .calendar-control { min-height: 44px; min-width: 44px; background: var(--hub-paper); border-color: var(--hub-line); }
.owner-calendar .calendar-control:hover { background: var(--hub-sage); }
.owner-calendar .calendar-grid { padding-top: 5px; border-top: 1px solid var(--hub-line); }
.owner-calendar .calendar-day[aria-pressed="true"] { background: var(--hub-ink); border-color: var(--hub-ink); color: var(--hub-paper); }
.owner-calendar .calendar-hours span { background: var(--hub-banner); border-style: dashed; }
.owner-calendar .calendar-entries { display: grid; gap: 8px; }
.owner-calendar .calendar-entries li { border: 0; }
.owner-calendar .calendar-event {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 14px;
  border: 1px solid var(--hub-line);
  border-inline-start: 4px solid var(--hub-muted);
  border-radius: 10px;
  background: var(--hub-paper);
}
.owner-calendar .calendar-event:hover { background: var(--hub-banner); }
.calendar-event small { font-variant-numeric: tabular-nums; }
.calendar-event .calendar-status { border: 0; color: var(--hub-ink); background: var(--hub-banner); }
.calendar-event .calendar-status.pending { background: var(--hub-honey); }
.calendar-event .calendar-status.confirmed { background: var(--hub-sage); }
.owner-calendar .calendar-week > section { border-color: var(--hub-line); }
.appointments .panel > ul { display: grid; gap: 10px; }
.appointments .panel li {
  padding: 14px;
  border: 1px solid var(--hub-line);
  border-radius: 12px;
  background: var(--hub-paper);
}
.appointments .panel li > div { min-width: 0; }
.appointments .panel li > div > .status { border-radius: 99px; padding-inline: 10px; }
.appointments .panel li .status.green { background: var(--hub-sage); color: var(--hub-ink); }
.appointments .appointment-change { background: var(--hub-surface); }
.appointments .appointment-tabs { display: inline-grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.appointments .panel h2 { margin-top: 0; }

.business-form:has(> nav[aria-label="Money tools"]) {
  max-width: 64rem;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  font-variant-numeric: tabular-nums;
}
.business-form:has(> nav[aria-label="Money tools"]) .panel { min-width: 0; }
.business-form:has(> nav[aria-label="Money tools"]) .panel > h3:first-child {
  margin-top: 0;
  color: var(--hub-ink);
  font-family: var(--display);
  font-size: calc((clamp(21px, 2vw, 27px)) * var(--text-scale, 1));
  font-weight: 550;
  line-height: 1.15;
}
.business-form:has(> nav[aria-label="Money tools"]) .business-finance-row {
  border-bottom: 1px solid var(--hub-line);
  overflow-wrap: anywhere;
}
.business-form:has(> nav[aria-label="Money tools"]) article.panel > dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: baseline;
  padding: 12px;
  border-radius: 10px;
  background: var(--hub-banner);
}
.business-form:has(> nav[aria-label="Money tools"]) article.panel > dl dd { margin: 0; text-align: end; font-weight: 700; }

@media (max-width: 700px) {
  .owner-calendar .calendar-switch { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  .owner-calendar .calendar-jump[open] { width: 100%; }
  .calendar-viewbar .calendar-jump form {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    max-width: none;
    margin-top: 4px;
    border-color: var(--hub-line);
    background: var(--hub-paper);
    box-shadow: none;
  }
  .owner-calendar .calendar-event { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .owner-calendar .calendar-event span { grid-column: 1; grid-row: auto; font-weight: 600; }
  .appointments .appointment-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 14px; }
  .appointments .panel li { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; }
  .appointments li > .button-row:not(:empty) { border-top: 1px solid var(--hub-line); padding-top: 10px; }
  .appointments li > .button-row:empty { display: none; }
  .appointments li .button-row button { flex: 1 1 auto; }
  .appointments form > :is(.primary, .secondary) { justify-self: stretch; }

  .business-form:has(> nav[aria-label="Money tools"]) > .business-tools-mobile {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 12px;
    background: var(--hub-banner);
    font-weight: 650;
  }
  .business:has(nav[aria-label="Money tools"]) .business-tools-mobile select { width: 100%; min-width: 0; }
  .business-form:has(> nav[aria-label="Money tools"]) .mobile-records tbody { display: grid; gap: 10px; }
  .business-form:has(> nav[aria-label="Money tools"]) .mobile-records tbody tr {
    padding: 8px 10px;
    border: 1px solid var(--hub-line);
    border-radius: 10px;
    background: var(--hub-paper);
  }
  .business-form:has(> nav[aria-label="Money tools"]) .mobile-records td {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding-block: 5px;
  }
  .business-form:has(> nav[aria-label="Money tools"]) td[data-label="Week starting"] { border-bottom: 1px solid var(--hub-line); margin-bottom: 4px; font-weight: 700; }
  .business-form:has(> nav[aria-label="Money tools"]) .record-value { text-align: end; }
  .workspace-main :is(.appointments, .business-form:has(> nav[aria-label="Money tools"])) :is(button, select, input:not([type="checkbox"], [type="radio"], [type="hidden"])) {
    min-height: 44px;
    max-width: 100%;
  }
}

@media (min-width: 701px) {
  .business:has(nav[aria-label="Money tools"]) > .business-tools-mobile { display: none; }
}

/* Staff directories and the weekly visit planner */
.business[data-desk] {
  grid-template-columns: minmax(0, 1fr);
  container-type: inline-size;
  container-name: staff-desk;
}
.business[data-desk] > .page-heading { margin-bottom: 0; }
.business[data-desk] > nav[aria-label="Business tools"] {
  padding: 6px;
  gap: 4px;
  border: 1px solid var(--hub-line);
  border-radius: 14px;
  background: var(--hub-banner);
}
:root[lang][data-theme] .business[data-desk] > nav[aria-label="Business tools"] button {
  border-color: transparent;
  background: transparent;
  color: var(--hub-ink);
}
:root[lang][data-theme] .business[data-desk] > nav[aria-label="Business tools"] button[aria-pressed="true"] {
  background: var(--hub-ink);
  color: var(--hub-paper);
}
.business[data-desk] > .business-field:has(input[type="search"]) {
  max-width: 40rem;
  font-weight: 650;
}
.business[data-desk] :is(button, select, input:not([type="checkbox"], [type="radio"], [type="hidden"])) {
  min-height: 44px;
  max-width: 100%;
}
.business[data-desk] :is(.panel, .business-field, fieldset) { min-width: 0; }
.business[data-desk] .business-field :is(input, select, textarea) { min-width: 0; }
.business[data-desk] form.business-form { width: 100%; }
.people-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  align-items: start;
  gap: 14px;
}
.people-list:empty { display: none; }
.people-list .person-card {
  display: grid;
  gap: 12px;
  padding: clamp(16px, 2vw, 24px);
  overflow-wrap: anywhere;
}
.person-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.person-card h2 { margin: 0; line-height: 1.15; }
.person-status, .business[data-desk="roster"] .business-visit .section-head > strong {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--hub-banner);
  color: var(--hub-ink);
  font-weight: 650;
}
.person-status[data-state="active"] { background: var(--hub-sage); }
.person-status[data-state="preparing"], .person-status[data-state="paused"] { background: var(--hub-honey); }
.person-details { display: grid; gap: 5px; }
.person-details:empty { display: none; }
.person-details p { margin: 0; color: var(--hub-muted); }
.person-card > button { justify-self: start; }
.people-list .person-card > .panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.people-list .person-card button[aria-expanded] {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--hub-banner);
  border-color: var(--hub-line);
  text-align: start;
  white-space: normal;
}
.person-card button[aria-expanded]::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.person-card button[aria-expanded="true"]::after { transform: rotate(225deg); }
.person-card > .panel > .business-form { margin-top: 12px; min-width: 0; }
.directory-empty p { margin-top: 0; }

.business[data-desk] .roster-planner { max-width: none; grid-template-columns: minmax(0, 1fr); }
.roster-planner > h2, .roster-day h3 { margin: 0; }
.roster-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.roster-range { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.roster-range small { color: var(--hub-muted); }
.roster-planner > button { justify-self: start; }
.roster-planner .roster-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; }
.roster-planner .roster-day { background: var(--hub-paper); padding: 12px; }
.roster-day > h3 { margin-bottom: 8px; font-family: var(--display); font-weight: 550; }
.roster-day > small { display: block; color: var(--hub-muted); }
.roster-entry {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin-top: 10px;
  padding-block: 10px 0;
  border-top: 1px solid var(--hub-line);
}
.roster-entry > p { margin: 0; }
.roster-entry .roster-time { font-weight: 650; font-variant-numeric: tabular-nums; }
.roster-entry .text-button { justify-self: start; }
.business[data-desk="roster"] .business-visit .section-head { flex-wrap: wrap; gap: 8px; }
.business[data-desk="roster"] .business-visit { overflow-wrap: anywhere; }
.business[data-desk="roster"] .business-visit .business-duty { min-height: 44px; align-items: center; }

@media (min-width: 701px) {
  .business[data-desk] > .business-tools-mobile { display: none; }
}
@media (max-width: 700px) {
  .business[data-desk] > .business-tools-mobile {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 12px;
    background: var(--hub-banner);
    font-weight: 650;
  }
  .business[data-desk] > .button-row > button,
  .business[data-desk] form fieldset > .button-row > button { flex: 1 1 auto; }
  .person-card > button { justify-self: stretch; }
}
@container staff-desk (max-width: 63rem) {
  .roster-planner .roster-day-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--hub-line);
    border-radius: 12px;
    background: var(--hub-banner);
  }
  .roster-day-nav button {
    display: grid;
    place-content: center;
    gap: 1px;
    padding: 6px 2px;
    line-height: 1.2;
    min-width: 0;
    border: 0;
    border-radius: 8px;
    color: var(--hub-ink);
    background: transparent;
    font: inherit;
  }
  .roster-day-nav button[aria-pressed="true"] { background: var(--hub-ink); color: var(--hub-paper); }
  .roster-day-nav button:not([aria-pressed="true"]):hover { background: var(--hub-surface); }
  .roster-planner .roster-week-grid { display: block; }
  .roster-planner .roster-day { display: none; }
  .roster-planner .roster-day.is-selected { display: block; }
}
@container staff-desk (max-width: 25rem) {
  .roster-planner .roster-day-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .roster-period > .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}