/* OBSCURA OS: Books.

   One window, as Case and Umbra are: the top bar across, with the company
   and the File and New menus; the list of places down the left; the place
   itself in the middle; a status line along the foot. Each place is a page
   that scrolls, made mostly of ruled tables: accounts are read down a
   column of figures, so figures sit right-aligned in tabular digits and a
   total has a rule above it, the way a printed set of accounts does.

   On a phone the places become a row of tabs under the bar, as Case's
   screens do, and wide tables scroll inside their own frame.

   Every colour, size, corner and duration is a theme.css token, so Books
   follows the colourway, the dark mode and the motion setting the rest of
   the site does. */

body.bk-app { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--paper); color: var(--ink); font: var(--text-sm)/var(--leading-ui) var(--font-sans); }
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk :where(button, input, select, textarea) { font: inherit; color: inherit; }
.bk-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bk-grow { flex: 1; }
.bk-sprite { display: none; }
.bk svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk code, .bk kbd { font: var(--text-xs) var(--font-mono); }
.bk kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-soft); font-size: var(--text-2xs); font-weight: 600; }

.bk { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }

/* ---------------------------------------------------------------- top bar */

.bk-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.bk-home { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--ink-soft); }
.bk-home:hover { background: var(--paper-inset); color: var(--ink); }
.bk-home svg { width: 20px; height: 20px; }
.bk-mark { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-strong); }
.bk-mark svg { width: 20px; height: 20px; }
.bk-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.bk-pick { position: relative; min-width: 0; }
.bk-co { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 300px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; }
.bk-co:hover, .bk-co[aria-expanded="true"] { border-color: var(--rule-strong); background: var(--paper-inset); }
.bk-co-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bk-co svg { flex: none; width: 16px; height: 16px; color: var(--ink-faint); }
.bk-menubar { display: flex; gap: 2px; }
.bk-menubar > div { position: relative; }
.bk-mb { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-weight: 600; cursor: pointer; }
.bk-mb:hover, .bk-mb[aria-expanded="true"] { background: var(--paper-inset); color: var(--ink); }
.bk-state { margin: 0; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-faint); }
.bk-state[data-save-state="failed"] { color: var(--danger); }
.bk-icon-btn { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); cursor: pointer; }
.bk-icon-btn:hover { background: var(--paper-inset); color: var(--ink); }
.bk-icon-btn svg { width: 18px; height: 18px; }

.bk-menu { position: absolute; z-index: 60; top: calc(100% + var(--space-1)); left: 0; min-width: 260px; max-width: min(360px, calc(100vw - 20px)); padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); animation: bk-pop var(--dur-3) var(--ease-standard); }
.bk-menu[hidden] { display: none; }
/* Help is the last menu, at the edge of a phone's bar: it opens leftwards. */
.bk-menubar > div:last-child > .bk-menu { left: auto; right: 0; }
.bk-menu button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-height: 34px; padding: 6px 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.bk-menu button:hover, .bk-menu button:focus-visible { background: var(--paper-inset); outline: none; }
.bk-menu button:disabled { opacity: .45; cursor: default; }
.bk-menu button span { font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.bk-menu button.is-on { font-weight: 650; }
.bk-menu hr { margin: 6px var(--space-1); border: 0; border-top: 1px solid var(--rule); }
.bk-menu-head { margin: 4px 11px 2px; font-size: var(--text-2xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
@keyframes bk-pop { from { opacity: 0; transform: translateY(-4px); } }

/* ------------------------------------------------------------ the places */

.bk-body { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 0; }
.bk-nav { display: flex; flex-direction: column; gap: 1px; min-height: 0; padding: var(--space-3) var(--space-2); overflow-y: auto; border-right: 1px solid var(--rule); background: var(--paper-raised); }
.bk-nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bk-nav a svg { flex: none; width: 18px; height: 18px; color: var(--ink-faint); }
.bk-nav a:hover { background: var(--paper-inset); color: var(--ink); }
.bk-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
.bk-nav a[aria-current="page"] svg { color: var(--accent-strong); }
.bk-nav a .bk-count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink-soft); font-size: var(--text-2xs); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.bk-nav-sep { height: 1px; margin: var(--space-2) 10px; background: var(--rule); }

.bk-main { position: relative; min-height: 0; overflow: hidden; }
/* With no company open there is no list of places, and the start screen
   has the whole width. */
.bk-nav[hidden] + .bk-main { grid-column: 1 / -1; }
.bk-boot { margin: var(--space-6); color: var(--ink-faint); }
.bk-page { height: 100%; overflow-y: auto; padding: var(--space-5) max(var(--space-5), calc((100% - 1180px) / 2)) var(--space-7); animation: bk-arrive var(--dur-4) var(--ease-standard); }
.bk-page.is-wide { padding-left: var(--space-5); padding-right: var(--space-5); }
@keyframes bk-arrive { from { opacity: 0; transform: translateY(4px); } }
.bk-h { margin: 0 0 var(--space-1); font: 650 var(--text-2xl)/1.15 var(--font-headline); letter-spacing: -.01em; overflow-wrap: anywhere; }
.bk-h2 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-md); font-weight: 650; }
.bk-h2:first-child { margin-top: 0; }
.bk-lead { max-width: var(--measure); margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--ink-soft); }
.bk-hint { max-width: var(--measure); margin: var(--space-1) 0 var(--space-3); font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
.bk-empty { margin: var(--space-5) 0; padding: var(--space-5) var(--space-4); border: 1px dashed var(--rule-strong); border-radius: var(--radius-md); color: var(--ink-soft); text-align: center; }
.bk-empty p { max-width: 52ch; margin: 0 auto var(--space-3); line-height: 1.5; }
.bk-err { color: var(--danger); }
.bk-good { color: var(--good); }
.bk-warn { color: var(--warn); }
.bk-faint { color: var(--ink-faint); }

/* A page's title row: the heading, and its own toolbar to the right. */
.bk-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.bk-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.bk-head p { margin: 2px 0 0; font-size: var(--text-xs); color: var(--ink-faint); }
.bk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.bk-tools .bk-search { flex: 0 1 260px; }

/* ---------------------------------------------------------------- controls */

.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 13px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.bk-btn svg { width: 16px; height: 16px; }
.bk-btn:hover:not(:disabled) { background: var(--paper-inset); }
.bk-btn:active:not(:disabled) { transform: translateY(1px); }
.bk-btn:disabled { opacity: .5; cursor: default; }
.bk-btn-main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.bk-btn-main:hover:not(:disabled) { background: var(--accent-strong); }
.bk-btn-danger { color: var(--danger); }
.bk-btn-sm { min-height: 28px; padding: 2px 9px; font-size: var(--text-xs); }
.bk-link { min-height: 28px; padding: 0 var(--space-1); border: 0; background: none; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 600; cursor: pointer; text-decoration: none; }
.bk-link:hover { text-decoration: underline; }
.bk :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.bk-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.bk-seg::-webkit-scrollbar { display: none; }
/* A long set of tabs (the reports) goes onto a second row rather than off
   the edge. */
.bk-seg.is-wrap { flex-wrap: wrap; overflow: visible; }
.bk-seg button, .bk-seg a { flex: none; min-height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.bk-seg button:hover, .bk-seg a:hover { color: var(--ink); }
.bk-seg [aria-pressed="true"], .bk-seg [aria-current="page"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, .08); }

.bk-field[hidden] { display: none; }
.bk-field { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: var(--text-xs); color: var(--ink-soft); min-width: 0; }
.bk-field > span { font-weight: 600; }
.bk-field small { color: var(--ink-faint); font-size: var(--text-2xs); line-height: 1.4; }
.bk input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .bk select, .bk textarea { width: 100%; min-height: 34px; padding: 5px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font-size: var(--text-sm); }
.bk textarea { resize: vertical; line-height: 1.45; }
.bk textarea.bk-code { font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 2; }
.bk input:focus, .bk select:focus, .bk textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.bk input.n { text-align: right; font-variant-numeric: tabular-nums; }
.bk [aria-invalid="true"] { border-color: var(--danger) !important; }
.bk-why { display: block; margin-top: 4px; font-size: var(--text-2xs); line-height: 1.4; color: var(--danger); }
.bk-whyrow td { padding-top: 0; border-top: 0; }
.bk-check { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; font-size: var(--text-xs); color: var(--ink-soft); cursor: pointer; }
.bk-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.bk-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3) var(--space-3); margin: 0 0 var(--space-4); }
.bk-form .is-wide { grid-column: 1 / -1; }
.bk-form .is-2 { grid-column: span 2; }
.bk-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.bk-fs { min-width: 0; margin: 0 0 var(--space-5); padding: 0; border: 0; }
.bk-fs legend { margin: 0 0 var(--space-2); padding: 0; font-size: var(--text-md); font-weight: 650; color: var(--ink); }

/* ---------------------------------------------------------------- tables */

.bk-scroll { overflow-x: auto; margin: 0 0 var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.bk-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.bk-table th, .bk-table td { padding: 6px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.bk-table th { position: sticky; top: 0; z-index: 1; background: var(--paper-raised); color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.bk-table tbody tr:last-child td { border-bottom: 0; }
.bk-table .n, .bk-table th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-table .d { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-table .c { width: 1%; white-space: nowrap; }
.bk-table .t { max-width: 0; width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-table .neg { color: var(--danger); }
.bk-table tr[data-open] { cursor: pointer; }
.bk-table tr[data-open]:hover td { background: var(--paper-inset); }
.bk-table tr.is-on td { background: var(--accent-soft); }
.bk-table tr.is-head td { padding-top: 12px; font-weight: 650; color: var(--ink); border-bottom-color: transparent; }
.bk-table tr.is-total td { font-weight: 650; }
.bk-table tr.is-total td.n { border-top: 1px solid var(--rule-strong); }
.bk-table tr.is-grand td { font-weight: 700; border-bottom: 3px double var(--rule-strong); }
.bk-table tr.is-grand td.n { border-top: 1px solid var(--ink-soft); }
.bk-table tr.is-note td { color: var(--ink-faint); font-style: italic; }
.bk-table td.i1 { padding-left: 26px; }
.bk-table tfoot td { font-weight: 650; border-top: 1px solid var(--rule-strong); border-bottom: 0; }
.bk-table td input:not([type="checkbox"]), .bk-table td select { min-height: 30px; padding: 3px 6px; font-size: var(--text-xs); }
.bk-table .bk-check { min-height: 0; }

/* The budget sheet: an account, its year and twelve months, the account
   kept in view while the months scroll. */
.bk-budget td, .bk-budget th { padding: 4px 6px; }
.bk-budget td:first-child, .bk-budget th:first-child { position: sticky; left: 0; z-index: 2; width: 210px; min-width: 210px; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--paper-raised); }
.bk-table.bk-budget { width: max-content; min-width: 100%; }
.bk .bk-budget td input { width: 92px !important; }
.bk .bk-budget td input[data-year] { width: 108px !important; font-weight: 650; }
.bk-budget tfoot td { white-space: nowrap; font-variant-numeric: tabular-nums; }

.bk-status-tag { display: inline-block; font-size: var(--text-2xs); font-weight: 650; letter-spacing: .02em; color: var(--ink-soft); white-space: nowrap; }
.bk-status-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ink-faint); vertical-align: 1px; }
.bk-status-tag[data-s="Paid"]::before, .bk-status-tag[data-s="Used"]::before, .bk-status-tag[data-s="Invoiced"]::before, .bk-status-tag[data-s="Accepted"]::before, .bk-status-tag[data-s="Reconciled"]::before { background: var(--good); }
.bk-status-tag[data-s="Overdue"] { color: var(--danger); }
.bk-status-tag[data-s="Overdue"]::before { background: var(--danger); }
.bk-status-tag[data-s="Part paid"]::before { background: var(--warn); }
.bk-status-tag[data-s="Open"]::before, .bk-status-tag[data-s="Quote"]::before { background: var(--accent); }
.bk-status-tag[data-s="Draft"]::before, .bk-status-tag[data-s="Void"]::before, .bk-status-tag[data-s="Declined"]::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-faint); }

/* The figures across the top of the overview: a ruled strip, not tiles. */
.bk-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.bk-fig { min-width: 0; padding: var(--space-3) var(--space-4); border-left: 1px solid var(--rule); color: inherit; text-decoration: none; }
.bk-fig:first-child { border-left: 0; }
a.bk-fig:hover { background: var(--paper-inset); }
.bk-fig span { display: block; font-size: var(--text-2xs); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-faint); }
.bk-fig b { display: block; margin-top: 4px; font: 650 var(--text-xl)/1.15 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-fig small { display: block; margin-top: 2px; font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.bk-todo { margin: 0 0 var(--space-4); padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.bk-todo li { display: flex; align-items: baseline; gap: var(--space-3); min-height: 38px; padding: 9px 2px; border-bottom: 1px solid var(--rule); font-size: var(--text-sm); }
.bk-todo li > span { flex: 1; min-width: 0; }
.bk-todo li b { font-variant-numeric: tabular-nums; }
.bk-todo li.is-done { color: var(--ink-faint); }

/* The months on the overview: income and spending drawn as paired bars. */
.bk-chart { display: block; width: 100%; height: auto; margin: 0 0 var(--space-2); }
/* On a narrow screen a chart keeps figures that can be read and scrolls
   in its own frame. */
.bk-chartwrap { overflow-x: auto; }
.bk-chartwrap .bk-chart { min-width: 600px; }
.bk-chart rect, .bk-chart text { stroke: none; }
.bk-chart .in { fill: var(--accent); }
.bk-chart .out { fill: var(--ink-faint); opacity: .55; }
.bk-chart text { fill: var(--ink-faint); font: var(--text-2xs) var(--font-sans); }
.bk-chart line { stroke: var(--rule); }
.bk-key { display: flex; gap: var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-xs); color: var(--ink-soft); }
.bk-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: var(--radius-sm); vertical-align: -1px; }
.bk-key .in { background: var(--accent); }
.bk-key .out { background: var(--ink-faint); opacity: .55; }
/* Cash: the balance line over the bars, a band per month for the pointer. */
.bk-chart .zero { stroke: var(--rule-strong); }
.bk-chart .bal { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bk-chart .dot { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bk-chart .hit { fill: var(--ink); opacity: 0; }
.bk-chart .hit:hover { opacity: .05; }
.bk-key .bal { height: 2px; vertical-align: 3px; border-radius: 0; background: var(--ink); }
.bk-figure { margin: 0 0 var(--space-4); }
.bk-figure figcaption { margin-top: 0; }
.bk-figtable { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.bk-figtable summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.bk-figtable .bk-scroll { margin-top: var(--space-2); }
/* Tax to set aside, and what it assumes. */
.bk-settax { max-width: 420px; margin: 0 0 var(--space-2); }
.bk-assume { max-width: var(--measure); margin: 0 0 var(--space-2); padding-left: 1.1em; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
.bk-assume li { margin: 0 0 2px; }
/* Invoice branding: the settings beside a sketch of the page. */
.bk-branding { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--space-5); align-items: start; }
.bk-branding input[type="color"] { width: 100%; min-height: 34px; padding: 2px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); cursor: pointer; }
.bk-brand-prev { padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); font-size: var(--text-2xs); color: var(--ink-faint); }
.bk-brand-top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.bk-brand-top > div { min-width: 0; }
.bk-brand-top img { display: block; max-width: 140px; max-height: 48px; margin-bottom: var(--space-2); }
.bk-brand-top b { display: block; font-size: var(--text-sm); color: var(--ink); overflow-wrap: anywhere; }
.bk-brand-top strong { font-size: var(--text-md); letter-spacing: .02em; white-space: nowrap; }
.bk-brand-rule { height: 1px; margin: var(--space-4) 0 var(--space-2); }
.bk-brand-lines i { display: block; height: 6px; margin: 7px 0; border-radius: var(--radius-sm); background: var(--paper-inset); }
.bk-brand-lines i:nth-child(2) { width: 82%; }
.bk-brand-lines i:nth-child(3) { width: 64%; }
.bk-brand-foot { margin: var(--space-5) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--rule); white-space: pre-wrap; overflow-wrap: anywhere; }
.bk-table.bk-late .bk-sub { display: block; margin-top: 1px; color: var(--ink-faint); font-size: var(--text-2xs); }
.bk-late td.t { white-space: normal; }

/* ---------------------------------------------------------------- bank */

.bk-explain td { padding: 0 !important; background: var(--paper-inset); }
.bk-ex { padding: var(--space-3) var(--space-4) var(--space-4); border-left: 3px solid var(--accent); }
.bk-ex .bk-seg { margin: 0 0 var(--space-3); }
.bk-ex-grid { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(170px, 1.4fr) minmax(150px, 1fr); gap: var(--space-3); align-items: end; }
.bk-ex-rule { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--ink-soft); }
.bk-ex-rule input[type="text"] { max-width: 220px; }
.bk-ex-match { max-height: 280px; overflow-y: auto; margin: 0 0 var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
/* The year-end checklist. */
.bk-checklist { max-width: 920px; margin: 0 0 var(--space-5); }
.bk-checklist > .bk-row { align-items: baseline; }
.bk-checklist .bk-h2 { margin: 0; }
.bk-checkcount { font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bk-progress { display: block; width: 100%; height: 4px; margin: var(--space-2) 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--paper-inset); appearance: none; overflow: hidden; }
.bk-progress::-webkit-progress-bar { background: var(--paper-inset); }
.bk-progress::-webkit-progress-value { background: var(--good); }
.bk-progress::-moz-progress-bar { background: var(--good); }
.bk-checks { margin: 0 0 var(--space-4); padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.bk-checks li { display: flex; align-items: flex-start; gap: var(--space-3); padding: 8px 2px; border-bottom: 1px solid var(--rule); font-size: var(--text-sm); }
.bk-checks li > a { flex: none; margin-top: 1px; }
.bk-checkrow { display: flex; flex: 1; align-items: flex-start; gap: var(--space-3); min-width: 0; min-height: 28px; cursor: pointer; }
.bk-checkrow input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.bk-checkmark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--rule-strong); border-radius: 50%; color: var(--good); }
.bk-checkmark svg { width: 13px; height: 13px; }
.is-done > .bk-checkmark { border-color: var(--good); }
.bk-checktext { flex: 1; min-width: 0; line-height: 1.4; }
.bk-checktext small { display: block; margin-top: 2px; font-size: var(--text-2xs); color: var(--ink-faint); }
.bk-checks li.is-done .bk-checktext { color: var(--ink-soft); }
.bk-h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; }
.bk-deadlines { margin: 0 0 var(--space-2); padding: 0; list-style: none; max-width: 640px; }
.bk-deadlines li { display: grid; grid-template-columns: minmax(0, 1fr) auto 7.5em; gap: var(--space-3); align-items: baseline; padding: 6px 2px; border-bottom: 1px solid var(--rule); font-size: var(--text-sm); }
.bk-deadlines b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-deadlines small { font-size: var(--text-2xs); text-align: right; font-variant-numeric: tabular-nums; }
/* Rules suggested from what was explained by hand. */
.bk-suggest { max-width: 920px; margin: 0 0 var(--space-4); padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.bk-suggest li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--rule); font-size: var(--text-sm); }
.bk-suggest li:first-child { border-top: 0; }
.bk-suggest p { flex: 1 1 320px; margin: 0; line-height: 1.45; }
.bk-suggest .is-more { font-size: var(--text-xs); }
.bk-table .bk-quick { padding-left: 0; text-align: left; }
/* Receipts kept with a bank line, and a line with files over it. */
.bk-ex-files { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); font-size: var(--text-xs); }
.bk-ex-files h4 { flex: 0 0 100%; margin: 0; font-size: var(--text-2xs); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-faint); }
.bk-ex-files ul { flex: 0 0 100%; margin: 0; padding: 0; list-style: none; }
.bk-ex-files li { display: flex; align-items: center; gap: var(--space-2); min-height: 30px; }
.bk-ex-files li > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-ex-files svg, .bk-clip svg { flex: none; width: 14px; height: 14px; }
.bk-ex-files p { margin: 0; }
.bk-clip { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--ink-soft); }
.bk-table tr.is-drop > td, .bk-page.is-drop { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.bk-ex-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.bk-ex-foot output { font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bk-recbar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); font-size: var(--text-xs); }
.bk-recbar b { font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.bk-tick { color: var(--good); }

/* ------------------------------------------------------------ documents */

.bk-doc { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-5); align-items: start; }
.bk-doc-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bk-totals { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.bk-totals td { padding: 4px 0; }
.bk-totals td.n { text-align: right; font-variant-numeric: tabular-nums; }
.bk-totals tr.is-grand td { padding-top: 8px; border-top: 1px solid var(--ink-soft); font-weight: 700; }
.bk-lines td:first-child { min-width: 180px; }
.bk-lines .acc { min-width: 170px; }
.bk-lines .qty { width: 80px; }
.bk-lines .price { width: 110px; }
.bk-lines .code { width: 140px; }
/* The figures keep room to be read; a narrow window scrolls the lines
   sideways inside their frame instead of squeezing them. */
.bk-lines .qty input { min-width: 60px; }
.bk-lines .price input { min-width: 96px; }
.bk-lines .code select { min-width: 92px; }
.bk-panel { padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.bk-panel h3 { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-faint); }
.bk-panel p { margin: 0 0 var(--space-2); font-size: var(--text-xs); line-height: 1.5; color: var(--ink-soft); }
.bk-panel ul { margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); }
.bk-panel li { display: flex; align-items: center; gap: var(--space-2); min-height: 30px; border-bottom: 1px solid var(--rule); }
.bk-panel li:last-child { border-bottom: 0; }
.bk-panel li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.bk-actions .bk-btn { justify-content: flex-start; }

/* ------------------------------------------------------------ VAT */

.bk-boxes td:first-child { width: 64px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bk-boxes tr.is-key td { font-weight: 700; }
.bk-note { max-width: var(--measure); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--rule-strong); background: var(--paper-inset); font-size: var(--text-xs); line-height: 1.55; color: var(--ink-soft); }
.bk-note b { color: var(--ink); }

/* ---------------------------------------------------------------- foot */

.bk-status { display: flex; align-items: center; gap: var(--space-4); min-width: 0; min-height: 26px; padding: 0 var(--space-3); border-top: 1px solid var(--rule); background: var(--paper-raised); font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; overflow: hidden; }
.bk-status span { overflow: hidden; text-overflow: ellipsis; }
.bk-status .is-bad { color: var(--danger); font-weight: 650; }
/* The note that says nothing here is sent anywhere sits at the right-hand
   end of the status line, small, as it does in Case. */
.bk-status { padding-right: 150px; }
body.bk-app #ppBadge { left: auto; right: var(--space-2); bottom: 1px; min-height: 24px; padding: 1px var(--space-2); font-size: var(--text-2xs); box-shadow: none; }
.bk-auto { width: auto !important; }
.bk-show-sm { display: none; }
.bk-table .bk-sub { display: none; }
.bk [data-w="s"] { width: 90px !important; }
.bk [data-w="m"] { width: 130px !important; }
.bk-field[data-w="field"] { flex: 0 0 200px; }
.bk-field[data-w="period"] { flex: 0 1 340px; }
.bk-totals[data-w="totals"] { max-width: 540px; margin: 0 0 var(--space-3); }
.bk-row [data-end] { align-self: flex-end; margin: 0; }
.bk-row .bk-hint { margin: 0; }

/* ---------------------------------------------------------------- dialogs */

.bk-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(16, 16, 24, .3); }
.bk-dialog.is-wide { width: min(980px, calc(100vw - 24px)); }
.bk-dialog::backdrop { background: rgba(10, 10, 14, .38); }
.bk-dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
.bk-dialog header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }
.bk-dialog header h2 { flex: 1; margin: 0; font-size: var(--text-md); font-weight: 650; }
.bk-dialog .bk-dialog-body { padding: var(--space-4); overflow-y: auto; }
.bk-dialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--rule); }
.bk-dialog footer .bk-grow { flex: 1; }
.bk-keys { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.bk-keys td { padding: 5px 0; border-bottom: 1px solid var(--rule); }
.bk-keys td:first-child { width: 42%; white-space: nowrap; }
.bk-keys h3 { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-2xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }

/* ------------------------------------------------------------ start */

.bk-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.bk-start > section { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); border-left: 1px solid var(--rule); }
.bk-start > section:first-child { border-left: 0; }
.bk-start h2 { margin: 0; font-size: var(--text-md); font-weight: 650; }
.bk-start p { margin: 0; font-size: var(--text-xs); line-height: 1.55; color: var(--ink-soft); }
.bk-start .bk-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: var(--space-1) 0 var(--space-2); }
.bk-start .bk-btn { align-self: flex-start; margin-top: auto; }
.bk-start p + h2 { margin-top: var(--space-2); }
.bk-start .bk-start-acts { margin: auto 0 0; }
.bk-start .bk-start-acts .bk-btn { margin-top: 0; }

/* Invoices handed over by Practice, waiting to be checked and added
   (books-handoff.js). */
.bk-in { max-width: 860px; margin: 0 0 var(--space-5); padding: 0 0 var(--space-4); border-bottom: 1px solid var(--rule); }
.bk-in-head { display: flex; align-items: center; gap: var(--space-2); }
.bk-in-head .bk-h2 { margin: 0; }
.bk-in .bk-hint { margin: var(--space-1) 0 var(--space-3); }
.bk-in .bk-note { margin: 0 0 var(--space-3); }
.bk-in-totals { max-width: 300px; margin: var(--space-3) 0 0 auto; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1100px) {
  .bk-body { grid-template-columns: 60px minmax(0, 1fr); }
  .bk-nav a { justify-content: center; padding: 0; }
  .bk-nav a span { display: none; }
  .bk-nav a .bk-count { display: none; }
  .bk-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-fig:nth-child(4) { border-left: 0; }
  .bk-fig:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .bk-doc { grid-template-columns: minmax(0, 1fr); }
  .bk-doc-side { position: static; }
}

@media (max-width: 760px) {
  body.bk-app { height: auto; overflow: auto; }
  .bk { height: auto; min-height: 100dvh; }
  .bk-top { flex-wrap: wrap; row-gap: var(--space-1); }
  .bk-pick { order: 6; flex: 1 1 100%; }
  .bk-co { max-width: none; width: 100%; }
  .bk-state { order: 7; flex: 1 1 100%; max-width: none; }
  .bk-hide-sm { display: none !important; }
  .bk-show-sm { display: table-cell; }
  .bk-table .bk-sub { display: block; margin-top: 1px; color: var(--ink-faint); font-size: var(--text-2xs); }
  .bk-body { display: block; }
  .bk-nav { position: sticky; top: 0; z-index: 5; flex-direction: row; gap: 2px; padding: 6px 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
  .bk-nav::-webkit-scrollbar { display: none; }
  .bk-nav a { flex: none; justify-content: flex-start; padding: 0 12px; }
  .bk-nav a span { display: inline; }
  .bk-nav a svg { display: none; }
  .bk-nav-sep { display: none; }
  .bk-main { overflow: visible; }
  .bk-page { height: auto; overflow: visible; padding: var(--space-4) var(--space-4) var(--space-7); }
  .bk-page.is-wide { padding: var(--space-4) var(--space-4) var(--space-7); }
  .bk-figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bk-fig { border-left: 0; border-top: 1px solid var(--rule); }
  .bk-fig:nth-child(-n+2) { border-top: 0; }
  .bk-fig:nth-child(even) { border-left: 1px solid var(--rule); }
  .bk-fig:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
  .bk-cols, .bk-start, .bk-ex-grid, .bk-branding { grid-template-columns: minmax(0, 1fr); }
  .bk-start > section { border-left: 0; border-top: 1px solid var(--rule); }
  .bk-start > section:first-child { border-top: 0; }
  .bk-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bk-form .is-2 { grid-column: 1 / -1; }
  .bk-tools .bk-search { flex: 1 1 100%; }
  .bk-status { flex-wrap: wrap; row-gap: 0; padding: 4px var(--space-3); white-space: normal; }
  .bk-table .t { width: auto; max-width: 180px; }
  .bk-top > .bk-grow { order: 1; }
  .bk-menubar { order: 2; }
  #bkKeys { order: 3; }
  .bk-status > span:not(#bkStCheck):not(.bk-grow) { display: none; }
  /* The bar is one row on a phone, as every application's is: the menus
     at 44 pixels and no wider than that, and below 420 pixels the book
     mark goes, since the name beside it says the same, so the shortcuts
     button no longer falls onto a row of its own. */
  .bk-mb { min-width: 44px; padding: 0 8px; }
}
@media (max-width: 420px) {
  .bk-mark { display: none; }
  .bk-top { gap: 6px; }
}

/* A finger needs more than a pointer. */
@media (pointer: coarse) {
  .bk-home, .bk-co, .bk-mb, .bk-icon-btn, .bk-btn, .bk-link, .bk-seg button, .bk-seg a, .bk-nav a, .bk-menu button, .bk-check,
  .bk input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .bk select, .bk-table td input:not([type="checkbox"]), .bk-table td select { min-height: 44px; }
  .bk-home, .bk-icon-btn { width: 44px; height: 44px; }
  .bk-check input, .bk-checkrow input { width: 22px; height: 22px; }
  .bk-checkrow, .bk-figtable summary { min-height: 44px; }
  .bk-table th, .bk-table td { padding-top: 10px; padding-bottom: 10px; }
  body.bk-app #ppBadge { min-height: 44px; }
}

@media print {
  body.bk-app { height: auto; overflow: visible; }
  .bk { display: block; height: auto; }
  .bk-top, .bk-nav, .bk-status, .bk-tools, .bk-head .bk-btn { display: none !important; }
  .bk-body { display: block; }
  .bk-page { height: auto; overflow: visible; padding: 0; animation: none; }
  .bk-scroll { border: 0; overflow: visible; }
}

/* Small things that keep the rows even. */
.bk-head p a, .bk-hint a, .bk-lead a, .bk-note a { color: var(--accent-strong); }
.bk-table .bk-link { min-height: 0; padding-top: 0; padding-bottom: 0; }
.bk-table .bk-btn-sm { min-height: 26px; }
/* A link in a list (an invoice number on the overview) is a finger's
   target: a row 44 pixels tall, not the height of its text. */
@media (pointer: coarse), (any-pointer: coarse) {
  .bk-link, .bk-table .bk-link { display: inline-flex; align-items: center; min-height: 44px; }
  .bk-table .bk-btn-sm { min-height: 44px; }
}
/* A statement of a few columns reads across a narrower table, so a figure
   is not a screen's width from its name. */
.bk-scroll.is-statement { max-width: 980px; }
.bk-table .zero { color: var(--ink-faint); }
.bk-actions .bk-btn { white-space: normal; text-align: left; line-height: 1.3; }
.bk-lines td:first-child, .bk-lines th:first-child { width: 36%; }
.bk input:disabled, .bk select:disabled, .bk textarea:disabled { background: var(--paper-inset); color: var(--ink-soft); opacity: 1; }

/* Directors, payroll, projects, the forecast, find and recode
   (books-company-ui.js, books-plan-ui.js). */
.bk-figs.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bk-table th.tag, .bk-table td.tag { min-width: 120px; }
.bk-table td.tag select { min-width: 112px; }
.bk-table tr[data-week] { cursor: pointer; }
.bk-table tr[data-week]:hover td { background: var(--paper-inset); }
.bk-fcitems > td { padding-top: 0; background: var(--paper-inset); }
.bk-fcitems ul { margin: 0; padding: 2px 0 4px; list-style: none; }
.bk-fcitems li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 4px 0; border-bottom: 1px solid var(--rule); }
.bk-fcitems li:last-child { border-bottom: 0; }
.bk-fcitems li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.bk-fcitems .n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-recbar .bk-field { min-width: 150px; flex: 0 1 220px; }
@media (max-width: 1100px) {
  .bk-figs.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-figs.is-4 .bk-fig:nth-child(3) { border-left: 0; }
  .bk-figs.is-4 .bk-fig:nth-child(4) { border-left: 1px solid var(--rule); }
  .bk-figs.is-4 .bk-fig:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .bk-recbar { position: static; }
  .bk-recbar .bk-field { flex: 1 1 100%; }
}
.bk-table td.nw { white-space: nowrap; }
.bk-table td.tg { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-lines .disc input { min-width: 64px; }