:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --text: #1a1d21;
  --muted: #62697a;
  --border: #dde1e6;
  --accent: #2E5496;
  --accent-dark: #203c6d;
  --danger: #b62324;
  --danger-bg: #ffebe9;
  /* rows flagged by a highlight checkbox (e.g. "owes") */
  --alert: #b83100;
  --alert-bg: #ffd2bf;
  --tap: 44px;
  --topbar-h: 56px;
  --container-pt: 0.6rem; /* page top padding; the sticky search cancels it */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --surface: #1b1f24;
    --text: #e6e8eb;
    --muted: #9aa3b2;
    --border: #2d333b;
    --accent: #5b8def;
    --accent-dark: #3f6fd1;
    --danger: #ff6b6b;
    --danger-bg: #3a1d1d;
    --alert: #ffac85;
    --alert-bg: #5c2410;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--accent); text-decoration: none; }

h2 { font-size: 1rem; margin: 0 0 0.6rem; color: var(--muted); font-weight: 600; }

/* --- top bar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: var(--tap) 1fr auto;
  align-items: center;
  gap: 0.4rem;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 0.6rem 0;
  background: var(--accent);
  color: #fff;
}
/* Back arrow with the version under it; the right side is all buttons. */
.topbar-left { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.topbar-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: 40px;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}
.topbar-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.topbar-actions { display: flex; flex-direction: column; align-items: flex-end; }
.topbar-buttons { display: flex; align-items: center; gap: 0.2rem; }
.topbar-actions a { color: #fff; padding: 0.5rem 0.4rem; display: inline-block; }
.topbar-actions a.topbar-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 48px; padding: 0; }
.topbar-icon svg { width: 36px; height: 36px; }
button.topbar-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 48px; min-height: 0; padding: 0; border: none; background: none; color: #fff; }
.topbar-logout { margin: 0; }
.topbar-logout button {
  min-height: 36px;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: none;
  color: #fff;
  font-size: 0.9rem;
}
.topbar-logout .label { display: none; }
.topbar-logout .icon { font-size: 1.05rem; line-height: 1; }
.topbar-version { font-size: 0.65rem; opacity: 0.75; line-height: 1; white-space: nowrap; }
@media (min-width: 600px) {
  .topbar-logout .label { display: inline; }
  .topbar-logout .icon { display: none; }
}

.container { max-width: 760px; margin: 0 auto; padding: var(--container-pt) 0.8rem 6rem; }

/* --- controls --- */
input, select, textarea, button, .button {
  font: inherit;
  font-size: 16px; /* >= 16px stops iOS zooming into fields */
  color: var(--text);
}
input[type="text"], input[type="search"], input[type="password"], input[type="tel"],
input[type="email"], input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
textarea { resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  text-align: center;
}
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--danger); border-color: var(--danger); }
button.small { min-height: 34px; padding: 0.2rem 0.7rem; font-size: 14px; margin-top: 0.3rem; }
button[hidden] { display: none; }
.notice { background: var(--surface); border-left: 4px solid var(--accent); border-radius: 10px; padding: 0.6rem 0.9rem; margin: 0.5rem 0 1rem; }
.notice .error { margin-top: 0.5rem; }
.notice ul { margin: 0.3rem 0 0; }
.vcard-import { margin: 0 0 1rem; }
.vcard-hint { display: block; font-size: 14px; color: var(--muted); }
/* A value a summary list computes (item form): shown, not editable. */
input.summary-locked { background: transparent; color: var(--muted); }
.qr { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
button.link { background: none; border: none; color: var(--muted); text-decoration: underline; }

.stack { display: flex; flex-direction: column; gap: 0.8rem; }
.stack label, .item-form label { display: flex; flex-direction: column; gap: 0.3rem; color: var(--muted); font-size: 0.9rem; }
label.check { flex-direction: row; align-items: center; gap: 0.6rem; color: var(--text); font-size: 1rem; min-height: var(--tap); }
label.check input { width: 22px; height: 22px; flex-shrink: 0; }
/* A label with its select (or short input) on the right instead of below. */
.stack label.inline { flex-direction: row; align-items: center; gap: 0.8rem; color: var(--text); font-size: 1rem; }
.stack label.inline span { flex: 1; min-width: 0; }
.stack label.inline small { display: block; font-size: 0.8rem; color: var(--muted); }
.stack label.inline select { width: auto; max-width: 60%; }
.stack label.inline input { width: 5.5rem; }
/* A titled group of settings, one per row with a line between them. */
fieldset.group { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.group legend { padding: 0; margin-bottom: 0.2rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
fieldset.group > label { border-top: 1px solid var(--border); padding: 0.3rem 0; min-height: var(--tap); }
fieldset.group > label:last-child { border-bottom: 1px solid var(--border); }
.buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.buttons form { display: flex; gap: 0.5rem; margin: 0; }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem;
  margin: 0.8rem 0;
}
details > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; color: var(--accent); }
details[open] > summary { margin-bottom: 0.6rem; }

.error { color: var(--danger); background: var(--danger-bg); padding: 0.6rem 0.9rem; border-radius: 10px; }
.summary { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0.2rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.summary .total b { color: var(--text); }
.muted { color: var(--muted); }
.meta { color: var(--muted); font-size: 0.8rem; }
.empty { padding: 1rem; color: var(--muted); }
.more { text-align: center; }

/* --- search: stays visible under the top bar while scrolling --- */
.search {
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  z-index: 5;
  /* Start exactly where it will stick (right under the top bar), so it
     doesn't jump by the page's top padding when scrolling begins. */
  margin: calc(-1 * var(--container-pt)) -0.8rem 0;
  padding: calc(0.5rem + var(--container-pt)) 0.8rem 0.5rem;
  background: var(--bg);
}
.filters { margin-top: 0; }

/* --- rows --- */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.rows > li { border-bottom: 1px solid var(--border); }
.rows > li:last-child { border-bottom: none; }
.item-row { display: flex; align-items: stretch; }
.row-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.5rem 0.8rem;
  color: var(--text);
  min-width: 0;
}
.row-link:active { background: var(--bg); }
.row-text { min-width: 0; overflow-wrap: anywhere; }
.row-primary { font-weight: 600; }
.row-secondary { color: var(--muted); }
.row-count { color: var(--muted); }
.row-right { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.row-check { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.item-row.alert { background: var(--alert-bg); box-shadow: inset 5px 0 0 var(--alert); }
.item-row.dim .row-link, .grid tr.dim th, .grid tr.dim td { opacity: 0.45; }
/* Returning from an item scrolls to its row (#item-N): clear the sticky
   top bar + search, and flash the row briefly. */
.item-row, .grid tr { scroll-margin-top: calc(var(--topbar-h) + 72px + env(safe-area-inset-top)); }
.item-row:target, .grid tr:target th, .grid tr:target td { animation: back-here 1.6s ease-out; }
@keyframes back-here { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } }
.item-row.alert .row-primary, .item-row.alert .row-secondary, .item-row.alert .row-check, .item-row.alert .row-right { color: var(--alert); }
.item-row.alert .row-secondary { font-weight: 600; }
.grid tr.alert th, .grid tr.alert td { background: var(--alert-bg); color: var(--alert); font-weight: 600; }
.grid tr.alert th { box-shadow: inset 5px 0 0 var(--alert); }
.grid tr.alert th a { color: var(--alert); }
/* List settings: the columns in frames, one per tab, dragged by the
   handle (app.js). */
.hint { color: var(--muted); font-size: 0.85rem; margin: 0.3rem 0 0.8rem; }
.layout-editor { display: flex; flex-direction: column; gap: 0.8rem; }
.layout-frame { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; }
.layout-head { border-style: dashed; }
.layout-frame-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.layout-frame-title { font-weight: 600; }
.layout-frame-title small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.layout-tab-title { font-weight: 600; }
.layout-cols { list-style: none; margin: 0; padding: 0; min-height: 3rem; }
.layout-col { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.5rem 0 0; border-bottom: 1px solid var(--border); background: var(--surface); }
.layout-col:last-child { border-bottom: none; }
.drag-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  min-height: var(--tap);
  color: var(--muted);
  font-size: 1.3rem;
  cursor: grab;
  touch-action: none; /* dragging the handle moves the row, not the page */
  user-select: none;
  -webkit-user-select: none;
}
.layout-col-name { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0.45rem 0; color: var(--text); text-decoration: none; }
.layout-col-name .row-secondary { font-size: 0.8rem; color: var(--muted); }
/* The history's row: not a column, so no link or "δίπλα". */
.layout-history { box-shadow: inset 4px 0 0 var(--accent); }
.layout-history .row-primary { color: var(--accent); }
.layout-beside { flex-shrink: 0; display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.layout-beside input { width: 20px; height: 20px; }
.layout-col.dragging { position: relative; z-index: 5; opacity: 0.9; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); outline: 2px solid var(--accent); }
.layout-col.dragging .drag-handle { cursor: grabbing; }
.layout-editor.is-dragging .layout-cols { background: color-mix(in srgb, var(--accent) 6%, transparent); }
body.dragging-col { user-select: none; -webkit-user-select: none; }

.move { display: flex; align-items: center; gap: 0.2rem; padding-right: 0.4rem; margin: 0; }
.move button { min-height: 36px; padding: 0 0.6rem; }

/* Bulk change: a checkbox per row and a bar at the bottom. */
.bulk-toggle { margin: 0 0 0.4rem; text-align: right; font-size: 0.95rem; }
.row-select { display: flex; align-items: center; justify-content: center; width: var(--tap); flex: none; }
td.row-select, th.row-select { display: table-cell; width: 2.2rem; text-align: center; }
.row-select input { width: 22px; height: 22px; margin: 0; }
.bulk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.bulk-bar select { flex: 1 1 8rem; width: auto; }
.bulk-bar .check { margin: 0; }
.bulk-count { color: var(--muted); font-size: 0.95rem; }
.bulk-items { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.fab {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 2rem;
  line-height: 58px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* --- table view --- */
.container:has(.table-wrap) { max-width: none; }
.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 190px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.grid { border-collapse: separate; border-spacing: 0; font-size: 0.95rem; }
.grid th, .grid td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
}
.grid tbody th, .grid thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  border-right: 1px solid var(--border);
  font-weight: 600;
}
.grid thead th:first-child { z-index: 3; background: var(--bg); }
.grid tbody th a { color: var(--text); }
.grid tbody tr:last-child th, .grid tbody tr:last-child td { border-bottom: none; }

/* --- item page --- */
.fields { margin: 0.4rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.field { margin: 0; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border); }
.field:last-child { border-bottom: none; }
.field dt { color: var(--muted); font-size: 0.8rem; }
/* A line of fields side by side (Column.SameLine), wrapping when they
   don't fit. On the item page the fields share the line equally, but a
   field never gets narrower than its longest word (no break mid-word):
   the next field goes to the next line instead. The form's inputs need
   9rem each. */
.field-line { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.field-line:last-child { border-bottom: none; }
.field-line > .field { flex: 1 1 6.5rem; max-width: 100%; border-bottom: none; }
.field-line > .field dd { overflow-wrap: break-word; }
.item-form .field-line { border: 0; gap: 0.9rem 0.8rem; }
.item-form .field-line > * { flex: 1 1 9rem; min-width: 0; }

/* Tabs (Column.TabTitle): app.js shows the bar and one panel at a time.
   Without it every panel shows, under its heading. */
.tab-bar { display: flex; gap: 0.3rem; margin: 0.6rem 0 0.2rem; border-bottom: 1px solid var(--border); }
.tab-bar button {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  padding: 0.4rem 0.3rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.2;
}
/* hidden until app.js sets it up */
.tab-bar[hidden] { display: none; }
.tab-bar button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-bar button.has-hint::after { content: " •"; color: var(--alert); }
.tab-heading { margin: 1rem 0 0.2rem; font-size: 1rem; color: var(--muted); }
.tabbed .tab-heading { display: none; }
.tabbed .tab-panel[hidden] { display: none; }
.item-form .tab-panel { display: flex; flex-direction: column; gap: 0.9rem; }
.item-form .tabbed .tab-panel { padding-top: 0.6rem; }

.field dd { margin: 0.1rem 0 0; overflow-wrap: anywhere; }
.note { white-space: pre-wrap; overflow-wrap: anywhere; } /* long lines (history) wrap */
.field.alert { background: var(--alert-bg); box-shadow: inset 5px 0 0 var(--alert); }
.field.alert dt, .field.alert dd { color: var(--alert); font-weight: 600; }
.item-actions { margin: 1rem 0; }

.item-form { display: flex; flex-direction: column; gap: 0.9rem; }
.item-form .hidden-col { opacity: 0.75; }

/* dropdown with search (choice columns) */
.combo { position: relative; display: block; }
.combo .combo-input { padding-right: var(--tap); }
.combo-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
}
.combo-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 50vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  color: var(--text);
  font-size: 1rem;
}
.combo-list li { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.combo-list li:last-child { border-bottom: none; }
.combo-list li:active, .combo-list li:hover { background: var(--bg); }
.combo-list .combo-more { color: var(--muted); font-size: 0.85rem; cursor: default; }
.sticky-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

.danger-zone { border-color: var(--danger); }

/* --- login --- */
.login-box {
  max-width: 360px;
  margin: 12vh auto 0;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.login-box h1 { margin-top: 0; color: var(--accent); text-align: center; }
.login-box form { display: flex; flex-direction: column; gap: 1rem; }
.login-box label { display: flex; flex-direction: column; gap: 0.3rem; color: var(--muted); font-size: 0.9rem; }

@media (min-width: 700px) {
  :root { --container-pt: 1rem; }
}

/* --- letter index bar (list setting): fixed on the right, between the
   sticky search and the + button --- */
.alpha-index {
  position: fixed;
  z-index: 6;
  right: env(safe-area-inset-right);
  top: calc(var(--topbar-h) + 64px + env(safe-area-inset-top));
  bottom: calc(5.2rem + env(safe-area-inset-bottom));
  width: 26px;
  display: flex;
  flex-direction: column;
  touch-action: none; /* dragging along it picks letters, not scrolls */
  user-select: none;
  -webkit-user-select: none;
}
.alpha-index a, .alpha-index span {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(8px, 1.6vh, 12px);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.alpha-index .none { color: var(--muted); opacity: 0.5; font-weight: 400; }
.alpha-index .active { background: var(--accent); color: #fff; border-radius: 4px; opacity: 1; }
/* keep row contents clear of the bar */
.container:has(.alpha-index) .row-link { padding-right: 30px; }
.container:has(.alpha-index) .table-wrap { margin-right: 26px; }

/* --- "unsaved changes" prompt on settings pages (app.js) --- */
dialog.unsaved {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 1rem;
  width: min(22rem, calc(100vw - 32px));
}
dialog.unsaved::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog.unsaved p { margin: 0 0 1rem; }
dialog.unsaved .buttons { flex-direction: column; align-items: stretch; }

/* --- history on an item page: the linked list's items for this one --- */
.history { margin: 0.8rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.6rem 0.5rem 0.9rem; }
.history-head h2 { margin: 0; font-size: 1rem; }
.history-total { margin-left: auto; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.history-total b { color: var(--text); }
.history-head .button { min-height: 36px; padding: 0.2rem 0.9rem; font-size: 15px; }
.history > .muted { margin: 0; padding: 0 0.9rem 0.7rem; }
.history-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.history-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 0.75rem; padding: 0.3rem 0.5rem; border-top: 1px solid var(--border); }
.history-table td { border-top: 1px solid var(--border); vertical-align: top; }
/* Every cell links to the item, so the whole row is one tap target. */
.history-table td a { display: block; padding: 0.5rem; min-height: 2.2rem; color: inherit; text-decoration: none; overflow-wrap: break-word; }
.history-table th:first-child, .history-table td:first-child a { padding-left: 0.9rem; white-space: nowrap; }
/* Dates, numbers and texts (e.g. the treatment) take only the room they
   need, so they sit close together; a text longer than 9rem ends in "…"
   (its full text is the cell's title). Notes take the rest of the width,
   in small type, up to three lines; tapping one opens it in full at the
   normal size (app.js), tapping again folds it. */
.history-table td.hist-date, .history-table td.hist-num, .history-table td.hist-text { width: 1%; }
.history-table .hist-date a, .history-table .hist-num a { white-space: nowrap; }
.history-table td.hist-date a, .history-table td.hist-text a, .history-table td.hist-num a { padding-left: 0.35rem; padding-right: 0.35rem; }
.history-table td.hist-date:first-child a { padding-left: 0.9rem; }
.history-table .hist-num, .history-table .hist-num a { text-align: right; }
.history-table .hist-text a { max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-table .hist-note a { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.hist-note-text {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--muted);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.history-table .hist-note a.open, .hist-note-row a.open { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* A day with several items: one summary row, tapped to unfold the day's
   own rows (app.js). */
.history-table tr.hist-sum { cursor: pointer; }
.history-table tr.hist-sum a { font-weight: 600; }
.history-table tr.hist-sum .hist-text a { white-space: normal; } /* "Θεραπεία Α + Θεραπεία Β" wraps rather than ends in "…" */
.hist-sum-mark { display: inline-block; width: 0.9em; color: var(--accent); transition: transform 0.15s; }
.hist-sum[aria-expanded="true"] .hist-sum-mark { transform: rotate(90deg); }
.hist-count { display: inline-block; min-width: 1.3em; padding: 0 0.3em; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.7rem; text-align: center; vertical-align: 0.1em; }
.history-table tr.hist-detail td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.history-table tr.hist-detail td:first-child a { padding-left: 1.8rem; }
.history-table tr[hidden] { display: none; }

/* On a narrow screen a notes column would get ~100px: the notes go on a
   line of their own under their row, the table's full width. */
.hist-note-row { display: none; }
.hist-note-row td { border-top: none; }
.hist-note-row a { padding: 0 0.5rem 0.45rem 0.9rem; min-height: 0; }
@media (max-width: 560px) {
  .history-table .hist-note { display: none; }
  .hist-note-row { display: table-row; }
  .history-table tr:has(+ .hist-note-row) a { padding-bottom: 0.2rem; min-height: 0; }
}
.hist-note a.open .hist-note-text, .hist-note-row a.open .hist-note-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

/* A link column's search box while its text doesn't match the chosen item. */
.combo-input.combo-invalid { border-color: var(--alert); }

/* --- hidden financial values (the top bar's button, app.js/early.js) ---
   Every value of a financial column is marked .fin; hidden, it shows as
   dots. A row red only because of a financial checkbox (e.g. "owes") is
   marked .fin-alert and loses its red, and such ticks (.fin-check) go. */
.fin-toggle .fin-slash { display: none; }
/* It takes a 1 second press (app.js): the button fills up meanwhile; a
   short tap shakes it. No text selection or iOS callout on the press. */
.fin-toggle {
  position: relative;
  border-radius: 50%;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.fin-toggle::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  pointer-events: none;
}
.fin-toggle.holding::after { transform: scale(1); transition: transform 1s linear; }
.fin-toggle.shake { animation: fin-shake 0.3s; }
@keyframes fin-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .fin-toggle.shake { animation: none; } }
.hide-fin .fin-toggle .fin-slash { display: inline; }
.hide-fin .fin { font-size: 0 !important; }
.hide-fin .fin::before { content: "•••"; font-size: 0.9rem; letter-spacing: 0.1em; color: var(--muted); font-weight: 400; }
.hide-fin .fin-check { display: none; }
.hide-fin .item-row.fin-alert, .hide-fin .field.fin-alert { background: none; box-shadow: none; }
.hide-fin .item-row.fin-alert .row-primary, .hide-fin .field.fin-alert dd { color: var(--text); }
.hide-fin .item-row.fin-alert .row-secondary, .hide-fin .field.fin-alert dt { color: var(--muted); font-weight: 400; }
.hide-fin .item-row.fin-alert .row-right { color: var(--text); }
.hide-fin .item-row.fin-alert .row-check { color: var(--muted); }
.hide-fin .field.fin-alert dd { font-weight: 400; }
.hide-fin .grid tr.fin-alert th, .hide-fin .grid tr.fin-alert td { background: var(--surface); color: var(--text); box-shadow: none; }
.hide-fin .grid tr.fin-alert td { font-weight: 400; }
.hide-fin .grid tr.fin-alert th a { color: var(--text); }

/* --- notes written in on the page (Column.InlineEdit), autosaved --- */
.note-edit { margin-top: 0.15rem; }
.note-box { position: relative; }
.note-box textarea { display: block; min-height: 4.5rem; padding-right: 2.9rem; line-height: 1.4; resize: none; overflow: hidden; }
/* The calendar button adds today's date on a new line (app.js). */
.note-date {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--accent);
}
.note-date svg { width: 26px; height: 26px; }
.note-date:active { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.note-bar { display: flex; align-items: center; gap: 0.5rem; min-height: 1.4rem; margin-top: 0.2rem; }
.autosave-status { margin-right: auto; font-size: 0.8rem; color: var(--muted); }
.autosave-status.ok { color: var(--accent); }
.autosave-status.err { color: var(--danger); }
.note-bar button.small { min-height: 32px; padding: 0.1rem 0.7rem; font-size: 0.85rem; }
.note-add { color: var(--muted); opacity: 0.7; font-size: 0.8rem; }
.history-table .note-form { padding: 0.3rem 0.5rem 0.5rem; }
/* On the item page the masked text shows only while amounts are hidden. */
.note-edit .note-view { display: none; }
.hide-fin .note-edit .note-view { display: block; }
.hide-fin .note-edit .note-form { display: none !important; }
.note-edit .note-open[hidden] { display: none; } /* ".history-table td a" would show it */
.hide-fin .note-edit .note-open[hidden] { display: block; }

/* --- the eye button (Column.Eye, app.js/early.js): columns set to it
   (e.g. receipts) are marked .eye and leave the page while hidden --- */
.eye-toggle .eye-slash { display: none; }
.hide-eye .eye-toggle .eye-slash { display: inline; }
.hide-eye .eye { display: none !important; }

/* --- a gross column: "gross (net)", the gross dimmed (store/gross.go) --- */
.gross { opacity: 0.55; }
.gross-hint { color: var(--muted); font-size: 0.8rem; }
.hist-extra { display: block; font-size: 0.8rem; color: var(--muted); }