/*
  Shared "sharper lists" patterns: page heads, linked counts, bordered lists,
  approval progress, tabs, segmented controls, tables and the dialog pattern.
  Colours come only from the theme tokens in styles.css so dark mode follows.
  Behaviour for .sh-more lives in ui_patterns.js.
*/

/* Buttons used by these patterns opt out of the global button lift/press and
   the global radius rule, which outrank a single class. */
:is(.sh-row, .sh-meter__bar, .sh-tab, .sh-seg > button, .sh-more, .sh-dialog__close, .sh-quiet-danger) {
  transform: none !important;
}

/* ---- Page head ------------------------------------------------------- */

.sh-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  min-width: 0;
}

.sh-head > :is(h1, h2) {
  margin: 0;
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* The page title is the section's pill: its sidebar icon and its name on a soft plate, so the
   top bar does not need to repeat either. Time Tracking's title sits inside a display: contents
   wrapper and Event Planning draws its own head, hence their selectors. The icon names mirror
   app/services/sidebar_navigation.py; a test keeps the two lists in step. */
[data-tab-panel="dashboard"] { --page-title-icon: "space_dashboard"; }
[data-tab-panel="goals"] { --page-title-icon: "flag"; }
[data-tab-panel="climate"] { --page-title-icon: "device_thermostat"; }
[data-tab-panel="facilities"] { --page-title-icon: "home_repair_service"; }
[data-tab-panel="purchasing"] { --page-title-icon: "shopping_cart"; }
[data-tab-panel="card_spend"] { --page-title-icon: "credit_card"; }
[data-tab-panel="venue"] { --page-title-icon: "calendar_month"; }
[data-tab-panel="event_planning"] { --page-title-icon: "event_note"; }
[data-tab-panel="forms"] { --page-title-icon: "edit_note"; }
[data-tab-panel="building_access"] { --page-title-icon: "key"; }
[data-tab-panel="devices"] { --page-title-icon: "devices"; }
[data-tab-panel="time_off"] { --page-title-icon: "event_busy"; }
[data-tab-panel="time_tracking"] { --page-title-icon: "schedule"; }
[data-tab-panel="reporting"] { --page-title-icon: "analytics"; }
[data-tab-panel="children"] { --page-title-icon: "child_care"; }
[data-tab-panel="workforce_assignments"] { --page-title-icon: "event_available"; }
[data-tab-panel="org_chart"] { --page-title-icon: "account_tree"; }
[data-tab-panel="vaults"] { --page-title-icon: "lock"; }
[data-tab-panel="approvals"] { --page-title-icon: "rule"; }

[data-tab-panel] :is(.sh-head, .page-head) > h1,
[data-tab-panel] .time-ledger-header > div > h1,
[data-tab-panel] .ep-head-copy > h1 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 6px 14px 6px 44px;
  border-radius: 10px;
  background: var(--surface-soft);
}

/* Placed against the pill's own middle, so it stays level with the name at any title size
   and however the name is marked up inside the heading. */
[data-tab-panel] :is(.sh-head, .page-head) > h1::before,
[data-tab-panel] .time-ledger-header > div > h1::before,
[data-tab-panel] .ep-head-copy > h1::before {
  content: var(--page-title-icon);
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--color-brand-accent);
  font-family: "Material Symbols Rounded";
  font-size: 1.375rem;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

/* The icon is decoration: give it an empty text alternative where the syntax exists. */
@supports (content: "a" / "") {
  [data-tab-panel] :is(.sh-head, .page-head) > h1::before,
  [data-tab-panel] .time-ledger-header > div > h1::before,
  [data-tab-panel] .ep-head-copy > h1::before {
    content: var(--page-title-icon) / "";
  }
}

.sh-head__meta {
  min-width: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.sh-head__meta strong {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sh-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin-left: auto;
}

.sh-head__actions > :is(button, a, .ghost-button, .small-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Summary line of linked counts ----------------------------------- */

.sh-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  list-style: none;
}

.sh-sum a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  border-radius: var(--radius-xs);
  color: inherit;
  text-decoration: none;
}

.sh-sum a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sh-sum strong {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Bordered list block --------------------------------------------- */

.sh-box {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.45;
}

.sh-box__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 700;
}

.sh-box__head :is(h2, h3, h4) {
  margin: 0;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.sh-box__count {
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sh-box__link {
  margin-left: auto;
  border-radius: var(--radius-xs);
  color: var(--color-link);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.sh-box__link:hover {
  color: var(--color-link-hover);
}

.sh-box__empty {
  margin: 0;
  padding: 12px;
  color: var(--muted);
}

/* Rows sit directly in the box (or in a plain ul/ol inside it). Each row
   draws the hairline above it; the first child of the box draws none. */
.sh-box > :is(.sh-row, .sh-item, .sh-kv, .sh-box__empty, .sh-table-wrap),
.sh-box > :is(ul, ol):not(.sh-path) > li {
  border-top: 1px solid var(--line);
}

.sh-box > :first-child,
.sh-box > :is(ul, ol):not(.sh-path):first-child > li:first-child {
  border-top: 0;
}

.sh-box > :is(ul, ol):not(.sh-path) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-box > :is(ul, ol):not(.sh-path) > li > :is(.sh-row, .sh-item, .sh-kv) {
  border-top: 0;
}

/* Fills inside the box follow its rounded corners without clipping popovers. */
.sh-box > :first-child,
.sh-box > :is(ul, ol):not(.sh-path):first-child > li:first-child > * {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.sh-box > :last-child,
.sh-box > :is(ul, ol):not(.sh-path):last-child > li:last-child > * {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

/* ---- List row --------------------------------------------------------- */

.sh-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

button.sh-row {
  border-radius: 0 !important;
}

.sh-row:hover,
.sh-item:has(.sh-row__link):hover {
  background: var(--color-bg-hover);
  color: var(--ink);
}

.sh-row:active,
.sh-item:has(.sh-row__link):active {
  background: var(--surface-soft);
}

.sh-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  box-shadow: none;
}

/* Rows that hold their own controls (approval meter bars) are a <div>; the
   title link stretches over the whole row so the row still opens the item,
   and the controls sit above it. */
div.sh-row {
  cursor: default;
}

.sh-row__link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.sh-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sh-row__link:focus-visible {
  outline: none;
  box-shadow: none;
}

.sh-row__link:focus-visible::after {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.sh-item:has(.sh-row__link) {
  position: relative;
}

.sh-row__icon {
  flex: 0 0 auto;
  width: 18px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.sh-row__icon--wait {
  color: var(--warning);
}

.sh-row__icon--progress {
  color: var(--current-deep);
}

.sh-row__icon--ok {
  color: var(--success);
}

.sh-row__icon--stop {
  color: var(--danger);
}

.sh-row__icon--info {
  color: var(--color-link);
}

.sh-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.sh-row__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.sh-row__meta {
  color: var(--muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.sh-row__amount {
  flex: 0 0 auto;
  min-width: 88px;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.sh-row__go {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

/* ---- Multi-line item (approval with note and buttons) ----------------- */

.sh-item {
  --sh-item-indent: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  color: var(--ink);
}

.sh-item:not(:has(.sh-item__line > .sh-row__icon)) {
  --sh-item-indent: 0px;
}

.sh-item__line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sh-item__body {
  margin: 0;
  padding-left: var(--sh-item-indent);
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}

.sh-item__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-left: var(--sh-item-indent);
}

.sh-item__actions > :is(input, textarea, select, .sh-field) {
  flex: 1 1 240px;
  min-width: 0;
}

.sh-item__actions > :is(input, select) {
  min-height: 36px;
  border-radius: 7px;
}

.sh-item__actions > :is(button, a, .ghost-button) {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  font-weight: 700;
}

/* ---- Label/value rows -------------------------------------------------- */

.sh-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
}

.sh-kv > :first-child {
  min-width: 0;
  margin: 0;
  color: var(--ink-secondary);
}

.sh-kv > :last-child:not(:first-child) {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Approval progress: compact meter --------------------------------- */

.sh-meter {
  --sh-meter-line: 18px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  width: 272px;
  max-width: 100%;
  min-width: 0;
  font-size: 0.875rem;
  line-height: var(--sh-meter-line);
  white-space: nowrap;
}

/* A fixed slot (five full-width bars; more shrink to fit), so the text starts at the
   same x in every row. */
.sh-meter__bars {
  display: flex;
  flex: 0 0 88px;
  align-items: center;
  gap: 3px;
  height: var(--sh-meter-line);
  min-width: 0;
}

.sh-meter__bar {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 1 14px;
  box-sizing: border-box;
  width: 14px;
  min-width: 5px;
  height: 24px;
  min-height: 0;
  margin: -3px 0;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  cursor: default;
}

.sh-meter__bar::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 0;
  left: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--line-strong);
}

.sh-meter__bar:hover,
.sh-meter__bar:active {
  background: transparent;
}

.sh-meter__bar:focus-visible {
  outline: none;
  box-shadow: none;
}

.sh-meter__bar:focus-visible::before {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.sh-meter__bar--done::before {
  background: var(--primary);
}

.sh-meter__bar--current::before {
  background: var(--color-brand-accent);
}

.sh-meter__bar--denied::before {
  background: var(--danger);
}

.sh-meter__bar--skipped::before {
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 5px);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Always two lines tall, so a meter without a detail line keeps its bars and summary on
   the row's first line like its neighbours. */
.sh-meter__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: calc(var(--sh-meter-line) + 16px);
}

.sh-meter__summary,
.sh-meter__detail {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-meter__summary {
  color: var(--ink);
  font-weight: 600;
}

.sh-meter__detail {
  color: var(--muted);
  font-size: 0.78125rem;
  line-height: 16px;
}

/* ---- Approval progress: full path ------------------------------------- */

.sh-path {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.45;
  list-style: none;
}

.sh-path__step {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  column-gap: 12px;
  margin: 0;
  padding: 0 0 16px;
}

.sh-path__step::before {
  content: "";
  position: absolute;
  top: 21px;
  bottom: -1px;
  left: 8px;
  width: 2px;
  background: var(--line-strong);
}

.sh-path__step--done::before {
  background: var(--primary);
}

.sh-path__step:last-child {
  padding-bottom: 0;
}

.sh-path__step:last-child::before {
  display: none;
}

.sh-path__mark {
  position: relative;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  place-items: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}

.sh-path__step--done .sh-path__mark {
  border-color: var(--primary);
  background: var(--primary);
}

.sh-path__step--done .sh-path__mark::after {
  content: "";
  width: 7px;
  height: 4px;
  border-bottom: 2px solid var(--primary-ink);
  border-left: 2px solid var(--primary-ink);
  transform: rotate(-45deg) translateY(-1px);
}

.sh-path__step--current .sh-path__mark {
  border-color: var(--color-brand-accent);
}

.sh-path__step--current .sh-path__mark::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-accent);
}

.sh-path__step--denied .sh-path__mark {
  border-color: var(--danger);
  background: var(--danger);
}

.sh-path__step--denied .sh-path__mark::before,
.sh-path__step--denied .sh-path__mark::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--primary-ink);
  transform: rotate(45deg);
}

.sh-path__step--denied .sh-path__mark::after {
  transform: rotate(-45deg);
}

.sh-path__step--skipped .sh-path__mark {
  border-style: dashed;
}

.sh-path__main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}

.sh-path__label {
  color: var(--ink);
  font-weight: 700;
}

.sh-path__who {
  color: var(--ink-secondary);
}

.sh-path__when {
  grid-column: 3;
  grid-row: 1;
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: right;
  white-space: nowrap;
}

.sh-path__note,
.sh-path__reason {
  grid-column: 2 / -1;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.sh-path__step--skipped :is(.sh-path__label, .sh-path__who) {
  color: var(--muted);
}

/* ---- Tabs and segmented control --------------------------------------- */

.sh-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.sh-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0 0 -1px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sh-tab:hover {
  background: transparent;
  color: var(--ink);
}

.sh-tab:is([aria-selected="true"], [aria-current="page"], [aria-current="true"], .is-active) {
  border-bottom-color: var(--color-brand-accent);
  color: var(--ink);
}

.sh-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  box-shadow: none;
}

.sh-tab__count {
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sh-seg {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  background: var(--surface);
}

.sh-seg > :is(button, a) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.sh-seg > :is(button, a) + :is(button, a) {
  border-left: 1px solid var(--line);
}

.sh-seg > :is(button, a):hover {
  background: var(--color-bg-hover);
  color: var(--ink);
}

.sh-seg > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [aria-current="true"], .is-active) {
  background: var(--surface-soft);
  box-shadow: inset 0 -2px 0 var(--color-brand-accent);
  color: var(--ink);
}

.sh-seg > :is(button, a):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* ---- Dense table ------------------------------------------------------- */

.sh-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

.sh-table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.84375rem;
  line-height: 1.4;
}

.sh-table th {
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}

.sh-table td {
  max-width: 300px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  overflow-wrap: anywhere;
  vertical-align: top;
}

.sh-table tbody tr:last-child > :is(td, th) {
  border-bottom: 0;
}

.sh-table td > .sh-row__icon {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -4px;
}

.sh-table--pin :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.sh-table--pin thead th:first-child {
  z-index: 2;
}

.sh-table--pin td:first-child {
  background: var(--surface);
  font-weight: 600;
}

/* ---- Dialog pattern ----------------------------------------------------
   Markup: .modal > .modal-panel.sh-dialog > header.sh-dialog__head + form >
   .sh-dialog__body + .sh-dialog__foot. form_dialogs.js still adds its
   form-sheet classes (sticky header/footer, scrolling fields); these rules
   set the spacing on top of that system. */

.modal .modal-panel.sh-dialog {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: calc(var(--form-viewport-height, 100dvh) - 48px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.4;
  scroll-padding-block: 80px 96px;
}

.modal .modal-panel.sh-dialog.form-sheet--fixed-actions {
  overflow: hidden;
}

.sh-dialog > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

.sh-dialog .sh-dialog__head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 20px 24px 6px;
  border: 0;
  background: var(--surface);
}

.sh-dialog__head > :first-child {
  min-width: 0;
}

.sh-dialog__head :is(h2, h3) {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sh-dialog .sh-dialog__close {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: -6px -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px !important;
  background: transparent;
  box-shadow: none;
  color: var(--ink-secondary);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.sh-dialog .sh-dialog__close:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.sh-dialog .form-sheet-fields {
  padding: 0;
}

.sh-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 10px 24px 22px;
}

.sh-dialog__body > :is(p, h3, h4) {
  margin: 0;
}

.sh-dialog .sh-dialog__foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.sh-dialog__foot > :is(button, a, .ghost-button) {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Outranks form-sheet's margin reset on footer buttons. */
.sh-dialog .sh-dialog__foot > .sh-quiet-danger.sh-quiet-danger {
  margin-right: auto;
  padding: 0 6px;
}

.sh-dialog__foot > .form-message {
  flex-basis: 100%;
  order: -1;
  margin: 0;
}

.sh-dialog__foot > .form-message:empty {
  display: none;
}

/* Fields */

.sh-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}

.sh-field__label {
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.sh-field em,
.sh-field__label em {
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

/* A picker's own search box sits inside a field but already has its frame: boxing the input
   as well draws a second box inside the first. */
.sh-field :is(input:not([type="checkbox"], [type="radio"], [type="file"], [data-reference-picker-query]), select, textarea, .reference-picker-trigger) {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 400;
}

.sh-field input[type="file"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.sh-field textarea {
  min-height: 80px;
  resize: vertical;
}

.sh-field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--danger);
}

.sh-field__hint {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
}

.sh-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

/* Disclosure line for the fields the phone app keeps out of the way. */
.sh-more {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.sh-more:hover {
  background: transparent;
  color: var(--ink);
}

.sh-more:hover .sh-more__what {
  color: var(--ink-secondary);
}

.sh-more:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.sh-more__what {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-more::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0 7px 4px auto;
  border-right: 2px solid var(--ink-secondary);
  border-bottom: 2px solid var(--ink-secondary);
  transform: rotate(45deg);
}

.sh-more[aria-expanded="true"]::after {
  margin-bottom: -4px;
  transform: rotate(-135deg);
}

.sh-more__region {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.sh-more__region[hidden] {
  display: none;
}

/* Detail dialogs: a sentence plus a plain two-column list. */
.sh-facts {
  display: grid;
  grid-template-columns: minmax(110px, 180px) minmax(0, 1fr);
  margin: 0;
}

.sh-facts > :is(dt, dd) {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.sh-facts > dt {
  padding-right: 12px;
  color: var(--ink-secondary);
  font-weight: 400;
}

.sh-facts > dd {
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

:is(button, a).sh-quiet-danger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-sm) !important;
  background: transparent;
  box-shadow: none;
  color: var(--danger);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

:is(button, a).sh-quiet-danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ---- Phone widths ------------------------------------------------------ */

@media (max-width: 900px) {
  .sh-head__actions > :is(button, a, .ghost-button, .small-button),
  .sh-item__actions > :is(button, a, .ghost-button, input, select) {
    min-height: 44px;
  }

  .sh-sum a {
    min-height: 44px;
  }

  .sh-tab,
  .sh-seg > :is(button, a) {
    min-height: 44px;
  }

  .modal .modal-panel.sh-dialog {
    width: 100%;
    max-height: calc(var(--form-viewport-height, 100dvh) - 8px);
    border-radius: 18px 18px 0 0;
  }

  .sh-dialog .sh-dialog__head {
    padding: 16px 16px 6px;
  }

  .sh-dialog .sh-dialog__close {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .sh-dialog__body {
    padding: 8px 16px 18px;
  }

  .sh-dialog .sh-dialog__foot {
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }

  .sh-field :is(input, select, textarea) {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  /* Rows become a small grid: icon, text, amount and chevron on the first
     line; an approval meter takes its own line under the text. */
  .sh-row,
  .sh-item__line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px 10px;
  }

  :is(.sh-row, .sh-item__line) > .sh-row__icon {
    grid-column: 1;
    grid-row: 1;
  }

  :is(.sh-row, .sh-item__line) > :is(.sh-row__text, .sh-row__link) {
    grid-column: 2;
    grid-row: 1;
  }

  :is(.sh-row, .sh-item__line) > .sh-row__amount {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }

  :is(.sh-row, .sh-item__line) > .sh-row__go {
    grid-column: 4;
    grid-row: 1;
  }

  :is(.sh-row, .sh-item__line) > .sh-meter {
    grid-column: 2 / -1;
    grid-row: 2;
    width: 100%;
  }

  .sh-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .sh-item {
    --sh-item-indent: 0px;
  }
}