/* Application-only reading scale. Public marketing keeps the Tailwind theme. */
.application-ui {
  --text-xs: 0.875rem;
  --text-xs--line-height: 1.5;
  --text-sm: 1rem;
  --text-sm--line-height: 1.5;
  --workspace-header-height: 5rem;
  --workspace-mobile-nav-height: 6rem;
  --workspace-capture-height: 0px;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.application-ui :where(.flex, .grid) > * { min-width: 0; }
.application-ui :where(p, .reading-content) { max-width: 65ch; }
.application-ui :where(.flex.items-center.justify-between, .flex.items-start.justify-between) { flex-wrap: wrap; }
.application-ui :where(svg) { flex-shrink: 0; }
.application-ui :where(label, th, td, h1, h2, h3, h4, .status-pill, [role="status"], [role="alert"], [data-legal-disclaimer]) {
  --text-xs: 1rem;
}
.application-ui :where(label, th, .status-pill, [data-legal-disclaimer]) { font-size: 1rem; }
.application-ui :where(dt, .rounded-full.text-xs, .text-xs.font-bold.uppercase) {
  --text-xs: 1rem;
  font-size: 1rem;
}
.application-ui .rounded-full.text-xs { min-height: 1.5rem; }
.application-ui [data-legal-disclaimer] { max-width: 65ch; }

/* Approved prose retains its source text, but source-file line lengths do not
   dictate screen layout. User-entered content keeps its own whitespace rules. */
.application-ui .legal-prose {
  max-width: 65ch;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
.application-ui .legal-prose > p + p { margin-top: 1rem; }

/* Controls keep their labels readable, including labels in nested spans. */
.application-ui :where(button, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), summary) {
  min-height: 2.75rem;
  --text-xs: 1rem;
}
.application-ui :where(button, summary) { height: auto; white-space: normal; }
.application-ui button { min-width: 2.75rem; }
.application-ui a[aria-label]:has(svg) { align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }
.application-ui :where(a.btn-primary, a.btn-secondary, a.btn-danger, nav a, aside a) {
  min-height: 2.75rem;
  --text-xs: 1rem;
}
.application-ui :where(button, summary, nav a, aside a) :where(.text-xs) { font-size: 1rem; }
.application-ui :where(input, select, textarea) { max-width: 100%; }
.application-ui input[type="file"] { white-space: normal; }
.application-ui :where(input[type="checkbox"], input[type="radio"]) { flex-shrink: 0; }
.application-ui label:has(input[type="checkbox"], input[type="radio"]) { min-height: 2.75rem; }
.application-ui :where(input[type="checkbox"], input[type="radio"]) + label:not(.sr-only) {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Existing dense labels must wrap instead of disappearing behind an ellipsis. */
.application-ui .truncate {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.application-ui :where(.line-clamp-2, .line-clamp-3) {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.application-ui :where(.table-scroll, [role="tablist"]) { max-width: 100%; }
.application-ui .table-scroll { container-type: normal; }
/* Table headings and finite status labels need a word-sized minimum column.
   Long customer values may still wrap, and wide tables retain local scrolling. */
.application-ui .table-scroll :where(th, .status-pill) {
  overflow-wrap: normal;
  word-break: normal;
}
.application-ui .workspace-content { container-type: inline-size; container-name: workspace; }
.application-ui .workspace-main-content {
  padding-bottom: calc(var(--workspace-mobile-nav-height) + 1rem);
}
.application-ui .workspace-more-menu {
  max-height: calc(100dvh - var(--workspace-mobile-nav-height) - var(--workspace-capture-height) - 2rem);
}
.application-ui :where([id], input, select, textarea, button, a) {
  scroll-margin-top: calc(var(--workspace-header-height) + var(--workspace-capture-height) + 1rem);
  scroll-margin-bottom: calc(var(--workspace-mobile-nav-height) + 1rem);
}
.application-ui .workspace-company-control { position: relative; border-radius: 0.5rem; }
.application-ui .workspace-company-control:focus-within { outline: 2px solid #0A4F53; outline-offset: 3px; }
.application-ui .workspace-company-control select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}
.application-ui .workspace-company-control option { color: #1e293b; background: white; }
.application-ui .workspace-company-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  pointer-events: none;
}
.application-ui .capture-status-spacer { height: var(--workspace-capture-height, 2.5rem); }
.application-ui:has([data-capture-visible="true"]) [data-app-shell-header],
.application-ui:has([data-capture-visible="true"]) [data-app-shell-sidebar] { top: var(--workspace-capture-height); }
.application-ui:has([data-capture-visible="true"]) [data-app-shell-sidebar] { height: calc(100dvh - var(--workspace-capture-height)); }

.application-ui .workspace-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

/* Grids respond to the content area, including the space used by the sidebar. */
@container workspace (max-width: 47.99rem) {
  .application-ui :where(.grid:not(.grid-cols-4)) { grid-template-columns: minmax(0, 1fr); }
  .application-ui :where(.grid) > * { grid-column: auto; }
  .application-ui :where(.grid-cols-4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
  .application-ui .workspace-company-group { flex-basis: 100%; }
  .application-ui [data-app-shell-header] > .shrink-0 { margin-left: auto; }
}

@media (max-height: 32rem) {
  .application-ui [data-workspace-layout-target~="header"] { position: static; }
}

@media (min-width: 64rem) {
  .application-ui { --workspace-mobile-nav-height: 0px; }
  .application-ui .workspace-main-content { padding-bottom: 1.5rem; }
}

.password-field { position: relative; min-width: 0; }
.password-field:has(button:not([hidden])) input { padding-right: 3.5rem; }
.password-visibility-button {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 0.5rem;
  color: #0A4F53;
  cursor: pointer;
}
.password-visibility-button:hover { background: #EAF5F6; }
.password-field [hidden] { display: none; }