/* =========================================================================
   Balant AI: signed-in pages and sign-in screens (loaded after site.css).
   Order: font, tokens, sign-in screens, app shell (the sidebar), rail,
   page parts, tables, tiles, forms, account menu, books, small screens,
   reports, Ask Balant.
   These pages run under a strict CSP: no inline styles or scripts, and
   the font is served from this site.
   The look (2026-10-26): quiet chrome. Cards are flat, with one hairline;
   only what floats (menus, the category picker, dialogs) casts a shadow.
   Colour means state (needs you, done, waiting, wrong), always from the
   --state-* tokens, and every amount is set in tabular figures.
   ========================================================================= */

/* Inter, self-hosted (SIL Open Font License, see fonts/OFL.txt). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.e990806dbc9b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens -----------------------------------------------------------------
   site.css holds the marketing site's values. This file loads only on app
   and sign-in pages, so it overrides them here; site.css declares the
   surfaces on `:root, .card`, so the overrides do too. Raw colours belong
   in this block, so another palette later (a dark one) is one more block
   of the same names. */
:root,
.card {
  --bg: #f7f8fa;
  --bg-alt: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --tile: #eceef3;
  --line: #e4e7ec;
  --line-strong: #cfd5df;
  --btn-2-bg: #ffffff;
  --btn-2-ink: #121726;
  --btn-2-bg-hover: #f4f5f8;
}
:root {
  /* Spacing, type and radii. site.css's radius names point here too. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-base: 14px;
  --t-md: 15px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-2xl: 24px;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-control: 8px;
  --r-nested: 8px;
  --r-card: 12px;
  --r-pill: 999px;

  /* Elevation: cards are flat; only what floats casts a shadow. */
  --shadow-card: none;
  --shadow-xs: 0 1px 2px rgb(18 23 38 / .05);
  --shadow-lift: 0 0 0 1px rgb(18 23 38 / .03), 0 4px 10px -2px rgb(18 23 38 / .08), 0 18px 40px -12px rgb(18 23 38 / .24);
  --scrim: rgb(18 23 38 / .32);
  --ring: 0 0 0 3px rgb(52 80 200 / .18);
  --on-accent: #ffffff;

  /* The sidebar. */
  --side-w: 248px;
  --side-bg: #f2f4f7;
  --side-hover: rgb(18 23 38 / .05);
  --side-press: rgb(18 23 38 / .08);
  --side-current: rgb(52 80 200 / .1);
  --side-glass: rgb(242 244 247 / .92);
  --bar-h: 56px;

  /* Fields keep a border of at least 3:1 against what they sit on. */
  --input-line: #8b93a7;
  --input-line-hover: #6f788d;
  --input-line-side: #7c8498;
  --placeholder: #6b7385;
  --link-underline: rgb(52 80 200 / .35);

  /* State: colour means state only. Each has a dot (or fill), an ink for
     text of at least 4.5:1 on its soft fill, the soft fill and a line. */
  --amber-ink: #7a4d0b;
  --amber-soft: #fbf0d9;
  --state-needs: var(--accent);
  --state-needs-ink: var(--accent-ink);
  --state-needs-soft: var(--accent-soft);
  --state-needs-line: #cdd6f8;
  --state-ok: #177245;
  --state-ok-ink: #14653b;
  --state-ok-soft: #e7f5ee;
  --state-ok-line: #bfe3cf;
  --state-wait: #c27c0e;
  --state-wait-ink: var(--amber-ink);
  --state-wait-soft: var(--amber-soft);
  --state-wait-line: #ecd6a8;
  --state-bad: #d92d20;
  --state-bad-ink: var(--danger);
  --state-bad-soft: var(--danger-soft);
  --state-bad-soft-2: #fbe1dd;
  --state-bad-line: #f1c6c0;
  /* The names the books' rules used before the state tokens. */
  --ok: var(--state-ok);
  --ok-soft: var(--state-ok-soft);
  --ok-line: var(--state-ok-line);

  /* Icons drawn by CSS: data: images, which the CSP's img-src allows. The
     masks take the colour of what they sit in. */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.25 8 9.75l3.5-3.5' fill='none' stroke='%235f687c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235f687c' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E");
  --mask-updown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 6 8 3.5 10.5 6M5.5 10 8 12.5 10.5 10'/%3E%3C/svg%3E");
  --mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.8v3.6'/%3E%3Ccircle cx='8' cy='11' r='.4' fill='black'/%3E%3C/svg%3E");
}

/* The app's base: 14px type, tabular figures everywhere (one setting,
   inherited by every amount), and links that keep a quiet underline. */
.is-app {
  font-size: var(--t-base);
  line-height: 1.5;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
}
.is-app a {
  text-decoration-color: var(--link-underline);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.is-app a:hover { text-decoration-color: currentColor; }

/* Sign-in, invite and setup screens ------------------------------------ */

.auth-wrap {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(32px, 7vw, 80px) var(--gutter) 64px;
}
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: min(100%, 420px);
  padding: 28px;
  box-shadow: var(--shadow-xs);
}
.auth-wide { width: min(100%, 560px); }
.auth-step { color: var(--ink-3); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; }
.auth-title { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.auth-sub { color: var(--ink-2); font-size: 14.5px; }
.auth-below { color: var(--ink-3); font-size: 13.5px; text-align: center; }
.auth-below a { color: var(--link); }
.auth .input { min-height: 40px; }
.auth .btn-block { min-height: 40px; }

/* A QR code stays black on white whatever the palette. */
.qr {
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-nested);
  background: #fff;
}
.qr svg { display: block; width: 200px; height: 200px; }
.key {
  padding: 10px 12px;
  border-radius: var(--r-control);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .06em;
  word-break: break-all;
}
.codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-nested);
  background: var(--surface-2);
  list-style: none;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .05em;
}
.code-box {
  display: inline-block;
  padding: 10px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-nested);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: .12em;
}

/* App shell ---------------------------------------------------------------
   One sidebar the full height of the window (header.app-side): the logo,
   then "Find an entity" and + (the books), the rail, and the account menu
   at its foot. The page is the second column; the window scrolls and the
   sidebar stays. Collapsed (html.rail-collapsed, set by rail.js before the
   first paint), the sidebar is a column of icons. On phones (820px and
   under) it is a bar across the top, with the rail as a drawer under
   "Menu" (see Small screens). The sign-in screens keep the marketing
   header: none of this reaches them. */

body.is-app {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100dvh;
}
/* No bar across the top on wide screens, so anchors and sticky panels
   measure from the window's top (site.css: html's scroll-padding-top). */
:root:has(> body.is-app) { --nav-h: 0px; }
@media (min-width: 821px) {
  .rail-collapsed { --side-w: 56px; }
}
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.is-app { transition: grid-template-columns .2s ease; }
}

.app-side {
  --side-chrome: 129px;   /* everything but the rail: padding, logo, account */
  position: sticky;
  top: 0;
  z-index: 50;
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  padding: 12px 12px 10px;
  border-right: 1px solid var(--line);
  background: var(--side-bg);
}
.app-side.has-tools { --side-chrome: 177px; }   /* plus the search row */
.is-app > main { grid-column: 2; grid-row: 1; min-width: 0; }
.is-app > .app-foot { grid-column: 2; grid-row: 2; }

.app-side-head {
  display: flex;
  flex: none;
  align-items: center;
  height: 36px;
  margin-bottom: 12px;
  padding-inline: 10px 4px;
}
.app-side .brand { gap: 10px; min-width: 0; font-size: 16px; letter-spacing: -0.02em; }
.app-side .brand-mark { width: 24px; height: 24px; }
.app-side .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-side .brand:focus-visible { outline-offset: 4px; border-radius: 4px; }

/* "Find an entity" and +. The "/" key is drawn in the field once scripts
   run, and goes while typing. */
.side-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin-bottom: 14px;
}
.top-search { position: relative; flex: 1 1 auto; min-width: 0; }
.top-search .input {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px 6px 32px;
  border-color: var(--input-line-side);
  background: var(--surface) var(--icon-search) no-repeat 10px 50% / 15px 15px;
  box-shadow: none;
  font-size: 13.5px;
}
.top-search .input:hover { border-color: var(--input-line-hover); }
.top-search .input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.top-search .input::-webkit-search-cancel-button { display: none; }
.top-key {
  display: none;
  position: absolute;
  top: 50%;
  right: 7px;
  min-width: 18px;
  padding: 0 4px;
  translate: 0 -50%;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 17px;
  pointer-events: none;
}
.app-js .top-key { display: inline-block; }
.app-js .top-search .input { padding-right: 30px; }
.top-search .input:focus ~ .top-key,
.top-search .input:not(:placeholder-shown) ~ .top-key { display: none; }
.top-plus {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-control);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-xs);
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.top-plus svg { display: block; width: 18px; height: 18px; }
.top-plus:hover { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--input-line), var(--shadow-xs); }
.top-plus:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The account menu at the sidebar's foot: who is signed in and where. It
   opens upward. */
.app-side-foot {
  flex: none;
  height: 50px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.app-side .menu-button {
  width: 100%;
  height: 40px;
  padding: 0 8px 0 6px;
  border-radius: var(--r-control);
}
.app-side .menu-button::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: var(--ink-3);
  -webkit-mask: var(--mask-updown) 50% 50% / 16px 16px no-repeat;
  mask: var(--mask-updown) 50% 50% / 16px 16px no-repeat;
}
.app-side .menu-panel { top: auto; right: auto; bottom: calc(100% + 6px); left: 0; width: 100%; min-width: 224px; }

/* The page column. */
.app-wrap {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding: 28px 40px 56px;
}
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.app.has-aside { grid-template-columns: minmax(0, 1fr) 300px; }

/* minmax(0, 1fr) lets wide tables scroll inside .table-wrap instead of
   stretching the page on phones. */
.app-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.app-main:focus { outline: none; }
.app-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }

.app-foot {
  padding: 8px 40px 24px;
  color: var(--ink-3);
  font-size: 12.5px;
  text-align: center;
}
.app-foot a { color: inherit; }

/* Rail ------------------------------------------------------------------
   The list in the sidebar. It sits in a <details open> (.rail-drawer) so
   that on phones it is a drawer under "Menu"; on wider screens the summary
   is hidden and the list always open. Here the drawer takes the sidebar's
   free height and scrolls on a short window; the rail fills it, so
   Activity, Settings and the collapse button sit at its foot. Every
   selector is a .rail-* class that only app_base.html uses. */
.rail-drawer {
  flex: 1 1 auto;
  min-height: 0;
  margin-inline: -12px;
  padding-inline: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.rail-drawer > summary { list-style: none; }
.rail-drawer > summary::-webkit-details-marker { display: none; }
.rail-menu { display: none; }
.rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - var(--side-chrome));
  min-height: calc(100dvh - var(--side-chrome));
}
.rail-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rail-group { margin-top: 20px; }
.rail-label {
  margin: 0 0 4px;
  padding-inline: 10px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Activity and Settings sit apart at the foot, under a hairline. */
.rail-foot { margin-top: auto; padding-top: 16px; }
.rail-foot::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 10px 8px;
  background: var(--line);
}

.rail-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--r-control);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.rail-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  transition: color .15s ease;
}
.rail-icon svg { display: block; width: 18px; height: 18px; }
.rail-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .rail-link:hover { background: var(--side-hover); color: var(--ink); }
  .rail-link:hover .rail-icon { color: var(--ink-2); }
}
.rail-link:active { background: var(--side-press); }
/* The current page: a soft tint of the accent, its icon in the accent. */
.rail-link[aria-current="page"] { background: var(--side-current); color: var(--ink); }
.rail-link[aria-current="page"] .rail-icon { color: var(--accent); }
.rail-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* How many prepared items wait on this person: a navy count. Rendered
   only when the count is above zero. */
.rail-count {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* A place in the rail that isn't open yet (Ask Balant): greyed, not a
   link, with a small "Soon" tag. */
.rail-link.is-off,
.rail-link.is-off .rail-icon { color: var(--ink-3); cursor: default; }
.rail-link.is-off .rail-icon { opacity: .7; }
@media (hover: hover) {
  .rail-link.is-off:hover { background: transparent; color: var(--ink-3); }
  .rail-link.is-off:hover .rail-icon { color: var(--ink-3); }
}
.rail-link.is-off:active { background: transparent; }

/* The collapse button at the rail's foot: a rail link that is a button.
   Shows only once app.js runs, and only on wide screens. Its arrow turns
   round while the rail is collapsed. */
.rail-fold {
  width: 100%;
  margin-top: 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.rail-fold .rail-text { color: var(--ink-3); }
.icon-fold-arrow { transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.rail-collapsed .icon-fold-arrow { transform: rotate(180deg); }

/* High-contrast modes drop fills and shadows: box the current page and
   the count instead. */
@media (forced-colors: active) {
  .rail-link[aria-current="page"] { outline: 1px solid CanvasText; outline-offset: -1px; }
  .rail-count, .rail-soon { border: 1px solid CanvasText; }
  .rail-link.is-off { color: GrayText; }
  .app-side { border-right: 1px solid CanvasText; }
}

/* Collapsed to its icons: a 56px column. Each link's text stays for
   screen readers (and app.js gives it to the pointer as the link's
   title); the count sits on the icon's corner; "Soon", the Admin label,
   the logo's name and the account's name go. The search is an icon that
   opens to full width over the page while it has the cursor, so "/"
   still works. */
@media (min-width: 821px) {
  .rail-collapsed .app-side { padding-inline: 8px; }
  .rail-collapsed .app-side.has-tools { --side-chrome: 219px; }
  .rail-collapsed .app-side-head { justify-content: center; padding: 0; }
  .rail-collapsed .app-side .brand { gap: 0; }
  .rail-collapsed .app-side .brand > span:last-child,
  .rail-collapsed .rail-text,
  .rail-collapsed .menu-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .rail-collapsed .side-tools { flex-direction: column; height: 76px; gap: 8px; }
  .rail-collapsed .top-search { flex: none; width: 40px; height: 34px; }
  .rail-collapsed .top-search .input { padding: 0; color: transparent; background-position: 50% 50%; cursor: pointer; }
  .rail-collapsed .top-search .input::placeholder { color: transparent; }
  .rail-collapsed .top-search .input:focus {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 70;
    width: 260px;
    padding: 6px 10px 6px 32px;
    color: var(--ink);
    background-position: 10px 50%;
    box-shadow: var(--ring), var(--shadow-lift);
    cursor: text;
  }
  .rail-collapsed .top-search .input:focus::placeholder { color: var(--placeholder); }
  .rail-collapsed .top-key { display: none; }
  .rail-collapsed .top-plus { width: 40px; }
  .rail-collapsed .rail-drawer { margin-inline: -8px; padding-inline: 8px; }
  .rail-collapsed .rail-link { justify-content: center; width: 40px; gap: 0; padding: 0; }
  .rail-collapsed .rail-soon,
  .rail-collapsed .rail-label { display: none; }
  .rail-collapsed .rail-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .rail-collapsed .rail-foot::before { width: 24px; margin: 0 8px 8px; }
  .rail-collapsed .rail-count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
  }
  .rail-collapsed .app-side .menu-button { justify-content: center; width: 40px; padding: 0; }
  .rail-collapsed .app-side .menu-button::after { display: none; }
  .rail-collapsed .app-side .menu-panel { width: auto; min-width: 240px; }
}

/* Page parts ------------------------------------------------------------- */

.page-head { display: grid; gap: 4px; }
.page-title { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.page-lede { max-width: 68ch; color: var(--ink-2); font-size: var(--t-base); }
.breadcrumb { color: var(--ink-3); font-size: var(--t-sm); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

.panel { display: grid; gap: 14px; padding: 18px 20px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.panel-title { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.panel-sub { color: var(--ink-3); font-size: var(--t-sm); }
.panel-link { font-size: var(--t-sm); }
.aside-panel { display: grid; gap: 10px; padding: 16px 18px; }
.aside-title {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.aside-list { display: grid; gap: 8px; padding: 0; list-style: none; font-size: var(--t-base); }
.aside-list .sub,
.aside-panel .sub { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.muted { color: var(--ink-3); }

/* Empty: one sentence and one way forward, on a dashed outline. */
.empty {
  display: grid;
  gap: 6px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface-2);
}
.empty-title { font-size: var(--t-md); font-weight: 600; }
.empty p { color: var(--ink-2); font-size: var(--t-base); max-width: 60ch; }

.steps { display: grid; gap: 4px; padding: 0; list-style: none; counter-reset: step; }
.step {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 0 10px 36px;
  counter-increment: step;
}
.step::before {
  content: counter(step);
  position: absolute;
  top: 10px;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
.step.is-done::before {
  content: "";
  border-color: var(--state-ok);
  background: var(--state-ok);
}
.step.is-done::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 22px;
  height: 22px;
  background: var(--on-accent);
  -webkit-mask: var(--icon-check) 50% 50% / 12px 12px no-repeat;
  mask: var(--icon-check) 50% 50% / 12px 12px no-repeat;
}
.step-name { font-size: var(--t-base); font-weight: 600; }
.step-note { color: var(--ink-2); font-size: var(--t-sm); }

/* Messages after an action: a neutral card with a mark in the state's
   colour, or a tint when something went wrong or needs a look. */
.alert {
  position: relative;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-nested);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-base);
}
.alert-success,
.alert-error,
.alert-warning { padding-left: 38px; }
.alert-success::before,
.alert-error::before,
.alert-warning::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--state-ok);
}
.alert-success::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 16px;
  height: 16px;
  background: var(--on-accent);
  -webkit-mask: var(--icon-check) 50% 50% / 11px 11px no-repeat;
  mask: var(--icon-check) 50% 50% / 11px 11px no-repeat;
}
.alert-error::before,
.alert-warning::before {
  border-radius: 0;
  -webkit-mask: var(--mask-alert) 50% 50% / 16px 16px no-repeat;
  mask: var(--mask-alert) 50% 50% / 16px 16px no-repeat;
}
.alert-error { border-color: var(--state-bad-line); background: var(--state-bad-soft); color: var(--state-bad-ink); }
.alert-error::before { background: var(--state-bad-ink); }
.alert-warning { border-color: var(--state-wait-line); background: var(--state-wait-soft); color: var(--state-wait-ink); }
.alert-warning::before { background: var(--state-wait-ink); }
.alerts { display: grid; gap: 8px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: var(--t-base); }
.kv dt { color: var(--ink-3); }

.activity-list { display: grid; gap: 10px; padding: 0; list-style: none; font-size: var(--t-base); }
.activity-list time { display: block; color: var(--ink-3); font-size: var(--t-xs); }

/* Tables -----------------------------------------------------------------
   Column heads small and quiet, rows about 40px, hairlines between rows
   only, a tint under the pointer, amounts right-aligned. */

.table-wrap { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.table th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td, .table tbody th { transition: background-color .12s ease; }
@media (hover: hover) {
  .table:not(.bk-board) tbody tr:hover > td,
  .table:not(.bk-board) tbody tr:hover > th { background: var(--surface-2); }
}
.table .num { text-align: right; }
.table .sub { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.table a { color: var(--ink); font-weight: 500; text-decoration-color: var(--line-strong); }
.table a:hover { text-decoration-color: currentColor; }
/* A button inside a table keeps its own colours (.table a is more specific). */
.table a.btn-primary { color: var(--btn-ink); }
.table a.btn-secondary { color: var(--btn-2-ink); }
/* Tables with an action column scroll sideways on phones instead of
   squeezing names into one-word lines. */
.table-actions { min-width: 640px; }
.table-actions th:first-child,
.table-actions td:first-child { min-width: 9rem; }
/* A long table that scrolls inside its own box keeps its column heads. */
.table-wrap.is-scroll { max-height: min(70vh, 640px); overflow: auto; }
.table-wrap.is-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }

/* Status ------------------------------------------------------------------
   One look for every status: a pill with a soft fill and a dot in the
   state's colour. Colour means state only: blue needs a person, green is
   done or healthy, amber is waiting or a draft, grey is off or not yet. */
.pill,
.bk-row-status,
.bk-entry-status,
.rail-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--tile);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}
.pill-live::before,
.pill-off::before,
.pill-amber::before,
.bk-row-status::before,
.bk-entry-status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot, var(--ink-3));
}
.pill-live,
.bk-row-status.is-ready,
.bk-row-status.is-done,
.bk-entry-status.is-approved,
.bk-entry-status.is-posted { --dot: var(--state-ok); background: var(--state-ok-soft); color: var(--state-ok-ink); }
.pill-accent,
.bk-row-status.is-needs,
.bk-row-status.is-sorted { --dot: var(--state-needs); background: var(--state-needs-soft); color: var(--state-needs-ink); }
.pill-amber,
.bk-row-status.is-progress,
.bk-entry-status.is-draft { --dot: var(--state-wait); background: var(--state-wait-soft); color: var(--state-wait-ink); }
.pill-off { --dot: var(--ink-3); background: var(--tile); color: var(--ink-2); }
.bk-entry-status.is-void { text-decoration: line-through; }
/* Where a sorted pile's category came from: a tag, not a state, so no dot. */
.bk-source { min-height: 20px; padding: 1px 8px; font-size: var(--t-xs); }
.bk-source.is-rule { background: var(--state-ok-soft); color: var(--state-ok-ink); }
.bk-source.is-memory { background: var(--state-needs-soft); color: var(--state-needs-ink); }
.bk-source.is-llm { background: var(--tile); color: var(--ink-2); }
.bk-source.is-answer,
.bk-source.is-reviewer { background: var(--state-wait-soft); color: var(--state-wait-ink); }
.rail-soon {
  flex: none;
  min-height: 18px;
  padding: 1px 7px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
@media (forced-colors: active) {
  .pill, .bk-row-status, .bk-entry-status { border: 1px solid CanvasText; }
}

/* Workflow tiles --------------------------------------------------------- */

.tile-group { display: grid; gap: 12px; }
.tile-group-title { font-size: var(--t-md); font-weight: 600; }
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.tile {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.tile.is-off { background: var(--surface-2); }
.tile.is-off .tile-name { color: var(--ink-2); }
.tile-name { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; }
.tile-desc { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.tile-meta { color: var(--ink-3); font-size: var(--t-xs); }
.tile-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.tile-foot a { font-size: var(--t-sm); }

/* Buttons and forms -------------------------------------------------------
   site.css draws the marketing site's buttons and fields; the app's are
   smaller and squarer: 36px (32px small), 8px corners, a white secondary
   with a hairline. Touch screens get 44px. */

.btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-control);
  font-size: var(--t-base);
  letter-spacing: -0.005em;
}
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { min-height: 40px; padding: 0 18px; }
.btn-primary { box-shadow: var(--shadow-xs); }
.btn-secondary { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-xs); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--input-line), var(--shadow-xs); }
.btn-danger { background: var(--surface); color: var(--state-bad-ink); box-shadow: inset 0 0 0 1px var(--state-bad-line), var(--shadow-xs); }
.btn-danger:hover { background: var(--state-bad-soft); }
.btn:disabled,
.btn[aria-disabled="true"] { box-shadow: none; }
.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-link:hover { text-decoration-color: currentColor; }

.form { display: grid; gap: 16px; }
.form-narrow { max-width: 480px; }
.field { display: grid; align-content: start; gap: 6px; }
.field .label { margin: 0; }
.label { font-size: 13px; }
.field-help { color: var(--ink-3); font-size: 12.5px; }
.field-error { color: var(--state-bad-ink); font-size: 13px; }
.errorlist { margin: 0; padding: 0; list-style: none; color: var(--state-bad-ink); font-size: 13px; }
/* Stronger borders than the marketing forms: 3:1 against white. */
.input {
  min-height: 36px;
  padding: 7px 11px;
  border-color: var(--input-line);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-xs);
  font-size: var(--t-base);
}
.input:hover { border-color: var(--input-line-hover); }
.input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.input::placeholder { color: var(--placeholder); }
.input[readonly] { background: var(--surface-2); color: var(--ink-2); box-shadow: none; }
.input-code { font-family: var(--font-mono); font-size: 18px; letter-spacing: .12em; }
.input-sm { min-height: 32px; padding: 5px 10px; font-size: 13.5px; }
/* Lists: our own chevron, the height of the small buttons beside them, and
   the empty choice ("Choose a category…") in a quieter ink. books.js turns
   a category list into a button with the same look that opens a
   searchable list. A plain list from a form (select.input) looks the same. */
.input-select,
select.input:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-color: var(--surface);
  background-image: var(--icon-chevron);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.input-select.input-sm { min-height: 32px; padding: 5px 30px 5px 10px; font-size: 13.5px; line-height: 20px; }
.input-select:has(> option[value=""]:checked),
select.input:not([multiple]):has(> option[value=""]:checked) { color: var(--ink-3); }
.input-select option, .input-select optgroup,
select.input option, select.input optgroup { color: var(--ink); }
select.input:disabled,
.input-select:disabled { background-color: var(--surface-2); color: var(--ink-2); box-shadow: none; cursor: not-allowed; }
/* The picker's button in place of a category list (books.js). */
.bk-picker-btn { display: block; min-width: 0; text-align: left; }
.bk-picker-btn.is-empty { color: var(--ink-3); }
.bk-picker-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-picker-note { color: var(--ink-3); font-size: 13px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.choices { display: grid; gap: 8px; }
.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: start;
  font-size: var(--t-base);
  cursor: pointer;
}
.choice input { margin: 3px 0 0; accent-color: var(--btn-bg); }
.choice .sub { grid-column: 2; color: var(--ink-3); font-size: var(--t-xs); }
.checkbox-line { display: flex; align-items: center; gap: 10px; font-size: var(--t-base); cursor: pointer; }
.checkbox-line input { accent-color: var(--btn-bg); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.inline-form .field { gap: 4px; }
.inline-form .input-code { width: 9.5ch; }
.inline-form .input-select { flex: 0 1 18rem; width: auto; min-width: 0; }
.inline-form.is-row { align-items: center; }
/* An action button above the Disconnect… disclosure in one table cell. */
.table-actions .inline-form, .table-actions > tbody .btn + .manage { margin-bottom: 8px; }
.copy-row { display: flex; gap: 8px; }
.copy-row .input { flex: 1 1 auto; font-family: var(--font-mono); font-size: 13px; }

.manage > summary {
  display: inline-flex;
  color: var(--link);
  font-size: var(--t-sm);
  cursor: pointer;
  list-style: none;
}
.manage > summary::-webkit-details-marker { display: none; }
.manage > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.manage[open] > summary { margin-bottom: 12px; }
.manage-body { display: grid; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-nested); background: var(--surface-2); }

/* Touch screens: every control a thumb's size. */
@media (pointer: coarse) {
  .btn, .btn-sm, .input, .input-sm, .input-select.input-sm { min-height: 44px; }
}
/* Phones: fields at 16px, so the browser doesn't zoom in on them. */
@media (max-width: 820px) {
  .input, .input-sm, .input-select.input-sm { font-size: 16px; }
}

/* Account menu ----------------------------------------------------------- */

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: var(--r-control);
  transition: background-color .15s ease;
}
@media (hover: hover) {
  .menu-button:hover { background: var(--side-hover); }
}
.menu[open] > .menu-button { background: var(--side-press); }
.menu-button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.menu-text { display: grid; min-width: 0; line-height: 1.3; text-align: left; }
.menu-name { overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ws-name { overflow: hidden; color: var(--ink-3); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.menu-who { display: grid; gap: 1px; margin-bottom: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.menu-who strong { color: var(--ink); font-size: var(--t-base); font-weight: 600; }
.menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font-size: var(--t-base);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover { background: var(--bg-alt); }
.menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Books: Today, Entities and a month's job --------------------------------
   Firms and companies use the same sidebar as funds (Today, Entities,
   Binder, Reports), with "Find an entity" and + under the logo. Every
   selector here is .bk-*, so the dashboard and sign-in screens are
   unaffected. */


.bk-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bk-note { color: var(--ink-2); font-size: var(--t-base); }
.bk-foot { color: var(--ink-3); font-size: var(--t-sm); }
/* All clear ("Nothing needs you.", "Everything is sorted."): a quiet card
   with a green tick before its title. */
.bk-calm { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.bk-calm-title { display: flex; align-items: center; gap: 10px; font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.bk-calm-title::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--state-ok) var(--icon-check-white) 50% 50% / 12px 12px no-repeat; }
.bk-calm p { color: var(--ink-2); font-size: var(--t-base); }
.bk-calm p:not(.bk-calm-title) { padding-left: 30px; }
.bk-dot::before { content: "·"; margin: 0 8px; color: var(--ink-3); }
.bk-ok { color: var(--state-ok-ink); font-weight: 600; }
.bk-bad { color: var(--state-bad-ink); font-weight: 600; }
.bk-glyph { font-size: 14px; line-height: 1; }
.is-done .bk-glyph, .is-ready .bk-glyph { color: var(--state-ok); }
.is-needs .bk-glyph, .is-sorted .bk-glyph { color: var(--state-needs); }
.is-progress .bk-glyph { color: var(--state-wait); }
.is-none .bk-glyph, .is-off .bk-glyph { color: var(--ink-3); }

/* The bank connection's mark: a check while new transactions arrive and
   are sorted on their own, else what needs a person. */
.bk-conn { display: flex; gap: 9px; align-items: baseline; }
.bk-conn .bk-mark { flex: none; min-width: 15px; color: var(--ink-3); font-size: 14px; font-weight: 600; line-height: 1; text-align: center; }
.bk-conn.is-ok .bk-mark { color: var(--state-ok); }
.bk-conn.is-loading .bk-mark, .bk-conn.is-waiting .bk-mark, .bk-conn.is-stale .bk-mark, .bk-conn.is-failed .bk-mark { color: var(--state-wait-ink); }
.bk-conn.is-reconnect .bk-mark { color: var(--state-bad-ink); }

/* Today: one list of what needs a person. */
.bk-list { display: grid; gap: 8px; }
.bk-list-title,
.bk-section-title {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.bk-section-sub { margin: -2px 0 10px; color: var(--ink-3); font-size: var(--t-sm); }
.bk-remember { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; }
.bk-remember .checkbox-line { gap: 8px; font-size: 14px; }
.bk-remember .checkbox-line input { flex: none; }
.bk-remember .input-select.bk-scope { flex: 0 1 auto; width: auto; max-width: min(16rem, 100%); min-height: 34px; padding-block: 4px; font-size: 14px; }
.bk-pile-actions > .btn { margin-left: auto; }
.bk-pile-actions > .bk-remember { flex: 1 1 auto; }
/* What a question's rule will match, under its tick: "ACME SUPPLY → Supplies". */
.bk-rule-what { flex-basis: 100%; padding-left: 21px; color: var(--ink-3); font-size: 13px; overflow-wrap: anywhere; }
.bk-rule-what b { color: var(--ink-2); font-weight: 600; }
.bk-quick-remember { grid-column: 3 / -1; justify-self: end; font-size: 13.5px; color: var(--ink-2); }
.bk-file { display: grid; gap: 4px; }
.bk-file-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 13.5px; }
.bk-file-actions form { margin: 0; }
.bk-replace summary, .bk-clear summary { color: var(--accent); font-size: 13.5px; cursor: pointer; }
.bk-replace-form, .bk-clear-form { display: grid; gap: 10px; justify-items: start; margin-top: 8px; }
.bk-clear { margin-top: 10px; }
.bk-clear summary { color: var(--danger); }
.bk-approve-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bk-guess { margin: -4px 0 10px; color: var(--ink-2); font-size: 13.5px; }
.bk-guess strong { color: var(--ink); font-weight: 600; }
.bk-rows {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  list-style: none;
}
.bk-rows > li + li { border-top: 1px solid var(--line); }
.bk-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 12px 16px 2px; }
.bk-group-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.bk-group-rows .bk-row { padding-left: 32px; }
.bk-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .12s ease;
}
.bk-row:hover { background: var(--surface-2); }
.bk-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bk-row-name { font-size: var(--t-base); font-weight: 600; }
.bk-row-what { color: var(--ink-2); font-size: 13.5px; }
.bk-row-status { justify-self: end; }
.bk-row-go { color: var(--ink-3); opacity: .55; transition: opacity .15s ease, transform .15s ease; }
.bk-row:hover .bk-row-go { opacity: 1; transform: translateX(2px); }

/* Entities: months across. */
.bk-grid th, .bk-grid td { vertical-align: middle; }
.bk-grid .bk-month { width: 19%; }
.bk-grid abbr { text-decoration: none; }
.bk-grid .bk-group th {
  padding-top: 14px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bk-grid tbody th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 500;
  white-space: normal;
}
.bk-grid tbody tr:last-child th { border-bottom: 0; }
.bk-entity { text-align: left; }
.table .bk-entity a { text-decoration: none; }
.table .bk-entity a:hover { text-decoration: underline; }
.bk-entity .sub { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
.bk-cell { padding: 8px 10px; }
.table a.bk-cell-link,
.bk-cell-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.bk-cell-link:hover { background: var(--bg-alt); }
.table a.bk-cell-link.is-needs,
.table a.bk-cell-link.is-sorted { background: var(--state-needs-soft); color: var(--state-needs-ink); }
.table a.bk-cell-link.is-ready { background: var(--state-ok-soft); color: var(--state-ok-ink); }
.table a.bk-cell-link.is-needs:hover,
.table a.bk-cell-link.is-sorted:hover { box-shadow: inset 0 0 0 1px var(--state-needs-line); }
.table a.bk-cell-link.is-ready:hover { box-shadow: inset 0 0 0 1px var(--state-ok-line); }
.bk-cell-sum { display: block; margin-top: 4px; color: var(--ink-3); font-size: 11.5px; }

/* An entity: the board, a row per workflow and a cell per period. A
   quarter spans three month columns and a year all twelve. */
.bk-board { min-width: 720px; table-layout: fixed; }
.bk-board th, .bk-board td { padding: 2px; border-bottom: 0; vertical-align: top; }
.bk-board thead th { padding: 0 2px 6px; border-bottom: 0; font-size: var(--t-xs); }
.bk-board thead abbr { text-decoration: none; }
.bk-board .bk-board-name { width: 136px; padding: 11px 10px 2px 0; color: var(--ink); font-size: var(--t-base); font-weight: 500; white-space: normal; }
.table .bk-board-name a { text-decoration: none; }
.table .bk-board-name a:hover { text-decoration: underline; }
.bk-board .bk-board-name .sub { font-size: var(--t-xs); font-weight: 400; }
.bk-board .bk-month-cell { min-height: 58px; padding: 7px 7px 6px; }
.bk-board .bk-month-name { display: none; }
/* Twelve months share a row: a long word breaks with a hyphen. */
.bk-board .bk-month-state { font-size: 11.5px; line-height: 1.25; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.bk-board .bk-month-minutes { font-size: 11px; }
.bk-month-cell {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-nested);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-month-cell:hover { border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.bk-month-cell.is-needs { border-color: var(--state-needs-line); background: var(--state-needs-soft); }
.bk-month-cell.is-ready { border-color: var(--state-ok-line); background: var(--state-ok-soft); }
.bk-month-cell.is-sorted { border-color: var(--line-strong); }
.bk-month-name { font-weight: 600; }
.bk-month-state, .bk-month-minutes { color: var(--ink-2); font-size: var(--t-xs); }
.bk-jobs { display: grid; margin: 0; padding: 0; list-style: none; }
.bk-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.bk-job:first-child { border-top: 0; padding-top: 0; }
.bk-job-name { font-weight: 500; }
.bk-job-name .sub { display: block; color: var(--ink-3); font-size: var(--t-sm); font-weight: 400; }
.bk-job-when, .bk-job-state { color: var(--ink-3); font-size: var(--t-sm); }
.bk-job.is-coming .bk-job-name { color: var(--ink-3); }
/* A workflow's switch: "On" with a green dot, "Off" with a grey one. */
.bk-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 60px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.bk-switch::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.bk-switch:hover { border-color: var(--input-line); }
.bk-switch.is-on { border-color: var(--state-ok-line); background: var(--state-ok-soft); color: var(--state-ok-ink); }
.bk-switch.is-on::before { background: var(--state-ok); }
.bk-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bk-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.bk-inline + .bk-inline { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bk-inline .field { gap: 4px; }
.bk-inline .label { margin: 0; font-size: 13px; }
.bk-inline .input { min-width: 10rem; }
.bk-inline-choices { display: flex; align-items: center; gap: 12px; }
.bk-inline-choices legend { float: left; margin: 0 6px 0 0; }
/* An entity's other pages: a grid of links with hairlines between them.
   Each link's right and bottom hairline hangs 1px outside it, so the
   card clips the ones on its edges. */
.bk-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); overflow: hidden; }
.bk-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -1px -1px 0;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .12s ease;
}
.bk-links a:hover { background: var(--surface-2); }
.bk-count { color: var(--ink-3); }
.bk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card.bk-filters { padding: 12px 16px; }
.bk-filters > .inline-form { flex: 1 1 auto; }
.bk-entries tr.is-void td, .bk-entries tr.is-void th { color: var(--ink-3); }
.bk-entry-lines .bk-entry-total th, .bk-entry-lines .bk-entry-total td { border-top: 1px solid var(--line-strong); font-weight: 600; }
.bk-entry-keys { display: grid; gap: 6px; margin: 16px 0 0; font-size: var(--t-base); }
.bk-entry-keys div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.bk-entry-keys dt { color: var(--ink-3); min-width: 9rem; }
.bk-entry-keys dd { margin: 0; }
.bk-entry-actions { display: grid; gap: 14px; }
.bk-entry-actions .field-help { margin-top: 6px; }
.bk-entry-head { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 3fr); gap: 14px; margin-bottom: 14px; }
.bk-entry-form td { padding: 6px 8px; }
.bk-entry-form .input { width: 100%; min-width: 7rem; }
.bk-entry-form .input-select { min-width: 12rem; }
.bk-candidate { display: grid; gap: 10px; margin-bottom: 12px; }
.bk-candidate-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bk-candidate-name { font-size: 16px; font-weight: 600; }
.bk-candidate-why { color: var(--ink-2); font-size: 14px; }
.bk-inline-form { display: inline; }
.bk-candidate.is-done { background: var(--state-ok-soft); border-color: var(--state-ok-line); }
.bk-budget .bk-budget-cell { width: 6.5rem; text-align: right; }
.bk-budget td.num { padding: 6px 6px; }
.bk-year-nav span { font-weight: 600; }
.bk-inline-form .btn-link { font-size: inherit; }
.bk-binder-months { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-binder-month { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; }
.table a.bk-binder-month { font-weight: 500; }
.bk-binder-month:hover { background: var(--surface-2); }
.ask-pick-wide { grid-column: 1 / -1; }
.ask-pick-wide textarea { width: 100%; min-width: 16rem; }
.ask-preview { display: grid; gap: 8px; }
.ask-preview .bk-sheet-table { font-size: 11.5px; }
.ask-preview .bk-sheet-table td { max-width: 14rem; }
.bk-sheet { display: grid; gap: 10px; }
.bk-sheet-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-sheet-tab { padding: 4px 10px; border-radius: 999px; background: var(--bg-alt); color: var(--ink-2); font-size: 13px; text-decoration: none; }
.bk-sheet-tab[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-xs); font-weight: 600; }
.bk-sheet-table { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bk-sheet-table td { padding: 3px 8px; border: 1px solid var(--line); white-space: nowrap; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; }
.bk-sheet-table td.is-num { text-align: right; }
.bk-sheet-table td.is-bold { background: var(--bg-alt); font-weight: 600; }
@media (max-width: 720px) {
  .bk-entry-head { grid-template-columns: minmax(0, 1fr); }
}
.bk-rule-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bk-matches { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.bk-recode { border-color: var(--state-needs-line); }
.bk-after { display: grid; gap: 14px; margin-bottom: 16px; }
.bk-after-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bk-after-text { margin: 0; }
.bk-after-offer { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
tr.is-retired td { color: var(--ink-3); }

/* A month's job. */
.bk-job-head { display: grid; gap: 8px; }
.bk-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.bk-kicker { margin-top: 2px; color: var(--ink-3); font-size: var(--t-base); }
.bk-status { color: var(--ink-2); font-size: var(--t-base); }
.bk-status-small { font-size: var(--t-sm); color: var(--ink-3); }
/* Where the month is: four steps, each a tile with a bar along its top in
   its state's colour (done, now, a problem) or a hairline (later). */
.bk-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.bk-flow-step { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 13px 12px 11px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-nested); background: var(--surface); }
.bk-flow-step::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--line); }
.bk-flow-mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.bk-flow-text { display: grid; gap: 2px; min-width: 0; }
.bk-flow-name { font-weight: 600; font-size: var(--t-base); }
.bk-flow-note { color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.bk-flow-step.is-done::before { background: var(--state-ok); }
.bk-flow-step.is-done .bk-flow-mark { border-color: var(--state-ok); background: var(--state-ok); color: var(--on-accent); }
.bk-flow-step.is-now { border-color: var(--state-needs-line); }
.bk-flow-step.is-now::before { background: var(--state-needs); }
.bk-flow-step.is-now .bk-flow-mark { border-color: var(--state-needs); color: var(--state-needs-ink); }
.bk-flow-step.is-problem { border-color: var(--state-bad-line); background: var(--state-bad-soft); }
.bk-flow-step.is-problem::before { background: var(--state-bad); }
.bk-flow-step.is-problem .bk-flow-mark { border-color: var(--state-bad-ink); color: var(--state-bad-ink); }
.bk-flow-step.is-later .bk-flow-name, .bk-flow-step.is-later .bk-flow-note { color: var(--ink-3); }
.bk-year-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.bk-year-nav { display: flex; gap: 16px; font-size: 13.5px; }
.bk-month-cell.is-future { border-style: dashed; background: transparent; color: var(--ink-3); }
.bk-month-cell.is-off { background: transparent; color: var(--ink-3); }
.bk-facts { display: grid; gap: 6px; margin: 0 0 14px; padding-left: 1.1em; color: var(--ink-2); }
.bk-filters .input-select { width: auto; max-width: 14rem; }
.bk-filters-clear { font-size: var(--t-sm); }
/* Several workflows in one month: stacked inside the cell, which stays a
   table cell (a grid on the td itself drops it out of its column). */
.bk-cell-stack { display: grid; gap: 2px; justify-items: start; }
.bk-cell-kind { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bk-download { position: relative; }
.bk-download > summary { list-style: none; }
.bk-download > summary::-webkit-details-marker { display: none; }
.bk-download-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 14px;
  width: min(430px, 90vw);
  padding: 18px 20px;
  box-shadow: var(--shadow-lift);
}
.bk-more > summary,
.bk-fix > summary,
.bk-sorted > summary,
.bk-left > summary { color: var(--link); font-size: 13.5px; cursor: pointer; }
.bk-more[open] > summary { margin-bottom: 12px; }

.bk-drop {
  display: grid;
  gap: 14px;
  padding: clamp(24px, 5vw, 44px);
  border: 1.5px dashed var(--line-strong);
  box-shadow: none;
}
.bk-drop-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.bk-drop-sub { max-width: 60ch; color: var(--ink-2); font-size: var(--t-base); }
.bk-drop-form { max-width: 480px; }
.bk-drop.is-dragging { border-color: var(--accent); background: var(--accent-soft); }
.bk-drop input[type=file],
.bk-files input[type=file] { padding: 8px; background: var(--surface-2); cursor: pointer; }
.bk-drop input[type=file]::file-selector-button,
.bk-files input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--btn-2-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.bk-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: var(--t-base); }
.bk-steps li { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.bk-steps li::before { content: "○"; width: 18px; text-align: center; }
.bk-steps li.is-done { color: var(--ink); }
.bk-steps li.is-done::before { content: "✓"; color: var(--ok); }
.bk-steps li.is-now { color: var(--ink); font-weight: 600; }
.bk-steps li.is-now::before { content: "◐"; color: var(--accent); }
/* The step being worked on spins while the page waits for the reader.
   Reduced motion keeps the still glyph instead. */
.bk-spinner,
.bk-steps li.is-now::before {
  content: "";
  box-sizing: border-box;
  display: inline-block;
  width: 14px; height: 14px;
  margin: 0 2px;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: bk-spin .8s linear infinite;
}
.bk-reading-text, .bk-status.is-reading, .alert.is-reading { display: flex; align-items: center; gap: 10px; }
@keyframes bk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bk-steps li.is-now::before { content: "◐"; width: 18px; height: auto; border: 0; border-radius: 0; animation: none; }
  .bk-spinner { animation: none; border-right-color: var(--accent); opacity: .6; }
}
.bk-step-note { font-weight: 400; color: var(--ink-3); }
.bk-reading { display: grid; gap: 10px; }
.bk-reading + .bk-reading { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.bk-reading-name { margin: 0; font-size: 14px; color: var(--ink-2); }
.bk-reading-text { margin: 0; font-size: 14px; color: var(--ink-2); }
/* While a statement is read: the shape of the lines to come, shimmering.
   Reduced motion keeps it still. */
.bk-skeleton { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.bk-skeleton li {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--tile) 25%, var(--bg-alt) 50%, var(--tile) 75%) 0 0 / 200% 100%;
  animation: bk-shimmer 1.6s linear infinite;
}
.bk-skeleton li:nth-child(2) { width: 78%; }
.bk-skeleton li:nth-child(3) { width: 54%; }
@keyframes bk-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bk-skeleton li { animation: none; } }

/* A bank reconciliation: the figures, then what's outstanding. */
.bk-recon { display: grid; gap: 14px; }
.bk-recon-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bk-recon-sum { width: 100%; max-width: 34rem; border-collapse: collapse; font-size: var(--t-base); }
.bk-recon-sum th { padding: 6px 12px 6px 0; color: var(--ink-2); font-weight: 400; text-align: left; }
.bk-recon-sum td { padding: 6px 0; text-align: right; white-space: nowrap; }
.bk-recon-sum .is-total th, .bk-recon-sum .is-total td { border-top: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; }
.bk-recon-sum .is-total.is-off td { color: var(--state-bad-ink); }
.bk-recon-sum .is-total.is-ok td { color: var(--state-ok-ink); }
.bk-recon-sum th .sub { display: block; font-size: var(--t-sm); color: var(--ink-3); }
.bk-recon-qbo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bk-recon-qbo .bk-tie-note { margin: 0; }
.bk-recon-items { display: grid; gap: 10px; }
.bk-nowrap { white-space: nowrap; }
.bk-tieout { display: grid; gap: 10px; }
.bk-tie { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.bk-tie.is-ok { border-color: var(--state-ok-line); background: var(--state-ok-soft); }
.bk-tie.is-off { border-color: var(--state-bad-line); background: var(--state-bad-soft); }
.bk-tie-account { font-size: var(--t-base); font-weight: 600; }
.bk-tie-math { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--t-md); }
.bk-tie-note { color: var(--ink-2); font-size: var(--t-base); }
.bk-op { color: var(--ink-3); }
.bk-sections { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 13px; }
.bk-sections .is-off { color: var(--state-bad-ink); font-weight: 600; }
.bk-fix-body { display: grid; gap: 12px; margin-top: 12px; font-size: 14px; }
.bk-disputed { display: grid; gap: 8px; margin-top: 4px; padding: 12px 14px; border: 1px solid var(--state-wait-line); border-radius: var(--r-nested); background: var(--state-wait-soft); color: var(--state-wait-ink); }
.bk-disputed form { display: grid; gap: 10px; justify-items: start; }
.bk-disputed-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; overflow-wrap: anywhere; }
.bk-disputed-list .choice { align-items: flex-start; }

.bk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: 24px; align-items: start; }
.bk-main { display: grid; gap: 24px; min-width: 0; }
.bk-side { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1261px) and (min-height: 640px) {
  .bk-side { position: sticky; top: calc(var(--nav-h) + 20px); max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; }
}
@media (min-width: 1071px) and (max-width: 1260px) and (min-height: 640px) {
  .rail-collapsed .bk-side { position: sticky; top: calc(var(--nav-h) + 20px); max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; }
}
.bk-section { display: grid; gap: 10px; scroll-margin-top: 12px; }
.bk-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bk-quick-list {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  list-style: none;
}
.bk-quick { display: grid; gap: 6px; padding: 12px 16px; }
.bk-quick + .bk-quick { border-top: 1px solid var(--line); }
.bk-quick:focus { outline: none; }
.bk-quick:focus-visible, .bk-quick.is-current { box-shadow: inset 3px 0 0 var(--focus); }
.bk-quick-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(10rem, 15rem) auto; align-items: center; gap: 8px 14px; }
.bk-quick-name { min-width: 0; font-weight: 600; font-size: var(--t-base); overflow-wrap: anywhere; }
.bk-quick-name .sub { display: block; color: var(--ink-3); font-size: 12.5px; font-weight: 400; }
.bk-quick-total { color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
.bk-quick .input-select { width: 100%; }
.bk-quick .bk-lines > summary { font-size: 12.5px; }
#tieout { scroll-margin-top: 12px; }

.bk-pile {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-pile:focus { outline: none; }
/* A change to a pile's lines comes back to its card, with its message above it. */
.bk-pile, .bk-quick, .bk-register, .bk-split .alerts { scroll-margin-top: 12px; }
.bk-pile.is-question { border-color: var(--state-needs-line); }
.bk-pile:focus-visible,
.bk-pile.is-current { border-color: var(--accent); box-shadow: var(--ring); }
.bk-pile > form { display: grid; gap: 12px; }
.bk-pile-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.bk-pile-name { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.bk-pile-total { color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
.bk-question { font-size: var(--t-base); }
.bk-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-choice { position: relative; display: inline-flex; cursor: pointer; }
.bk-choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.bk-choice span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-size: 13.5px;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.bk-choice:hover span { border-color: var(--input-line); }
/* The answer picked: a tint and a tick, so Answer stays the card's only solid button. */
.bk-choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; color: var(--accent-ink); font-weight: 500; }
@media (pointer: coarse) { .bk-choice span { min-height: 40px; } }
.bk-choice input:checked + span::before { content: "✓\00a0"; content: "✓\00a0" / ""; }
.bk-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.bk-other { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bk-pile form:not(:has(input[data-other-choice]:checked)) .bk-other { display: none; }
.bk-other-pick { display: inline-flex; flex: 1 1 18rem; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 30rem; }
.bk-other-label { color: var(--ink-2); font-size: 13.5px; }
.bk-pile-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bk-select-label { display: contents; }
.bk-pile .input-select { flex: 1 1 14rem; width: auto; max-width: 22rem; }
.bk-pile-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bk-leave > summary,
.bk-lines > summary { color: var(--ink-3); font-size: var(--t-sm); cursor: pointer; }
.bk-leave[open] > summary,
.bk-lines[open] > summary { margin-bottom: 8px; }
.bk-leave-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bk-lines-table { font-size: var(--t-sm); }
.bk-lines-table th, .bk-lines-table td { padding: 7px 10px; }
.bk-lines-table input[type=checkbox] { accent-color: var(--btn-bg); }
.bk-line-desc { overflow-wrap: anywhere; }
/* The first cell is the box's label, so the whole cell ticks it (a target
   of at least 24px), and a ticked line is tinted. */
.bk-lines-table .bk-tick { width: 1%; padding: 0; }
.bk-tick-hit { display: grid; place-items: center; min-width: 40px; min-height: 34px; cursor: pointer; }
.bk-lines-table tbody tr:hover > td { background: var(--surface-2); }
.bk-lines-table tbody tr:has(.bk-tick input:checked) > td,
.bk-lines-table tbody tr.is-open > td { background: var(--accent-soft); }
/* "Move" on a line: a quiet pill before the amount, shown on the row's
   hover or focus and while its list is open, and always on touch screens.
   books.js adds .bk-js, so it never shows without the script. */
.bk-line-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.bk-line-text { min-width: 0; }
.bk-row-move { display: none; }
.bk-js .bk-row-move {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  margin-block: -3px;
  padding: 0 10px 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.bk-lines-table tbody tr:hover .bk-row-move,
.bk-lines-table tbody tr:focus-within .bk-row-move,
.bk-lines-table tbody tr.is-open .bk-row-move { opacity: 1; }
.bk-js .bk-row-move:hover,
.bk-lines-table tbody tr.is-open .bk-row-move { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.bk-js .bk-row-move:disabled { opacity: 1; cursor: progress; }
@media (hover: none) { .bk-js .bk-row-move { opacity: 1; } }
/* A chevron drawn in the text's colour: the row's Move, the bar's Move to…,
   and Leave out and Not on the statement, which turn it up when open. */
.bk-row-move::after,
.bk-picker-move::after,
.bk-more > summary::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .75;
}
.bk-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.bk-lines-note { margin: 6px 0 0; padding-left: 10px; color: var(--ink-3); font-size: 13px; }
/* The one bar for ticked lines stays in view while the lines scroll by. */
.bk-lines-actions { position: sticky; bottom: 0; z-index: 1; display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; background: var(--surface-2); font-size: 13.5px; }
.bk-bar-hint { margin: 0; color: var(--ink-3); }
.bk-bar-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bk-bar-sel { display: inline-flex; align-items: baseline; gap: 10px; }
.bk-bar-count { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-bar-move { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 100%; }
.bk-bar-clear { color: var(--ink-3); }
.bk-move-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; }
.bk-move-label .input-select { width: auto; max-width: 16rem; }
/* Leave out and Not on the statement: quiet until opened, then a reason or an explanation first. */
.bk-picker-move { gap: 9px; }
.bk-more > summary { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; list-style: none; cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.bk-more > summary::-webkit-details-marker { display: none; }
.bk-more > summary:hover { background: var(--bg-alt); color: var(--ink); }
.bk-more[open] { flex-basis: 100%; }
.bk-more[open] > summary { background: var(--bg-alt); color: var(--ink); }
.bk-more.is-danger > summary { color: var(--danger); }
.bk-more.is-danger > summary:hover,
.bk-more.is-danger[open] > summary { background: var(--danger-soft); color: var(--danger); }
.bk-more-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 8px; }
.bk-more-note { flex-basis: 100%; max-width: 60ch; color: var(--ink-2); }
.bk-reason { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; font-size: 14px; cursor: pointer; }
.bk-reason input { margin: 0; accent-color: var(--btn-bg); }
/* "New category…" in a list shows a field for its name beside it: CSS only,
   so it works without JavaScript (books.js also focuses it). */
/* "New category…" is a plain disclosure beside the list: closed, a link;
   open, it takes the row with the name and the kind. */
.bk-new-cat { display: inline-block; max-width: 100%; }
.bk-new-cat[open] { flex-basis: 100%; }
.bk-new-cat > summary { display: inline-block; list-style: none; color: var(--link); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; vertical-align: middle; }
.bk-new-cat > summary::-webkit-details-marker { display: none; }
.bk-new-cat[open] > summary { color: var(--ink-2); text-decoration: none; }
.bk-new-cat-body { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; margin-left: 8px; vertical-align: middle; }
.bk-new-cat-name, .bk-new-cat-kind { display: contents; }
.bk-new-cat .input { flex: 1 1 12rem; width: auto; max-width: 100%; }
.bk-pile .bk-new-cat .input-select, .bk-new-cat .input-select { flex: 0 1 auto; width: auto; max-width: 100%; }
.bk-quick-form .bk-new-cat { grid-column: 3 / -1; }
.bk-quick-form .bk-new-cat[open] { grid-column: 1 / -1; }
/* The category picker (books.js): one per page, floating above it (in the
   browser's top layer where there is one, so a table's scrolling never
   clips it). books.js places it beside its button and sets its width and
   height; nothing here uses a style attribute. */
.bk-picker {
  position: fixed;
  inset: auto;
  z-index: 60;
  display: none;
  flex-direction: column;
  width: 20rem;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  font-size: 14px;
  line-height: 1.4;
}
.bk-picker.is-open { display: flex; animation: bk-picker-in .12s ease-out; }
.bk-picker.is-open.is-above { animation-name: bk-picker-in-above; }
@keyframes bk-picker-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes bk-picker-in-above { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .bk-picker.is-open { animation: none; } }
.bk-picker-browse, .bk-picker-create { display: flex; flex-direction: column; min-height: 0; }
.bk-picker-browse { flex: 1 1 auto; }
.bk-picker-head { padding: 10px 14px 0; color: var(--ink-3); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.bk-picker-search { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.bk-picker-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px 8px 32px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent var(--icon-search) no-repeat 9px center / 16px 16px;
  color: var(--ink);
  font-size: 14px;
}
.bk-picker-search input::placeholder { color: var(--ink-3); }
.bk-picker-search input:focus { outline: none; }
.bk-picker-search input:focus-visible { outline: none; }
.bk-picker-list { position: relative; flex: 1 1 auto; min-height: 0; padding: 0 6px 6px; overflow-y: auto; overscroll-behavior: contain; }
.bk-picker-group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 8px 4px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.bk-picker-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.bk-picker-opt.is-active { background: var(--accent-soft); color: var(--accent-ink); }
.bk-picker-name { min-width: 0; }
.bk-picker-opt mark { background: none; color: inherit; font-weight: 600; }
/* The current choice: a tick at the end of its row. */
.bk-picker-opt[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 5px;
  height: 10px;
  margin: -3px 3px 0 auto;
  border-right: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(45deg);
}
.bk-picker-empty { padding: 14px 14px 10px; color: var(--ink-3); }
.bk-picker-foot { padding: 4px 6px; border-top: 1px solid var(--line); }
.bk-picker-opt.is-new { color: var(--link); font-weight: 500; }
.bk-picker-opt.is-new::before { content: "+"; width: 14px; font-size: 17px; line-height: 1; text-align: center; }
.bk-picker-opt.is-new.is-active { color: var(--accent-ink); }
.bk-picker-create { gap: 12px; padding: 12px 14px 14px; overflow-y: auto; }
.bk-picker-create-head { display: flex; align-items: center; gap: 8px; }
.bk-picker-back { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.bk-picker-back::before { content: ""; width: 6px; height: 6px; margin-left: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.bk-picker-back:hover { background: var(--bg-alt); color: var(--ink); }
.bk-picker-title { font-weight: 600; }
.bk-picker-field { display: grid; gap: 6px; }
.bk-picker-field-label { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.bk-picker-kinds { display: grid; gap: 6px; }
.bk-picker-kinds legend { margin: 0 0 6px; }
.bk-picker-kinds .bk-choices { gap: 6px; }
.bk-picker-kinds .bk-choice span { padding: 4px 11px; font-size: 13px; }
.bk-picker-error { color: var(--danger); font-size: 13px; }
.bk-picker-create-actions { display: flex; justify-content: flex-end; }
.bk-sorted[open] > summary,
.bk-left[open] > summary { margin-bottom: 10px; }
.bk-left ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.bk-files { display: grid; gap: 10px; }
.bk-file-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.bk-file-list .sub { display: block; color: var(--ink-3); font-size: 12.5px; }
.bk-refresh { justify-self: start; font-size: 13.5px; }

.bk-register { padding: 16px 16px 12px; }
.bk-reg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.bk-reg-print { margin: 0; flex-basis: 100%; text-align: right; }
.bk-reg-title { font-size: 15px; font-weight: 600; }
.bk-reg-account { color: var(--ink-3); font-size: 13px; text-align: right; }
.bk-reg { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.bk-reg > li { border-top: 1px solid var(--line); }
.bk-reg-line,
.bk-reg-row > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 8px 4px;
}
.bk-reg-line { grid-template-columns: minmax(0, 1fr) auto; }
.bk-reg-row > summary { border-radius: var(--r-xs); list-style: none; cursor: pointer; }
.bk-reg-row > summary::-webkit-details-marker { display: none; }
.bk-reg-row > summary:hover { background: var(--surface-2); }
.bk-reg-row > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bk-reg-num { display: block; color: var(--ink-3); font-size: 11px; font-weight: 400; letter-spacing: .02em; }
.bk-reg-label { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.bk-reg-label .sub { display: block; color: var(--ink-3); font-size: 12px; font-weight: 400; }
.bk-reg .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-reg-bal { min-width: 6.5rem; color: var(--ink-3); }
.bk-split.is-sorted { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.bk-split.is-sorted .bk-register { padding: 22px 24px 18px; }
.bk-split.is-sorted .bk-reg { font-size: var(--t-base); }
.bk-split.is-sorted .bk-reg-bal { min-width: 8rem; }
.bk-split.is-sorted .bk-reg-num { display: inline-block; width: 5.5rem; }
.bk-reg-line.is-quiet { color: var(--ink-2); }
.bk-reg-line.is-end { color: var(--ink); font-weight: 600; }
.bk-reg-line.is-open { color: var(--accent-ink); }
.bk-reg-row.is-out .bk-reg-label { color: var(--ink-2); }
.bk-reg-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 4px 0 12px; }
/* An open register row: groups of one payee. The box ticks the whole group;
   opening a group shows its lines. */
.bk-group-cat { display: flex; justify-content: space-between; gap: 12px; margin: 6px 4px 0; color: var(--ink-2); font-weight: 600; }
.bk-groups { margin: 0; padding: 0; list-style: none; }
.bk-groups > .bk-group { display: flex; align-items: flex-start; gap: 8px; padding: 0 4px; border-top: 1px solid var(--line); }
.bk-groups > .bk-group:last-child { border-bottom: 1px solid var(--line); }
.bk-group-box { flex: none; margin: 11px 0 0; accent-color: var(--btn-bg); }
.bk-group-body { flex: 1; min-width: 0; }
.bk-group-body > summary { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; list-style: none; cursor: pointer; }
.bk-group-body > summary::-webkit-details-marker { display: none; }
.bk-group-body > summary:hover .bk-group-name { text-decoration: underline; }
.bk-group-body > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bk-group-name { min-width: 0; overflow-wrap: anywhere; }
.bk-group-name .sub { margin-left: 8px; color: var(--ink-3); font-size: 12.5px; }
.bk-group-body .table-wrap { margin-bottom: 8px; }
.bk-reg-foot { margin-top: 10px; color: var(--ink-2); font-size: 13.5px; }

.bk-keys { width: min(420px, 90vw); padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.bk-keys[open] { display: grid; gap: 14px; }
/* Not a token: ::backdrop doesn't inherit from :root in every browser. */
.bk-keys::backdrop { background: rgb(18 23 38 / .32); }
kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: center;
}

@media (max-width: 1260px) {
  .bk-split, .bk-split.is-sorted { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1071px) and (max-width: 1260px) {
  .rail-collapsed .bk-split { grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); }
  .rail-collapsed .bk-split.is-sorted { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
}
@media (max-width: 820px) {
  /* Phones: each workflow's periods wrap three to a line under its name. */
  .bk-board { min-width: 0; }
  .bk-board, .bk-board tbody { display: block; }
  .bk-board thead { display: none; }
  .bk-board tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-block: 10px; }
  .bk-board tr + tr { border-top: 1px solid var(--line); }
  .bk-board .bk-board-name { grid-column: 1 / -1; width: auto; padding: 0 0 2px; }
  .bk-board td { display: block; padding: 0; }
  .bk-board td.is-span-3, .bk-board td.is-span-12 { grid-column: 1 / -1; }
  .bk-board .bk-month-name { display: block; }
  .bk-board .bk-month-cell { min-height: 0; }
  .bk-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-rule-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bk-quick-form { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-quick-remember { grid-column: 1 / -1; justify-self: start; }
  .bk-quick-form .bk-select-label, .bk-quick-form .btn { grid-column: span 1; }
  .bk-quick-form .bk-new-cat { grid-column: 1 / -1; }
  .bk-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .bk-row-what { grid-column: 1; grid-row: 2; }
  .bk-row-status { grid-column: 2; grid-row: 1 / span 2; }
  .bk-row-go { display: none; }
  .bk-download-panel { position: static; width: auto; margin-top: 8px; }
  .bk-narrow-hide { display: none; }
  .bk-job { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .bk-job-name { grid-column: 1 / -1; }
  .bk-job-when { grid-column: 1; }
}
@media (forced-colors: active) {
  .bk-choice input:checked + span, .bk-switch.is-on { border: 1px solid CanvasText; }
}

/* Small screens ---------------------------------------------------------- */

@media (max-width: 1200px) {
  .app.has-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  /* Phones: the sidebar is a bar across the top, the logo on the left
     and +, "Menu" and the account on the right. The rail drops over the
     page from the bar, a card like the account menu, each row tall enough
     for a thumb; app.js closes it to start and on Escape or a tap
     elsewhere. Without the script it starts open, on its own line under
     the bar (which then doesn't stick, so it never covers the page), and
     the tap on Menu still closes it (a native <details>). Until app.js
     has set the drawer's state, a phone with scripts doesn't draw the
     open list. */
  :root:has(> body.is-app) { --nav-h: var(--bar-h); }
  body.is-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .is-app > main { grid-column: 1; grid-row: 2; }
  .is-app > .app-foot { grid-column: 1; grid-row: 3; }
  .app-side {
    grid-row: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    height: auto;
    min-height: var(--bar-h);
    padding: 8px var(--gutter);
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--side-glass);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }
  html:not(.app-js) .app-side { position: relative; }
  .app-side-head { flex: 1 1 auto; height: auto; margin: 0; padding: 0; }
  .side-tools { order: 2; height: auto; margin: 0; }
  .top-search { display: none; }
  .top-plus { width: 40px; height: 40px; background: transparent; box-shadow: none; }
  .top-plus:hover { background: var(--side-press); box-shadow: none; }
  .rail-drawer { order: 3; flex: none; margin: 0; padding: 0; overflow: visible; }
  .app-side-foot { order: 4; height: auto; margin: 0; padding: 0; border: 0; }
  html:not(.app-js) .rail-drawer[open] { flex-basis: 100%; order: 5; }
  .rail-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px 0 10px;
    border-radius: var(--r-control);
    color: var(--ink-2);
    font-size: var(--t-base);
    font-weight: 500;
    cursor: pointer;
  }
  .rail-menu:hover,
  .rail-drawer[open] > .rail-menu { background: var(--side-press); color: var(--ink); }
  .rail-menu:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .rail {
    min-height: 0;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow-lift);
  }
  .app-js .rail {
    position: absolute;
    top: calc(100% + 6px);
    right: var(--gutter);
    left: var(--gutter);
    z-index: 60;
    margin: 0;
    max-height: calc(100dvh - var(--bar-h) - 24px);
    overflow-y: auto;
  }
  .app-js .rail-drawer:not(.is-ready) > .rail { display: none; }
  .rail-link { min-height: 44px; }
  .rail-link[aria-current="page"] { background: var(--accent-soft); }
  .rail-foot { margin-top: 0; }
  .rail-fold { display: none; }
  .app-side .menu-button { width: auto; height: 40px; padding: 0 4px; }
  .app-side .menu-button::after,
  .menu-text { display: none; }
  .app-side .menu-panel { top: calc(100% + 8px); right: 0; bottom: auto; left: auto; width: auto; }
  .app-wrap { padding: 20px var(--gutter) 40px; }
  .app-foot { padding: 8px var(--gutter) 24px; }
  .auth { padding: 24px 20px; }
}
/* The narrowest phones: the logo keeps its mark and drops its name. */
@media (max-width: 360px) {
  .app-side .brand > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Reports: the profit and loss and the balance sheet ------------------- */

.rp-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.rp-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); }
.rp-tab {
  padding: 5px 12px;
  border-radius: 7px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.rp-tab:hover { color: var(--ink); }
.rp-tab[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-xs);
}
.rp-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rp-fields {
  display: grid;
  grid-template-columns: minmax(12rem, 1.3fr) minmax(14rem, 1.6fr) repeat(2, minmax(9.5rem, 1fr)) auto;
  align-items: end;
  gap: 12px 14px;
}
.rp-fields.is-single { grid-template-columns: minmax(12rem, 1.3fr) minmax(14rem, 1.6fr) minmax(9.5rem, 1fr) auto; }
.rp-fields .field { min-width: 0; }
.rp-fields .input { width: 100%; }
.rp-basis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0 0; padding: 0; border: 0; }
.rp-basis legend { float: left; margin: 0 4px 0 0; }
.rp-basis-choice { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-base); cursor: pointer; }
.rp-basis-choice input { accent-color: var(--btn-bg); }
.rp-basis .field-help { flex-basis: 100%; }
.rp-table.is-two { max-width: 860px; }
.rp-table.is-two .rp-row th { font-weight: 400; }
/* Beside the previous year, and the trial balance before and after the
   adjusting entries: wider, and the numbers tighter. */
.rp-table.is-four { max-width: 980px; }
.rp-table.is-six { max-width: none; }
.rp-table.is-six th, .rp-table.is-six td { padding-left: 8px; padding-right: 8px; }
.rp-table.is-six thead tr:first-child th { padding-bottom: 2px; border-bottom: 0; color: var(--ink-2); }
.rp-option { margin-top: 10px; font-size: var(--t-base); }
.rp-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.rp-pdf-help { margin-top: -8px; }
.rp-fiscal > summary { font-size: var(--t-sm); }
.rp-report { display: grid; gap: 16px; padding: 24px 28px; }
.rp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rp-entity { color: var(--ink-2); font-size: var(--t-base); font-weight: 500; }
.rp-title { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; }
.rp-when { color: var(--ink-3); font-size: var(--t-base); }
.rp-print { display: none; flex: none; }
.bk-js .rp-print { display: inline-flex; }
.rp-table { width: 100%; max-width: 760px; border-collapse: collapse; font-size: var(--t-base); }
.rp-table thead th {
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
}
.rp-table th, .rp-table td { padding: 7px 12px; text-align: left; vertical-align: baseline; }
.rp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-table .sub { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
.rp-row th { font-weight: 400; }
.rp-head th { padding-top: 16px; font-weight: 600; }
.rp-table tbody tr:first-child th { padding-top: 10px; }
.rp-d1 th { padding-left: 28px; }
.rp-d2 th { padding-left: 44px; }
.rp-total th, .rp-total td { border-top: 1px solid var(--line-strong); font-weight: 600; }
.rp-grand th, .rp-grand td { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 700; }
.rp-grand + .rp-head th { padding-top: 24px; }
.rp-notes { padding: 12px 16px; border: 1px solid var(--state-wait-line); border-radius: var(--r-nested); background: var(--state-wait-soft); color: var(--state-wait-ink); font-size: 13.5px; }
.rp-notes ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rp-notes a { color: inherit; font-weight: 600; }
.rp-foot { color: var(--ink-3); font-size: 12.5px; max-width: 76ch; }
.rp-empty { padding: 8px 0; }

@media (max-width: 1000px) {
  .rp-fields,
  .rp-fields.is-single { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-field-go { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .rp-fields,
  .rp-fields.is-single { grid-template-columns: minmax(0, 1fr); }
  .rp-report { padding: 20px 16px; }
  .rp-d1 th { padding-left: 18px; }
  .rp-d2 th { padding-left: 30px; }
}
/* Printed, a report is the page: no sidebar, form or tabs. */
@media print {
  .site-header, .app-side, .rp-page-head, .rp-form, .rp-fiscal, .rp-print, .rp-actions, .rp-pdf-help, .alerts, .app-foot, .site-footer { display: none !important; }
  body.is-app { display: block; }
  .app, .app.has-aside { grid-template-columns: minmax(0, 1fr); }
  .app-wrap { max-width: none; padding: 0; }
  body, .app-wrap, .app-main { background: #fff; }
  .rp-report { padding: 0; border: 0; box-shadow: none; }
  .rp-table { max-width: none; font-size: 12pt; }
  .rp-notes { border-color: #999; background: #fff; color: #000; }
}

/* Ask Balant ------------------------------------------------------------- */
/* The thread: the person's messages on the right as soft tiles, Balant's
   on the left as cards; proposals and a month's close as cards of their
   own, with the forms the person confirms with; the composer at the foot. */
.ask-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.ask-thread { display: grid; gap: 14px; min-width: 0; }
.ask-msg { display: grid; gap: 4px; min-width: 0; }
.ask-msg.is-person { justify-items: end; }
.ask-bubble { max-width: 70ch; padding: 9px 14px; border-radius: 14px; background: var(--tile); font-size: 14.5px; overflow-wrap: anywhere; }
.ask-msg-time { color: var(--ink-3); font-size: var(--t-xs); }
.ask-msg.is-balant { justify-items: start; }
.ask-msg.is-balant > .ask-who,
.ask-msg.is-balant > .ask-text,
.ask-msg.is-balant > .ask-text-link,
.ask-msg.is-balant > .ask-offers { max-width: 72ch; }
.ask-who { margin: 0; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ask-text { display: grid; gap: 8px; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.ask-text p { margin: 0; }
.ask-msg.is-error .ask-text { color: var(--danger); }
.ask-msg.is-result .ask-text { color: var(--ink-2); }
.ask-text-link { margin: 0; font-size: 13.5px; }
.ask-empty { display: grid; gap: 8px; padding: 18px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-2); }
.ask-tries { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--t-base); }
.ask-tries li::before { content: "“"; }
.ask-tries li::after { content: "”"; }
.ask-working { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-3); font-size: 13.5px; }
/* The composer floats at the foot of the thread: one box with the field
   and Send, its border the field's (3:1), a ring while typing. */
.ask-composer {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 18px;
  padding: 6px 6px 6px 2px;
  border: 1px solid var(--input-line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.ask-composer:focus-within { border-color: var(--accent); box-shadow: var(--ring), var(--shadow-lift); }
.ask-composer .ask-input { min-height: 40px; max-height: 40vh; padding: 9px 12px; border: 0; background: transparent; box-shadow: none; resize: none; field-sizing: content; }
.ask-composer .ask-input:focus { box-shadow: none; }
.ask-offers { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.ask-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ask-offer-name { font-weight: 600; }
.ask-offer form { margin-inline-start: auto; }

/* A proposal: what Balant wants to do, the lines it's about, what the
   person must pick, and Confirm / Decline. Settled cards go quiet. */
.ask-proposal { display: grid; gap: 10px; width: 100%; max-width: 72ch; padding: 16px 18px; border: 1px solid var(--state-needs-line); border-radius: var(--r-card); background: var(--surface); }
.ask-proposal.is-confirmed, .ask-proposal.is-declined, .ask-proposal.is-stale, .ask-proposal.is-superseded, .ask-proposal.is-expired { border-color: var(--line); box-shadow: none; }
.ask-proposal.is-confirmed .ask-proposal-label { color: var(--ink-2); }
.ask-proposal-label { margin: 0; font-size: var(--t-md); font-weight: 600; }
.ask-proposal-sub { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.ask-lines { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.ask-lines li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 10px; }
.ask-line-date { color: var(--ink-3); }
.ask-line-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-line-amount { font-variant-numeric: tabular-nums; }
.ask-proposal-form { display: grid; gap: 10px; }
.ask-choices { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.ask-choice { display: flex; align-items: center; gap: 8px; font-size: var(--t-base); }
.ask-pick { display: grid; gap: 4px; font-size: 13.5px; }
.ask-pick > span { color: var(--ink-2); }
.ask-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ask-proposal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ask-proposal-link { margin-inline-start: auto; font-size: 14px; }
.ask-proposal-state { margin: 0; color: var(--ink-2); font-size: 14px; }

/* A month's close: its steps, what happened at the step in hand, and the
   download or Stop beside it. The steps reuse the month page's look. */
.ask-run { display: grid; gap: 14px; width: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.ask-run.is-needs_you { border-color: var(--state-needs-line); }
.ask-run.is-failed, .ask-run.is-stopped { border-color: var(--state-bad-line); }
.ask-run-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ask-run-title { margin: 0; font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.ask-run-status { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.ask-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ask-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-nested); background: var(--surface); }
.ask-step-mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.ask-step-mark .bk-spinner { width: 12px; height: 12px; }
.ask-step-text { display: grid; gap: 2px; min-width: 0; }
.ask-step-name { font-weight: 600; font-size: var(--t-base); }
.ask-step-note { color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.ask-step.is-done .ask-step-mark { border-color: var(--state-ok); background: var(--state-ok); color: var(--on-accent); }
.ask-step.is-now { border-color: var(--state-needs-line); background: var(--state-needs-soft); }
.ask-step.is-now .ask-step-mark { border-color: var(--state-needs); color: var(--state-needs-ink); }
.ask-step.is-problem { border-color: var(--state-wait-line); background: var(--state-wait-soft); }
.ask-step.is-problem .ask-step-mark { border-color: var(--state-wait-ink); color: var(--state-wait-ink); }
.ask-step.is-later .ask-step-name, .ask-step.is-later .ask-step-note { color: var(--ink-3); }
.ask-run-log { display: grid; gap: 2px; margin: 0; padding: 0 2px; list-style: none; color: var(--ink-2); font-family: var(--font-mono); font-size: 12.5px; }
.ask-run-download { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.ask-run-download fieldset { margin: 0; padding: 0; border: 0; }
.ask-run-download legend { margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.ask-run-actions { display: flex; gap: 10px; }
.ask-earlier { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--t-base); }
.ask-earlier a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) {
  .ask-lines li { grid-template-columns: 4em minmax(0, 1fr); }
  .ask-line-amount { grid-column: 2; }
}

/* A signed month in QuickBooks: the card under "signed", the counts and the send form. */
.bk-qbo-card { display: grid; gap: 4px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.bk-qbo-title { font-weight: 600; color: var(--ink); }
.bk-qbo-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 14px 0 4px; }
.bk-qbo-counts div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); }
.bk-qbo-counts dt { color: var(--ink-2); font-size: var(--t-xs); }
.bk-qbo-counts dd { margin: 2px 0 0; font-size: var(--t-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-qbo-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.bk-plain-list { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); }
.bk-plain-list li + li { margin-top: 2px; }