/* Shared visual scale for every cabinet. Component styles consume these tokens. */
:root {
  --ui-font: 'Segoe UI', Arial, sans-serif;
  --ui-display: Georgia, 'Times New Roman', serif;
  --ui-caption: 1rem;
  --ui-control: 1.0625rem;
  --ui-body: 1.125rem;
  --ui-heading: 2.375rem;
  --ui-section: 1.625rem;
  --ui-card: 1.25rem;
  --ui-muted: #52645c;
  --ui-ink: #233c34;
  --ui-paper: #f8f7f2;
  --ui-line: #cbd8d0;
  --ui-green: #285541;
  --muted: var(--ui-muted);
  --ws-muted: var(--ui-muted);
  --purchase-muted: var(--ui-muted);
}
body.ui-readable {
  font: var(--ui-body)/var(--ui-leading) var(--ui-font);
  color: var(--ui-ink);
  background: var(--ui-paper);
}
body.ui-readable :is(button, input, select, textarea) {
  font-family: var(--ui-font);
}
body.ui-readable :is(input, select, textarea) {
  font-size: var(--ui-control);
  line-height: var(--ui-leading);
}
body.ui-readable input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']),
body.ui-readable select {
  min-height: 44px;
}
body.ui-readable :is(button, .button) {
  font-size: var(--ui-control);
  line-height: var(--ui-leading);
}
body.ui-readable
  :is(button, .button):not(.photo-trigger):not(.journey-person):not(.journey-step):not(.action-icon-option) {
  min-height: 42px;
}
body.ui-readable label {
  font-size: var(--ui-caption);
  line-height: var(--ui-leading);
}
body.ui-readable input::placeholder,
body.ui-readable textarea::placeholder {
  color: #617169;
  opacity: 1;
}
body.ui-readable :is(small, .muted) {
  color: var(--ui-muted);
}
body.ui-readable small {
  font-size: var(--ui-caption);
  line-height: var(--ui-leading);
}
body.ui-readable :is(input[type='checkbox'], input[type='radio']) {
  width: 21px;
  height: 21px;
  min-height: 21px;
  flex-shrink: 0;
}
body.ui-readable :is(h1, h2, h3) {
  text-wrap: pretty;
  overflow-wrap: break-word;
}
body.ui-readable .main h1 {
  font: 500 var(--ui-heading)/var(--ui-leading) var(--ui-display);
  letter-spacing: -0.6px;
  color: var(--ui-ink);
}
body.ui-readable :is(.main, .modal) h2 {
  font: 600 var(--ui-section)/var(--ui-leading) var(--ui-font);
  letter-spacing: 0;
  color: var(--ui-ink);
}
body.ui-readable :is(.main, .modal) h3 {
  font: 600 var(--ui-card)/var(--ui-leading) var(--ui-font);
  letter-spacing: 0;
  color: var(--ui-ink);
}
body.ui-readable :is(.forbidden-copy, .sport-card-title, .recipe-card, .q-section) h2 {
  font-size: var(--ui-card);
}
body.ui-readable :is(table, .history) {
  font-size: var(--ui-caption);
  line-height: var(--ui-leading);
}
body.ui-readable :is(th, td) {
  vertical-align: top;
}
body.ui-readable th {
  font-size: var(--ui-caption);
  font-weight: 600;
}
body.ui-readable .layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  max-width: none;
  width: 100%;
  margin: 0;
  min-height: 100dvh;
}
body.ui-readable .sidebar {
  width: 220px;
  padding: 20px 10px 16px;
  background: var(--ui-paper);
  border-right: 1px solid var(--ui-line);
  position: sticky;
  top: 0;
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.site-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ui-green);
  margin: 0 0 22px;
  flex: none;
}
.site-brand svg {
  width: 112px;
  height: 44px;
}
.site-brand > span {
  font: 36px/1.1 var(--ui-display);
}
body.ui-readable .site-brand small {
  font-size: var(--ui-caption);
  margin-top: 6px;
  color: var(--ui-muted);
  text-align: center;
}
body.ui-readable .sidebar .nav {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
}
body.ui-readable .sidebar :is(.nav > a, .ws-nav-group a, .ws-nav-group summary) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 48px;
  border-radius: 8px;
  font: var(--ui-control)/var(--ui-leading) var(--ui-font);
  color: var(--ui-ink);
  white-space: normal;
}
body.ui-readable .sidebar :is(.nav > a, .ws-nav-group a).active {
  background: var(--ui-green);
  color: #fff;
  font-weight: 600;
}
body.ui-readable .sidebar .nav :is(svg, i) {
  width: 22px;
  height: 24px;
  flex: 0 0 22px;
  font-size: 22px;
}
body.ui-readable .ws-nav-group {
  margin: 3px 0;
  border: 0;
}
body.ui-readable .ws-nav-group > div {
  padding: 0 0 0 8px;
}
body.ui-readable .ws-nav-group summary {
  cursor: pointer;
}
body.ui-readable .ws-nav-group summary:after {
  display: block;
  content: '⌄';
  font-size: var(--ui-caption);
  margin-left: auto;
}
body.ui-readable .ws-nav-group[open] summary:after {
  content: '⌃';
}
body.ui-readable .sidebar footer {
  margin-top: auto;
  padding-top: 24px;
  flex-shrink: 0;
}
body.ui-readable .sidebar footer small {
  display: none;
}
body.ui-readable .main {
  padding: 0 28px 32px;
  margin: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  background: var(--ui-paper);
}
body.ui-readable .client-footer {
  display: none;
}
body.ui-readable .main > :is(.topbar, .client-header) {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-height: 88px;
  height: auto;
  margin: 0 0 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ui-line);
  background: none;
}
body.ui-readable .greeting {
  flex: 1;
  min-width: 200px;
}
body.ui-readable .greeting p {
  font: 600 1.375rem/var(--ui-leading) var(--ui-font);
  margin: 0;
  color: var(--ui-ink);
}
body.ui-readable .account-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
body.ui-readable .account-menu {
  max-width: 350px;
  min-width: 0;
}
body.ui-readable .account-menu strong {
  font-size: var(--ui-control);
  font-weight: 600;
  white-space: normal;
}
body.ui-readable .account-menu small {
  font-size: var(--ui-caption);
}
body.ui-readable .header-clock {
  font-size: var(--ui-caption);
  padding-left: 16px;
  white-space: nowrap;
}
body.ui-readable .header-clock strong {
  font-size: var(--ui-caption);
  font-weight: 500;
}
body.ui-readable .topbar :is(.name, small) {
  font-size: var(--ui-caption);
  background: none;
  padding: 0;
}
body.ui-readable .topbar .staff-header-tools {
  margin-left: auto;
  display: flex;
  gap: 18px;
  align-items: center;
}
body.ui-readable .topbar .mobilebrand {
  display: none;
}
body.ui-readable .pagehead {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
body.ui-readable .pagehead h1 {
  margin: 0;
}
body.ui-readable .menuicon {
  display: none;
}
body.ui-readable :is(.pill, .badge) {
  font-size: var(--ui-caption);
  line-height: var(--ui-leading);
}
body.ui-readable :is(.modal, .modal.wide) {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}
body.ui-readable .modal {
  width: 760px;
}
.ui-readable .modal.wide {
  width: 1100px;
}
body.ui-readable .modal :is(input, select, textarea) {
  max-width: 100%;
}
body.ui-readable .form-actions {
  gap: 12px;
  flex-wrap: wrap;
}
body.ui-readable :focus-visible {
  outline: 3px solid #276349;
  outline-offset: 3px;
}
/* Compact cards keep a common text scale; their artwork need not enlarge. */
body.ui-readable .forbidden-subtitle {
  font: var(--ui-body)/var(--ui-leading) var(--ui-font);
  color: var(--ui-muted);
}
body.ui-readable .forbidden-heading > span {
  font-size: var(--ui-caption);
}
body.ui-readable .forbidden-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.ui-readable .forbidden-card {
  min-height: 134px;
  gap: 12px;
  padding: 8px 12px;
}
body.ui-readable :is(.forbidden-art, .forbidden-photo, .forbidden-placeholder) {
  flex-basis: 136px;
  width: 136px;
  height: auto;
  aspect-ratio: 165/138;
}
body.ui-readable .forbidden-photo img {
  max-width: 100%;
  height: 110px;
}
body.ui-readable .forbidden-copy h2 {
  line-height: var(--ui-leading);
  overflow-wrap: normal;
}
body.ui-readable .forbidden-copy p {
  font: var(--ui-caption)/var(--ui-leading) var(--ui-font);
  color: var(--ui-muted);
}
body.ui-readable .forbidden-admin .forbidden-copy {
  padding-bottom: 40px;
}
body.ui-readable .forbidden-card-actions button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 9px;
}
body.ui-readable .forbidden-toolbar .forbidden-tools :is(button, .button) {
  height: auto;
  min-height: 44px;
  font-size: var(--ui-caption);
}
body.ui-readable .forbidden-count {
  font-size: var(--ui-caption);
}
body.ui-readable :is(.recipe-detail, .meal-body, .textbody, .bubble, .access-modal, .q-value, .q-values dd) {
  line-height: var(--ui-leading);
}
body.ui-readable .meal-name {
  font: 600 var(--ui-card)/var(--ui-leading) var(--ui-font);
}
body.ui-readable .recipe-top {
  align-items: start;
}
body.ui-readable .recipe-top input {
  height: auto;
}
body.ui-readable .chat-contact {
  min-height: 110px;
}
body.ui-readable .chat-contact-copy strong {
  font-size: var(--ui-control);
}
body.ui-readable .chat-thread-title h2 {
  font-size: var(--ui-card);
}
body.ui-readable .workspace-chat .bubble {
  font-size: var(--ui-body);
  line-height: var(--ui-leading);
}
body.ui-readable .chat-contact-meta {
  top: 48px;
}
body.ui-readable .chat-unread {
  height: auto;
  min-height: 25px;
  min-width: 25px;
}
body.ui-readable .chat-tool-icon {
  width: 42px;
  height: 42px;
  min-height: 42px;
}
body.ui-readable .purchase-quantity {
  height: 44px;
  min-width: 140px;
  width: 140px;
  align-items: center;
}
body.ui-readable .purchase-quantity button {
  width: 36px;
  min-height: 42px;
  height: 42px;
  flex-shrink: 0;
  font-size: 20px;
}
body.ui-readable .purchase-quantity input {
  height: 42px;
  min-height: 42px;
  width: 44px;
  flex: 1;
  font-size: var(--ui-control);
  padding: 4px 2px;
}
body.ui-readable .purchase-quantity > span {
  font-size: var(--ui-caption);
}
body.ui-readable .purchase-split {
  grid-template-columns: minmax(780px, 1.35fr) minmax(320px, 0.65fr);
}
body.ui-readable .purchase-split .purchase-shopping {
  min-width: 780px;
}
body.ui-readable .purchase-split .purchase-personal-add {
  flex-wrap: wrap;
}
body.ui-readable .purchase-split .purchase-personal-add input:first-child {
  min-width: 0;
  flex-basis: 100%;
}
body.ui-readable .purchase-panel-heading h2 {
  font-size: var(--ui-card);
}
body.ui-readable .purchase-shopping th {
  white-space: normal;
}
body.ui-readable .purchase-catalog {
  font-size: var(--ui-caption);
}
body.ui-readable .purchase-catalog :is(td, th) {
  height: auto;
  min-height: 48px;
}
body.ui-readable .purchase-region :is(input, select) {
  height: auto;
}
body.ui-readable .purchase-personal-row input {
  min-height: 44px;
}
body.ui-readable .q-section h2 {
  line-height: var(--ui-leading);
}
body.ui-readable .q-fields :is(input, select) {
  height: auto;
}
body.ui-readable .client-list td {
  line-height: var(--ui-leading);
}
/* Give large controls their own line instead of squeezing the activity name. */
body.ui-readable :is(.my-day-design, .statistics-design) {
  --md-muted: var(--ui-muted);
}
body.ui-readable .md-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}
body.ui-readable .md-description {
  min-width: 0;
  line-height: var(--ui-leading);
}
body.ui-readable .md-description > strong {
  overflow-wrap: break-word;
}
body.ui-readable .md-controls {
  grid-column: 1/-1;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}
body.ui-readable .md-time {
  font-size: var(--ui-body);
  white-space: normal;
}
body.ui-readable .md-medicine {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
body.ui-readable .md-intakes {
  color: var(--ui-muted);
  max-width: 140px;
}
body.ui-readable .md-intakes small {
  white-space: normal;
}
body.ui-readable .md-personal .md-description {
  flex-wrap: wrap;
  gap: 8px 16px;
}
body.ui-readable .md-block > header {
  flex-wrap: wrap;
}
body.ui-readable .md-add {
  font-size: var(--ui-caption) !important;
  padding: 9px 12px !important;
  white-space: normal !important;
}
body.ui-readable .md-add:before {
  content: none;
}
body.ui-readable .md-report {
  color: #b32632;
  border-color: #c95d65;
  line-height: var(--ui-leading);
}
body.ui-readable .md-actual {
  color: #23684d !important;
}
body.ui-readable .medicine-catalog-grid .row > div {
  min-width: 0;
}
body.ui-readable .medicine-catalog-grid h2 {
  font-size: var(--ui-card);
  overflow-wrap: anywhere;
}
@media (min-width: 1500px) {
  body.ui-readable .purchase-catalog-columns {
    column-gap: 20px;
  }
}
@media (max-width: 1500px) {
  body.ui-readable .forbidden-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1400px) {
  body.ui-readable .purchase-split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1150px) {
  body.ui-readable .layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  body.ui-readable .sidebar {
    width: 210px;
  }
  body.ui-readable .main {
    padding-inline: 22px;
  }
  body.ui-readable .header-clock {
    display: none;
  }
  body.ui-readable .forbidden-tools {
    margin-left: 0;
  }
}
@media (max-width: 900px) {
  body.ui-readable .layout {
    display: block;
  }
  body.ui-readable .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    width: 248px;
    height: 100dvh;
    z-index: 35;
    box-shadow: 5px 0 25px #183c301f;
  }
  body.ui-readable .sidebar.open {
    left: 0;
  }
  body.ui-readable .menuicon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 9px;
  }
  body.ui-readable .main {
    padding: 0 18px 28px;
  }
  body.ui-readable .main > :is(.topbar, .client-header) {
    margin-bottom: 20px;
    gap: 12px;
    padding: 12px 0;
    min-height: 76px;
  }
  body.ui-readable .greeting {
    min-width: 0;
  }
  .ui-readable .greeting p {
    font-size: var(--ui-body);
  }
  body.ui-readable .account-menu {
    max-width: 260px;
  }
  body.ui-readable .topbar .mobilebrand {
    display: none;
  }
  body.ui-readable .chat.workspace-chat {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1fr);
  }
}
@media (max-width: 650px) {
  :root {
    --ui-heading: 1.875rem;
    --ui-section: 1.5rem;
  }
  body.ui-readable .main {
    padding-inline: 14px;
  }
  body.ui-readable .main > :is(.topbar, .client-header) {
    gap: 8px;
  }
  body.ui-readable .greeting {
    order: 3;
    flex-basis: 100%;
    padding-top: 4px;
  }
  body.ui-readable .account-tools {
    gap: 8px;
    max-width: calc(100% - 55px);
  }
  body.ui-readable .account-menu {
    max-width: 210px;
    padding: 0;
    border: 0;
  }
  body.ui-readable .account-menu strong {
    font-size: var(--ui-caption);
    line-height: var(--ui-leading);
  }
  body.ui-readable .account-photo,
  .ui-readable .header-clock {
    display: none;
  }
  body.ui-readable .topbar .staff-header-tools {
    gap: 10px;
  }
  .ui-readable .topbar .name {
    overflow-wrap: anywhere;
  }
  body.ui-readable .forbidden-grid {
    grid-template-columns: 1fr;
  }
  body.ui-readable .forbidden-card {
    padding: 10px;
    gap: 10px;
  }
  body.ui-readable :is(.forbidden-art, .forbidden-photo, .forbidden-placeholder) {
    width: 108px;
    flex-basis: 108px;
  }
  body.ui-readable .forbidden-copy h2 {
    font-size: var(--ui-card);
    overflow-wrap: break-word;
  }
  body.ui-readable .forbidden-filters {
    gap: 6px;
  }
  .ui-readable .forbidden-filters button {
    padding: 9px 13px;
  }
  body.ui-readable .forbidden-heading {
    gap: 10px;
  }
  body.ui-readable .forbidden-heading h1 {
    font-size: var(--ui-heading);
  }
  body.ui-readable .modal-bg {
    padding: 10px;
  }
  .ui-readable .modal {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 20px;
  }
  body.ui-readable .formgrid {
    grid-template-columns: 1fr;
  }
  body.ui-readable .chat.workspace-chat {
    grid-template-columns: 1fr;
  }
  body.ui-readable .chat-list-tools {
    flex-wrap: wrap;
  }
  body.ui-readable .purchase-split .purchase-shopping {
    min-width: 0;
  }
  body.ui-readable .purchase-shopping tbody tr {
    grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
    gap: 12px;
  }
  body.ui-readable .purchase-shopping tbody td:nth-child(4) {
    grid-column: 1/-1;
    grid-row: 4;
  }
  body.ui-readable .purchase-shopping tbody td:nth-child(6) {
    grid-column: 1/-1;
    grid-row: 5;
    justify-content: flex-start;
  }
  body.ui-readable .purchase-shopping tbody td:nth-child(2) {
    grid-column: 1/-1;
  }
  body.ui-readable .purchase-panel-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  body.ui-readable .purchase-region {
    grid-template-columns: 1fr !important;
  }
  body.ui-readable .purchase-catalog {
    min-width: 620px;
  }
  body.ui-readable .q-contact-fields {
    grid-template-columns: 1fr;
  }
  body.ui-readable .md-medicine {
    grid-template-columns: auto minmax(0, 1fr);
  }
  body.ui-readable .md-intakes {
    grid-column: 2;
    border: 0;
    padding: 0;
    max-width: none;
  }
  body.ui-readable .md-personal .md-missed {
    grid-column: 1/-1;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.ui-readable * {
    scroll-behavior: auto;
    transition: none;
  }
}
@media print {
  body.ui-readable .sidebar {
    display: none;
  }
  body.ui-readable .layout {
    display: block;
  }
  body.ui-readable .main {
    padding: 0;
  }
}