/*
 * The components. Only design tokens from tokens.css: no colour codes, sizes, fonts or durations here
 * (scripts/check_design.py). Media queries are the exception, since they cannot read variables.
 * Breakpoints: mobile below 600, iPad portrait 820, iPad landscape 1180, desktop 1440.
 */

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
}
h1 {
  font-size: var(--text-3xl);
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
}
a {
  color: var(--color-link);
}
:focus-visible {
  outline: var(--line-medium) solid var(--color-focus);
  outline-offset: var(--line-medium);
}
.ui-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.ui-neg {
  color: var(--color-negative-amount);
  font-weight: var(--weight-medium);
}
.ui-muted {
  color: var(--color-text-3);
}
/* A date in running text, for example in a lead, is never broken at its hyphens (granskningslistan). */
.ui-date {
  white-space: nowrap;
}
/* A general comment under a table or a list: running text in italics (granskningslistan, 3/10). */
.ui-note {
  margin: 0;
  color: var(--color-text-3);
  font-style: italic;
}
.ui-visually-hidden {
  position: absolute;
  width: var(--line-thin);
  height: var(--line-thin);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Display level: anything belonging to Avancerad (advanced) is hidden when an ancestor has the level Enkel (simple). */
[data-level="simple"] .ui-level-advanced {
  display: none;
}

/* ---- Page ---- */
.ui-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-9) var(--space-7) var(--space-11);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.ui-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-9);
}
.ui-page-head p {
  margin: 0;
  color: var(--color-text-2);
}

/* ---- Navigation ---- */
.ui-band {
  background: var(--color-band);
  color: var(--color-band-text);
}
.ui-band-inner {
  position: relative; /* the top bar's popovers keep inside it */
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-9);
}
.ui-logo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--target-min);
  min-width: var(--target-min);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
.ui-logo small {
  display: block;
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-band-muted);
}
.ui-band-tools {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
}
.ui-user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-band-muted);
}
.ui-user b {
  color: var(--color-band-text);
  font-weight: var(--weight-medium);
}
.ui-avatar {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-round);
  background: var(--color-brand);
  color: var(--color-band);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
}
/* When the accounting system was last read (T7.1), and a link when something newer has come. */
.ui-fetched {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-band-muted);
  font-variant-numeric: tabular-nums;
}
.ui-fetched b {
  color: var(--color-band-text);
  font-weight: var(--weight-medium);
}
.ui-fetched-info summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  cursor: pointer;
  list-style: none;
}
.ui-fetched-info summary::-webkit-details-marker {
  display: none;
}
.ui-fetched-info summary::after {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-round);
  border: var(--line-thin) solid var(--color-band-muted);
  font-size: var(--text-2xs);
}
.ui-fetched-info p {
  position: absolute;
  z-index: 2;
  top: 100%;
  right: var(--space-7);
  width: min(var(--dialog-max), calc(100% - 2 * var(--space-7)));
  margin: var(--space-2) 0 0;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}
.ui-fetched-newer {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-band-text);
  font-weight: var(--weight-bold);
}
.ui-theme {
  min-height: var(--target-min);
  padding: 0 var(--space-6);
  border-radius: var(--radius-round);
  border: var(--line-thin) solid var(--color-band-muted);
  background: var(--color-band-control);
  color: var(--color-band-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
/* The top bar's menu: the areas the user may open, and signing out (E0.2). */
.ui-band-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}
.ui-band-menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-band-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.ui-band-menu a[aria-current="page"] {
  color: var(--color-band-text);
}
/* A planned area (1a.4): the same dot as a planned tab. */
.ui-band-menu a.ui-band-planned::after {
  content: "";
  display: inline-block;
  width: var(--dot);
  height: var(--dot);
  margin-left: var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-warning);
}
/* A number on a link of the menu, such as the new replies in the feedback (1a.5). */
.ui-band-count {
  display: inline-grid;
  place-items: center;
  min-width: var(--space-9);
  height: var(--space-9);
  margin-left: var(--space-3);
  padding: 0 var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.ui-band-menu form {
  margin: 0;
}
.ui-logo img {
  display: block;
  max-height: var(--space-10);
  max-width: calc(var(--space-11) * 4);
  margin-bottom: var(--space-2);
}

/* Tabs: each tab is a link to its own address. */
.ui-tabs {
  background: var(--color-surface);
  border-bottom: var(--line-thin) solid var(--color-border);
  box-shadow: var(--shadow-raised);
}
.ui-tabs-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
}
.ui-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-text-2);
  text-decoration: none;
  border-bottom: var(--line-thick) solid transparent;
  white-space: nowrap;
}
.ui-tab[aria-current="page"] {
  color: var(--color-action);
  border-bottom-color: var(--color-action);
}
.ui-tab-planned {
  color: var(--color-text-3);
  font-weight: var(--weight-regular);
}
.ui-tab-planned::after {
  content: "";
  display: inline-block;
  width: var(--dot);
  height: var(--dot);
  margin-left: var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-warning);
}
.ui-tabs-sub {
  background: var(--color-surface-2);
  box-shadow: none;
}
.ui-tabs-sub .ui-tab {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  text-transform: none;
  border-bottom-width: var(--line-medium);
}

/* ---- Buttons ---- */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  min-width: var(--target-min); /* also a button with only an icon or a sign is a tap target of 44x44 px */
  padding: var(--space-3) var(--space-7);
  border: var(--line-thin) solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-action);
  color: var(--color-action-text);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ui-button-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.ui-button-ghost {
  background: transparent;
  color: var(--color-action);
}
.ui-button-danger {
  background: var(--color-error);
  color: var(--color-text-on-strong);
}
.ui-button-small {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-md);
}
.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  opacity: 0.45;
  filter: none;
  cursor: default;
}
.ui-button[aria-busy="true"]::before {
  content: "";
  width: var(--icon);
  height: var(--icon);
  border-radius: var(--radius-round);
  border: var(--line-medium) solid currentColor;
  border-right-color: transparent;
  animation: ui-spin calc(var(--motion-normal) * 4) linear infinite;
}
@keyframes ui-spin {
  to {
    transform: rotate(1turn);
  }
}
.ui-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ---- Fields ---- */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  position: relative;
}
.ui-field-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
}
.ui-field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin: 0;
}
.ui-field-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: var(--weight-medium);
  margin: 0;
}
.ui-input {
  width: 100%;
  min-width: var(--field-min);
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  border: var(--line-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-field);
}
textarea.ui-input {
  resize: vertical;
  field-sizing: content;
}
.ui-input-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ui-input.ui-neg {
  color: var(--color-negative-amount);
}
.ui-field-editable .ui-input {
  background: var(--color-editable);
  border-color: var(--color-action);
}
.ui-field-invalid .ui-input {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}
.ui-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ui-input[readonly] {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
/* Unsaved: a discreet corner flag and dot, not coloured rows (granskningslistan). */
.ui-field-unsaved .ui-field-label::after {
  content: "";
  display: inline-block;
  width: var(--dot);
  height: var(--dot);
  margin-left: var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-unsaved);
}
.ui-field-unsaved .ui-input {
  background-image: linear-gradient(225deg, var(--color-unsaved) var(--corner-flag), transparent var(--corner-flag));
}

/* Checkbox: never field width, the label sits next to the box. */
.ui-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--target-min);
  width: auto;
  cursor: pointer;
}
.ui-check input {
  width: var(--check);
  height: var(--check);
  margin: 0;
  accent-color: var(--color-action);
  flex: none;
}

/* ---- Picker ---- */
.ui-picker {
  position: relative;
}
.ui-picker-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: max(100%, var(--picker-min));
  max-width: min(90vw, calc(var(--picker-min) * 2));
  max-height: var(--picker-max-height);
  overflow: auto;
  margin: var(--space-1) 0 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--color-surface);
  border: var(--line-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}
.ui-picker-option {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  cursor: pointer;
}
.ui-picker-option b {
  font-variant-numeric: tabular-nums;
}
.ui-picker-option[aria-selected="true"] {
  font-weight: var(--weight-medium);
}
.ui-picker-option.is-active {
  background: var(--color-action-soft);
}
.ui-picker-none {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-3);
}

/* ---- Cards ---- */
.ui-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--picker-min) / 2)), 1fr));
  gap: var(--space-6);
}
.ui-card {
  background: var(--color-surface);
  border: var(--line-thin) solid var(--color-border);
  padding: var(--space-7) var(--space-7) var(--space-6);
  min-width: 0;
}
.ui-card-label {
  font-size: var(--text-xs);
  color: var(--color-text-2);
  margin: 0 0 var(--space-2);
}
.ui-card-value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ui-card-detail {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin: var(--space-3) 0 0;
}
.ui-card-hero {
  border-top: var(--line-thick) solid var(--color-action);
  border-color: var(--color-action);
}
.ui-card-hero .ui-card-value {
  font-size: var(--text-hero);
}
.ui-card-warning {
  border-top: var(--line-thick) solid var(--color-warning);
}
.ui-card-critical {
  border-top: var(--line-thick) solid var(--color-error);
}
.ui-panel {
  background: var(--color-surface);
  border: var(--line-thin) solid var(--color-border);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- Status badges ---- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  background: var(--color-surface-2);
  color: var(--color-text-2);
}
.ui-badge::before {
  content: "";
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--radius-round);
  background: currentColor;
}
.ui-badge-info {
  background: var(--color-action-soft);
  color: var(--color-action);
}
.ui-badge-positive {
  background: var(--color-positive-soft);
  color: var(--color-positive-text);
}
.ui-badge-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}
.ui-badge-critical {
  background: var(--color-error-soft);
  color: var(--color-error);
}

/* ---- Messages and empty states ---- */
.ui-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-7);
  border-left: var(--line-thick) solid var(--color-action);
  background: var(--color-action-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.ui-message p {
  margin: 0;
}
.ui-message-positive {
  border-color: var(--color-positive);
  background: var(--color-positive-soft);
}
.ui-message-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}
.ui-message-critical {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-11) var(--space-7);
  text-align: center;
  border: var(--line-thin) dashed var(--color-border);
  color: var(--color-text-2);
}
.ui-empty p {
  margin: 0;
}

/* Where touch does not suit, for example exact measuring in a drawing or a very wide table, the view says so briefly
   (granskningslistan, Björn 10/10). Shown only on a touch screen, whose primary pointer is coarse; preview shows it on
   every screen, for the catalogue and the export only. */
.ui-touch-note {
  display: none;
  margin: 0;
  padding: var(--space-3) var(--space-6);
  border-left: var(--line-thick) solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  color: var(--color-text-2);
}
.ui-touch-note-preview {
  display: block;
}
@media (pointer: coarse) {
  .ui-touch-note {
    display: block;
  }
}

/* ---- Hover ---- */
/* Hover only adds emphasis where there is a mouse; nothing is reached only by hovering (granskningslistan). On a touch
   screen a hover state stays after the tap, so it is left out there. */
@media (hover: hover) {
  .ui-button:hover {
    filter: brightness(1.06);
  }
  .ui-button:disabled:hover,
  .ui-button[aria-disabled="true"]:hover {
    filter: none;
  }
  .ui-band-menu a:hover {
    color: var(--color-band-text);
  }
  .ui-table tbody tr:hover td {
    background: var(--color-surface-2);
  }
}

/* ---- Dialog ---- */
.ui-dialog {
  width: min(90vw, var(--dialog-max));
  padding: 0;
  border: var(--line-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}
.ui-dialog::backdrop {
  background: var(--color-overlay);
}
.ui-dialog-body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.ui-dialog-body p {
  margin: 0;
}
.ui-dialog .ui-actions {
  justify-content: flex-end;
}

/* ---- Tables ---- */
/* The header row follows when scrolling (sticky), so the table is never inside a box that scrolls sideways.
   Headers may wrap, amounts and dates may not. */
.ui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-md);
  background: var(--color-surface);
}
.ui-table caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  padding-bottom: var(--space-5);
}
.ui-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  text-align: left;
  vertical-align: bottom;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-3);
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  border-bottom: var(--line-medium) solid var(--color-border-strong);
}
.ui-table th.ui-num {
  text-align: right;
  white-space: normal;
}
.ui-table td {
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  border-bottom: var(--line-thin) solid var(--color-border-soft);
  vertical-align: middle;
}
.ui-table td:first-child,
.ui-table th:first-child {
  padding-left: var(--space-4);
}
.ui-table td.ui-text-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* A short text that keeps to one line in a narrow column, such as "Med oss" (1a.4). */
.ui-table td.ui-nowrap {
  white-space: nowrap;
}
/* A link alone in a cell fills the cell's height, so that it is a tap target of --target-min (T2.7): the row then
   opens with a finger also where the text is short. The cell's air moves into the link, so that a name that wraps
   keeps its distance to the lines. A cell with more than one link keeps them as text. */
.ui-table td > a:only-child {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  min-width: var(--target-min);
  margin: calc(-1 * var(--space-4)) 0;
  padding: var(--space-4) 0;
}
.ui-table td.ui-num > a:only-child {
  justify-content: flex-end;
}
.ui-table .ui-row-group td {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  padding-top: var(--space-7);
  border-bottom-color: var(--color-border);
}
.ui-table tfoot td {
  font-weight: var(--weight-bold);
  border-top: var(--line-thin) solid var(--color-border-strong);
  border-bottom: 0;
}
.ui-table tfoot .ui-row-total td {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  border-top-width: var(--line-medium);
}
.ui-table .ui-row-subtotal td {
  font-weight: var(--weight-bold);
  border-bottom: var(--line-thin) solid var(--color-border-strong);
}
.ui-table .ui-col-reference {
  color: var(--color-text-3);
}
.ui-table .ui-cell-editable {
  background: var(--color-editable);
}
/* A field in a cell keeps the tap target's height: the heavy views are edited with a finger on an iPad (T2.7). */
.ui-table .ui-cell-editable .ui-input {
  padding: var(--space-1) var(--space-3);
}
/* A cell with a field has no air of its own above and below, so that the row is the field's height. */
.ui-table td.ui-cell-field {
  padding-top: 0;
  padding-bottom: 0;
}

/* Mobile: the table becomes cards in the same order as the list. */
@media (max-width: 599px) {
  .ui-table,
  .ui-table tbody,
  .ui-table tfoot,
  .ui-table tr,
  .ui-table td {
    display: block;
  }
  .ui-table thead {
    display: none;
  }
  .ui-table tr {
    border-bottom: var(--line-thin) solid var(--color-border);
    padding: var(--space-4) 0;
  }
  .ui-table td,
  .ui-table td:first-child {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    border: 0;
    padding: var(--space-1) var(--space-4);
    overflow-wrap: anywhere;
  }
  .ui-table td::before {
    content: attr(data-label);
    color: var(--color-text-3);
    font-size: var(--text-xs);
    text-align: left;
    flex: 0 0 auto; /* the label keeps its width beside a long value, which wraps instead */
    max-width: 45%;
  }
  .ui-table td:first-child::before {
    content: none;
  }
  .ui-table td > a:only-child {
    margin: calc(-1 * var(--space-1)) 0;
    padding: var(--space-1) 0;
  }
  .ui-table td.ui-cell-field {
    align-items: center;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .ui-table caption {
    display: block;
  }
  .ui-table td:empty,
  .ui-table tfoot td:not(:first-child, .ui-num) {
    display: none;
  }
  .ui-table tfoot td,
  .ui-table tfoot .ui-row-total td {
    border: 0;
  }
  .ui-table tfoot tr {
    border-top: var(--line-medium) solid var(--color-border-strong);
    border-bottom: 0;
  }
}

/* A table that works out its lines while one types (calc, 1c.0) has a field in most columns: below iPad landscape it
   becomes cards as every table does on mobile, so that its fields keep their width on an iPad held upright. Every
   field has its label, also the first. */
@media (max-width: 1179px) {
  .ui-table[data-calc],
  .ui-table[data-calc] tbody,
  .ui-table[data-calc] tfoot,
  .ui-table[data-calc] tr,
  .ui-table[data-calc] td {
    display: block;
  }
  .ui-table[data-calc] thead {
    display: none;
  }
  .ui-table[data-calc] tr {
    border-bottom: var(--line-thin) solid var(--color-border);
    padding: var(--space-4) 0;
  }
  .ui-table[data-calc] td,
  .ui-table[data-calc] td:first-child {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    border: 0;
    padding: var(--space-1) var(--space-4);
    overflow-wrap: anywhere;
  }
  .ui-table[data-calc] td::before {
    content: attr(data-label);
    color: var(--color-text-3);
    font-size: var(--text-xs);
    text-align: left;
    flex: 0 0 auto;
    max-width: 45%;
  }
  .ui-table[data-calc] tfoot td:first-child::before {
    content: none;
  }
  .ui-table[data-calc] td.ui-cell-field {
    align-items: center;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .ui-table[data-calc] caption {
    display: block;
  }
  .ui-table[data-calc] td:empty,
  .ui-table[data-calc] tfoot td:not(:first-child, .ui-num) {
    display: none;
  }
  .ui-table[data-calc] tfoot td {
    border: 0;
  }
  .ui-table[data-calc] tfoot tr {
    border-top: var(--line-medium) solid var(--color-border-strong);
    border-bottom: 0;
  }
}

/* ---- Charts ---- */
/* Drawn as SVG on the server (apps/printing/charts.py), with the chart colours in a fixed order. */
.ui-chart-figure {
  margin: 0;
  background: var(--color-surface);
  border: var(--line-thin) solid var(--color-border);
  padding: var(--space-7);
}
.ui-chart-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4) var(--space-7);
  margin-bottom: var(--space-4);
}
.ui-chart-caption {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
}
.ui-chart-legend {
  display: flex;
  gap: var(--space-7);
  font-size: var(--text-xs);
  color: var(--color-text-2);
}
.ui-chart-key::before {
  content: "";
  display: inline-block;
  width: var(--space-5);
  height: var(--space-5);
  margin-right: var(--space-3);
  border-radius: var(--radius-sm);
}
.ui-chart-key-1::before {
  background: var(--color-chart-1);
}
.ui-chart-key-2::before {
  background: var(--color-chart-2);
}
.ui-chart {
  display: block;
  width: 100%;
  height: auto;
}
/* The drawing scales with its width, text and all, so the screen has it at three sizes and shows the one for the
   width: the text is then at least --text-2xs at every width, and a phone gets fewer month labels. */
.ui-chart-medium,
.ui-chart-narrow {
  display: none;
}
@media (max-width: 1179px) {
  .ui-chart-wide {
    display: none;
  }
  .ui-chart-medium {
    display: block;
  }
}
@media (max-width: 599px) {
  .ui-chart-medium {
    display: none;
  }
  .ui-chart-narrow {
    display: block;
  }
}

/* ---- Print ---- */
.ui-print {
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--print-text);
  padding: var(--print-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.ui-print-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-7);
  border-bottom: var(--line-medium) solid var(--color-border-strong);
  padding-bottom: var(--space-4);
}
.ui-print-head h1 {
  font-size: var(--print-heading);
}
.ui-print-meta {
  margin: 0;
  font-size: var(--print-text-small);
  color: var(--color-text-2);
  text-align: right;
}
.ui-print .ui-table th {
  position: static;
}
.ui-print-landscape {
  page: landscape;
}
.ui-signatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--picker-min)), 1fr));
  gap: var(--space-10);
  margin-top: var(--space-9);
}
.ui-signature {
  border-top: var(--line-thin) solid var(--color-border-strong);
  padding-top: var(--space-2);
  margin-top: var(--print-signature-height);
  font-size: var(--print-text-small);
  color: var(--color-text-2);
}
@media print {
  .ui-band,
  .ui-tabs,
  .ui-actions,
  .ui-theme {
    display: none;
  }
  body {
    background: var(--color-surface);
  }
  .ui-print {
    padding: 0;
  }
  .ui-table thead {
    display: table-header-group;
  }
  .ui-table tr {
    break-inside: avoid;
  }
}