/* ─────────────────────────────────────────────────────────────
   Doppio Books — Espresso Ledger
   Design system + product shell
   ───────────────────────────────────────────────────────────── */

:root {
  /* Ink */
  --ink: #1a1614;
  --ink-2: #3d3835;
  --ink-3: #7a736c;
  --ink-4: #a39c94;

  /* Paper */
  --paper: #fafaf8;
  --paper-2: #f0eeea;
  --paper-3: #e8e4de;
  --foam: #ffffff;

  /* Lines */
  --line: #e6e2db;
  --line-2: #d9d3ca;

  /* Brand */
  --espresso: #5c3d2e;
  --espresso-2: #8b5e45;
  --espresso-3: #a87855;
  --espresso-soft: rgba(92, 61, 46, 0.08);
  --espresso-soft-2: rgba(92, 61, 46, 0.14);
  --espresso-soft-3: rgba(92, 61, 46, 0.22);

  /* Status */
  --settle: #2f5d50;
  --settle-soft: rgba(47, 93, 80, 0.1);
  --warn: #a85a3a;
  --warn-soft: rgba(168, 90, 58, 0.1);
  --info: #4a5d73;
  --info-soft: rgba(74, 93, 115, 0.1);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(26, 22, 20, 0.04), 0 4px 14px rgba(26, 22, 20, 0.05);
  --shadow: 0 18px 50px rgba(26, 22, 20, 0.12), 0 2px 8px rgba(26, 22, 20, 0.06);
  --shadow-lg: 0 24px 64px rgba(26, 22, 20, 0.16), 0 4px 16px rgba(26, 22, 20, 0.08);

  /* Geometry */
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --side-w: 232px;

  /* Type */
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 160ms;
  --dur-slow: 220ms;

  /* OB-238: Text and buttons — Medium is the default (what ships today) */
  --chrome-fs: 14px;
  --chrome-fs-ui: 13px;
  --chrome-btn-h: 34px;
  --chrome-btn-pad-x: 14px;
  --chrome-control-h: 34px;
  --chrome-table-fs: 13px;
  --chrome-nav-fs: 13.5px;
}

/* ── Reset ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* OB-236: JS visualViewport writes --shell-h; CSS fallbacks keep desktop/SSR sane. */
  --shell-h: 100dvh;
}

html,
body {
  height: 100%;
  height: var(--shell-h, 100dvh);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--chrome-fs, 14px)/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* OB-238: Settings → Text and buttons (Small / Medium / Large) */
.app.product[data-chrome-size="small"],
html:has(.app.product[data-chrome-size="small"]) {
  --chrome-fs: 12.5px;
  --chrome-fs-ui: 12px;
  --chrome-btn-h: 28px;
  --chrome-btn-pad-x: 10px;
  --chrome-control-h: 28px;
  --chrome-table-fs: 12px;
  --chrome-nav-fs: 12.5px;
}
.app.product[data-chrome-size="large"],
html:has(.app.product[data-chrome-size="large"]) {
  --chrome-fs: 16px;
  --chrome-fs-ui: 15px;
  --chrome-btn-h: 44px;
  --chrome-btn-pad-x: 16px;
  --chrome-control-h: 44px;
  --chrome-table-fs: 14.5px;
  --chrome-nav-fs: 15px;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

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

a:hover {
  color: var(--espresso);
}

img,
svg {
  display: block;
}

svg.i {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--espresso-soft-2);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--espresso-2);
  outline-offset: 2px;
}

/* ── App shell ─────────────────────────────────────────────── */

.app {
  /* OB-236: pin to the visible viewport — 100dvh alone left a dead band on Android Chrome. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--shell-h, 100dvh);
  max-height: var(--shell-h, 100dvh);
  display: grid;
  grid-template-columns: var(--side-col, var(--side-w)) 1fr;
  min-height: 0;
  overflow: hidden;
  /* OB-239: gentle slow slide for sidebar show/hide */
  transition: grid-template-columns 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Sidebar ───────────────────────────────────────────────── */

.side {
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px 16px;
  min-height: 0;
  height: 100%;
  overflow: hidden; /* nav scrolls; foot stays pinned (OB-103) */
  z-index: 10;
  width: var(--side-w);
  max-width: var(--side-w);
  box-sizing: border-box;
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    padding 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease;
}

/* OB-239: brand + hamburger row (Tim mark at trailing edge) */
.brand-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 4px;
}
.brand-row .brand {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 4px 14px 8px;
}
.nav-burger {
  flex: 0 0 auto;
  width: var(--chrome-btn-h, 34px);
  height: var(--chrome-btn-h, 34px);
  min-height: var(--chrome-btn-h, 34px);
  padding: 0;
  margin-top: 2px;
  border-radius: 9px;
}
.nav-burger .i {
  width: 18px;
  height: 18px;
}
.nav-burger-open {
  flex: 0 0 auto;
  margin-right: 4px;
}
.nav-burger-open[hidden] {
  display: none !important;
}
.app.product.nav-collapsed {
  --side-col: 0px;
}
.app.product.nav-collapsed .side {
  transform: translateX(-105%);
  opacity: 0;
  pointer-events: none;
  border-right-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
@media (prefers-reduced-motion: reduce) {
  .app,
  .side {
    transition: none;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--espresso);
  color: #f7f1ea;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand-mark svg {
  width: 16px;
  height: 16px;
}

.brand-text strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.brand-text span {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 1px;
}

.nav-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 14px 10px 6px;
}

.nav-label:first-of-type {
  padding-top: 4px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: var(--chrome-nav-fs, 13.5px);
  font-weight: 500;
  width: 100%;
  text-align: left;
  position: relative;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-item:hover {
  background: rgba(26, 22, 20, 0.04);
  color: var(--ink);
}

.nav-item[aria-current="page"] {
  background: var(--foam);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  padding: 7px 9px;
}

.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2.5px;
  border-radius: 2px;
  background: var(--espresso);
}

.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.side-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  background: var(--paper-2);
  z-index: 2;
}

.cmd-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--foam);
  color: var(--ink-3);
  font-size: 12.5px;
  width: 100%;
  text-align: left;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cmd-trigger:hover {
  border-color: var(--line-2);
  color: var(--ink-2);
}

.cmd-trigger kbd {
  margin-left: auto;
  font: 600 11px var(--sans);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 5px;
  color: var(--ink-3);
}

.entity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 9px;
  width: 100%;
  text-align: left;
  transition: background var(--dur) var(--ease);
}

.entity:hover {
  background: rgba(26, 22, 20, 0.04);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--espresso);
  color: #f7f1ea;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.entity-meta {
  min-width: 0;
}

.entity-meta strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.entity-meta small {
  color: var(--ink-3);
  font-size: 11.5px;
}

/* ── Main ──────────────────────────────────────────────────── */

.main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--paper);
  min-width: 0;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 250, 248, 0.88);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}

.topbar-title h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.topbar-title .sub {
  color: var(--ink-3);
  font-size: 13px;
  margin-top: 2px;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.content {
  padding: 22px 28px 40px;
  overflow: auto;
  min-height: 0;
  flex: 1;
}

.panel {
  display: none;
  animation: panelIn var(--dur-slow) var(--ease);
}

.panel.active {
  display: block;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Buttons & chips ───────────────────────────────────────── */

.btn {
  height: var(--chrome-btn-h, 34px);
  min-height: var(--chrome-btn-h, 34px);
  padding: 0 var(--chrome-btn-pad-x, 14px);
  border-radius: 9px;
  font-size: var(--chrome-fs-ui, 13px);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--espresso);
  color: #f7f1ea;
}

.btn-primary:hover:not(:disabled) {
  background: var(--espresso-2);
}

.btn-soft {
  background: var(--espresso-soft);
  color: var(--espresso);
}

.btn-soft:hover:not(:disabled) {
  background: var(--espresso-soft-2);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--foam);
  border-color: var(--line-2);
}

.btn-danger {
  background: var(--warn-soft);
  color: var(--warn);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(168, 90, 58, 0.18);
}

.btn-sm {
  height: calc(var(--chrome-btn-h, 34px) - 4px);
  min-height: calc(var(--chrome-btn-h, 34px) - 4px);
  padding: 0 10px;
  font-size: calc(var(--chrome-fs-ui, 13px) - 0.5px);
  border-radius: 8px;
}

.btn-xs {
  height: calc(var(--chrome-btn-h, 34px) - 8px);
  min-height: calc(var(--chrome-btn-h, 34px) - 8px);
  padding: 0 8px;
  font-size: calc(var(--chrome-fs-ui, 13px) - 1px);
  border-radius: 7px;
}

.chip {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  background: var(--foam);
  display: inline-flex;
  align-items: center;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.chip:hover {
  color: var(--ink-2);
  border-color: var(--line-2);
}

.chip[aria-pressed="true"],
.chip.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ── Cards ─────────────────────────────────────────────────── */

.card {
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.card-hd h2 {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-hd .hint {
  color: var(--ink-3);
  font-size: 12.5px;
}

.card-hd .card-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.card-bd {
  padding: 16px;
}

.card-bd.flush {
  padding: 0;
}

/* ── Shot progress ─────────────────────────────────────────── */

.shot {
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 20px;
  align-items: center;
}

.shot-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.shot-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.shot-meta {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 4px;
}

.shot-track {
  height: 7px;
  background: var(--paper-3);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 12px;
}

.shot-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--espresso), var(--espresso-2));
  transform-origin: left center;
  transition: width 0.6s var(--ease);
}

.shot-stat {
  text-align: right;
}

.shot-stat b {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.shot-stat span {
  font-size: 12px;
  color: var(--ink-3);
}

/* ── Board layout ──────────────────────────────────────────── */

.board {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 16px;
  align-items: start;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* ── Tabs ──────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
}

.tab {
  position: relative;
  padding: 12px 12px 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}

.tab:hover {
  color: var(--ink-2);
}

.tab[aria-selected="true"] {
  color: var(--ink);
}

.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--espresso);
  border-radius: 2px 2px 0 0;
  animation: tabIn 0.2s var(--ease);
}

@keyframes tabIn {
  from {
    transform: scaleX(0.4);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ── Lists & rows ──────────────────────────────────────────── */

.list-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

.list-row:first-child {
  border-top: 0;
}

.list-row:hover {
  background: rgba(26, 22, 20, 0.018);
}

.list-row.done .row-name {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: rgba(122, 115, 108, 0.45);
}

/* Row checkbox glyph — keep scoped so it never collapses ul.check lists */
.list-row .check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: grid;
  place-items: center;
  color: transparent;
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}

.list-row.done .check {
  background: var(--settle);
  border-color: var(--settle);
  color: #fff;
}

.list-row.done .check svg {
  width: 12px;
  height: 12px;
}

.row-name {
  font-size: 13.5px;
  font-weight: 500;
}

.row-detail {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 2px;
}

.row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--espresso);
  background: var(--espresso-soft);
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: 1px;
}

/* ── Pills ─────────────────────────────────────────────────── */

.pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-3);
  white-space: nowrap;
}

.pill-warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.pill-ok {
  background: var(--settle-soft);
  color: var(--settle);
}

.pill-ready {
  background: var(--espresso-soft);
  color: var(--espresso);
}

.pill-info {
  background: var(--info-soft);
  color: var(--info);
}

/* ── Review feed ───────────────────────────────────────────── */

.review-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.review-item:first-child {
  border-top: 0;
}

.review-item:hover {
  background: rgba(26, 22, 20, 0.018);
}

.review-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.review-item p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
}

.confidence i {
  width: 48px;
  height: 4px;
  border-radius: 99px;
  background: var(--paper-3);
  display: inline-block;
  overflow: hidden;
}

.confidence i b {
  display: block;
  height: 100%;
  background: var(--settle);
  border-radius: 99px;
}

.review-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: center;
}

/* ── Stat tiles ────────────────────────────────────────────── */

.stat {
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.stat .k {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.stat .v {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.stat .v.pos {
  color: var(--settle);
}

.stat .v.neg {
  color: var(--warn);
}

.stat .d {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ── Tables ────────────────────────────────────────────────── */

.table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.data th,
table.data td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.data th {
  color: var(--ink-3);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--paper);
  position: sticky;
  top: 0;
}

table.data tr:last-child td {
  border-bottom: 0;
}

table.data tr:hover td {
  background: rgba(26, 22, 20, 0.018);
}

table.data td.num,
table.data th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.data td.muted {
  color: var(--ink-3);
}

/* ── Forms ─────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label,
.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.field .hint {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 400;
}

.field input,
.field textarea,
.field select,
.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--foam);
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-width: 0;
}

.field textarea,
.textarea {
  min-height: 88px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--espresso-2);
  box-shadow: 0 0 0 3px var(--espresso-soft);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.compose {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--foam);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 16px;
  display: none;
}

.compose.open {
  display: block;
  animation: panelIn var(--dur-slow) var(--ease);
}

.compose-hd {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.compose-hd h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.compose-hd p {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12.5px;
  max-width: 36rem;
}

.compose-bd {
  padding: 16px 18px 18px;
}

.sec {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(26, 22, 20, 0.02);
}

.sec:last-child {
  margin-bottom: 0;
}

.sec-title {
  font: 600 11px var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--espresso);
  margin: 0 0 10px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}

.toolbar .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
}

.empty strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* ── Choice cards ──────────────────────────────────────────── */

.choices {
  display: grid;
  gap: 8px;
}

.choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  text-align: left;
  width: 100%;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.choice:hover {
  border-color: var(--line-2);
  background: rgba(26, 22, 20, 0.015);
}

.choice[aria-checked="true"] {
  border-color: var(--espresso);
  background: var(--espresso-soft);
  box-shadow: 0 0 0 1px var(--espresso);
}

.choice-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.choice[aria-checked="true"] .choice-radio {
  border-color: var(--espresso);
  background: var(--espresso);
}

.choice[aria-checked="true"] .choice-radio::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f7f1ea;
}

.choice strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}

.choice span {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
  font-weight: 400;
}

.choice-tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--settle);
  color: #fff;
  display: none;
  place-items: center;
}

.choice[aria-checked="true"] .choice-tick {
  display: grid;
}

.choice-tick svg {
  width: 11px;
  height: 11px;
}

/* ── Modal ─────────────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 20, 0.34);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: min(560px, 100%);
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}

.scrim.open .modal {
  transform: none;
  opacity: 1;
}

.modal-hd {
  padding: 18px 20px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-hd h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.modal-hd p {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-3);
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  flex-shrink: 0;
}

.icon-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.modal .tabs {
  padding: 0 12px;
}

.modal-bd {
  padding: 16px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-ft {
  padding: 12px 20px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Command palette ───────────────────────────────────────── */

.palette-scrim {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 20, 0.28);
  z-index: 50;
  display: none;
  place-items: start center;
  padding: 14vh 16px 16px;
}

.palette-scrim.open {
  display: grid;
}

.palette {
  width: min(520px, 100%);
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop 0.18s var(--ease);
}

@keyframes pop {
  from {
    transform: translateY(-6px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.palette input {
  width: 100%;
  border: 0;
  outline: none;
  padding: 14px 16px;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.palette ul {
  padding: 8px;
  max-height: 320px;
  overflow: auto;
}

.palette li,
.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.palette li:hover,
.palette li.active,
.palette-item:hover,
.palette-item.active {
  background: var(--espresso-soft);
  color: var(--espresso);
}

.palette li small,
.palette-item small {
  margin-left: auto;
  color: var(--ink-4);
  font-size: 11.5px;
  font-weight: 500;
}

.palette li[hidden],
.palette-item[hidden] {
  display: none !important;
}

/* ── Toast ─────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: var(--ink);
  color: #f7f1ea;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 60;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: none;
}

/* ── Exception cards (Instruments queue) ───────────────────── */

.exception {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.exception:first-child {
  border-top: 0;
}

.exception-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-4);
}

.exception-dot.warn {
  background: var(--warn);
}

.exception-dot.ready {
  background: var(--espresso-2);
}

.exception-dot.ok {
  background: var(--settle);
}

.exception strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}

.exception small {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
  margin-top: 2px;
}

/* ── Statement / report chrome ─────────────────────────────── */

.stmt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}

.stmt-meta b {
  color: var(--ink);
  font-weight: 600;
}

.money {
  font-variant-numeric: tabular-nums;
}

.flow-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--ink-3);
}

.flow-strip span {
  opacity: 0.45;
}

.flow-strip b {
  color: var(--ink);
  font-weight: 600;
}

.flow-strip .now {
  color: var(--espresso);
  font-weight: 700;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .board {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Phone / Fold-cover / normal Android — see phone shell block at file end.
   Intermediate Fold-open / tablet styles also live there.
   Do not flatten the sidebar into a clipped horizontal strip here. */

@media (max-width: 860px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .shot {
    grid-template-columns: 1fr;
  }

  .shot-stat {
    text-align: left;
  }

  .topbar,
  .content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   Product pages — books shell, login, forms, wiki explainers
   Shared design system for every Doppio Books HTML surface.
   ═══════════════════════════════════════════════════════════ */

body.page-login {
  overflow: auto;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(92, 61, 46, 0.10), transparent 55%),
    radial-gradient(720px 480px at 100% 110%, rgba(47, 93, 80, 0.08), transparent 50%),
    linear-gradient(165deg, #f7f4ef 0%, var(--paper) 45%, #f3efe8 100%);
}

.login-card {
  width: min(400px, 100%);
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: 32px 32px 28px;
  animation: panelIn var(--dur-slow) var(--ease);
}

.login-card .brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.login-card .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.login-card .brand-mark svg {
  width: 24px;
  height: 24px;
}

.login-card h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.login-card .lede {
  margin: 6px 0 22px;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.45;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}

.login-card input {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 11px 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.login-card input:focus {
  outline: none;
  border-color: var(--espresso-2);
  box-shadow: 0 0 0 3px var(--espresso-soft);
  background: var(--foam);
}

.login-card .btn {
  width: 100%;
  margin-top: 6px;
  height: 40px;
}

.login-card .err {
  min-height: 1.2em;
  margin: 12px 0 0;
  color: var(--warn);
  font-size: 13px;
  white-space: pre-wrap;
}

.login-card .foot {
  margin: 18px 0 0;
  font-size: 11.5px;
  color: var(--ink-4);
}

/* ── Product shell tweaks ─────────────────────────────────── */

.app.product .content {
  padding-bottom: 48px;
}

/* OB-133/134 — content measure + denser list tables */
.app.product .panel {
  width: 100%;
  max-width: 68rem;
}
.app.product .panel.content-wide,
.app.product #panel-reports {
  max-width: 80rem;
}
/* OB-151: VAT / Corporate tax stay on the 68rem measure (was wrongly 80rem). */

.toolbar-end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

/* OB-237: list search + Hide filters / Refresh share one control height */
.toolbar-end .list-search {
  flex: 1 1 12rem;
  min-width: 10rem;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}
.toolbar-end .list-search input {
  height: var(--chrome-control-h, 34px);
  min-height: var(--chrome-control-h, 34px);
  box-sizing: border-box;
  padding: 0 12px;
  line-height: 1.2;
  width: 100%;
  font-size: var(--chrome-fs-ui, 13px);
}
.toolbar-end > .btn {
  height: var(--chrome-control-h, 34px);
  min-height: var(--chrome-control-h, 34px);
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* OB-237: Statements — filters vs report buttons on separate rows */
.stmt-controls {
  align-items: end;
  margin-bottom: 10px;
}
.stmt-controls .check-inline {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-bottom: 8px;
  white-space: nowrap;
}
.stmt-actions {
  margin: 0 0 14px;
  justify-content: flex-start;
}
.stmt-actions .actions {
  flex-wrap: wrap;
  gap: 8px;
}
.stmt-actions .more-menu {
  display: inline-flex;
  align-items: center;
}

.app.product .filters.filters-open {
  display: flex;
}

.app.product .list-table {
  table-layout: fixed;
  width: 100%;
}
.app.product .list-table th,
.app.product .list-table td {
  vertical-align: middle;
  padding: 8px 8px;
}
.app.product .list-table .col-check { width: 2.25rem; }
.app.product .list-table .col-num { width: 10.5rem; }
.app.product .list-table .col-type { width: 6.5rem; }
.app.product .list-table .col-status { width: 5.75rem; }
.app.product .list-table .col-entity { width: 4.25rem; }
.app.product .list-table .col-party { width: auto; min-width: 8rem; }
.app.product .list-table .col-date {
  width: 6.75rem;
  min-width: 6.5rem;
  white-space: nowrap;
}
.app.product .list-table th.col-date,
.app.product .list-table th.col-party {
  overflow: hidden;
  text-overflow: ellipsis;
}
.app.product .list-table .col-amt {
  width: 7.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.app.product .list-table th.col-amt { text-align: right; }
.app.product .list-table .col-journal { width: 6rem; }
.app.product .list-table .col-actions {
  width: 16.5rem;
  text-align: right;
}
/* OB-148 · OB-149 · OB-153 · OB-154 · OB-155 · OB-156 · OB-157 · OB-158 · OB-159 · OB-160 · OB-161 · OB-162 · OB-163 · OB-164 · OB-165 — primary + More */
/* OB-161: Instruments overdue AR/AP deep-link into Sales/Purchases Overdue filter */
/* OB-162: expense Approve & Post; Instruments expense_to_post deep-link */
/* OB-163: Customers/Suppliers/PO/Payroll list filters + human wording sweep */
/* OB-164: Instruments expense_to_settle → Expenses Posted / Settle */
/* OB-165: PO/Payroll/Structure More menus; Structure/Cashflow filters */
/* OB-166: Instruments pay_run_to_post; Documents search/status filters */
/* OB-167: Customer/Supplier/Employee More; Settings template/CC search; FTA wording */
/* OB-168: Statements More; expense/bank Settings search; human period label */
/* OB-169: Create / Cmd-K / phone parity — parties, payroll, ops panels */
/* OB-170: Scan invoice Create/Cmd-K/phone + Supplier wording sweep */
/* OB-171: Instruments entity filter; AP/bank suggested More; queue entity_id */
/* OB-172: Queue overdue/expense/payrun per entity; ledger Open + More */
/* OB-173: Periods Use primary; Close/Lock/Unlock under More */
/* OB-174: Bank unmatched Allocate full primary; Post cash under More */
/* OB-175: Human dates in CN/SCN/SDN/DN preceding selects + Receive/Pay alloc */
/* OB-176: Human dates in bank Match candidates + VAT window toasts */
/* OB-177: Bills wording (not Purchase invoice) across nav / lists / checklist */
/* OB-178: Open document toast — posted to ledger (no journal UUID) */
/* OB-179: E-invoice download uses document number (not UUID / pint-) */
/* OB-180: Human error/toast wording (period, TB, trust, admin, export) */
/* OB-181: Design comps drop Art. 59; Post updates the ledger */
/* OB-182: Filter/bank label human wording (Paid, Supplier credit, Account) */
/* OB-183: Trust audit chain; Trial balance CSV; Match options; Supplier debit */
/* OB-184: Admin create workspace wording (not tenant / slug) */
/* OB-185: Settings Chart of accounts (not CoA) + Verify audit chain */
/* OB-186: Outstanding (not Open AR/AP); Refresh scans */
/* OB-187: Credit/debit compose hints without Dr/Cr AR/AP */
/* OB-188: Pay-run lede + Prepare corporate tax (not CT / Dr-Cr) */
/* OB-189: Instruments All clear / For later (not Needs you clear / FYI) */
/* OB-190: Free-zone sales need customer tax ID (not beneficiary jargon) */
/* OB-191: Free-zone customer tax ID labels + FX rates human wording */
/* OB-192: Post with reason (not Proceed chrome) */
/* OB-193: Don’t post / purchase-order reason / Open in ledger */
/* OB-194: Scan wording + Revalue FX (not OCR / FX reval) */
/* OB-195: Soft-gate / earlier months / seller match wording */
/* OB-196: Apply to ledger + Corporate tax wording */
/* OB-197: Mark as filed / Produce pack / Lock period */
/* OB-198: Corporate tax lede + Start new run */
/* OB-155: CoA search + type filter sit in the Settings toolbar row */
/* OB-156: expense claim status pills match sales/purchase list rhythm */
/* OB-157: supplier lifecycle under More; PO / party status pills */
/* OB-158: bank unmatched Allocate full + Post cash primary; Partial/Match/Transfer under More */
/* OB-159: Receive/Pay full only primary; Partial under More; expense Copy under More */
/* OB-160: Allocate full only when alloc_full_ok; else Post cash is the primary */
.app.product #panel-sales .list-table .col-actions { width: 12rem; /* OB-159: Receive full + More */ }
.app.product #panel-purchases .list-table .col-actions { width: 12rem; /* OB-159: Pay full + More */ }
.app.product .row-more {
  position: relative;
  display: inline-block;
}
.app.product .row-more > summary {
  list-style: none;
  cursor: pointer;
}
.app.product .row-more > summary::-webkit-details-marker { display: none; }
.app.product .row-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 8.5rem;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--line-2, rgba(26,22,20,.12));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(26, 22, 20, 0.12);
}
.app.product .row-more-menu .btn {
  justify-content: flex-start;
  width: 100%;
}
.app.product #panel-purchase-orders .list-table .col-actions { width: 16rem; /* OB-141: Copy + Issue / Bill */ }
.app.product #panel-payroll .list-table .col-actions { width: 14rem; /* OB-150: Claim + Pay run / Copy + Post */ }
.app.product #panel-expenses .list-table .col-actions { width: 14rem; /* OB-156: Copy + Post / Settle */ }
.app.product #panel-ownership .list-table .col-actions { width: 12rem; /* OB-150: Transfer + Sell */ }
.app.product #panel-customers .list-table .col-actions { width: 14rem; /* OB-145: Open + Invoice + Receive */ }
.app.product #panel-suppliers .list-table .col-actions { width: 14rem; /* OB-146: Open + Bill + Pay */ }
.app.product #panel-period-close .list-table .col-actions,
.app.product #periods-table .list-table .col-actions { width: 14rem; /* OB-147: Use + Close + Lock */ }
.app.product #panel-period-close #ifrs-steps .list-table .col-actions,
.app.product #panel-period-close #cit-steps .list-table .col-actions,
.app.product #panel-vat #vat-boxes .list-table .col-actions { width: 6rem; /* OB-151: Open only */ }
.app.product #panel-purchases #ap-captures .list-table .col-actions { width: 12rem; /* OB-151: Review + Post */ }
.app.product #panel-settings .list-table .col-actions { width: 6rem; /* OB-152: Save / Remove / Use */ }
.app.product #panel-settings #coa-list .list-table .col-type { width: 8rem; }
.app.product #panel-settings #coa-list select.coa-type,
.app.product #panel-settings #coa-list select.coa-group,
.app.product #panel-settings #coa-list input.coa-name { max-width: 100%; }
.app.product #panel-customers .cust-detail-head,
.app.product #panel-suppliers .cust-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.app.product #panel-customers .cust-detail-acts,
.app.product #panel-suppliers .cust-detail-acts {
  flex-shrink: 0;
}


.app.product .list-table td.col-party {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 8rem;
}
.app.product .list-table td.col-num code {
  font-size: 12px;
  word-break: break-all;
}
.app.product td.col-actions {
  text-align: right;
}
.app.product .row-actions {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 2rem;
  width: 100%;
}
/* OB-151: pack / run lists without a Party column stay compact on wide screens */
.app.product .list-table.list-compact {
  width: auto;
  min-width: min(100%, 36rem);
  max-width: 100%;
}
.app.product .list-table.list-compact .col-party { min-width: 10rem; }
.app.product .row-actions .act-none {
  display: inline-block;
  min-width: 1.25rem;
  color: var(--ink-4);
  text-align: center;
}
.app.product #panel-banking .list-table .col-actions { width: 12rem; /* OB-174: one primary + More */ }
.app.product #panel-expenses .list-table .col-actions { width: 16rem; /* OB-142: Copy + Post / Settle */ }

.app.product .btn.btn-xs {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 7px;
}

.app.product .side-foot .entity {
  cursor: default;
}

.app.product .side-foot .entity:hover {
  background: transparent;
}

.topbar-actions .chip.on {
  pointer-events: none;
}

/* ── Compatibility: books form chrome on Espresso tokens ─── */

.btn.ghost,
.btn.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}

.btn.ghost:hover:not(:disabled),
.btn.btn-ghost:hover:not(:disabled) {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink);
}

/* Primary default for bare .btn (product forms) */
.btn:not(.ghost):not(.btn-ghost):not(.btn-soft):not(.btn-danger):not(.btn-sm):not(.btn-xs):not(.cmd-trigger) {
  background: var(--espresso);
  color: #f7f1ea;
}

.btn:not(.ghost):not(.btn-ghost):not(.btn-soft):not(.btn-danger):not(.btn-sm):not(.btn-xs):not(.cmd-trigger):hover:not(:disabled) {
  background: var(--espresso-2);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.panel-head:has(> .wiki-inline:only-of-type),
.panel-head:has(.wiki-inline):has(.sr-only) {
  margin: 0 0 10px;
}

.panel-head h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
}

.panel-head .lede,
.lede {
  margin: 0;
  color: var(--ink-3);
  font-size: 13.5px;
  max-width: 46rem;
  line-height: 1.45;
}

.flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
}

.flow span {
  opacity: 0.45;
}

.flow b {
  color: var(--ink);
  font-weight: 600;
}

.flow .now {
  color: var(--espresso);
  font-weight: 700;
}

.explain {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--espresso);
  background: var(--espresso-soft);
  border-radius: 0 var(--r) var(--r) 0;
}

.explain summary {
  cursor: pointer;
  color: var(--espresso);
  font-weight: 600;
  font-size: 12.5px;
  list-style: none;
}

.explain summary::-webkit-details-marker {
  display: none;
}

.explain .body {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.explain code {
  font-size: 11.5px;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.explain a {
  color: var(--espresso-2);
  font-weight: 500;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}

.toolbar .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* OB-098 — Banking recon lanes */
.lane-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.lane-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: 600 13px var(--sans);
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
}
.lane-tab:hover { color: var(--ink); background: var(--paper-2); }
.lane-tab.active {
  color: var(--espresso);
  background: var(--foam);
  box-shadow: inset 0 -2px 0 var(--espresso);
}
.lane-count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--paper-2);
  color: var(--ink-3);
}
.lane-tab.active .lane-count {
  background: var(--espresso-soft);
  color: var(--espresso);
}

/* OB-096 — Sales list status / search · OB-097 Purchases Art.59 / OCR */
.list-search {
  display: inline-flex;
  align-items: center;
  min-width: 12rem;
  flex: 1 1 12rem;
}
.list-search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 12px;
  font: 500 13px var(--sans);
  background: var(--foam);
  color: var(--ink);
}
.status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-3);
}
.status-pill.status-open { background: var(--warn-soft); color: var(--warn); }
.status-pill.status-overdue { background: rgba(180, 60, 50, 0.12); color: #a33; }
.status-pill.status-paid { background: rgba(80, 140, 100, 0.14); color: #2f6b48; }
.status-pill.status-credit,
.status-pill.status-debit { background: var(--espresso-soft); color: var(--espresso); }
.hint.warn { color: #a33; }
#inv-customer-typeahead { width: 100%; }
#ap-captures table { width: 100%; }
#ap-review { margin-top: 0.75rem; }

/* OB-095 — Create menu · entity switcher · phone FAB */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.entity-switcher {
  display: inline-flex;
  align-items: center;
  max-width: 11rem;
}

.entity-switcher select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background-color: var(--foam);
  color: var(--ink);
  font: 600 12px var(--sans);
  border-radius: 999px;
  padding: 6px 28px 6px 12px;
  min-width: 8.5rem;
  max-width: 100%;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.entity-switcher select:hover,
.entity-switcher select:focus {
  border-color: var(--line-2);
  outline: none;
}

.create-menu {
  position: relative;
  display: inline-block;
}

.create-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.create-menu > summary::-webkit-details-marker { display: none; }

.create-menu-list {
  position: absolute;
  z-index: 45;
  top: calc(100% + 6px);
  right: 0;
  min-width: 12.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(28, 20, 12, 0.14);
}

.create-menu-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: 500 13px var(--sans);
  cursor: pointer;
}

.create-menu-list button:hover {
  background: var(--espresso-soft);
  color: var(--espresso);
}

.cmd-trigger-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}

.cmd-trigger-compact kbd {
  font: 600 11px var(--sans);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 5px;
  color: var(--ink-3);
}

.phone-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--espresso);
  color: #f7f1ea;
  box-shadow: 0 8px 20px rgba(92, 61, 46, 0.35);
  place-items: center;
  cursor: pointer;
}

.phone-fab .i {
  width: 22px;
  height: 22px;
}

.phone-fab:hover {
  filter: brightness(1.05);
}

.phone-more-search {
  display: block;
  padding: 0 4px 12px;
}

.phone-more-search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: 500 14px var(--sans);
  background: var(--foam);
  color: var(--ink);
  min-height: 44px;
  font-size: 16px; /* avoid iOS zoom (OB-102) */
}

.queue-periods {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.queue-periods > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  list-style: none;
  padding: 6px 0;
}

.queue-periods > summary::-webkit-details-marker { display: none; }

.q-item.quiet .dot {
  background: var(--ink-4);
  opacity: 0.45;
}

@media (max-width: 700px) {
  .phone-fab {
    display: grid;
  }

  .topbar-actions .create-menu,
  .topbar-actions .cmd-trigger-compact,
  .topbar-actions .wiki-chip,
  .topbar-actions #btn-signout {
    display: none;
  }

  .topbar-title .sub {
    display: none; /* title only on phone — wiki holds the rest */
  }

  .topbar-actions {
    max-width: none;
    flex: 0 0 auto;
  }

  .entity-switcher {
    max-width: 10.5rem;
  }

  .entity-switcher select {
    font-size: 12px;
    padding: 6px 28px 6px 10px;
    max-width: 10.5rem;
  }
}

/* OB-094 — progressive disclosure helpers */
.more-menu {
  position: relative;
  display: inline-block;
}
.more-menu > summary {
  list-style: none;
  cursor: pointer;
}
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--paper, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(28, 20, 12, 0.12);
}
.more-menu-list .btn {
  justify-content: flex-start;
  width: 100%;
}
.secondary-surface {
  margin: 12px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--foam);
  padding: 0 12px;
}
.secondary-surface > summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  list-style: none;
}
.secondary-surface > summary::-webkit-details-marker { display: none; }
.secondary-surface[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.alloc-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
}
.filters.is-collapsed[hidden],
.filters[hidden] {
  display: none !important;
}
.panel-head .flow { display: none; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.filters label,
.row label,
.grid2 label,
.compose label,
.sec label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
  min-width: 9rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 10rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--espresso-2);
  box-shadow: 0 0 0 3px var(--espresso-soft);
  background: var(--foam);
}

textarea {
  min-height: 4rem;
  resize: vertical;
}

.compose {
  display: none;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--foam);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.compose.open {
  display: block;
  animation: panelIn var(--dur-slow) var(--ease);
}

.compose-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.compose-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.compose-head p {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: 12.5px;
  max-width: 36rem;
}

.compose-body {
  padding: 16px 18px 18px;
}

.sec {
  margin: 0 0 16px;
  padding: 14px 14px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

.sec:last-child {
  margin-bottom: 0;
}

.sec-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--espresso);
  margin: 0 0 10px;
}

.sec .hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: -4px 0 10px;
}

.totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  max-width: 18rem;
  margin-left: auto;
  padding: 10px 0 4px;
  font-size: 13px;
}

.totals .k {
  color: var(--ink-3);
}

.totals .v {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.totals .grand {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 4px;
}

.lines {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 10px;
}

.lines th,
.lines td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.lines input,
.lines select {
  min-width: 0;
  width: 100%;
}

ul.check,
ul.close-check {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  width: auto;
  height: auto;
  display: block;
  border: 0;
  color: inherit;
  place-items: unset;
}

ul.check li,
ul.close-check li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
}

ul.check li.ok,
ul.close-check li.ok {
  color: var(--settle);
}

ul.check li.bad,
ul.close-check li.bad {
  color: var(--warn);
}

ul.check .mark,
ul.close-check .mark {
  width: 16px;
  flex: 0 0 16px;
}

.muted {
  color: var(--ink-3);
}

.ok {
  color: var(--settle);
}

.err {
  color: var(--warn);
  white-space: pre-wrap;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
}

/* Cards used as simple content wrappers in product */
.card > h2 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  padding: 16px 16px 0;
}

.card > h2 + *,
.card > .row,
.card > .filters,
.card > table,
.card > pre,
.card > .muted,
.card > .stat-grid,
.card > .charts,
.card > .stmt-table,
.card > #queue-list,
.card > [id$="-table"],
.card > [id$="-out"],
.card > [id$="-boxes"] {
  /* keep natural flow; padding via card children */
}

.card:not(:has(.card-hd)):not(:has(.card-bd)) {
  padding: 16px 18px;
}

.card:not(:has(.card-hd)):not(:has(.card-bd)) > h2 {
  padding: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--chrome-table-fs, 13px);
}

th,
td {
  text-align: left;
  padding: 9px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  color: var(--ink-3);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Queue items */
.q-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.q-item:first-child {
  border-top: 0;
}

.q-item small {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
  margin-top: 2px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-4);
  display: inline-block;
}

.dot.amber {
  background: var(--espresso-2);
}

.dot.coral {
  background: var(--warn);
}

.dot.mint {
  background: var(--settle);
}

.doc-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--settle-soft);
  border: 1px solid rgba(47, 93, 80, 0.28);
  color: var(--settle);
  font-size: 12.5px;
  margin: 0 0 12px;
}

.money-hint {
  font-size: 11px;
  color: var(--ink-4);
}

.empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-3);
}

.empty strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Match secondary .btn.ghost — one chrome language (OB-103) */
.wiki-chip {
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.wiki-chip:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink);
}

.wiki-inline {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin: 0 0 12px;
}

.wiki-inline:hover {
  color: var(--espresso);
  border-bottom-color: var(--espresso-soft-2);
}

.panel-head:has(.wiki-inline):not(:has(h2:not(.sr-only))) {
  margin: 0 0 8px;
  min-height: 0;
}

.row-menu {
  position: relative;
  display: inline-block;
}

.row-menu > summary {
  list-style: none;
  cursor: pointer;
}

.row-menu > summary::-webkit-details-marker {
  display: none;
}

.row-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 9rem;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--foam);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row-menu-list .btn {
  width: 100%;
  justify-content: flex-start;
  height: 32px;
  min-height: 32px;
}

.btn.btn-icon {
  width: 34px;
  min-width: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.close-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.close-check-row .mark {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  text-align: center;
  font-weight: 700;
}

.close-check-row .close-check-label {
  flex: 1 1 auto;
  min-width: 0;
}

.close-check-row .btn {
  flex: 0 0 auto;
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}

ul.check li.close-check-row,
ul.close-check li.close-check-row {
  align-items: center;
}

.ownership-chart {
  position: relative;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 20%, rgba(59, 47, 47, 0.04), transparent 40%),
    var(--foam);
  overflow: hidden;
}

.own-node {
  position: absolute;
  width: 140px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: grab;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}

.own-node strong {
  font-size: 13px;
  letter-spacing: -0.02em;
}

.own-node span {
  font-size: 11px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.own-node.dragging {
  opacity: 0.7;
  cursor: grabbing;
}

.charts {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 960px) {
  .charts {
    grid-template-columns: 1fr;
  }
}

.chart-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
}

.chart-card h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.chart-card canvas {
  width: 100% !important;
  max-height: 260px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 14px;
}

@media (max-width: 860px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}

.stat .k {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat .v {
  font-size: 20px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: -0.02em;
}

.stat .v.pos {
  color: var(--settle);
}

.stat .v.neg {
  color: var(--warn);
}

.stmt-table {
  max-height: 22rem;
  overflow: auto;
}

#toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  max-width: 24rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  display: none;
  z-index: 40;
  box-shadow: var(--shadow);
  font-size: 13.5px;
}

#toast.show {
  display: block;
  animation: panelIn var(--dur) var(--ease);
}

#toast.err {
  background: var(--warn);
  color: #fff;
}

.nav-badge[hidden] {
  display: none !important;
}

.side .nav-item .nav-badge {
  margin-left: auto;
}

a.btn {
  text-decoration: none;
}

/* Brand as button in product shell */
button.brand {
  display: flex;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
}
button.brand:hover .brand-text strong {
  color: var(--espresso);
}
button.entity {
  width: 100%;
  text-align: left;
}

/* Active nav via class (product JS) — same as aria-current */
.nav-item.active {
  background: var(--espresso-soft);
  color: var(--espresso);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--espresso);
}

/* Doppio Books logo mark (MC “D” tile derivative) */
.brand-mark {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.brand-mark .logo-mark,
.brand-mark img.logo-mark {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 9px;
}
.login-card .brand-mark {
  background: transparent;
  width: 44px;
  height: 44px;
}
.login-card .brand-mark .logo-mark,
.login-card .brand-mark img.logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}


/* ═══════════════════════════════════════════════════════════
   Phone + Fold shell
   Targets:
   - Normal Android / iPhone / Fold cover: max-width 700px
     (CSS ~360–412 Android, ~390–393 iPhone, Fold cover ~350–380)
   - Fold open (e.g. Galaxy Z Fold inner): 701–1100px
     vertical slim rail, no bottom tabs
   - Desktop: >1100px unchanged
   ═══════════════════════════════════════════════════════════ */

.phone-tabs,
.phone-more {
  display: none;
}

/* —— Phone / cover / normal Android —— */
@media (max-width: 700px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app.product {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    /* OB-236: keep fixed shell; pad for bottom tabs. */
    height: var(--shell-h, 100dvh);
    max-height: var(--shell-h, 100dvh);
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  .side {
    display: none !important;
  }

  /* OB-239: phone uses bottom tabs — hide desktop hamburger reopen */
  .nav-burger-open {
    display: none !important;
  }

  .phone-tabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    min-height: 56px;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 247, 242, 0.96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .phone-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-3);
    font: 600 10px/1.1 var(--sans);
    letter-spacing: 0.01em;
    position: relative;
  }

  .phone-tab .i {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
  }

  .phone-tab span:not(.nav-badge) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .phone-tab.active,
  .phone-tab[aria-current="page"] {
    color: var(--espresso);
    background: var(--espresso-soft);
  }

  .phone-tab .phone-badge,
  .phone-tab .nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
  }

  .phone-more:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
  }

  .phone-more-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(26, 22, 20, 0.45);
  }

  .phone-more-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(78dvh, 34rem);
    overflow: auto;
    background: var(--paper);
    border-radius: 16px 16px 0 0;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(26, 22, 20, 0.18);
  }

  .phone-more-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .phone-more-head strong {
    font-size: 16px;
    letter-spacing: -0.02em;
  }

  .phone-more-section {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 10px 2px 6px;
  }

  .phone-more-section:first-of-type {
    padding-top: 0;
  }

  .phone-more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .phone-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--foam);
    color: var(--ink);
    font: 600 13px/1.2 var(--sans);
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
  }

  .phone-more-item .i {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    stroke: var(--espresso);
    fill: none;
  }

  .phone-more-item:active {
    background: var(--espresso-soft);
  }

  .main {
    min-width: 0;
    min-height: 0;
  }

  .topbar {
    padding: 10px 12px;
    gap: 8px;
    align-items: flex-start;
  }

  .topbar-title {
    min-width: 0;
    flex: 1 1 auto;
  }

  .topbar-title h1 {
    font-size: 17px;
  }

  .topbar-title .sub {
    display: none;
  }

  .topbar-actions {
    margin-left: 0;
    flex: 0 0 auto;
    gap: 6px;
    max-width: none;
    justify-content: flex-end;
  }

  .topbar-actions .chip.on {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    padding: 4px 8px;
  }

  .content {
    /* Extra bottom room for FAB + tab bar (OB-102) */
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  .lane-tab {
    min-height: 44px;
    padding: 10px 14px;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .compose-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .compose table.lines,
  .compose #inv-lines,
  .compose #cn-lines,
  .compose #dn-lines,
  .compose #bill-lines,
  .compose #recv-alloc,
  .compose #pay-alloc {
    min-width: 32rem;
  }

  .panel-head h2 {
    font-size: 1.15rem;
  }

  .panel-head .lede {
    font-size: 13px;
  }

  .flow {
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 12px;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .toolbar .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .toolbar .actions .btn,
  .toolbar > .btn {
    min-height: var(--chrome-btn-h, 44px);
    height: auto;
    padding: 10px 12px;
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .toolbar > .btn {
    grid-column: 1 / -1;
  }

  /* OB-237: search + Hide filters / Refresh one height on phone */
  .toolbar-end {
    width: 100%;
    margin-left: 0;
    gap: 8px;
  }
  .toolbar-end .list-search {
    flex: 1 1 auto;
    min-width: 0;
  }
  .toolbar-end .list-search input,
  .toolbar-end > .btn {
    height: var(--chrome-control-h, 44px);
    min-height: var(--chrome-control-h, 44px);
  }
  .stmt-controls .check-inline {
    padding-bottom: 0;
    width: auto;
  }
  .stmt-actions .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .stmt-actions .actions .btn,
  .stmt-actions .more-menu,
  .stmt-actions .more-menu > summary {
    width: 100%;
    min-height: var(--chrome-btn-h, 44px);
  }

  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filters label,
  .row label,
  .grid2 label,
  .compose label,
  .sec label {
    min-width: 0;
    width: 100%;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-width: 0;
    width: 100%;
    font-size: 16px; /* avoid iOS zoom */
    min-height: 44px;
  }

  .row {
    flex-direction: column;
    align-items: stretch;
  }

  .row .btn {
    min-height: var(--chrome-btn-h, 44px);
    height: auto;
    width: 100%;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .compose {
    border-radius: 12px;
  }

  .compose-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* OB-238: phone Medium bumps to 44px touch; Small/Large still honor chrome size */
  .app.product[data-chrome-size="medium"] {
    --chrome-btn-h: 44px;
    --chrome-control-h: 44px;
  }
  .app.product[data-chrome-size="large"] {
    --chrome-btn-h: 52px;
    --chrome-control-h: 52px;
  }

  .btn {
    min-height: var(--chrome-btn-h, 44px);
    height: auto;
    padding: 10px 14px;
  }

  .btn.ghost,
  .btn.btn-ghost,
  .btn-sm,
  .btn-xs {
    min-height: var(--chrome-btn-h, 44px);
  }

  /* Tables: swipe horizontally so Pay / actions stay reachable */
  #sales-table,
  #bills-table,
  #all-docs-table,
  #journals-table,
  #customers-list,
  #vendors-table,
  #po-list,
  #periods-table,
  #bank-unmatched,
  #bank-suggested,
  #bank-cleared,
  #ap-captures,
  #coa-list,
  #queue-list,
  #ifrs-steps,
  #cit-steps,
  #vat-boxes {
    max-width: 100%;
  }

  #sales-table,
  #bills-table,
  #all-docs-table,
  #journals-table,
  #customers-list,
  #vendors-table,
  #po-list,
  #periods-table,
  #bank-unmatched,
  #bank-suggested,
  #bank-cleared,
  #ap-captures,
  #coa-list,
  #ifrs-steps,
  #cit-steps,
  #vat-boxes {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
  }

  #sales-table table,
  #bills-table table,
  #all-docs-table table,
  #journals-table table,
  #customers-list table,
  #vendors-table table,
  #po-list table,
  #periods-table table,
  #bank-unmatched table,
  #bank-suggested table,
  #bank-cleared table,
  #ap-captures table,
  #coa-list table,
  #ifrs-steps table,
  #cit-steps table,
  #vat-boxes table {
    min-width: 36rem;
    margin: 0;
  }

  #sales-table th,
  #bills-table th,
  #all-docs-table th,
  #journals-table th,
  #customers-list th,
  #vendors-table th,
  #po-list th,
  #periods-table th,
  #bank-unmatched th,
  #bank-suggested th,
  #bank-cleared th,
  #ap-captures th,
  #coa-list th,
  #sales-table td,
  #bills-table td,
  #all-docs-table td,
  #journals-table td,
  #customers-list td,
  #vendors-table td,
  #po-list td,
  #periods-table td,
  #bank-unmatched td,
  #bank-suggested td,
  #bank-cleared td,
  #ap-captures td,
  #coa-list td {
    white-space: nowrap;
  }

  /* Keep action column visible while scrolling when possible */
  #bills-table td:last-child,
  #sales-table td:last-child,
  #journals-table td:last-child {
    position: sticky;
    right: 0;
    background: var(--paper);
    box-shadow: -6px 0 8px rgba(26, 22, 20, 0.06);
    z-index: 1;
  }

  .q-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: start;
  }

  .q-item .btn {
    grid-column: 2;
    justify-self: start;
    min-width: 5.5rem;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .charts {
    grid-template-columns: 1fr;
  }

  #toast {
    left: 12px;
    right: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }

  body.page-login {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }

  .login-card {
    width: 100%;
    max-width: 100%;
    margin: 8px 0;
  }

  .login-card .btn {
    min-height: 48px;
    width: 100%;
  }
}

/* —— Fold open / compact tablet (Z Fold inner ~701–1100 CSS px) —— */
@media (min-width: 701px) and (max-width: 1100px) {
  .phone-tabs,
  .phone-more {
    display: none !important;
  }

  .app.product {
    --side-w: 200px;
    grid-template-columns: var(--side-col, var(--side-w)) 1fr;
    /* OB-236: fixed shell + visualViewport height on fold/tablet. */
    height: var(--shell-h, 100dvh);
    max-height: var(--shell-h, 100dvh);
    overflow: hidden;
  }

  /* OB-234: party lists — fixed columns were wider than the pane, so Name/Tax reg overlapped. */
  .app.product #customers-list,
  .app.product #suppliers-host,
  .app.product #employees-list,
  .app.product #all-docs-table,
  .app.product #sales-table,
  .app.product #bills-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app.product #panel-customers .list-table,
  .app.product #panel-suppliers .list-table,
  .app.product #panel-payroll .list-table {
    min-width: 42rem;
  }
  /* OB-238: Documents / Sales / Bills — Date column must not smash into Name on fold */
  .app.product #panel-documents .list-table,
  .app.product #panel-sales .list-table,
  .app.product #panel-purchases .list-table {
    min-width: 44rem;
  }
  .app.product #panel-documents .list-table .col-date,
  .app.product #panel-sales .list-table .col-date,
  .app.product #panel-purchases .list-table .col-date {
    width: 7rem;
    min-width: 7rem;
  }
  .app.product #panel-documents .list-table th,
  .app.product #panel-documents .list-table td,
  .app.product #panel-sales .list-table th,
  .app.product #panel-sales .list-table td,
  .app.product #panel-purchases .list-table th,
  .app.product #panel-purchases .list-table td {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app.product #panel-customers .list-table .col-num,
  .app.product #panel-suppliers .list-table .col-num {
    width: 7.5rem;
  }
  .app.product #panel-customers .list-table .col-actions,
  .app.product #panel-suppliers .list-table .col-actions {
    width: 10rem;
  }
  .app.product #panel-customers .list-table th,
  .app.product #panel-customers .list-table td,
  .app.product #panel-suppliers .list-table th,
  .app.product #panel-suppliers .list-table td {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .side {
    display: flex !important;
    flex-direction: column;
    overflow: hidden; /* critical: do not scroll foot over nav (OB-103) */
    padding: 12px 10px 10px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    min-height: 0;
    height: 100%;
  }

  .brand-row {
    margin-bottom: 2px;
  }
  .brand-row .brand {
    padding: 2px 2px 8px 4px;
    flex: 1 1 auto;
  }

  .brand-text span {
    display: block;
  }

  .nav-label {
    display: block;
  }

  .nav {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
  }

  .nav-item {
    flex-direction: row;
    gap: 8px;
    font-size: 12.5px;
    padding: 8px 10px;
    min-width: 0;
    min-height: 40px;
  }

  .nav-item[aria-current="page"]::before,
  .nav-item.active::before {
    display: block;
  }

  .side-foot {
    margin-top: 0;
    padding-top: 10px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    z-index: 3;
  }

  .side-foot .cmd-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .side-foot .entity-meta strong,
  .side-foot .entity-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }

  .main {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .topbar {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: flex-start;
  }

  .topbar-title {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .topbar-title .sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .topbar-actions {
    margin-left: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 6px;
  }

  .topbar-actions .entity-switcher select {
    max-width: 9.5rem;
  }

  .topbar-actions .wiki-chip,
  .topbar-actions #btn-signout {
    height: 34px;
    min-height: 34px;
  }

  .content {
    padding: 14px 14px 28px;
    overflow: auto;
    min-height: 0;
    flex: 1;
  }

  /* OB-238: tablet Medium = 44px (what Tim sees now); Small/Large scale */
  .app.product[data-chrome-size="medium"] {
    --chrome-btn-h: 44px;
    --chrome-control-h: 44px;
  }
  .app.product[data-chrome-size="large"] {
    --chrome-btn-h: 52px;
    --chrome-control-h: 52px;
  }

  .toolbar .actions .btn,
  .btn,
  .btn.ghost,
  .btn.btn-ghost {
    min-height: var(--chrome-btn-h, 44px);
  }

  /* OB-237: tablet — search input and toolbar buttons share one height */
  .toolbar-end {
    align-items: center;
  }
  .toolbar-end .list-search input,
  .toolbar-end > .btn {
    height: var(--chrome-control-h, 44px);
    min-height: var(--chrome-control-h, 44px);
    box-sizing: border-box;
  }
  .stmt-actions .actions .btn,
  .stmt-actions .more-menu > summary {
    min-height: var(--chrome-btn-h, 44px);
  }

  #sales-table,
  #bills-table,
  #all-docs-table,
  #journals-table,
  #customers-list,
  #vendors-table,
  #po-list,
  #bank-unmatched,
  #bank-suggested,
  #bank-cleared,
  #ap-captures,
  #coa-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }
}

/* Very narrow Android (≤360) — tighten tab labels */
@media (max-width: 360px) {
  .phone-tab {
    font-size: 9px;
    padding: 4px 2px;
  }

  .phone-more-grid {
    grid-template-columns: 1fr;
  }

  .topbar-actions .wiki-chip {
    display: none;
  }
}

/* OB-199: Show packs / Pack ready / Answers advanced */
/* OB-200: Ledger Posted / Step (not Journal UUID / Process) */
/* OB-201: IFRS/CIT pack wording (not run chrome) */
/* OB-202: Statements In balance / Expenses / prior year shown */
/* OB-203: Profit & loss (not P&L abbreviation) */
/* OB-204: Profit & loss not yet closed / Run all statements */
/* OB-205: Prepare VAT return / Save step answers / Reason to skip */
/* OB-206: pack toast / prepare-first wording */
/* OB-207: Marked as filed offline */
/* OB-208: Statements sub Profit & loss (not P&L) */
/* OB-209: Corporate tax due (not CT due) */
/* OB-210: Workspace code (not Workspace ID) */
/* OB-211: IFRS pack lede + Posted to ledger */
/* OB-212: banking unmatched hint (drop cash journal candidate) */
/* OB-213: open item(s) close checklist (drop blocker jargon) */
/* OB-214: tax invoice complete / Checklist clear / e-invoice label */
/* OB-215: console Download e-invoice (parity with OB-214) */
/* OB-216: espresso AR/AP drop + corporate tax returns listed */
/* OB-217: starter chart / sign-in link (drop seed demo / token) */
/* OB-218: Posted to ledger toast (no journal id slice) */
/* OB-219: Post ledger entry (not Post journal) */
/* OB-220: Create menu Ledger entry (not Journal) */
/* OB-221: Bill from purchase order (drop PO abbreviation) */
/* OB-222: Instruments clear open items / Ask before every Post */
/* OB-223: Structure holding wording (drop edge jargon) */
/* OB-224: Save holding (drop edge button label) */
/* OB-225: Partial payment button label */
/* OB-226: Customer or supplier filter (drop Party) */
/* OB-227: CoA / Trust / Allocate full amount */
/* OB-228: Verify audit trail (parity with Trust title) */
/* OB-229: Issue and post (drop ampersand Post chrome) */
/* OB-230: party chrome / VAT return ready / Add forecast line */
/* OB-231: Workspace code error (parity with OB-210) */
/* OB-232: Supplier credit-note OCR corpus + CN/DN parse */
/* OB-233: Fix books.html JS syntax (ledger party forEach) */
/* OB-234: Shell fills 100dvh; party tables scroll on tablet */
/* OB-235: Supplier debit-note OCR corpus (type 383) */
/* OB-236: Fixed shell + visualViewport --shell-h (Android dead band) */
/* OB-237: Statements report actions + list toolbar search/button height */
/* OB-238: Documents Date column + Settings Text and buttons size */
/* OB-239: Hamburger toggles sidebar with slow slide */
/* OB-240: Cost centre report / reclass / document tagging */
/* OB-252: Zero-rated tax invoice OCR (VAT @ 0% → Z) */
/* OB-253: Exempt tax invoice OCR (VAT-exempt → E) */
/* OB-254: Mixed S+Z tax invoice OCR (unit/net/VAT per-line) */
/* OB-255: Reverse-charge OCR + RC treatment / journal */
/* OB-256: Category fixture PDF/PNG OCR paths (Z/E/RC) */
/* OB-257: Import IM tax treatment + VAT box 6 + OCR */
/* OB-258: Scan→bill inherit PO + cost centre */
/* OB-259: Tourist refund TR tax treatment + VAT box 2 */
/* OB-260: Import IM PDF/PNG OCR paths */
/* OB-261: Mixed S+Z PDF/PNG OCR paths */
/* OB-262: Supplier CN/DN PDF/PNG OCR paths */
/* OB-263: FX + simplified PDF/PNG OCR paths */
/* OB-264: Cost centre report quarter/year presets */
/* OB-265: VAT return active boxes only (toggle all) */
/* OB-266: Copy invoice/bill/PO + CN/DN inherit cost centre */
/* OB-267: Cost centre report last-month / last-quarter presets */
/* OB-268: Tax treatment compose hints (TR / RC / IM) */
/* OB-269: Same hints on CN / DN / SCN / SDN */
/* OB-270: Cost centre report CSV download */
/* OB-271: Expense claim inherits employee default cost centre */
/* OB-272: Expense category default cost centre when claim centre blank */
/* OB-273: Pay-run list cost centre column + filter */
/* OB-274: Ledger cost centre column + filter */
/* OB-275: Copy expense / pay run keep cost centre */
/* OB-276: Cmd-K Cost centre report / Reclass */
/* OB-277: Cost centre empty-state honesty */
/* OB-278: Cost centre report → ledger drill + phone shortcut */
/* OB-279: Sole cost centre auto-select */
/* OB-280: Tourist refund TR OCR public fixture */
/* OB-281: Journal line sole cost centre auto-select */
/* OB-282: Cmd-K Add cost centre */
/* OB-283: Scan→bill tax-treatment toast */
/* OB-284: Document list tax-treatment filter */
/* OB-285: Document list Tax column */
/* OB-286: Reclass sole remaining To auto-select */
/* OB-287: Cmd-K tax-treatment list filters */
/* OB-288: Phone tax-treatment list filters */
/* OB-289: Cmd-K zero-rated / exempt list filters */
/* OB-290: Phone zero-rated / exempt list filters */
/* OB-291: VAT box → document tax-treatment drill */
/* OB-292: VAT box Open scopes return From–To + entity */
/* OB-293: VAT return date-window chip + Clear */
/* OB-294: Cmd-K / phone zero-rated / exempt bills */
/* OB-295: Tax-treatment filter chip + Clear */
/* OB-296: Cost-centre filter chip + Clear */
/* OB-297: Documents tax + cost-centre filter chips */
/* OB-298: Period filter chip + Clear */
/* OB-299: Entity filter chip + Clear */
/* OB-300: Clear all list filters */
/* OB-301: PO / expense / payroll cost-centre filter chips */
/* OB-302: Clear filters on PO / expense / payroll */
/* OB-303: Entity filter chips on PO / expense / payroll */
/* OB-304: Status filter chips on Sales / Purchases / Documents / PO / Expenses */
/* OB-305: Party filter chips on Sales / Purchases / Ledger */
/* OB-306: Cmd-K Clear filters on active list panel */
/* OB-307: Phone More Clear filters on active list panel */
/* OB-308: Search filter chips on list panels */
/* OB-309: Banking entity / search / Clear filters chips */
/* OB-310: Instruments queue entity / Clear filters chips */
/* OB-311: Customers / Suppliers list filter chips */
/* OB-312: Purchases AP-status / type + Documents direction chips */
/* OB-313: Payroll employee / pay-run status chips */
/* OB-314: PO Still open / Fully billed chip */
/* OB-315: Structure ownership filter chips */
/* OB-316: Cashflow entity / days / Clear filters chips */
/* OB-317: Sales / Documents type filter chips */
/* OB-318: Chart of accounts search / type / Clear filters chips */
/* OB-319: Cost centres search / Clear filters chips */
/* OB-320: Expense categories search / Clear filters chips */
/* OB-321: Bank accounts search / Clear filters chips */
/* OB-322: Sales invoice templates search / Clear filters chips */
/* OB-323: Supplier bill templates search / Clear filters chips */
/* OB-324: Ledger kind / account filter chips */
/* OB-325: CoA entity chip when ≠ workspace active */
/* OB-326: VAT entity chip when ≠ workspace active */
/* OB-327: IFRS entity chip when ≠ workspace active */
/* OB-328: Corporate tax entity chip when ≠ workspace active */
/* OB-329: Statements entity chip when ≠ workspace active */
/* OB-330: Cost centre report entity chip when ≠ workspace active */
/* OB-331: Trust entity chip when ≠ workspace active */
/* OB-332: Sales invoice templates entity chip when ≠ workspace active */
/* OB-333: Supplier bill templates entity chip when ≠ workspace active */
/* OB-334: Bring in your books entity chip when ≠ workspace active */
/* OB-335: Cost centre reclass entity chip when ≠ workspace active */
/* OB-336: Statements as-of chip when ≠ today */
/* OB-337: Cost centre report date-window chip when ≠ month-start → today */
/* OB-338: IFRS date-window chip when ≠ calendar year */
/* OB-339: Corporate tax date-window chip when ≠ calendar year */
/* OB-340: VAT date-window chip when ≠ current quarter */
/* OB-341: Statements compare-prior-year chip when checked */
/* OB-342: Cost centre reclass date chip when ≠ today */
/* OB-343: Structure as-of chip when ≠ today */
/* OB-344: Bring in your books cutover date chip when ≠ today */
/* OB-345: FX rates as-of chip when ≠ today */
/* OB-346: FX rates rate-type chip when ≠ closing */
/* OB-347: FX rates pair chip when ≠ USD/AED */
/* OB-348: FX rates fraction chip when ≠ 3673/1000 */
#inv-tax-hint,
#bill-tax-hint,
#cn-tax-hint,
#dn-tax-hint,
#scn-tax-hint,
#sdn-tax-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 8px 0 0;
  max-width: 22rem;
  margin-left: auto;
  text-align: right;
}