/* Cirro — appearance: each person's own choices (Settings › Appearance). Loaded last.
   html carries data-theme (light | dark), data-density (comfortable | compact), data-text (small | normal | large)
   and data-sidebar (shown | hidden); ui.applyAppearance() sets them before the first page is drawn. */

/* ---------------- The Appearance card ---------------- */
.ap-grid { display: grid; gap: 12px; }
.ap-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 12px; }
.ap-label { font-weight: 600; color: var(--head); font-size: 13.5px; }
.ap-row .seg button { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) { .ap-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------------- Text size ---------------- */
/* Cirro's sizes are set in pixels, so the whole working area is scaled; the layout around it stays put. */
html[data-text="small"] { --zoom: .92; }
html[data-text="large"] { --zoom: 1.1; }
html[data-text="small"] .content, html[data-text="small"] .nav, html[data-text="small"] .modal,
html[data-text="large"] .content, html[data-text="large"] .nav, html[data-text="large"] .modal { zoom: var(--zoom); }
/* a help pop-up sits outside the page, so its wording is sized here: it is placed by measuring, which scaling would upset */
html[data-text="small"] .help-pop { font-size: 12px; }
html[data-text="large"] .help-pop { font-size: 14.5px; }
html[data-text="large"] .help-pop-head strong { font-size: 14px; }

/* The page is at most 1400px wide as seen on screen. Scaling would otherwise scale that limit too (wider with large
   text, narrower with small), so the limit is divided by the scale and stays put. */
.content { max-width: calc(1400px / var(--zoom, 1)); }

/* ---------------- Spacing ---------------- */
html[data-density="compact"] .content { padding-top: 16px; }
html[data-density="compact"] .tbl th { padding-top: 7px; padding-bottom: 7px; }
html[data-density="compact"] .tbl td { padding-top: 5px; padding-bottom: 5px; }
html[data-density="compact"] .card-head { padding-top: 10px; }
html[data-density="compact"] .card-body { padding-top: 10px; padding-bottom: 12px; }
html[data-density="compact"] .card-body.flush { padding: 0; }
html[data-density="compact"] .kpi { padding: 10px 14px; }
html[data-density="compact"] .grid, html[data-density="compact"] .stack { gap: 10px; }
html[data-density="compact"] .nav a { padding-top: 4px; padding-bottom: 4px; }
html[data-density="compact"] .nav-toggle { height: 28px; }
html[data-density="compact"] .page-head { margin-bottom: 10px; }
html[data-density="compact"] .list-item { padding-top: 7px; padding-bottom: 7px; }
html[data-density="compact"] .field { margin-bottom: 8px; }
html[data-density="compact"] .tbl-tools { padding-top: 8px; padding-bottom: 8px; }

/* ---------------- Menu hidden until opened ---------------- */
/* The menu button is always in the top bar: it hides the side menu and brings it back (ui.js). Hidden, the menu is
   off to the side and the page takes the full width. */
.topbar .menu-btn { display: inline-flex; }
/* the light-or-dark and full-screen buttons, at the right of the top bar; full screen is hidden where the browser can't do it */
.topbar .full-btn, .topbar .mode-btn { display: inline-flex; flex: 0 0 auto; }
.topbar .full-btn[hidden] { display: none; }
/* the half-filled circle, as on iOS: its dark half is on the left in light, and it turns over when dark is on */
.topbar .mode-btn .ms { transition: transform .2s ease; }
.topbar .mode-btn.on .ms { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .topbar .mode-btn .ms { transition: none; } }
html[data-sidebar="hidden"] .app { grid-template-columns: 1fr; }
/* the room the menu gave up goes to the page, at every text size */
html[data-sidebar="hidden"] .content { max-width: calc((1400px + var(--sidebar)) / var(--zoom, 1)); }
html[data-sidebar="hidden"] .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 90; transform: translateX(-100%); transition: transform .2s ease; }
html[data-sidebar="hidden"] .app.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
html[data-sidebar="hidden"] .app.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(var(--shadow-rgb), .4); z-index: 80; }
html[data-sidebar="hidden"] .topbar .menu-btn { display: inline-flex; }
/* Showing it again slides it back in the same way. The slide lives on the menu itself, not only on its hidden state:
   a transition is taken from the state being entered, so with it only on "hidden" the menu slid out but snapped back. */
@media (min-width: 861px) { .app > .sidebar { transition: transform .2s ease; } }
/* The top bar and the page move over with it. The menu's column stays in the grid and closes to nothing (0px) instead of
   being taken out, because two column widths can glide from one to the other and a different number of columns can't;
   the main part is told to stay in the second column, since the hidden menu (fixed) no longer holds the first. */
@media (min-width: 861px) {
  .app { transition: grid-template-columns .2s ease; }
  /* the page's widest width changes with the menu too (the room the menu gives up goes to the page). It must glide at the
     same pace: changed at once, the page was cut to the narrower width while its column was still wide, so on a wide
     window everything at its right edge (a document page's cards pane) jumped left and came back as the menu slid in. */
  .content { transition: max-width .2s ease; }
  .app > .main { grid-column: 2; }
  html[data-sidebar="hidden"] .app { grid-template-columns: 0px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html[data-sidebar="hidden"] .sidebar, .app > .sidebar, .app, .content { transition: none; } }

/* ---------------- Dark ---------------- */
/* The brand colours stay as they are. Surfaces are shades of the brand navy, text is white and light grey-blue,
   links and highlights use the brand light blue, and yellow appears only as text on navy. */
html[data-theme="dark"], .th-dark {
  color-scheme: dark;
  --canvas: #081B2E;
  --surface: #0D2942;
  --surface-2: #11324F;
  --mist: #17405F;
  --ink: #E4ECF3;
  --slate: #A7B7C6;
  --line: #214A6B;
  --line-soft: #1A3D5A;
  --field-line: #2C5A80;
  --head: #FFFFFF;
  --link: #05B3D7;
  --hover: #17405F;
  --hover-line: #4A7BA3;
  --danger-strong: #FF9DB0;
  --danger-bg: #4A1826;
  --faint: #8FA1B3;
  --faint-2: #A7B7C6;
  --faint-3: #6F8296;
  --amber-line: #6B5A12;
  --green-line: #1E6B52;
  --red-line: #7A2A3C;
  --accent-line: #24557C;
  --accent-text: #BDE9F5;
  --shadow-rgb: 0, 0, 0;
  --ring: rgba(5, 179, 215, .35);
  --green-text: #6FE0B0;
  --green-bg: #0F3D30;
  --red-text: #FF9DB0;
  --red-bg: #4A1826;
  --amber-text: #F2C643;
  --amber-bg: #3D3408;
  --sky-bg: #0E3F55;
  --blue-bg: #123A5C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] body { background: var(--canvas); color: var(--ink); }
html[data-theme="dark"] .topbar { background: var(--surface); box-shadow: 1px 5px 15px 1px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .sidebar { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .nav a { color: var(--ink); }
html[data-theme="dark"] .nav a:hover, html[data-theme="dark"] .nav-toggle:hover { background: var(--mist); color: #fff; }
html[data-theme="dark"] .nav a .ms, html[data-theme="dark"] .nav-toggle > .ms:first-child { color: var(--slate); }
html[data-theme="dark"] .nav a.active .ms, html[data-theme="dark"] .nav-fold.open > .nav-toggle > .ms:first-child, html[data-theme="dark"] .nav-fold.here > .nav-toggle > .ms:first-child { color: var(--link); }
html[data-theme="dark"] .nav-toggle .nav-chev { color: var(--slate); }
html[data-theme="dark"] .nav { scrollbar-color: var(--field-line) transparent; }
/* notices: the same four meanings, on dark tints */
html[data-theme="dark"] .notice { color: var(--ink); border-color: var(--accent-line, #24557C); }
html[data-theme="dark"] .notice .ms { color: var(--link); }
html[data-theme="dark"] .notice.warn { border-color: #6B5A12; }
html[data-theme="dark"] .notice.warn .ms { color: var(--amber-text); }
html[data-theme="dark"] .notice.bad { border-color: #7A2A3C; }
html[data-theme="dark"] .notice.bad .ms { color: var(--red-text); }
html[data-theme="dark"] .notice.good { border-color: #1E6B52; }
html[data-theme="dark"] .notice.good .ms { color: var(--green-text); }
html[data-theme="dark"] .btn-danger { border-color: #7A2A3C; }
html[data-theme="dark"] .btn-secondary:hover { border-color: var(--sky); color: #fff; }
/* Solid blocks in the main colour (app icons, numbered steps, the chosen option, toasts): the main colour is itself
   dark, so on a dark page they would vanish into the card. In dark they take a lighter step of the same shade. */
html[data-theme="dark"] .app-icon, html[data-theme="dark"] .kpi.dark, html[data-theme="dark"] .pill-navy, html[data-theme="dark"] .rp-box.strong, html[data-theme="dark"] .appr-lv-num, html[data-theme="dark"] .toast { background: var(--field-line); border-color: var(--field-line); color: #fff; }
/* Shadows in dark: a tint of the main colour can't be seen on a dark page, so what floats (dialogs, menus, pop-ups)
   casts a deeper black shadow and gets an edge to lift it off the page. */
html[data-theme="dark"] .modal, html[data-theme="dark"] .sv-menu, html[data-theme="dark"] .dd-pop, html[data-theme="dark"] .le-menu, html[data-theme="dark"] .rte-grid, html[data-theme="dark"] .search-results { box-shadow: var(--shadow-lg); border-color: var(--field-line); }
html[data-theme="dark"] .modal { border: 1px solid var(--field-line); }
/* A help pop-up in dark: its edge and arrow were the main colour, which is as dark as the pop-up itself */
html[data-theme="dark"] .help-pop { border-color: var(--field-line); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .help-pop::before { border-bottom-color: var(--field-line); }
html[data-theme="dark"] .help-pop.above::before { border-bottom-color: transparent; border-top-color: var(--field-line); }
/* under the pointer in dark: a step lighter than what it sits on, never a light patch behind light text */
html[data-theme="dark"] .nav a:hover, html[data-theme="dark"] .nav-toggle:hover, html[data-theme="dark"] .sv-menu button:hover, html[data-theme="dark"] .sv-menu button:focus-visible { background: var(--hover); }
html[data-theme="dark"] .le-in:hover, html[data-theme="dark"] .dd-btn.le-in:hover, html[data-theme="dark"] .le-acct .dd-btn:hover, html[data-theme="dark"] .le-acct select:hover { background: var(--surface-2); border-color: var(--hover-line); }
html[data-theme="dark"] .seg { background: var(--canvas); }
html[data-theme="dark"] .seg button.active { background: var(--blue); color: #fff; }
/* A switch in dark: off is a dark track with an edge, on is the accent itself, so the two can't be mistaken for each
   other even when the main colour and the accent are the same hue. */
html[data-theme="dark"] .switch .track { background: var(--mist); box-shadow: inset 0 0 0 1px var(--field-line); }
html[data-theme="dark"] .switch input:checked + .track { background: var(--sky); box-shadow: none; }
html[data-theme="dark"] ::placeholder { color: #7F93A6; }
html[data-theme="dark"] .empty .ms, html[data-theme="dark"] .act-empty .ms { color: var(--field-line); }
html[data-theme="dark"] .app.nav-open::after { background: rgba(0, 0, 0, .55); }
html[data-theme="dark"] .tag-soon { background: var(--sky-bg); color: var(--accent-text, #BDE9F5); border-color: var(--accent-line, #1C6F8A); }
html[data-theme="dark"] .btn.is-soon, html[data-theme="dark"] .btn.is-soon:hover { color: var(--slate); border-color: var(--line); }
html[data-theme="dark"] .emp-tiles .doc-block.is-soon { background: var(--surface-2); }
/* a printed document is paper: it stays light wherever it is shown */
html[data-theme="dark"] .doc-paper, html[data-theme="dark"] #print-root, html[data-theme="dark"] .pdoc, html[data-theme="dark"] .report-sheet, html[data-theme="dark"] .mv-payslip, html[data-theme="dark"] .mv-slip-sheet, html[data-theme="dark"] .print-preview {
  color-scheme: light; --canvas: #F5F7F9; --surface: #FFFFFF; --surface-2: #FAFBFC; --mist: #E6ECF2; --ink: #333333; --slate: #5E6A78; --line: #E1EAF1; --line-soft: #EDF2F6;
  --head: #0C385F; --link: #1A5C96; --green-text: #1E7F55; --green-bg: #E3F5EC; --red-text: #C8364F; --red-bg: #FBE7EB; --amber-text: #7A5A00; --amber-bg: #FDF4D6; --sky-bg: #E1F4F9; --blue-bg: #E8F0F8; --hover: #F5F9FC; --hover-line: #9FB2C4; --danger-strong: #B42318; --danger-bg: #FEF3F2; --faint: #8A96A3; --faint-2: #7C8B9A; --faint-3: #A3AFBB; --amber-line: #F0DE9E; --green-line: #BFE7D2; --red-line: #F2C3CD; --accent-line: #C9DAEB; --accent-text: #0C385F;
  color: var(--ink); }
/* ...but a document keeps its own text colour there (a template may have set one): the rule above would give it the
   screen's instead, so in dark mode the addresses and figures ignored the template's Text colour */
html[data-theme="dark"] .pdoc { color: var(--pink); }

/* ---------------------------------------------------------------- Organisation theme (Settings › General › Theme)
   ui.applyOrgTheme() writes the colours, --corner and --font into a style element; here is what uses them.
   theme.css squares every corner; a rounder theme sets --corner, and these are the things that take it. */
.btn, .card, .kpi, .modal:not(.drawer), .notice, .toast, .pill, .seg, .seg button, .dd-btn, .dd-menu, .search-results, .tag-soon, .tag-beta, .th-preview, .th-card, .th-chip, .app-icon, .appr-lv-num, .store-chip, .store-art, .store-hero, .pos-item, .pos-basket, .pos-done-change, .home-tile, .home-need,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea { border-radius: var(--corner, 0) !important; }
/* The chosen option of a switcher (Light | Dark, Comfortable | Compact, and every other segmented choice) is filled with
   the strong shade of the accent, so it follows the theme like a switch that is on. White wording reads on it. */
.seg button.active, .th-preview .seg button.active, .appr-seg button.on { background: var(--blue); color: #fff; }
.seg button.active .ms { color: #fff; }
/* Approval rules build a level from their own pieces: they take the corners like everything else */
.appr-chip, .appr-seg, .appr-cond, .appr-pick-opt, .appr-addbtn, .appr-offnote, .icon-btn, .appr-pick-opt input[type=checkbox], .pi-tick input[type=checkbox], .form-grid > label.check.field input[type=checkbox] { border-radius: var(--corner, 0) !important; }
.appr-seg { overflow: hidden; }
.appr-pick-opt input[type=checkbox], .pi-tick input[type=checkbox], .form-grid > label.check.field input[type=checkbox] { border-radius: min(var(--corner, 0px), 4px) !important; }
/* Every other box an app draws for itself: tiles, chips, drop areas, pop-ups, pickers and editor buttons */
.app-status, .attn-item, .attn-item > .ms, .cash-count-sum, .clear-group, .dd-pop, .doc-block, .doc-block-icon, .err-detail, .help-pop, .io-drop, .io-file, .io-formats span, .io-preview,
.le-disc-toggle, .le-offer-btn, .le-menu, .mv-ai, .mv-cur-opt, .mv-date-chip, .mv-receipt, .mv-receipt-thumb, .mv-sugg, .mv-conv-out, .of-custs, .of-items, .pick-list, .rp-box, .rp-card, .rp-plan,
.rte, .rte-btn, .rte-grid, .sv-menu, .tag-craft, .rp-cell, .le-in { border-radius: var(--corner, 0) !important; }
/* The "?" help icon: its highlight when pointed at or open follows the corners, a circle when rounded */
.help-tip, .help-pop-x, .nav-pin, .close-x { border-radius: var(--corner-pic, 0) !important; }
/* A line of an invoice, bill or quote is a box drawn from the edges of its cells, so its four corner cells are rounded */
.le-table tbody.le-block tr:first-child td:first-child { border-top-left-radius: var(--corner, 0) !important; }
.le-table tbody.le-block tr:first-child td:last-child { border-top-right-radius: var(--corner, 0) !important; }
.le-table tbody.le-block tr:last-child td:first-child { border-bottom-left-radius: var(--corner, 0) !important; }
.le-table tbody.le-block tr:last-child td:last-child { border-bottom-right-radius: var(--corner, 0) !important; }
@media (max-width: 760px) { .le-table tbody.le-block { border-radius: var(--corner, 0) !important; } }
/* the buttons under a line: move, copy, delete, and add or remove a description */
.le-ib, .le-desc-toggle, .le-link { border-radius: var(--corner-pic, 0) !important; }
.le-desc-toggle { border-radius: var(--corner, 0) !important; padding: 3px 8px 3px 6px; gap: 5px; }
.le-desc-toggle:hover { text-decoration: none; background: var(--hover); }
.le-desc-toggle .ms { font-size: 17px; }
.le-ib { color: var(--slate); }
.le-ib:hover:not(:disabled) { background: var(--sky-bg); color: var(--link); }
.le-ib.danger:hover:not(:disabled) { background: var(--red-bg); color: var(--red-text); }
/* The description box: its toolbar and writing area sit against the rounded edge, so they are rounded to match */
.rte { overflow: hidden; }
.rte-bar { border-top-left-radius: var(--corner, 0) !important; border-top-right-radius: var(--corner, 0) !important; }
.rte-body { border-bottom-left-radius: var(--corner, 0) !important; border-bottom-right-radius: var(--corner, 0) !important; }
/* The search box inside a dropdown is a field like any other, with the magnifier inside it */
.dd-search { position: relative; padding: 8px; gap: 0; }
.dd-search .ms { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--faint); pointer-events: none; }
.dd-search input { height: 34px; padding: 0 10px 0 34px; border: 1px solid var(--field-line); background: var(--surface); }
.dd-pop { overflow: hidden; }
/* An on/off switch follows the corners too: square, softened, or a full pill with a round knob when rounded */
.switch .track { border-radius: calc(var(--corner, 0px) * 1.375) !important; }
.switch .track::after { border-radius: var(--corner, 0px) !important; }
/* One highlight for every field, wherever it is: a form, a search box, a table filter, a line of an invoice, a
   dropdown. The edge takes the accent and a soft ring of it appears round the field; there is no separate outline.
   (:where keeps this easy to outrank, so a field with a mistake in it can stay red.) */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit])):focus,
select:focus, textarea:focus, .dd-btn:focus-visible, .dd-btn.open, .rte:focus-within { outline: none !important; border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--ring) !important; }
html[data-theme="dark"] input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit])):focus,
html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] .dd-btn:focus-visible, html[data-theme="dark"] .dd-btn.open, html[data-theme="dark"] .rte:focus-within { border-color: var(--link) !important; }
.field.is-invalid input:focus, .field.is-invalid select:focus, .field.is-invalid textarea:focus, .field.is-invalid .dd-btn:focus-visible, .field.is-invalid .dd-btn.open,
html[data-theme="dark"] .field.is-invalid input:focus, html[data-theme="dark"] .field.is-invalid select:focus, html[data-theme="dark"] .field.is-invalid textarea:focus, html[data-theme="dark"] .field.is-invalid .dd-btn:focus-visible { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(238, 79, 111, .25) !important; }
/* A field that sets no ground of its own would take the browser's grey in dark; it takes the card's instead */
html[data-theme="dark"] :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea) { background-color: var(--surface); color: var(--ink); border-color: var(--field-line); }
/* a field in a line of a document keeps a white ground while it is being typed in */
.le-in:focus, .dd-btn.le-in:focus-visible, .dd-btn.le-in.open, .le-acct select:focus, textarea.le-desc:focus { background: var(--surface); }

/* pictures of people (a circle in a rounded theme) and logos */
.avatar, .avatar img, .org-card, .acc-pic-btn, .acc-pic-btn input[type=file], .acc-pic-over, .th-avatar { border-radius: var(--corner-pic, 0) !important; }
.avatar { overflow: hidden; }
.org-logo-box, .org-logo-box img, .ent-logo, .ent-logo-sm { border-radius: var(--corner, 0) !important; }
/* what sits against the edge of a card or a box follows its corners, so nothing pokes out */
.card > :first-child, .card > :first-child > :first-child, .modal:not(.drawer) > :first-child { border-top-left-radius: var(--corner, 0) !important; border-top-right-radius: var(--corner, 0) !important; }
.card > :last-child, .card > :last-child > :last-child, .modal:not(.drawer) > :last-child { border-bottom-left-radius: var(--corner, 0) !important; border-bottom-right-radius: var(--corner, 0) !important; }

.th-colour { display: flex; align-items: center; gap: 10px; }
.th-colour input[type=color] { width: 56px; min-width: 56px; height: 38px; min-height: 38px; padding: 3px; border: 1px solid var(--field-line, #CFD8E3); background: var(--surface); cursor: pointer; }
.th-colour input[type=color]:disabled { cursor: not-allowed; opacity: .6; }
.th-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.th-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: var(--corner, 0) !important; }
.th-preset:hover:not(:disabled) { border-color: var(--sky); }
.th-preset.on { border-color: var(--sky); box-shadow: inset 0 0 0 1px var(--sky); }
.th-preset:disabled { cursor: not-allowed; opacity: .6; }
.th-swatch { display: flex; width: 100%; height: 28px; margin-bottom: 4px; }
.th-swatch i { flex: 1; }
.th-preset-name { font-weight: 700; color: var(--head); }
.th-preset-sub { font-size: 12px; color: var(--slate); }
/* The preview: a light and a dark page side by side, each a page with a card on it. Each side sets every variable
   itself, so it shows the theme being tried whatever the viewer's own mode and whatever theme is saved now. */
.th-preview { border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
@media (max-width: 900px) { .th-preview { grid-template-columns: 1fr; } }
.th-side { padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--canvas); color: var(--ink); font-family: var(--font); color-scheme: light;
  --navy: #0C385F; --blue: #1A5C96; --sky: #05B3D7; --corner: 0px; --corner-pic: 0px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.th-light { --canvas: #F5F7F9; --surface: #FFFFFF; --surface-2: #FAFBFC; --mist: #E6ECF2; --ink: #333333; --slate: #5E6A78; --line: #E1EAF1; --line-soft: #EDF2F6; --field-line: #CFDAE4; --head: #0C385F; --link: #1A5C96;
  --green-text: #1E7F55; --green-bg: #E3F5EC; --red-text: #C8364F; --red-bg: #FBE7EB; --sky-bg: #E1F4F9; --blue-bg: #E8F0F8; --accent-text: #0C385F; --accent-line: #C9DAEB; --hover: #F5F9FC; --hover-line: #9FB2C4; --faint: #8A96A3; --faint-2: #7C8B9A; --faint-3: #A3AFBB; --shadow-rgb: 12, 56, 95; --ring: rgba(26, 92, 150, .15); }
.th-dark { color-scheme: dark; }
.th-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.th-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); }
.th-card h3 { margin: 0; color: var(--head); font-size: 16px; }
.th-card p { margin: 0; font-size: 13px; color: var(--ink); }
.th-card a { color: var(--link); }
.th-card .th-muted { color: var(--slate); font-size: 12px; }
.th-card input { background: var(--surface); color: var(--ink); border-color: var(--field-line); }
.th-card .btn-secondary { background: var(--surface); color: var(--head); border-color: var(--field-line); }
/* Under the pointer too, each side behaves as its own mode. Written to outrank the page's own dark rules, which would
   otherwise reach into the light side (white wording on a white button) whenever the viewer uses dark mode. */
html .th-preview .th-card .btn-secondary:hover { background: var(--surface); color: var(--head); border-color: var(--navy); }
html .th-preview .th-dark .th-card .btn-secondary:hover { border-color: var(--sky); }
html .th-preview .th-card .btn-primary:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
html .th-preview .th-card input::placeholder { color: var(--slate); }
.th-card .pill-green { background: var(--pill-green-bg); color: var(--pill-green-text); }
.th-card .pill-red { background: var(--pill-red-bg); color: var(--pill-red-text); }
.th-chip { padding: 2px 8px; font-size: 11px; font-weight: 700; background: var(--sky-bg); color: var(--head); border: 1px solid var(--sky); }
.th-dark .th-chip { color: var(--accent-text); border-color: var(--accent-line); }
.th-rows { border-top: 1px solid var(--line-soft); font-size: 13px; }
.th-rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.th-rows > .th-hover { background: var(--hover); }
/* Theme page: the settings on the left, the preview kept in view on the right while they are changed */
.th-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.th-settings { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.th-sticky { position: sticky; top: calc(var(--stick-top, var(--head-h, 64px)) + 16px); min-width: 0; max-height: calc(100vh - var(--head-h, 64px) - 32px); overflow-y: auto; }
@media (max-width: 1100px) { .th-layout { grid-template-columns: minmax(0, 1fr); } .th-sticky { position: static; } }
.th-person { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.th-avatar { width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; }
/* Logos for light and for dark mode: each is shown on the ground it is meant for, whatever the viewer's own mode */
.logo-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.logo-on-light { background: #FFFFFF; border-color: #CFDAE4; }
.logo-on-light span { color: #0C385F; }
.logo-on-dark { background: #0D2942; border-color: #2C5A80; }
.logo-on-dark span { color: #FFFFFF; }
.org-logo-box { position: relative; border-style: solid; }
/* a logo box, with a small round minus at its top right corner that takes the logo away. The minus shows while the
   pointer is on the box or the keyboard is in it, and always on a touch screen, where there is no pointer to hover. */
.logo-wrap { position: relative; width: 100%; max-width: 320px; }
.logo-wrap .org-logo-box.org-logo-lg { max-width: none; }
.logo-x { position: absolute; top: -9px; right: -9px; z-index: 2; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50% !important;
  background: var(--red-text); color: white; cursor: pointer; opacity: 0; transform: scale(.8); transition: opacity .12s ease, transform .12s ease; }
.logo-x .ms { font-size: 16px; color: inherit; font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 20; }
.logo-wrap:hover .logo-x, .logo-wrap:focus-within .logo-x, .logo-x:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .logo-x { opacity: 1; transform: none; } }
/* Organisation profile: the cards share one rhythm, and a logo is as wide as its half of the card */
.org-profile { margin-top: 16px; }
.org-profile > .grid.g2 { align-items: stretch; }
.org-profile > .grid.g2 > .card { height: 100%; }
/* a card's Save sits at the foot of the card, so the two cards of a row end on the same line */
.org-profile > .grid.g2 > .card > .card-body { display: flex; flex-direction: column; }
.org-profile > .grid.g2 > .card > .card-body > .form { flex: 1 1 auto; align-content: start; grid-template-rows: none; }
.org-profile > .grid.g2 > .card > .card-body > .form > .row:last-child { margin-top: auto; padding-top: 4px; }
.org-profile .logo-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.org-profile .logo-wrap { max-width: none; }
.org-profile .pay-why { margin: 14px 0 0; }
/* a form's buttons sit on their own line at their natural size, not stretched across the form */
.org-profile .form-grid > .form-row { grid-column: 1 / -1; justify-content: flex-start; }
.org-profile .form-grid > .form-row > .btn { flex: 0 0 auto; width: auto; }
.org-profile .org-sec { margin: 8px 0 -4px; font-size: 16px; font-weight: 700; color: var(--head); }
.org-profile > .pay-why { margin-top: -6px; }
@media (max-width: 640px) { .org-profile .logo-pair { grid-template-columns: minmax(0, 1fr); } }
.org-logo-box em { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-style: normal; font-size: 11px; color: #A7B7C6; }
/* The logo is the button, like a profile picture: click it to choose an image; hovering shows what it does */
.logo-pic-btn { cursor: pointer; }
.logo-pic-btn input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border-radius: var(--corner, 0) !important; }
.logo-pic-btn .logo-pic-over { border-radius: var(--corner, 0) !important; font-size: 12px; }
.logo-pic-btn .logo-pic-over, .logo-pic-btn .logo-pic-over span { color: #fff; font-weight: 600; font-size: 12px; }
.logo-pic-btn .logo-pic-over .ms { font-size: 22px; font-weight: normal; }
.logo-pic-btn:hover .acc-pic-over, .logo-pic-btn:focus-within .acc-pic-over { opacity: 1; }
.logo-pic-btn:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.th-preset-group { margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.th-preset-group:first-child { margin-top: 0; }
/* "+3 more" beside the first person in a table cell, and the list it opens */
td .person-list { align-items: center; flex-wrap: nowrap; gap: 8px; }
.more-count { flex: none; padding: 2px 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--link); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; border-radius: var(--corner, 0) !important; }
.more-count:hover { background: var(--hover); border-color: var(--hover-line); }
.people-all { display: grid; max-height: 60vh; overflow-y: auto; }
.people-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.people-row:last-child { border-bottom: 0; }
.people-row .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-rm-cell { width: 70px; text-align: right; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.acc-rm { color: var(--slate); }
.acc-rm:hover { background: var(--red-bg); color: var(--red-text); }
.acc-level { min-width: 130px; }
/* the Access page: a person opens as a small card; Add people is a searchable list to tick */
.acc-who { font-weight: inherit; text-align: left; }
.acc-card { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.acc-card-who { display: grid; gap: 2px; min-width: 0; font-size: 13.5px; color: var(--ink); }
.acc-card-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-card .avatar { width: 48px; height: 48px; font-size: 16px; flex: none; }
/* the way to the person's user page: an "open in another page" button at the end of their row */
.acc-card-go { margin-left: auto; flex: none; }
/* Remove sits apart from Cancel and Save, at the left of the card's foot */
.acc-modal .modal-foot .btn:first-child:not(:only-child) { margin-right: auto; }
.acc-search { position: relative; width: 100%; margin-bottom: 8px; }
/* the form rule for inputs sets its own padding with a heavier selector, so the room for the icon is forced */
.acc-search input[type=search] { width: 100%; padding-left: 36px !important; }
.acc-search .ms { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--slate); font-size: 18px; pointer-events: none; }
/* the box is a card of the theme: its line, its surface and its corners (forced, like the other themed boxes) */
.acc-pick { display: grid; max-height: 44vh; overflow-y: auto; border: 1px solid var(--line); background: var(--surface); border-radius: var(--corner, 0) !important; }
/* a row reads like a table row of the theme (regular weight, body size and colour), not like the field label it sits under */
.acc-pick .acc-pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; font-size: 13.5px; font-weight: 400; color: var(--ink); line-height: normal; }
.acc-pick .acc-pick-row .small { font-size: 12.5px; font-weight: 400; color: var(--slate); }
.acc-pick-row:last-of-type { border-bottom: 0; }
.acc-pick-row:hover { background: var(--canvas); }
.acc-pick-row[hidden] { display: none; }
.acc-pick-row .small { margin-left: auto; white-space: nowrap; }
.acc-pick-none { padding: 12px; }
.acc-scopes .acc-yn { text-align: center; width: 84px; }
.acc-scopes .acc-yes { color: var(--accent-text, var(--link)); }
.acc-scopes td .small { margin-top: 2px; }

/* ---------- Status pills, the way iOS colours them ----------
   Every status in Cirro is one of seven pills (ui.status and ui.pill): green, red, amber, blue, sky, grey and navy.
   Six use the bright system colours of iOS: the pill is a tint of the colour with the wording in a darker shade of
   it that stays readable at this size (light), or in its brighter shade on a deeper tint (dark). Navy stays a solid
   pill in the organisation's main colour. The colours mean a state, so they do not follow the theme's accent.
   A pill is a capsule, except in a theme with square corners, where it stays square. "Coming soon" and "Beta" tags
   are the same kind of pill: grey and amber. */
:root { --pill-green: #34C759; --pill-green-text: #1F7A35; --pill-green-bg: rgba(52, 199, 89, .16); --pill-red: #FF3B30; --pill-red-text: #C4001A; --pill-red-bg: rgba(255, 59, 48, .16); --pill-amber: #FF9500; --pill-amber-text: #A84400; --pill-amber-bg: rgba(255, 149, 0, .16); --pill-blue: #007AFF; --pill-blue-text: #0055D4; --pill-blue-bg: rgba(0, 122, 255, .16); --pill-sky: #32ADE6; --pill-sky-text: #006A99; --pill-sky-bg: rgba(50, 173, 230, .16); --pill-grey: #8E8E93; --pill-grey-text: #5A5A5F; --pill-grey-bg: rgba(142, 142, 147, .16); }
html[data-theme="dark"] { --pill-green-text: #30D158; --pill-green-bg: rgba(48, 209, 88, .24); --pill-red-text: #FF8A84; --pill-red-bg: rgba(255, 69, 58, .24); --pill-amber-text: #FF9F0A; --pill-amber-bg: rgba(255, 159, 10, .24); --pill-blue-text: #6CB4FF; --pill-blue-bg: rgba(10, 132, 255, .24); --pill-sky-text: #64D2FF; --pill-sky-bg: rgba(100, 210, 255, .24); --pill-grey-text: #AEAEB2; --pill-grey-bg: rgba(142, 142, 147, .24); }
.pill { border-radius: calc(var(--corner, 0px) * 999) !important; padding: 3px 10px; font-weight: 600; letter-spacing: .01em; }
.pill-green { background: var(--pill-green-bg); color: var(--pill-green-text); }
.pill-red { background: var(--pill-red-bg); color: var(--pill-red-text); }
.pill-amber { background: var(--pill-amber-bg); color: var(--pill-amber-text); }
.pill-blue { background: var(--pill-blue-bg); color: var(--pill-blue-text); }
.pill-sky { background: var(--pill-sky-bg); color: var(--pill-sky-text); }
.pill-grey { background: var(--pill-grey-bg); color: var(--pill-grey-text); }
.tag-soon, .tag-beta, .th-chip { border: 0; border-radius: calc(var(--corner, 0px) * 999) !important; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.tag-soon, .th-chip, html[data-theme="dark"] .tag-soon, .th-dark .th-chip { background: var(--pill-grey-bg); color: var(--pill-grey-text); }
.tag-beta { background: var(--pill-amber-bg); color: var(--pill-amber-text); }
/* the theme page's preview has a light half and a dark half on one page: each uses its own shades */
.th-light { --pill-green-text: #1F7A35; --pill-green-bg: rgba(52, 199, 89, .16); --pill-red-text: #C4001A; --pill-red-bg: rgba(255, 59, 48, .16); --pill-amber-text: #A84400; --pill-amber-bg: rgba(255, 149, 0, .16); --pill-blue-text: #0055D4; --pill-blue-bg: rgba(0, 122, 255, .16); --pill-sky-text: #006A99; --pill-sky-bg: rgba(50, 173, 230, .16); --pill-grey-text: #5A5A5F; --pill-grey-bg: rgba(142, 142, 147, .16); }
.th-dark { --pill-green-text: #30D158; --pill-green-bg: rgba(48, 209, 88, .24); --pill-red-text: #FF8A84; --pill-red-bg: rgba(255, 69, 58, .24); --pill-amber-text: #FF9F0A; --pill-amber-bg: rgba(255, 159, 10, .24); --pill-blue-text: #6CB4FF; --pill-blue-bg: rgba(10, 132, 255, .24); --pill-sky-text: #64D2FF; --pill-sky-bg: rgba(100, 210, 255, .24); --pill-grey-text: #AEAEB2; --pill-grey-bg: rgba(142, 142, 147, .24); }

/* ---------- An app's settings page: three small cards side by side, each as tall as what it holds ---------- */
/* the settings gear of an app's page: always at the right corner of the header. The page's buttons sit to its left
   in the same box, and wrap there (staying left of the gear) when there are many. */
.page-head.has-gear { flex-wrap: nowrap; }
/* the title keeps its own width (up to a little over half), so the buttons get the rest of the row before they wrap */
.page-head.has-gear > :first-child { flex: 0 0 auto; max-width: 55%; }
.page-head.has-gear:not(:has(.head-end > .actions)) > :first-child { max-width: calc(100% - 56px); } /* only the gear beside it: the title may use the rest */
.head-end { display: flex; align-items: flex-start; justify-content: flex-end; gap: 10px; flex: 1 1 0; min-width: 0; }
/* beside a picker with its label above it, the gear lines up with the picker, not the label */
.head-end:has(> .actions label, > .actions .field, > .actions > select) { align-items: flex-end; }
.head-end > .actions { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
.head-end > .app-gear { flex: none; }
/* Banners are part of the page header: a full-width row under the title and its buttons (ui.js liftAlerts). */
.page-head.has-alerts, .page-head.has-gear.has-alerts { flex-wrap: wrap; row-gap: 12px; }
.page-head > .page-alerts { flex: 0 0 100%; order: 9; margin: 0; min-width: 0; }
/* an app's Settings page: equal tiles, each a link or (uninstall) a button drawn the same way */
.app-tiles { margin-top: 16px; }
/* the numbering page: half-width cards, side by side */
.grid.num-cards { align-items: start; }
/* a rule's page: its cases as a plain table (number, when, then, order), the switch beside Add case */
.rule-cases .rule-n { width: 44px; color: var(--slate); }
.rule-cases .rule-move { width: 84px; text-align: right; white-space: nowrap; }
.rule-cases.is-off td { color: var(--slate); }
.rule-open { font-weight: inherit; text-align: left; }
.rule-line { display: block; line-height: 1.5; }
.rule-cases td { vertical-align: top; }
.rule-steps { margin: 0; }
.case-modal.has-remove .modal-foot .btn:first-child { margin-right: auto; }
/* a rule's case: its outcome is a sentence of small controls on one line, wrapping when narrow */
.rule-then { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rule-then select { width: auto; min-width: 150px; }
.rule-then .appr-amt input { width: 90px; }
/* its tiles in two groups, each under a small heading */
.tile-plug { display: inline-flex; vertical-align: -3px; margin-left: 6px; }
.tile-plug .ms { font-size: 16px; color: var(--green-text) !important; background: none !important; }
.doc-block.is-off { background: var(--canvas); }
.doc-block.is-off .doc-block-icon { background: var(--line); color: var(--slate); }
.doc-block.is-off:hover { border-color: var(--line); box-shadow: none; }

/* ---------- Icon style (an organisation theme setting; ui.applyOrgTheme marks the page with data-icons) ----------
   Outline is what the stylesheet draws, so it writes nothing. Solid fills the same shapes. Rounded and Sharp are the
   sister icon fonts (loaded when chosen). Colourful is a white solid icon on a coloured tile, one colour for each
   category: in the side menu, and on an app's icon wherever the page says which category it is in (data-cat).
   The same marks on the theme page's preview (.th-preview[data-icons]) show the choice before it is saved. */
html[data-icons="solid"] .ms, html[data-icons="colour"] .ms, .th-preview[data-icons="solid"] .ms, .th-preview[data-icons="colour"] .ms { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
html[data-icons="rounded"] .ms, .th-preview[data-icons="rounded"] .ms { font-family: "Material Symbols Rounded", "Material Symbols Outlined"; }
html[data-icons="sharp"] .ms, .th-preview[data-icons="sharp"] .ms { font-family: "Material Symbols Sharp", "Material Symbols Outlined"; }
/* the preview shows its own choice, whatever the page around it is using */
.th-preview[data-icons="outline"] .ms, .th-preview[data-icons="rounded"] .ms, .th-preview[data-icons="sharp"] .ms { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.th-preview[data-icons="outline"] .ms, .th-preview[data-icons="solid"] .ms, .th-preview[data-icons="colour"] .ms { font-family: "Material Symbols Outlined"; }
html[data-icons="colour"] [data-cat="Overview"], .th-preview[data-icons="colour"] [data-cat="Overview"] { --tile: #007AFF; }
html[data-icons="colour"] [data-cat="Sales"], .th-preview[data-icons="colour"] [data-cat="Sales"] { --tile: #34C759; }
html[data-icons="colour"] [data-cat="Purchases"], .th-preview[data-icons="colour"] [data-cat="Purchases"] { --tile: #FF9500; }
html[data-icons="colour"] [data-cat="Inventory"], .th-preview[data-icons="colour"] [data-cat="Inventory"] { --tile: #AF52DE; }
html[data-icons="colour"] [data-cat="Banking"], .th-preview[data-icons="colour"] [data-cat="Banking"] { --tile: #30B0C7; }
html[data-icons="colour"] [data-cat="HR"], .th-preview[data-icons="colour"] [data-cat="HR"] { --tile: #FF2D55; }
html[data-icons="colour"] [data-cat="Productivity"], .th-preview[data-icons="colour"] [data-cat="Productivity"] { --tile: #32ADE6; }
html[data-icons="colour"] [data-cat="Reporting"], .th-preview[data-icons="colour"] [data-cat="Reporting"] { --tile: #FF3B30; }
html[data-icons="colour"] [data-cat="Accounting"], .th-preview[data-icons="colour"] [data-cat="Accounting"] { --tile: #5856D6; }
html[data-icons="colour"] [data-cat="Tax"], .th-preview[data-icons="colour"] [data-cat="Tax"] { --tile: #FF9F0A; }
html[data-icons="colour"] [data-cat="Tools"], .th-preview[data-icons="colour"] [data-cat="Tools"] { --tile: #8E8E93; }
html[data-icons="colour"] [data-cat="Developers"], .th-preview[data-icons="colour"] [data-cat="Developers"] { --tile: #636366; }
html[data-icons="colour"] [data-cat="Settings"], .th-preview[data-icons="colour"] [data-cat="Settings"] { --tile: #8E8E93; }
html[data-icons="colour"] .nav a > .ms:first-child:not(.lock), html[data-icons="colour"] .nav .nav-toggle > .ms:first-child, .th-preview[data-icons="colour"] .th-menu-row > .ms:first-child {
  width: 24px; height: 24px; flex: 0 0 24px; display: inline-grid; place-items: center; font-size: 16px; border-radius: 7px !important; background: var(--tile, var(--blue)); color: #fff; }
html[data-icons="colour"] .nav a.active > .ms:first-child:not(.lock), html[data-icons="colour"][data-menu="colour"] .nav a > .ms:first-child:not(.lock), html[data-icons="colour"][data-menu="colour"] .nav .nav-toggle > .ms:first-child, .th-preview[data-icons="colour"] .th-menu-row.on > .ms:first-child { color: #fff; }
.th-preview[data-icons="colour"] .th-menu-row > .ms:first-child { width: 20px; height: 20px; flex-basis: 20px; font-size: 13px; border-radius: 6px !important; }
/* pages under a category have a slightly smaller tile, so a long name still fits on one line */
html[data-icons="colour"] .nav .nav-items a { gap: 8px; }
html[data-icons="colour"] .nav .nav-items a > span:not(.ms):not(.badge-count) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-icons="colour"] .nav .nav-items a > .ms:first-child:not(.lock) { width: 20px; height: 20px; flex-basis: 20px; font-size: 13px; border-radius: 6px !important; }
/* every app icon says its own category, so it is coloured wherever it is drawn: rows, banners, the app page, Home */
html[data-icons="colour"] .app-icon[data-cat], html[data-icons="colour"] [data-cat] .app-icon { background: var(--tile, var(--navy)); color: #fff; }
/* The style reaches every icon that stands for something, across the whole system. Outside the side menu and app
   icons there are no solid boxes: the icon itself takes the colour.
   - a button's icon is coloured: blue for an ordinary action, red for one that removes or cancels, grey for one
     that is switched off or not built yet. A primary button is already a solid colour, so its icon stays white.
   - the icon beside each key figure takes a colour, in turn along the row.
   - the icons of "needs your attention" lines and of the small cards and tiles on an item's page are coloured on a
     light tint of the same colour.
   Arrows, search glasses and other controls stay as they are: they are not pictures of anything. */
html[data-icons="colour"] .btn:not(.btn-primary):not(.btn-icon) > .ms:first-child { color: var(--pill-blue); }
html[data-icons="colour"] .btn.btn-danger:not(.btn-primary):not(.btn-icon) > .ms:first-child { color: var(--pill-red); } /* (as specific as the blue rule above it, so a red button keeps a red icon) */
html[data-icons="colour"] .btn:is([disabled], .disabled, .is-soon):not(.btn-primary):not(.btn-icon) > .ms:first-child { color: var(--pill-grey); }
html[data-icons="colour"] .kpi:not(.dark):nth-child(5n+1) .label > .ms { color: #007AFF; }
html[data-icons="colour"] .kpi:not(.dark):nth-child(5n+2) .label > .ms { color: #34C759; }
html[data-icons="colour"] .kpi:not(.dark):nth-child(5n+3) .label > .ms { color: #FF9500; }
html[data-icons="colour"] .kpi:not(.dark):nth-child(5n+4) .label > .ms { color: #AF52DE; }
html[data-icons="colour"] .kpi:not(.dark):nth-child(5n+5) .label > .ms { color: #30B0C7; }
html[data-icons="colour"] .attn-item > .ms:first-child { color: var(--pill-blue); background: var(--pill-blue-bg); }
html[data-icons="colour"] .attn-red > .ms:first-child { color: var(--pill-red); background: var(--pill-red-bg); }
html[data-icons="colour"] .attn-amber > .ms:first-child { color: var(--pill-amber); background: var(--pill-amber-bg); }
html[data-icons="colour"] .attn-sky > .ms:first-child { color: var(--pill-sky); background: var(--pill-sky-bg); }
html[data-icons="colour"] .attn-green > .ms:first-child { color: var(--pill-green); background: var(--pill-green-bg); }
html[data-icons="colour"] .doc-block-icon { background: var(--pill-blue-bg); color: var(--pill-blue); }
html[data-icons="colour"] .doc-block-icon .ms { color: inherit; }
html[data-icons="colour"] .doc-block.is-alert .doc-block-icon { background: var(--pill-amber-bg); color: var(--pill-amber); }

/* Integrations: cards as in the reference — a coloured tile, the state at the top right, the name and one line; three to a row */
.int-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.int-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--head); }
.int-head p { margin: 6px 0 0; color: var(--slate); }
.int-search { width: min(100%, 340px); }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
@media (min-width: 1100px) { .int-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.int-card { position: relative; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--corner, 8px) * 1.75) !important; transition: border-color .15s, box-shadow .15s; }
.int-card:hover { border-color: var(--field-line); box-shadow: 0 4px 14px rgba(0, 0, 0, .04); }
.int-card.is-link { display: block; color: inherit; text-decoration: none; cursor: pointer; } .int-card.is-link:hover { border-color: var(--link); } /* (the API and webhooks: the card opens its page) */
.int-card.is-on { background: linear-gradient(180deg, rgba(52, 199, 89, .07), var(--surface) 55%); }
.int-card.is-new { background: linear-gradient(180deg, rgba(0, 122, 255, .06), var(--surface) 55%); }
.int-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.int-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: calc(var(--corner, 8px) * 1.4) !important; background: var(--tint); color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.int-logo .ms { font-size: 28px; font-variation-settings: 'FILL' 1; }
.int-state { display: inline-flex; align-items: center; gap: 8px; }
.int-badge { display: inline-block; padding: 5px 10px; border-radius: calc(var(--corner, 8px) * .85) !important; font-size: 13px; font-weight: 600; line-height: 1.2; }
.int-badge.is-on { background: var(--green-bg, #E3F5EC); color: var(--green-text, #1F7A35); }
.int-badge.is-soon { background: var(--blue-bg); color: var(--link); }
.int-badge.is-craft { background: rgba(255, 149, 0, .14); color: #A35A00; }
.int-add { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: calc(var(--corner, 8px) * .9) !important; background: var(--surface); color: var(--head); cursor: pointer; }
.int-add:hover { border-color: var(--link); color: var(--link); }
.int-card h3 { margin: 18px 0 6px; font-size: 16.5px; font-weight: 600; color: var(--head); }
.int-card p { margin: 0; color: var(--slate); line-height: 1.55; }
html[data-theme="dark"] .int-badge.is-craft { color: #FFB340; }
/* ---------- Home: a greeting, sometimes one line, and the person's apps ---------- */
a.brand, a.brand:hover { text-decoration: none; color: inherit; }
a.brand:focus-visible { outline: 2px solid var(--ring, var(--link)); outline-offset: -2px; }
.home { max-width: 1040px; margin: 0 auto; padding: 28px 0 40px; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.home-hi { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; color: var(--head); }
.home-date { margin: 6px 0 0; color: var(--slate); }
.home-tools { display: flex; align-items: center; gap: 8px; }
.home-size button { display: grid; place-items: center; width: 34px; padding: 0; }
.home-need { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--corner); color: var(--head); text-decoration: none; }
.home-need:hover { background: var(--hover); border-color: var(--hover-line); text-decoration: none; }
.home-need > span:nth-child(2) { flex: 1; min-width: 0; }
.home-need .ms:first-child { color: var(--accent-text, var(--link)); }
.home-none { color: var(--slate); margin: 0 0 16px; }
/* The apps, like a computer's app launcher: no box around each, a rounded square icon with a soft light from above and
   a soft shadow under it, and the name beneath on one line (cut short with … when it is long). Always rounded,
   whatever the theme's corners. */
.home-apps { --ic: 64px; --gl: 34px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 26px 8px; }
.home.size-s .home-apps { --ic: 48px; --gl: 26px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 20px 6px; }
.home.size-l .home-apps { --ic: 84px; --gl: 44px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 32px 10px; }
.home-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; padding: 4px 4px 0; color: var(--ink); text-decoration: none; text-align: center; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.home-tile, .home-tile:hover { text-decoration: none; }
/* The launcher look for an app's icon, on Home and in the App Center (its lists, banners and an app's own page) and
   My apps: always a rounded square, a soft shadow under it, and a soft light from above. */
.home-tile .app-icon, .store-row .app-icon, .store-art .app-icon, .store-hero-icons .app-icon, .sp-head .app-icon { position: relative; border-radius: 22.5% !important; overflow: hidden;
  box-shadow: 0 1px 1.5px rgba(var(--shadow-rgb, 0, 0, 0), .16), 0 3px 8px rgba(var(--shadow-rgb, 0, 0, 0), .14), 0 8px 18px rgba(var(--shadow-rgb, 0, 0, 0), .08); }
/* the light from above: brighter at the top, a touch darker at the bottom, and a fine bright edge */
.home-tile .app-icon::after, .store-row .app-icon::after, .store-art .app-icon::after, .store-hero-icons .app-icon::after, .sp-head .app-icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 46%, rgba(0, 0, 0, .10) 100%); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
.home-tile .app-icon .ms, .store-row .app-icon .ms, .store-art .app-icon .ms, .store-hero-icons .app-icon .ms, .sp-head .app-icon .ms { position: relative; z-index: 1; }
.home-tile .app-icon { width: var(--ic); height: var(--ic); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.home-tile .app-icon .ms { font-size: var(--gl); }
/* in the App Center's lists, the icon lifts a little with its row */
.store-row .app-icon { transition: transform .16s ease; }
.store-row-main:hover .app-icon { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .store-row .app-icon { transition: none; } .store-row-main:hover .app-icon { transform: none; } }
.home-tile-name { max-width: 100%; font-size: 13.5px; font-weight: 400; line-height: 1.3; letter-spacing: .005em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home.size-s .home-tile-name { font-size: 12.5px; }
.home.size-l .home-tile-name { font-size: 14.5px; }
a.home-tile:hover .app-icon { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 2px 3px rgba(var(--shadow-rgb, 0, 0, 0), .16), 0 8px 16px rgba(var(--shadow-rgb, 0, 0, 0), .18), 0 14px 28px rgba(var(--shadow-rgb, 0, 0, 0), .10); }
a.home-tile:active .app-icon { transform: scale(.96); filter: brightness(.94); }
a.home-tile:focus-visible { outline: none; }
a.home-tile:focus-visible .app-icon { outline: 2px solid var(--ring, var(--link)); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .home-tile .app-icon { transition: none; } a.home-tile:hover .app-icon, a.home-tile:active .app-icon { transform: none; } }
@media (max-width: 480px) { .home { padding-top: 16px; } .home-hi { font-size: 23px; } .home-apps { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 20px 4px; } .home.size-l .home-apps { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }

/* ---------- App Center: a storefront of banners and shelves ---------- */
/* the same search box as in a table's toolbar (My apps), here in the page header */
.store-search { position: relative; display: block; width: 260px; max-width: 100%; }
.store-search .ms { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--slate); font-size: 18px; }
.store-search input { width: 100%; padding: 0 10px 0 32px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.store-chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; margin-bottom: 22px; }
.store-chip { display: inline-block; text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--head); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: var(--corner, 0); }
.store-chip:hover { background: var(--hover); border-color: var(--hover-line); text-decoration: none; }
.store-chips { align-items: center; }
.store-count { margin-left: auto; white-space: nowrap; }
.store-row[hidden], .store-shelf[hidden] { display: none; }
.my-store .store-shelf.first-shown { border-top: 0; padding-top: 0; margin-top: 0; }
.store-chips-foot { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.store-chip.active { background: var(--navy); border-color: var(--navy); color: white; }
.store-features { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 18px; margin-bottom: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.store-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; color: var(--ink); min-width: 0; }
.store-banner:hover { text-decoration: none; }
.store-art { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 132px; margin-bottom: 8px; border-radius: var(--corner, 0); overflow: hidden; }
.store-art .app-icon { box-shadow: 0 6px 16px rgba(var(--shadow-rgb), .22); }
.store-art .app-icon:nth-child(2), .store-art.one .app-icon { width: 60px; height: 60px; }
.store-art .app-icon:nth-child(2) .ms, .store-art.one .app-icon .ms { font-size: 32px; }
.store-story .store-features { margin-bottom: 0; }
.store-art.art-0 { background: linear-gradient(135deg, color-mix(in srgb, var(--sky) 70%, var(--surface)), color-mix(in srgb, var(--blue) 55%, var(--surface))); }
.store-art.art-1 { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 45%, var(--surface)), color-mix(in srgb, var(--navy) 70%, var(--surface))); }
.store-art.art-2 { background: linear-gradient(135deg, color-mix(in srgb, var(--sky) 30%, var(--surface)), color-mix(in srgb, var(--sky) 75%, var(--surface))); }
.store-art.art-3 { background: linear-gradient(135deg, color-mix(in srgb, var(--navy) 35%, var(--surface)), color-mix(in srgb, var(--blue) 65%, var(--surface))); }
.store-art.art-4 { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 30%, var(--surface)), color-mix(in srgb, var(--sky) 60%, var(--surface))); }
.store-banner:hover .store-art { filter: brightness(1.05); }
.store-banner:focus-visible { outline: 2px solid var(--ring, var(--link)); outline-offset: 4px; }
.store-kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.store-banner strong { font-size: 17px; line-height: 1.25; font-weight: 600; color: var(--head); }
.store-sub { color: var(--slate); font-size: 13.5px; line-height: 1.35; }
.store-shelf { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.store-shelf:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.store-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.store-shelf-head h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--head); }
.store-more { font-weight: 600; white-space: nowrap; }
.store-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 28px; }
.store-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-width: 0; } /* no line under an app: only the line between categories */
.store-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.store-row-main:hover { text-decoration: none; }
.store-row-main:hover strong { color: var(--link); }
.store-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.store-row-text strong { color: var(--head); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-row-text .small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.store-row-act { flex: none; }
/* the store's own button: a soft pill with strong wording, the same everywhere in the App Center */
.store-get { min-width: 68px; justify-content: center; font-weight: 700; border-radius: 999px !important; border-color: transparent; background: color-mix(in srgb, var(--link) 12%, var(--surface)); color: var(--link); }
.store-get:hover { background: color-mix(in srgb, var(--link) 22%, var(--surface)); border-color: transparent; color: var(--link); }
.store-get:hover { text-decoration: none; }
@media (max-width: 480px) { .store-art { height: 104px; } .store-rows { grid-template-columns: 1fr; } }
/* a category's page: a wide hero, then its shelves */
.store-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; margin-bottom: 26px; min-height: 150px; }
.store-hero.art-0 { background: linear-gradient(135deg, color-mix(in srgb, var(--sky) 70%, var(--surface)), color-mix(in srgb, var(--blue) 55%, var(--surface))); }
.store-hero.art-1 { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 45%, var(--surface)), color-mix(in srgb, var(--navy) 70%, var(--surface))); }
.store-hero.art-2 { background: linear-gradient(135deg, color-mix(in srgb, var(--sky) 30%, var(--surface)), color-mix(in srgb, var(--sky) 75%, var(--surface))); }
.store-hero.art-3 { background: linear-gradient(135deg, color-mix(in srgb, var(--navy) 35%, var(--surface)), color-mix(in srgb, var(--blue) 65%, var(--surface))); }
.store-hero.art-4 { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 30%, var(--surface)), color-mix(in srgb, var(--sky) 60%, var(--surface))); }
.store-hero-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.store-hero-text strong { font-size: 28px; line-height: 1.15; font-weight: 600; color: var(--head); }
.store-hero-text .store-kicker, .store-hero-text .store-sub { color: var(--head); opacity: .85; }
.store-hero-text .store-sub { font-size: 15px; }
.store-hero-icons { display: flex; gap: 12px; flex: none; }
.store-hero-icons .app-icon { width: 56px; height: 56px; box-shadow: 0 6px 16px rgba(var(--shadow-rgb), .22); }
.store-hero-icons .app-icon .ms { font-size: 30px; }
/* an app's page, like a store's product page */
.sp-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 22px; }
.sp-icon { width: 120px; height: 120px; flex: none; box-shadow: 0 8px 22px rgba(var(--shadow-rgb), .16); }
.sp-icon .ms { font-size: 64px; }
.sp-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-name { font-size: 28px; line-height: 1.15; font-weight: 600; color: var(--head); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-tag { margin: 2px 0 0; font-size: 16px; color: var(--slate); }
.sp-dev { margin: 0; font-size: 13.5px; color: var(--link); font-weight: 600; }
/* the name is shown large beside the icon, so the page's own heading is kept for screen readers only */
.sp > .page-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp > .page-head { margin-bottom: 14px; }
.sp-acts.sales-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sp-acts .btn { width: auto; }
.sp-note { margin: 10px 0 0; font-size: 12.5px; color: var(--slate); max-width: 620px; }
.sp-ribbon { display: flex; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; scrollbar-width: thin; }
.sp-cell { flex: 1 0 128px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 12px; text-align: center; border-left: 1px solid var(--line); }
.sp-cell:first-child { border-left: 0; }
.sp-cell-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.sp-cell-big { font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--slate); min-height: 27px; display: flex; align-items: center; }
.sp-cell-big .ms { font-size: 26px; }
.sp-cell-small { font-size: 12px; color: var(--slate); }
.sp-sec { padding: 22px 0; border-top: 1px solid var(--line); }
.sp-ribbon + .sp-sec, .sp-head + .sp-sec { border-top: 0; padding-top: 0; }
.sp-sec h2 { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: var(--head); }
.sp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sp-sec-head h2 { margin: 0; }
.sp-about { margin: 0; max-width: 760px; line-height: 1.55; }
.sp-rate { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-rate-big { display: flex; flex-direction: column; align-items: center; }
.sp-rate-big strong { font-size: 54px; line-height: 1; font-weight: 700; color: var(--head); }
.sp-rate-big span { font-size: 13px; font-weight: 700; color: var(--slate); }
.sp-bars { flex: 1 1 220px; max-width: 360px; display: flex; flex-direction: column; gap: 3px; }
.sp-bar { display: flex; align-items: center; gap: 8px; }
.sp-bar-stars { width: 62px; text-align: right; font-size: 9px; letter-spacing: 1px; color: var(--slate); }
.sp-bar-track { flex: 1; height: 4px; background: var(--mist); border-radius: 2px; overflow: hidden; }
.sp-bar-track span { display: block; height: 100%; background: var(--slate); border-radius: 2px; }
.sp-rate-count { color: var(--slate); font-size: 13px; margin-left: auto; }
.sp-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sp-review { background: var(--surface-2, var(--surface)); border: 1px solid var(--line); padding: 14px 16px; margin: 0; border-radius: var(--corner, 0); }
.sp-review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sp-review p { margin: 8px 0 0; }
.sp-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 28px; margin: 0; }
.sp-info > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sp-info dt { font-size: 12px; color: var(--slate); margin: 0 0 2px; }
.sp-info dd { margin: 0; color: var(--head); }
.sp-more { padding-top: 22px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .sp-icon { width: 84px; height: 84px; } .sp-icon .ms { font-size: 44px; } .sp-name { font-size: 22px; } .store-hero { padding: 20px; } .store-hero-icons { display: none; } .store-hero-text strong { font-size: 22px; } }

/* ---------- Side menu, "Coloured icons" (an organisation theme setting; ui.applyOrgTheme marks the page): icons in
   the link colour, labels at regular weight. The page you are on is marked by its background, not by bolder words. ---------- */
html[data-menu="colour"] .nav a, html[data-menu="colour"] .nav a.active, html[data-menu="colour"] .nav .nav-toggle, html[data-menu="colour"] .nav .nav-fold.open > .nav-toggle, html[data-menu="colour"] .nav .nav-fold.here > .nav-toggle { font-weight: 400; }
html[data-menu="colour"] .nav a .ms:not(.lock), html[data-menu="colour"] .nav .nav-toggle > .ms:first-child { color: var(--link); }
/* …and, with it, the current page marked the way a phone or tablet marks it: a rounded tile inset from the edges, with
   no bar at the left; pages inside a category indented with no guide line; a category that has just been opened
   slides in. All of it only for "Coloured icons": Classic (Cirro classic) keeps its bar, its guide line and its
   weights exactly as they are. The tile's corners are the theme's. */
html[data-menu="colour"] .nav a, html[data-menu="colour"] .nav .nav-toggle { min-height: 36px; border-radius: var(--corner, 0) !important; }
html[data-menu="colour"] .nav a.active::before, html[data-menu="colour"] .nav .nav-fold.here:not(.open) > .nav-toggle::before { display: none; }
html[data-menu="colour"] .nav a.active, html[data-menu="colour"] .nav .nav-fold.here:not(.open) > .nav-toggle { background: var(--sky-bg); color: var(--link); }
html[data-menu="colour"] .nav .nav-fold.here:not(.open) > .nav-toggle .nav-chev { color: var(--link); }
html[data-menu="colour"] .nav a.active .badge-count { background: var(--surface); color: var(--link); }
html[data-menu="colour"] .nav .nav-toggle .nav-chev { font-size: 16px; }
html[data-menu="colour"] .nav .nav-fold .nav-items { margin: 2px 0 6px 0; border-left: 0; }
html[data-menu="colour"] .nav .nav-fold .nav-items a { padding-left: 42px; }
html[data-menu="colour"] .nav .nav-fold.just-opened > .nav-items { animation: nav-drop .18s ease; transform-origin: top; }
@keyframes nav-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html[data-menu="colour"] .nav .nav-fold.just-opened > .nav-items { animation: none; } }
/* the same two styles, small, in the theme's preview */
.th-menu { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--corner, 0); }
.th-menu-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12.5px; font-weight: 600; color: var(--head); }
.th-menu-row .ms { font-size: 17px; color: var(--faint-2, var(--slate)); }
.th-menu-row.on { background: var(--sky-bg); }
.th-menu-row.on .ms { color: var(--link); }
.menu-colour .th-menu-row { font-weight: 400; }
.menu-colour .th-menu-row .ms { color: var(--link); }
.menu-colour .th-menu { padding: 6px 8px; }
.menu-colour .th-menu-row { border-radius: var(--corner, 0) !important; }
.menu-colour .th-menu-row.on { color: var(--link); }

/* ---------- Point of sale: products on the left, the basket on the right ---------- */
/* (named pos-screen, not pos: .pos is already the class for a figure that went up) */
/* Point of sale, the sell screen: laid out like an iPad till. It is as tall as the window allows (--pos-top is where it
   starts, set by the page), so the products and the sale's lines scroll inside it and the page does not. */
.pos-screen { display: grid; --pos-h: calc(100vh - var(--pos-top, 150px) - 66px); grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: stretch; height: var(--pos-h); min-height: 420px; }
.pos-left { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pos-bar { display: grid; gap: 12px; margin-bottom: 14px; }
.pos-search, .pos-bar .store-search.pos-search { width: 100%; max-width: none; margin: 0; }
.pos-cats { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; justify-self: start; }
.pos-cats::-webkit-scrollbar { display: none; }
.pos-cats button { padding: 7px 14px; font-size: 12.5px; }
.pos-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; align-content: start; padding: 2px 2px 8px; margin: -2px; }
.pos-item { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 12px; text-align: left; font: inherit; color: var(--head); background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--corner, 0px) * 1.5); cursor: pointer; transition: transform .08s ease, border-color .12s; }
.pos-item:hover { border-color: var(--hover-line); }
.pos-item:active { transform: scale(.97); }
.pos-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pos-item.out { opacity: .55; }
.pos-art { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--corner, 0px) !important; font-size: 20px; font-weight: 600; letter-spacing: .02em; background: hsl(var(--tile-h, 211) 78% 93%); color: hsl(var(--tile-h, 211) 55% 38%); }
html[data-theme="dark"] .pos-art { background: hsl(var(--tile-h, 211) 35% 24%); color: hsl(var(--tile-h, 211) 75% 82%); }
.pos-item-name { padding: 0 4px; font-size: 13.5px; font-weight: 400; line-height: 1.3; color: var(--ink); min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-item-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 4px; }
.pos-item-foot strong { font-size: 13.5px; font-weight: 600; color: var(--head); font-variant-numeric: tabular-nums; }
.pos-low { color: var(--amber-text); white-space: nowrap; }
.pos-none { grid-column: 1 / -1; padding: 28px 12px; text-align: center; color: var(--slate); }
.pos-basket { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--corner, 0px) * 1.5); overflow: hidden; }
.pos-basket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 16px 10px; }
.pos-basket-head strong { display: block; font-size: 16px; font-weight: 600; color: var(--head); }
.pos-link { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 13.5px; color: var(--link); cursor: pointer; border-radius: var(--corner, 0px); }
.pos-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pos-link.is-danger { color: var(--red-text); margin-left: auto; }
.pos-cust { padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.pos-lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.pos-line { border-bottom: 1px solid var(--line-soft, var(--line)); }
.pos-line.open { background: var(--canvas); }
.pos-line-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; padding: 11px 16px; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; }
.pos-line-row:hover { background: var(--hover); }
.pos-line-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pos-line-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pos-line-name strong { font-weight: 400; color: var(--head); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-times { flex: none; color: var(--slate); font-variant-numeric: tabular-nums; }
.pos-line-amt { font-weight: 600; color: var(--head); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos-line-each { grid-column: 1 / -1; }
.pos-line-edit { display: flex; align-items: center; gap: 14px; padding: 2px 16px 12px; }
.pos-off { color: var(--green-text); }
.pos-add { color: var(--link); }
.pos-qty { display: flex; align-items: center; gap: 4px; }
.pos-qty input { width: 52px; height: 30px; min-height: 30px; padding: 0 4px; text-align: center; -moz-appearance: textfield; }
.pos-qty input::-webkit-outer-spin-button, .pos-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--slate); text-align: center; padding: 20px 8px; }
.pos-empty .ms { font-size: 34px; color: var(--faint, var(--slate)); }
.pos-totals { display: flex; flex-direction: column; padding: 8px 16px 4px; border-top: 1px solid var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
.pos-total-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font: inherit; font-size: 13.5px; color: var(--ink); background: none; border: 0; text-align: left; }
.pos-total-row.is-btn { cursor: pointer; }
.pos-total-row.is-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pos-pay { margin: 8px 16px 16px; width: auto; justify-content: center; height: 52px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .pos-screen { grid-template-columns: 1fr; height: auto; } .pos-grid { overflow: visible; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .pos-lines { overflow: visible; min-height: 110px; } }
.pos-open { display: grid; gap: 14px; text-align: left; }
.pos-open .btn, .pos-start > .btn { width: 100%; justify-content: center; } /* the theme's own button: its height and its size */
/* before there is anything to sell from: one centred card, as an iOS start screen */
.pos-start { max-width: 440px; margin: 6vh auto 0; padding: 28px 28px 24px; display: grid; gap: 12px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--corner, 0px) !important; box-shadow: var(--card-shadow, none); }
.pos-start-icon { justify-self: center; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--corner, 0px) !important; background: var(--blue-bg); color: var(--link); }
.pos-start-icon .ms { font-size: 24px; }
.pos-start h2 { margin: 4px 0 0; font-size: 16px; font-weight: 600; color: var(--head); } /* a card's title, as the theme writes one */
.pos-start > p { margin: 0 0 6px; font-size: 13.5px; color: var(--slate); }
.pos-start-note { font-size: 12.5px; color: var(--slate); margin: 4px 0 0 !important; }
.pos-setup { max-width: 760px; }
/* the setup page's selling points: a heading with its Add button, the cards, and a line under them */
.pos-sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; } .pos-sp-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--head); }
.pos-sp-why { margin: 12px 2px 0; }
/* taking payment */
.pos-pay-box { display: flex; flex-direction: column; gap: 14px; }
.pos-due { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--slate); }
.pos-due strong { font-size: 30px; line-height: 1.1; color: var(--head); font-variant-numeric: tabular-nums; }
.pos-methods { display: flex; width: 100%; }
.pos-methods button { flex: 1; justify-content: center; }
.pos-methods button:disabled { opacity: .45; cursor: not-allowed; }
.pos-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pos-hint { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); }
.pos-hint .ms { color: var(--link); }
.pos-change { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 30px; color: var(--slate); }
.pos-change strong { font-size: 22px; color: var(--head); font-variant-numeric: tabular-nums; }
.pos-short { color: var(--red-text); font-weight: 600; }
.pos-done { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px 0; color: var(--ink); }
.pos-done > .ms { font-size: 52px; color: var(--green-text); }
.pos-done > strong { font-size: 20px; color: var(--head); }
.pos-done-change { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 12px 22px; background: var(--sky-bg); color: var(--head); }
.pos-done-change strong { font-size: 28px; font-variant-numeric: tabular-nums; }

/* ---------- Dashboard: tidy edges and no ragged gaps ----------
   The cards in a row are the same height, so no card ends above its neighbours and leaves a hole under it. Every
   card's heading sits on the same line whether or not it has a link beside it, and the rows of a list start and end
   on the same line as the heading above them. */
.dash-grid { align-items: stretch; }
.dash-grid > div { display: flex; min-width: 0; }
.dash-grid > div > .card { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.dash-grid > div > .card > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* What is inside a card grows with the card, so a card that is taller than its content needs has no empty half:
   a chart on its own fills the card (its canvas is taken out of the flow so the card, not the chart, sets the height);
   the budget bars spread down the card; and a list on its own shares the height between its rows. */
.dash-grid .card-body > .chart-box:only-child { flex: 1 1 auto; height: auto; min-height: 260px; }
.dash-grid .card-body > .chart-box:only-child > canvas { position: absolute; inset: 0; }
.dash-grid .card-body > .bva:only-child { flex: 1 1 auto; align-content: space-between; }
.dash-grid .card-body > .list:only-child { flex: 1 1 auto; grid-auto-rows: 1fr; }
.dash-grid .card-body > .chart-box + .list { flex: 1 1 auto; grid-auto-rows: 1fr; }
.dash .card-head { min-height: 46px; }
.dash .card-body.flush .list-item { padding-left: 20px; padding-right: 20px; }

/* ---------- More menu: the extra actions of a list page, beside Add, Export and Import ---------- */
.more-menu { position: relative; display: inline-block; }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--corner, 0) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .16); }
.more-pop > .btn, .more-pop > a.btn { width: 100%; justify-content: flex-start; border-color: transparent; background: transparent; box-shadow: none; color: inherit; text-transform: none; letter-spacing: 0; font-weight: 500; white-space: nowrap; }
.more-pop > .btn:hover:not([disabled]), .more-pop > a.btn:hover { background: var(--canvas); }
.more-pop > .btn[disabled] { opacity: .5; }
@media (max-width: 640px) { .more-pop { left: 0; right: auto; } }
/* ---------- Record page ---------- */
/* a summary page: Summary and Actions side by side, then the tiles */
.rec-summary > .grid.g2 { align-items: stretch; }
.rec-summary > .grid.g2 > .card { height: 100%; }
.rec-section > .doc-paper { margin: 0 auto; width: 100%; max-width: 860px; }
/* a document page: two sections, the document and its cards. The document scrolls with the page. The cards float
   beside it at their full height and stay under the top bar (ui.placeSide puts them there and moves them when the
   person scrolls over them); they keep their column in the grid, so the document does not widen. */
.rec-doc > .rec-stick { align-self: start; }
.rec-doc > .rec-stick.is-float { position: fixed; z-index: 5; }
@media print { .rec-doc > .rec-stick.is-float { position: static; width: auto !important; } }
/* the document on its page has a thin border you can see: the theme's line colour is too pale to show between the white
   paper and the pale page, so it is deepened a little here (not on paper: print keeps its own look) */
@media screen { .rec-doc .doc-paper.doc-screen { border-width: .5px; border-color: color-mix(in srgb, var(--line), var(--head) 14%); } } /* half a pixel: a true hairline on a sharp (Retina) screen, one pixel on an ordinary one */
/* a document page: small cards under Summary and Actions, one for each other kind of information */
/* the document's own status and its approval status, each labelled, at the top of the Summary card */
.rec-status { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rec-status dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rec-mini { display: grid; grid-template-columns: 1fr; gap: 8px; }
.doc-block.is-alert { border-color: var(--amber-line); background: var(--amber-bg); }
.doc-block.is-alert .doc-block-meta { color: var(--amber-text); font-weight: 600; }

/* Contact window (new or edit customer, supplier): short first, the rest in sections that open in place. Rows read like table rows. */
.cm-more { margin-top: 18px; border-top: 1px solid var(--line-soft, var(--line)); }
.cm-sec { border-bottom: 1px solid var(--line-soft, var(--line)); }
.cm-sec:last-child { border-bottom: 0; }
.cm-sec:last-child > .form-grid { padding-bottom: 0; }
.cm-sec > summary { display: flex; align-items: center; gap: 8px; min-height: 43px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 400; color: var(--ink); user-select: none; }
.cm-sec > summary::-webkit-details-marker { display: none; }
.cm-sec > summary .ms { color: var(--slate); font-size: 20px; transition: transform .1s ease; }
.cm-sec[open] > summary .ms { transform: rotate(90deg); }
.cm-sec.is-closing > summary .ms { transform: none; }
.cm-sec > summary:hover { color: var(--head); }
.cm-sec > .form-grid { padding: 4px 0 18px; }
@media (prefers-reduced-motion: reduce) { .cm-sec > summary .ms { transition: none; } }

/* A customer's page: four number cards in one row; what is owed and the other pages on the left, details and actions on the right. */
.kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.kpis-4 .kpi .value { font-size: clamp(17px, 1.9vw, 24px); white-space: nowrap; }
@media (max-width: 900px) { .kpis.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a contact's profile (ui.profileCard): its own column on the left, sections of icon lines with thin rules between them */
.prof-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.prof-col { position: sticky; top: 16px; min-width: 0; }
@media (max-width: 960px) { .prof-split { grid-template-columns: minmax(0, 1fr); } .prof-col { position: static; } }
.prof-card .card-body { padding: 0; }
.prof-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 0; }
.prof-head .prof-av { width: 64px; height: 64px; font-size: 20px; }
.prof-edit { background: var(--blue-bg); color: var(--link); border: 1px solid transparent; border-radius: var(--corner); padding: 6px 12px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.prof-edit:hover { border-color: var(--blue); }
.prof-who { padding: 12px 22px 20px; } .prof-who strong { display: block; font-size: 18px; font-weight: 600; color: var(--head); line-height: 1.3; overflow-wrap: anywhere; }
.prof-who span { display: block; margin-top: 2px; color: var(--slate); }
.prof-sec { border-top: 1px solid var(--line); padding: 18px 22px; }
.prof-sec h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--head); }
.prof-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prof-rows li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink); line-height: 1.45; }
.prof-rows li > .ms { font-size: 20px; color: var(--slate); font-variation-settings: 'FILL' 0, 'wght' 300; margin-top: -1px; }
.prof-rows li > span { overflow-wrap: anywhere; min-width: 0; } .prof-rows a { color: var(--link); text-decoration: none; } .prof-rows a:hover { text-decoration: underline; }
.prof-main .act-card .sales-actions { display: flex; flex-wrap: wrap; } .prof-main .act-card .sales-actions .btn { width: auto; } /* beside a profile, the actions are a row */
.prof-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--link); cursor: pointer; text-align: left; } .prof-link:hover { text-decoration: underline; }
.prof-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-chip { background: var(--hover); color: var(--ink); border-radius: var(--corner); padding: 6px 12px; font-size: 13px; }
.cust-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .cust-split { grid-template-columns: minmax(0, 1fr); }
  .cust-split > .stack { display: contents; } .cust-split .cust-tiles { order: 2; } } /* one column: details, then the actions, then the tiles */
.cust-tiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cust-dl dd { overflow-wrap: anywhere; min-width: 0; }
.cust-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, calc(50% - 16px))), 1fr)); gap: 0 32px; } /* two columns at most, one where the card is narrow */
.cust-sum { row-gap: 8px; }
.cust-sum .dl { margin: 0; grid-template-columns: 72px minmax(0, 1fr); align-content: start; }

/* A customer's picture, name and ID on one row at the top of the contact window */
/* the first row keeps the form's two columns: the picture and the ID share the left one, so the company lines up with the fields under it */
.cm-top { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.cm-idcell { display: flex; align-items: flex-end; gap: 14px; min-width: 0; }
.cm-idcell > .field { flex: 1 1 0; min-width: 0; }
.cm-pic { flex: none; display: grid; justify-items: center; gap: 2px; position: relative; }
.cm-pic .avatar { width: 56px; height: 56px; font-size: 18px; }
/* Taking a picture off: a small round minus at its top right corner (customers, suppliers, your own profile picture) */
.pic-wrap { position: relative; display: inline-block; line-height: 0; }
.pic-off { position: absolute; top: -4px; right: -4px; z-index: 1; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50% !important; background: var(--red); color: var(--surface); cursor: pointer; }
.pic-off[hidden] { display: none; }
.pic-off .ms { font-size: 16px; font-variation-settings: "wght" 700; }
.pic-off:hover { filter: brightness(.92); }
.pic-off:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 520px) { .cm-top { grid-template-columns: minmax(0, 1fr); } }
/* the same picture beside the customer's name in the list and at the top of their Details card */
.cust-name { display: inline-flex; align-items: center; gap: 8px; }
.cust-who { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cust-who .avatar { width: 56px; height: 56px; font-size: 18px; }
.cust-who strong { display: block; font-size: 15px; font-weight: 600; color: var(--head); }

/* A list column that is only worth its room on a wide screen (a customer's industry and city): hidden when the table
   would otherwise scroll sideways. Its filter above the table stays. */
@media (max-width: 1320px) { .tbl .col-wide { display: none; } .tbl td.col-clip { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* and a long email is cut with … (the full one shows on hover) */

/* The frame. On a wide screen the window never scrolls: the side menu and the top bar are fixed parts of the frame and
   only the content area scrolls, inside it. So scrolling, and the browser's elastic bounce at the ends, belong to the
   content alone, and the menu and top bar can't be dragged along. On a phone (860px and under) the page itself scrolls
   as before. --stick-top: where something inside the content sticks (0 here, since the top bar is outside it). */
@media (min-width: 861px) {
  .app { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .app > .sidebar { height: 100%; }
  .app > .main { height: 100%; min-height: 0; overflow: hidden; }
  .main-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; --stick-top: 0px; } /* relative: anything placed absolutely inside the content (labels for screen readers, for one) scrolls with it instead of stretching the window */
}
@media print { .app { display: block; height: auto; overflow: visible; } .app > .main, .main-scroll { height: auto; overflow: visible; } }

/* A document page on a wide screen: the page header stays at the top and under it are two panes, the document and its
   cards, each scrolling by itself. The content area does not scroll on these pages; the panes fill what is left of it.
   The small padding keeps a card's shadow from being cut at a pane's edge. Narrower than this the cards go under the
   document and the page scrolls as one. */
@media (min-width: 1101px) {
  .main-scroll:has(.sales-view > .rec-doc) { overflow: hidden; }
  .main-scroll:has(.sales-view > .rec-doc) > .content { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding-top: 0; padding-bottom: 0; } /* the space above is inside the panes, so what scrolls in them goes right up to the top bar */
  .content > .sales-view:has(> .rec-doc) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .sales-view > .rec-doc { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .sales-view > .rec-doc > * { align-self: stretch; align-content: start; min-height: 0; overflow-y: auto; padding: 28px 8px 28px; margin: 0 -8px; }
  .sales-view > .rec-doc > * > * { flex-shrink: 0; }
  /* the page header is the top of the document pane and its buttons the top of the cards pane (ui.js puts them there) */
  .sales-view > .rec-doc .page-head { margin-bottom: 0; }
  /* the path stays in view: a slim strip at the top of the document pane, in the page's own colour, that the title and
     the document scroll away under. At the start it sits where it always did (28px down); stuck, it is 12px down (top is measured from inside
     the pane's 28px padding, so -44px is 16px above the pane's edge). */
  .sales-view > .rec-doc > .stack > .crumbs { position: sticky; top: -44px; z-index: 3; margin: -28px -8px -16px; padding: 28px 8px 6px; background: var(--canvas); }
  /* stuck (something is under it): a hairline is drawn under the strip from left to right. Going back to the
     top, the line draws back the same way. No shadow. */
  .sales-view > .rec-doc > .stack > .crumbs::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left center; transition: transform .35s ease; }
  .sales-view > .rec-doc > .stack > .crumbs.is-stuck::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .sales-view > .rec-doc > .stack > .crumbs::after { transition: none; } }
  /* where the settings pane is the left one (a template's page): the pane, and so the path's strip and its hairline, reach the
     side menu's edge, the whole width of the pane, with the contents where they were */
  .sales-view > .rec-doc.is-rev > .rec-stick { margin-left: -28px; padding-left: 28px; }
  .sales-view > .rec-doc.is-rev > .rec-stick > .crumbs { margin-left: -28px; padding-left: 28px; }
  /* the same on a document's page (an invoice, a quote, an order): there the document's pane is the left one */
  .sales-view > .rec-doc:not(.is-rev) > .stack:first-child { margin-left: -28px; padding-left: 28px; }
  .sales-view > .rec-doc:not(.is-rev) > .stack:first-child > .crumbs { margin-left: -28px; padding-left: 28px; }
  /* a hairline between the two panes, from the top bar to the foot of the window (the same line as the document's border) */
  .sales-view > .rec-doc > .rec-stick { border-left: .5px solid color-mix(in srgb, var(--line), var(--head) 14%); }
  .sales-view > .rec-doc > .rec-stick > .head-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
}
@media print { .main-scroll > .content, .content > .sales-view, .sales-view > .rec-doc { display: block; height: auto; } .sales-view > .rec-doc > * { overflow: visible; padding: 0; margin: 0; border: 0; } }

/* An approval on its own page: two panes like a document's page (ui.panes): the details card, led by who it is for and
   the amount, and an Actions card in the cards pane. The status pill sits beside the page title. */
.appr-lead { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.appr-lead-party { font-size: 14px; color: var(--slate); margin-bottom: 2px; }
.appr-lead-amt { font-size: 24px; font-weight: 700; color: var(--head); line-height: 1.25; }
.page-head h1 .head-pill { display: inline-flex; vertical-align: middle; margin-left: 8px; }
.page-head h1 .head-pill .pill { vertical-align: middle; }
/* The history on the approval's own page: all of it, as a timeline (ui.apprTimeline). Down the left runs a line with a
   round node for each step; beside each node is a softly tinted box in the step's colour, holding who, what and when,
   and what they wrote in a white box of its own. --step is the step's colour (blue sent, green approved, red rejected,
   grey recalled); node, tint and icon all come from it. The boxes take the theme's corner (--corner) the way cards do:
   theme.css squares every corner, so it has to be asked for with !important, like the list of things above that take it. */
.appr-line .appr-log-label { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--head); margin-bottom: 14px; }
.appr-steps-line { gap: 0; }
.appr-steps-line li { --step: var(--link); position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; padding: 0 0 14px; font-size: 13.5px; line-height: 1.5; }
.appr-steps-line li:last-child { padding-bottom: 0; }
.appr-steps-line li.appr-approved { --step: var(--green-text); }
.appr-steps-line li.appr-rejected { --step: var(--red-text); }
.appr-steps-line li.appr-recalled { --step: var(--slate); }
.appr-steps-line li.appr-waiting { --step: var(--amber-text); } /* where it stands now: the first step, with no person */
.appr-steps-line li.appr-waiting .appr-box { background: var(--amber-bg); }
.appr-steps-line li.appr-waiting .appr-node { border-style: dashed; border-color: var(--amber-line); }
.appr-steps-line .appr-box-why { margin-top: 2px; color: var(--amber-text); }
/* on the page the timeline follows the customer and amount directly: the lead's own line divides them, so the log needs none */
.appr-page-card .appr-log.appr-line { border-top: 0; margin-top: 0; padding-top: 0; }
.appr-steps-line li:not(:last-child)::before { content: ""; position: absolute; left: 15.5px; top: 32px; bottom: 0; width: 1px; background: var(--line); }
.appr-steps-line .appr-node { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: 6px; border-radius: 50% !important; background: var(--surface); border: 1px solid var(--line); color: var(--step); position: relative; z-index: 1; }
.appr-steps-line .appr-node .ms { color: inherit; margin: 0; }
.appr-steps-line li:not(:last-child)::before { top: 38px; }
.appr-steps-line .appr-box { min-width: 0; padding: 12px 14px; border-radius: var(--corner, 0) !important; background: color-mix(in srgb, var(--step) 7%, var(--surface)); }
.appr-steps-line .appr-box-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.appr-steps-line .appr-box-head .avatar { width: 28px; height: 28px; font-size: 11px; flex: none; }
.appr-steps-line .appr-box-line { min-width: 0; }
.appr-steps-line .appr-box-time { margin-left: auto; padding-left: 12px; flex: none; white-space: nowrap; font-size: 12.5px; font-variant-numeric: tabular-nums; } /* the date and time, at the box's right edge */
.appr-steps-line .appr-box-line strong { font-weight: 600; color: var(--head); }
.appr-steps-line .appr-box-act { font-weight: 600; color: var(--step); }
.appr-steps-line .appr-box-quote { margin: 10px 0 0 38px; padding: 8px 12px; border-radius: var(--corner, 0) !important; background: var(--surface); color: var(--head); display: inline-block; max-width: calc(100% - 38px); box-sizing: border-box; }
.appr-steps-line .appr-box-link { margin: 6px 0 0 38px; font-size: 13px; } /* a link from the event: its journal entry */
.appr-steps-line .appr-box-link a { display: inline-flex; align-items: center; gap: 4px; }
.appr-steps-line .appr-box-note { margin: 2px 0 0 38px; font-size: 13px; overflow-wrap: anywhere; } /* the event's detail, under the name */

/* A one-column page whose path (breadcrumb) stays in view: it stands before the page header (ui.recordPage lifts it out)
   and sticks at the top of the content area, on the page's colour, while the title and the rest scroll away under it.
   Once something is under it a hairline draws in from the left, as on the two-pane pages. Wide screens only: on a
   phone the whole page scrolls under the top bar and the path goes with it. */
.crumbs.path-stick { margin-bottom: 6px; }
@media (min-width: 861px) {
  .crumbs.path-stick { position: sticky; top: -16px; z-index: 3; margin: -28px -8px 0; padding: 28px 8px 6px; background: var(--canvas); } /* as wide as on a document's page: 8px past the content on each side, 20px in from the menu and the window's edge */
  .crumbs.path-stick::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left center; transition: transform .35s ease; }
  .crumbs.path-stick.is-stuck::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .crumbs.path-stick::after { transition: none; } }
/* Anything else that sticks inside the content (the theme page's preview) stops below the path strip, not under it. */
@media (min-width: 861px) { .main-scroll:has(.crumbs.path-stick) { --stick-top: 38px; }
  .main-scroll:has(.crumbs.path-stick) .tbl th { top: 38px; }
  .main-scroll:has(.crumbs.path-stick) .table-wrap .tbl th { top: 0; } } /* (a table in its own scrolling box sticks to that box, not the page: pushed down there it would cover its first row) */ /* a long table's heading row, which sticks too, stops under the strip as well */

/* A template's preview is a sheet of the paper chosen for it, at that paper's real proportions (--pw and --ph are its
   width and height, set on the sheet): A5 is visibly smaller and squatter than A4, US Letter a little wider and shorter.
   It is scaled to fit its pane (the page sets the scale), so nothing is cut off and nothing needs a scrollbar of its own. */
.docs-preview .doc-paper.doc-sheet { width: var(--pw, 210mm); min-height: var(--ph, 297mm); max-width: none; box-sizing: border-box; margin: 0; padding: var(--pm, 16mm 14mm 18mm); }
/* and the printed page's own margins and type size, so the sheet holds exactly what a page holds and a document that
   needs a second page shows it */
.docs-preview .doc-sheet .pdoc { font-size: 10pt; }
/* a document longer than one sheet is shown as separate sheets, one under the other with a gap, as it will print
   (ui.paginate builds them, for a template's preview and for the print preview): each is one page tall and shows its share of the document through a window that starts and ends
   at that page's breaks. "Page 1 of 2" is in the bottom margin, where the printer puts it. */
.docs-preview [data-docprev] { display: grid; gap: 18px; justify-items: center; } /* the sheet in the middle of its pane, whatever size it is drawn at */
.doc-page { position: relative; overflow: hidden; }
.doc-page > .doc-window { overflow: hidden; flex: none; }
.doc-page > .doc-window > .pdoc { display: block; } /* laid out as on paper: the footer follows the last line */
.doc-page > .doc-page-no { position: absolute; right: 14mm; bottom: 7mm; font-size: 7.5pt; color: var(--slate); }
.print-preview .print-sheet.doc-page + .print-sheet.doc-page { margin-top: 18px; } /* the print preview's sheets, one under the other */

/* The foot of the side menu: your profile, and a Sign out button at its right. The profile takes the room and cuts a long
   name short; the button is a quiet icon that takes the theme's corner and shows its edge when pointed at. */
.side-me { display: flex; align-items: center; gap: 8px; min-width: 0; }
.side-me > .side-profile { flex: 1 1 auto; min-width: 0; }
.sidebar-foot .side-out { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: var(--corner, 0) !important; background: none; color: var(--slate); cursor: pointer; }
.sidebar-foot .side-out:hover { color: var(--head); background: var(--hover); border-color: var(--line); }
.sidebar-foot .side-out:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); }
.sidebar-foot .side-out .ms { font-size: 20px; }

/* The second kind of two-pane page (ui.panes with sideFirst): what you set is on the left and what it makes is on the
   right, as on a template's page. The cards pane comes first, the two panes are the same width, and the line is on its right;
   on a narrow screen it is still first, above the result. */
.rec-doc.is-rev > .rec-stick { order: -1; }
@media (min-width: 1101px) {
  .sales-view .sales-split.rec-doc.is-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* the two panes share the width equally */
  .sales-view > .rec-doc.is-rev > .rec-stick { border-left: 0; border-right: .5px solid color-mix(in srgb, var(--line), var(--head) 14%); }
}

/* The footer of a printed document sits at the foot of its sheet, not straight after the last line. On screen (a
   template's preview, and the print preview) the document fills its sheet and its body takes up the slack, which pushes
   the footer down. On paper the document is at least one page tall (ui.printPageCss gives the height) and the footer is
   pinned to its foot; a document that runs past one page ends with its footer after the last line, as before. */
.doc-sheet, .print-sheet { display: flex; flex-direction: column; }
.doc-sheet > .pdoc, .print-sheet > .pdoc { flex: 1 1 auto; display: flex; flex-direction: column; }
.doc-sheet > .pdoc > .pdoc-body, .print-sheet > .pdoc > .pdoc-body { flex: 1 0 auto; }
@media print {
  body.print-mode #print-root > .pdoc { position: relative; box-sizing: border-box; padding-bottom: calc(12mm + var(--pd-fnote-b, 0mm)); }
  body.print-mode #print-root > .pdoc > .pdoc-foot { position: absolute; left: var(--pd-fnote-l, 0mm); right: var(--pd-fnote-r, 0mm); bottom: var(--pd-fnote-b, 0mm); margin: 0; }
}

/* Under the totals a document has two halves of the page: payment instructions on the left, the VAT summary on the right.
   Each fills its half, whether or not the other is there (one alone keeps to its half). Side by side, not one under the
   other: stacked, an invoice with a few lines ran onto a second page for want of an inch. */
.pdoc-after { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; justify-items: stretch; }
.pdoc-after > .pdoc-pay { order: -1; width: auto; max-width: none; box-sizing: border-box; }
.pdoc-after .ptbl-compact { width: 100%; min-width: 0; }
/* the totals (Subtotal to Balance due) are the right half too, in line with the VAT summary under them */
.pdoc-totals { width: calc(50% - 10px); min-width: 0; }

/* A template's page layout. The four margins are four small boxes in a row, each under its side's name. */
.tpl-margins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tpl-margins label { display: grid; gap: 4px; min-width: 0; }
.tpl-card-acts { justify-content: flex-end; margin-top: 4px; }
.tpl-margins.tpl-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* a page's own width and height */
.tpl-margins label > span { font-weight: 400; } /* a side's name is a quiet helper, not a field label */
.tpl-margins input { width: 100%; min-width: 0; }
.tpl-nav .field .tpl-margins label > input { font-size: 14px; font-weight: 400; } /* (a box inside a label would take the label's small bold text) */
/* Header size scales the logo (image or text) and the document's title together; footer size, the footer's text. Normal
   is the size they always had. */
.pdoc.pdoc-h-small .pdoc-logo-img { max-width: 210px; max-height: 66px; }
.pdoc.pdoc-h-small .pdoc-logo { font-size: 13pt; }
.pdoc.pdoc-h-small .pdoc-type { font-size: 15pt; }
.pdoc.pdoc-h-large .pdoc-logo-img { max-width: 390px; max-height: 126px; }
.pdoc.pdoc-h-large .pdoc-logo { font-size: 21pt; }
.pdoc.pdoc-h-large .pdoc-type { font-size: 24pt; }
.pdoc.pdoc-f-small .pdoc-foot { font-size: 6.5pt; }
.pdoc.pdoc-f-large .pdoc-foot { font-size: 9.5pt; }

/* A template's buttons: a row at the top of the right pane, over the sheet. Print preview keeps to the right end. */
.tpl-acts { align-items: center; gap: 8px; flex-wrap: wrap; }
/* Wide: the buttons are level with the page title across the divide, so the sheet under them starts level with the first
   settings card. Narrow, where the panes are one column: the buttons come first, above the settings, so Save is not at
   the far end of the page (the main pane's two parts are placed on their own to allow it). */
@media (min-width: 1101px) { .rec-doc.is-rev .tpl-acts { margin-top: 22px; } }
@media (max-width: 1100px) { .rec-doc.is-rev > .stack:not(.rec-stick) { display: contents; } .rec-doc.is-rev .tpl-acts { order: -2; } }
.tpl-acts .tpl-acts-end { margin-left: auto; }

/* Header and footer styles (a template picks one of each; Standard is the layout they always had).
   Header: reversed puts the title and its details on the left and the logo on the right; centred stacks the logo over
   the title, both in the middle. Footer: centred puts the text in the middle; band is a bar in the document's accent
   colour with the text in white, printed as a colour. */
.pdoc.pdoc-hs-reversed .pdoc-head { flex-direction: row-reverse; }
.pdoc.pdoc-hs-reversed .pdoc-doc { text-align: left; }
.pdoc.pdoc-hs-reversed .pdoc-kv { margin-left: 0; margin-right: auto; }
.pdoc.pdoc-hs-reversed .pdoc-issuer { text-align: right; }
.pdoc.pdoc-hs-reversed .pdoc-logo-img { margin-left: auto; object-position: right top; }
.pdoc.pdoc-hs-centred .pdoc-head { flex-direction: column; align-items: center; gap: 10px; }
.pdoc.pdoc-hs-centred .pdoc-issuer { max-width: 100%; text-align: center; }
.pdoc.pdoc-hs-centred .pdoc-logo-img { margin-left: auto; margin-right: auto; object-position: center top; }
.pdoc.pdoc-hs-centred .pdoc-doc { text-align: center; }
.pdoc.pdoc-hs-centred .pdoc-kv { margin-left: auto; margin-right: auto; }
.pdoc.pdoc-fs-centred .pdoc-foot { justify-content: center; text-align: center; }
.pdoc.pdoc-fs-right .pdoc-foot { justify-content: flex-end; text-align: right; }
/* How a template dresses the parts of a document. --pdoc-accent is the accent, --pdoc-on the wording colour that reads
   on it, --pdoc-soft a light wash of it over the page colour. Each look is one class on the document (ui.LOOKS). */
.pdoc { --pdoc-soft: color-mix(in srgb, var(--pdoc-accent, var(--navy)) 9%, var(--pdoc-bg, white)); position: relative; }
/* the header: a line under it, a soft fill, filled with the accent, or a box round it */
.pdoc.pdoc-hl-rule .pdoc-head { border-bottom: 2px solid var(--pdoc-accent, var(--navy)); } /* (the room over the line is the header's bottom padding, nothing more) */
.pdoc.pdoc-hl-tint .pdoc-head { background: var(--pdoc-soft); }
.pdoc.pdoc-hl-fill .pdoc-head { background: var(--pdoc-accent, var(--navy)); }
.pdoc.pdoc-hl-fill .pdoc-head :is(.pdoc-type, .pdoc-logo, .pdoc-kv td, .pdoc-stamp) { color: var(--pdoc-on, white); border-color: var(--pdoc-on, white); }
.pdoc.pdoc-hl-fill .pdoc-head .pdoc-kv th { color: color-mix(in srgb, var(--pdoc-on, white) 78%, transparent); }
.pdoc.pdoc-hl-boxed .pdoc-head { border: 1px solid var(--phair); }
.pdoc:is(.pdoc-hl-tint, .pdoc-hl-fill, .pdoc-hl-boxed) .pdoc-logo-img, .pdoc:is(.pdoc-hl-tint, .pdoc-hl-fill, .pdoc-hl-boxed) .pdoc-type { margin-bottom: 4px; }
/* the footer: no line, an accent line, a soft fill, filled, or boxed */
.pdoc.pdoc-fl-none .pdoc-foot { border-top: 0; }
.pdoc.pdoc-fl-accent .pdoc-foot { border-top: 2px solid var(--pdoc-accent, var(--navy)); }
.pdoc.pdoc-fl-tint .pdoc-foot { border-top: 0; padding: 8px 12px; border-radius: 6px; background: var(--pdoc-soft); }
.pdoc.pdoc-fl-fill .pdoc-foot { border-top: 0; padding: 8px 12px; border-radius: 6px; background: var(--pdoc-accent, var(--navy)); color: var(--pdoc-on, white); }
.pdoc.pdoc-fl-boxed .pdoc-foot { padding: 8px 12px; border: 1px solid var(--phair); border-radius: 6px; }
/* A page's own footer (the first page's, the following pages'): on paper it is in the page's bottom margin
   (ui.printPageCss); on screen each sheet gets its own (ui.paginate). */
.doc-page1 { position: relative; } /* a document of one sheet: its page's footer is placed in the sheet's bottom margin */
.doc-page-foot { position: absolute; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; gap: 6mm; font-size: 7.5pt; line-height: 1.3; color: var(--pmuted); } /* its place and height are set from the sheet's bottom margin (ui.pfootBox) */
.doc-page-foot > .pf-text { min-width: 0; } .doc-page-foot > .pf-num { flex: none; white-space: nowrap; font-size: 7.5pt; }
.doc-page-foot.is-end { flex-direction: row-reverse; } .doc-page-foot.is-end > .pf-text { text-align: right; }
.doc-page-foot.is-mid { display: grid; grid-template-columns: 1fr auto 1fr; } .doc-page-foot.is-mid > .pf-text { grid-column: 2; text-align: center; } .doc-page-foot.is-mid > .pf-num { grid-column: 3; justify-self: end; }
.doc-page-foot.is-small > .pf-text { font-size: 6.5pt; }
.doc-page-foot.is-large > .pf-text { font-size: 9.5pt; }
.doc-page-foot.is-line { border-top: 1px solid var(--phair); } .doc-page-foot.is-accent { border-top: 2px solid var(--pdoc-accent, var(--navy)); }
.doc-page-foot:is(.is-tint, .is-fill, .is-boxed) { align-items: center; }
.doc-page-foot:is(.is-line, .is-accent, .is-none) { align-items: center; }
.doc-page-foot.is-num { justify-content: flex-end; }
.doc-page-foot > .pf-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a footer's three places: left, centre, right */
.doc-page-foot.is-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 4mm; } .doc-page-foot.is-slots > .pf-s0 { grid-column: 1; justify-self: start; text-align: left; } .doc-page-foot.is-slots > .pf-s1 { grid-column: 2; text-align: center; } .doc-page-foot.is-slots > .pf-s2 { grid-column: 3; justify-self: end; text-align: right; }
.doc-page-foot.is-slots > * { grid-row: 1; min-width: 0; } .doc-page-foot.is-small > .pf-num { font-size: 6.5pt; } .doc-page-foot.is-large > .pf-num { font-size: 9.5pt; }
.doc-page-foot.is-tint { background: color-mix(in srgb, var(--pdoc-accent, var(--navy)) 9%, var(--pdoc-bg, white)); }
.doc-page-foot.is-fill { background: var(--pdoc-accent, var(--navy)); color: var(--pdoc-on, white); }
.doc-page-foot.is-boxed { border: 1px solid var(--phair); }
/* The page's margins place everything. The header then has a padding of its own (--hpad-t, -r, -b, -l), and so has
   each section of the body, with the terms and the footer note that follow it (--pd-<section>-t, -r, -b, -l; ui.BODY_PADS),
   set on the document by ui.printDoc where a template sets them. A section's top padding is its gap from the one
   before; where a template sets none the gap is the one it always had. With margins of 0 the header's dress reaches
   the paper's edges while its words, and each section, stay in by their own padding. */
.pdoc-head { padding: var(--hpad-t, 0mm) var(--hpad-r, 0mm) var(--hpad-b, 0mm) var(--hpad-l, 0mm); margin-bottom: var(--pd-box-t, 18px); }
.pdoc > .pdoc-parties { margin: 0 var(--pd-box-r, 0mm) var(--pd-box-b, 16px) var(--pd-box-l, 0mm); }
.pdoc > .pdoc-subhead { margin-left: var(--pd-box-l, 0mm); margin-right: var(--pd-box-r, 0mm); }
/* (the items table, and anything else in the body that is not one of the named sections, takes the table's padding) */
.pdoc > .pdoc-body > :not(.pdoc-totals, .pdoc-sum, .pdoc-after, .pdoc-terms, .pdoc-sign) { margin-left: var(--pd-tbl-l, 0mm); margin-right: var(--pd-tbl-r, 0mm); }
.pdoc > .pdoc-body > .ptbl { margin-top: var(--pd-tbl-t, 0mm); margin-bottom: var(--pd-tbl-b, 0mm); width: calc(100% - var(--pd-tbl-l, 0mm) - var(--pd-tbl-r, 0mm)); }
.pdoc > .pdoc-body > .pdoc-totals { margin: var(--pd-tot-t, 12px) var(--pd-tot-r, 0mm) var(--pd-tot-b, 0mm) auto; }
.pdoc > .pdoc-body > .pdoc-sum { margin: var(--pd-tot-t, 12px) var(--pd-tot-r, 0mm) var(--pd-tot-b, 0mm) var(--pd-tot-l, 0mm); }
.pdoc > .pdoc-body > .pdoc-after { margin: var(--pd-pay-t, 22px) var(--pd-pay-r, 0mm) var(--pd-pay-b, 0mm) var(--pd-pay-l, 0mm); }
.pdoc > .pdoc-body > .pdoc-terms { margin: var(--pd-note-t, 16px) var(--pd-note-r, 0mm) var(--pd-note-b, 0mm) var(--pd-note-l, 0mm); }
.pdoc > .pdoc-body > .pdoc-sign { margin: var(--pd-sign-t, 30px) var(--pd-sign-r, 0mm) var(--pd-sign-b, 0mm) var(--pd-sign-l, 0mm); }
.pdoc > .pdoc-sign.pdoc-sign-2 { margin: var(--pd-sign-t, 44px) var(--pd-sign-r, 0mm) var(--pd-sign-b, 0mm) var(--pd-sign-l, 0mm); }
.pdoc > .pdoc-tc { margin: var(--pd-tc-t, 22px) var(--pd-tc-r, 0mm) var(--pd-tc-b, 0mm) var(--pd-tc-l, 0mm); }
.pdoc > .pdoc-foot { margin: var(--pd-fnote-t, 26px) var(--pd-fnote-r, 0mm) 0 var(--pd-fnote-l, 0mm); }
.doc-sheet > .pdoc, .print-sheet > .pdoc, .doc-paper > .pdoc { padding-bottom: var(--pd-fnote-b, 0mm); }
/* a boxed section of the body (layout.secBox): a border in the template's line colour, its corners, and the space inside */
.pdoc.pdoc-sb-box > .pdoc-parties { border: var(--sb-box, 0 none); border-radius: var(--sb-box-r, 0) !important; box-sizing: border-box; } .pdoc.pdoc-sbp-box > .pdoc-parties { padding: var(--sb-box-p); }
.pdoc.pdoc-sb-tbl > .pdoc-body > .ptbl { border: var(--sb-tbl, 0 none); border-radius: var(--sb-tbl-r, 0) !important; box-sizing: border-box; } .pdoc.pdoc-sbp-tbl > .pdoc-body > .ptbl { padding: var(--sb-tbl-p); }
.pdoc.pdoc-sb-tot > .pdoc-body > .pdoc-totals, .pdoc.pdoc-sb-tot > .pdoc-body > .pdoc-sum { border: var(--sb-tot, 0 none); border-radius: var(--sb-tot-r, 0) !important; box-sizing: border-box; } .pdoc.pdoc-sbp-tot > .pdoc-body > .pdoc-totals, .pdoc.pdoc-sbp-tot > .pdoc-body > .pdoc-sum { padding: var(--sb-tot-p); }
.pdoc.pdoc-sb-pay > .pdoc-body > .pdoc-after { border: var(--sb-pay, 0 none); border-radius: var(--sb-pay-r, 0) !important; box-sizing: border-box; } .pdoc.pdoc-sbp-pay > .pdoc-body > .pdoc-after { padding: var(--sb-pay-p); }
.pdoc.pdoc-sb-note > .pdoc-body > .pdoc-terms { border: var(--sb-note, 0 none); border-radius: var(--sb-note-r, 0) !important; box-sizing: border-box; } .pdoc.pdoc-sbp-note > .pdoc-body > .pdoc-terms { padding: var(--sb-note-p); }
.pdoc.pdoc-sb-sign > .pdoc-body > .pdoc-sign, .pdoc.pdoc-sb-sign > .pdoc-sign.pdoc-sign-2 { border: var(--sb-sign, 0 none); border-radius: var(--sb-sign-r, 0) !important; box-sizing: border-box; } .pdoc.pdoc-sbp-sign > .pdoc-body > .pdoc-sign, .pdoc.pdoc-sbp-sign > .pdoc-sign.pdoc-sign-2 { padding: var(--sb-sign-p); }
.pdoc.pdoc-sb-tc > .pdoc-tc { border: var(--sb-tc, 0 none); border-radius: var(--sb-tc-r, 0) !important; box-sizing: border-box; } .pdoc.pdoc-sbp-tc > .pdoc-tc { padding: var(--sb-tc-p); }
.pdoc.pdoc-sb-tbl > .pdoc-body > .ptbl { border-collapse: separate; border-spacing: 0; overflow: hidden; }
.pdoc.pdoc-sb-tbl > .pdoc-body > .ptbl :is(th, td):first-child { padding-left: 8px; } .pdoc.pdoc-sb-tbl > .pdoc-body > .ptbl :is(th, td):last-child { padding-right: 8px; } .pdoc.pdoc-sb-tbl > .pdoc-body > .ptbl tbody tr:last-child td { border-bottom: 0; } /* (the first and last columns stand off the border, and the last row's line isn't doubled by it) */
/* a body arranged in rows (layout.bodyRows): a row is a stack, or a grid of equal columns; a block carries its own margin and box */
.pdoc-rows > .pdoc-row { border-radius: var(--hz-r, 0) !important; break-inside: avoid; } .pdoc-rows > .pdoc-row:not(.is-one) { display: grid; grid-template-columns: repeat(var(--rc, 2), minmax(0, 1fr)); column-gap: var(--rg, 5mm); align-items: start; } .pdoc-rows .pdoc-blk + .pdoc-blk { margin-top: var(--rg, 5mm); } /* (the row's gap: between its columns, and between blocks stacked in one) */
.pdoc-rcol { min-width: 0; border-radius: var(--hz-r, 0) !important; } .pdoc-hel { max-width: 100%; }
.pdoc-row.is-one > .pdoc-rcol { display: flow-root; }
.pdoc-line { margin-top: 14mm; border-top: 1px solid var(--pink); padding-top: 4px; font-size: 8pt; color: var(--pmuted); break-inside: avoid; } .pdoc-blk { min-width: 0; border-radius: var(--hz-r, 0) !important; }
.pdoc-rows .pdoc-blk > :is(.pdoc-parties, .pdoc-totals, .pdoc-words, .pdoc-after, .pdoc-terms, .pdoc-sign) { margin: 0; } .pdoc-rows .pdoc-blk > .pdoc-totals { width: 100%; min-width: 0; } .pdoc-rows .pdoc-blk > .pdoc-after { display: block; }
.pdoc-rows .pdoc-blk-sign > .pdoc-sign + .pdoc-sign { margin-top: 10mm; } .pdoc-rows .pdoc-blk-qr > .pdoc-qr { margin-top: 0; } .pdoc-ra-r > .pdoc-blk-qr > .pdoc-qr { justify-content: flex-end; } .pdoc-ra-c > .pdoc-blk-qr > .pdoc-qr { justify-content: center; }
/* in a row of one column the narrow blocks (totals, words, payment, VAT summary) keep half the width, on the side the row lines up to */
.pdoc-row.is-one > :is(.pdoc-blk-tot, .pdoc-blk-words, .pdoc-blk-pay, .pdoc-blk-vat, .pdoc-blk-from, .pdoc-blk-to, .pdoc-blk-qr, [class*="pdoc-blk-line"]), .pdoc-row.is-one > .pdoc-rcol > :is(.pdoc-blk-tot, .pdoc-blk-words, .pdoc-blk-pay, .pdoc-blk-vat, .pdoc-blk-from, .pdoc-blk-to, .pdoc-blk-qr, [class*="pdoc-blk-line"]) { width: calc(50% - 10px); } .pdoc-row.is-one.pdoc-ra-r > .pdoc-rcol > .pdoc-blk { margin-left: auto; } .pdoc-row.is-one.pdoc-ra-r > .pdoc-blk { margin-left: auto; } .pdoc-row.is-one.pdoc-ra-c > .pdoc-rcol > :is(.pdoc-blk-tot, .pdoc-blk-words, .pdoc-blk-pay, .pdoc-blk-vat) { margin-left: auto; margin-right: auto; } .pdoc-row.is-one.pdoc-ra-c > :is(.pdoc-blk-tot, .pdoc-blk-words, .pdoc-blk-pay, .pdoc-blk-vat) { margin-left: auto; margin-right: auto; }
.pdoc-ra-c { text-align: center; } .pdoc-ra-r { text-align: right; } .pdoc-ra-r > .pdoc-blk > .pdoc-words, .pdoc-ra-c > .pdoc-blk > .pdoc-words { text-align: inherit; }
.pos-per { margin-left: 2px; font-size: 11.5px; font-weight: 400; color: var(--slate); } .pos-head-acts { display: inline-flex; gap: 12px; }
.pos-held, .pos-ret-lines { display: grid; gap: 8px; } .pos-held-row, .pos-ret-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--corner, 0) !important; } .pos-held-row > div, .pos-ret-row > div { display: grid; gap: 2px; min-width: 0; } .pos-held-row > span { display: inline-flex; gap: 6px; flex: none; } .pos-ret-row input { width: 92px; height: 36px; flex: none; padding: 0 10px; border: 1px solid var(--field-line, var(--line)); border-radius: var(--corner, 0) !important; background: var(--surface); font: inherit; color: var(--ink); text-align: right; } .pos-ret-row.is-done { opacity: .55; } .pos-ret-lines { margin: 0 0 12px; }
.pos-pc-out { display: grid; gap: 3px; margin-top: 12px; min-height: 20px; } .pos-pc-price { font-size: 26px; font-weight: 700; color: var(--head); } /* the till's hold list, return lines and price check */
.pos-opts { display: block; font-size: 12.5px; font-weight: 400; color: var(--slate); } .pos-order { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; margin: 0; padding: 0 16px 8px; } .pos-order input { height: 36px; padding: 0 10px; border: 1px solid var(--field-line, var(--line)); border-radius: var(--corner, 0) !important; background: var(--surface); font: inherit; color: var(--ink); min-width: 0; }
.pos-optbox { display: grid; gap: 16px; } .pos-optgrp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .pos-optgrp-h strong { font-weight: 600; } .pos-optlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pos-opt { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--corner, 0) !important; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--ink); text-align: left; cursor: pointer; } .pos-opt:hover { border-color: var(--blue); } .pos-opt.active { border-color: var(--blue); background: var(--blue-bg, var(--hover)); color: var(--link, var(--blue)); } .pos-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pos-ch { display: grid; gap: 8px; } .pos-ch-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; } .pos-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; max-height: 190px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--corner, 0) !important; } .pos-pick-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pos-done-order { display: grid; justify-items: center; margin-bottom: 6px; } .pos-done-order span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); } .pos-done-order strong { font-size: 44px; line-height: 1.1; font-weight: 700; color: var(--head); } /* a cafe's options, an order's type and name, and its number when the sale is done */
.pos-devices { margin-top: 16px; } .pos-dev { display: grid; } .pos-dev-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line-soft, var(--line)); } .pos-dev-row:last-child { border-bottom: 0; } .pos-dev-row > div { display: grid; gap: 2px; min-width: 200px; } .pos-dev-row strong { font-weight: 600; } .pos-dev-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pos-dev-acts select { min-width: 96px; } .pos-dev-sw { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; } /* Point of sale setup: this till's devices */
.pos-art.has-img { padding: 0; overflow: hidden; background: white; } html[data-theme="dark"] .pos-art.has-img { background: white; } .pos-art.has-img { position: relative; } .pos-art.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } /* the whole picture, never cut: a product's photo is square, the tile's picture area is wider */
/* Warehouses: the picking order, a row each with its place and up / down */
.wh-ord { display: grid; gap: 8px; } .wh-ord-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: var(--corner, 0) !important; } .wh-ord-row strong { font-weight: 600; } .wh-ord-n { color: var(--slate); font-variant-numeric: tabular-nums; } .wh-ord-row > span:last-child { display: inline-flex; gap: 6px; }
/* Point of sale, restaurants: the tables as tiles by area, a table's order beside the products, and the tables in setup */
.pos-floor { display: grid; gap: 22px; } .pos-floor-sum { margin: 0; font-size: 13.5px; color: var(--slate); } .pos-area { display: grid; gap: 10px; } .pos-area h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.pos-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.pos-table { display: grid; align-content: center; justify-items: start; gap: 2px; min-height: 92px; padding: 12px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--corner, 0px) !important; cursor: pointer; }
.pos-table:hover { border-color: var(--hover-line); } .pos-table:active { transform: scale(.98); } .pos-table:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pos-table strong { font-size: 16px; font-weight: 600; color: var(--head); } .pos-table .small { color: var(--slate); }
.pos-table.busy { background: var(--blue-bg, var(--hover)); border-color: var(--blue); } .pos-table.busy strong { color: var(--link, var(--blue)); } .pos-table-amt { font-size: 13.5px; font-weight: 600; color: var(--head); font-variant-numeric: tabular-nums; }
.pos-table.is-new { justify-items: center; border-style: dashed; color: var(--link); } .pos-table.is-new .ms { font-size: 22px; }
.pos-tab-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 16px 0; } .pos-tab-acts .btn { justify-content: center; padding-left: 6px; padding-right: 6px; }
.pos-new { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 11px; font-weight: 600; line-height: 18px; color: var(--link, var(--blue)); background: var(--blue-bg, var(--hover)); border-radius: var(--corner, 0) !important; vertical-align: 1px; }
.pos-tbl-card { margin-top: 16px; } .pos-tbl-area { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-soft, var(--line)); } .pos-tbl-area:first-child { padding-top: 0; } .pos-tbl-area > span { padding-top: 7px; }
.pos-tbl-list { display: flex; flex-wrap: wrap; gap: 8px; } .pos-tbl { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--corner, 0) !important; cursor: pointer; } .pos-tbl:hover:not(:disabled) { border-color: var(--blue); } .pos-tbl:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .pos-tbl:disabled { cursor: default; }
@media (max-width: 600px) { .pos-tbl-area { grid-template-columns: 1fr; gap: 4px; } .pos-tbl-area > span { padding-top: 0; } }
.pos-reg-type { display: inline-flex; align-items: center; gap: 6px; } .pos-reg-type .ms { color: var(--slate); } .pos-registers { margin-top: 16px; } /* Point of sale setup: the registers' list */
.pdoc-sign.pdoc-sign-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6mm; margin-top: 16mm; } .pdoc-sign-4 > div { border-top: 1px solid var(--pink); padding-top: 4px; font-size: 8pt; color: var(--pmuted); position: relative; } .pdoc-sign-name { position: absolute; left: 0; bottom: calc(100% + 2px); font-size: 8.5pt; color: var(--pink); white-space: nowrap; } /* a payment voucher's four lines to sign, a name over the line where it is known */
.pdoc-x { border-radius: var(--hz-r, 0) !important; } .pdoc-text { white-space: normal; overflow-wrap: anywhere; } .pdoc-spacer { width: 100%; } .pdoc-img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; } .pdoc-img-ph { display: inline-grid; place-items: center; max-width: 100%; height: 18mm; border: 1px dashed var(--phair); font-size: 8pt; color: var(--pmuted); } .pdoc-field-l { margin-right: 2mm; color: var(--pmuted); } .pdoc-rule { width: 100%; border-top: 1px solid var(--phair); margin: 2mm 0; } /* blocks of a template built of blocks: one with a style of its own, words, a space, a rule */
.pdoc-el { max-width: 100%; border-radius: var(--hz-r, 0) !important; } /* a header element with a box of its own */
/* The title's own typeface and size, and the logo's own width, where a template sets them apart from the header's size
   and the document's typeface (these come after those rules, and win). */
/* (said with the header in the way, so it is stronger than the document's typeface, which is set on everything in it:
   without that a title asked to be Arial stayed Georgia in a Georgia document) */
.pdoc.pdoc-tf-inter .pdoc-head h1.pdoc-type { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.pdoc.pdoc-tf-serif .pdoc-head h1.pdoc-type { font-family: Georgia, "Times New Roman", Times, serif; }
.pdoc.pdoc-tf-plain .pdoc-head h1.pdoc-type { font-family: Arial, Helvetica, sans-serif; }
.pdoc.pdoc-tt-small .pdoc-head h1.pdoc-type { font-size: 14pt; } .pdoc.pdoc-tt-large .pdoc-head h1.pdoc-type { font-size: 25pt; } .pdoc.pdoc-tt-xl .pdoc-head h1.pdoc-type { font-size: 32pt; }
.pdoc.pdoc-lw .pdoc-logo-img { width: var(--logo-w); max-width: 100%; height: auto; max-height: none; }
/* A header a template arranges itself: three zones side by side, each a column of the elements put in it, in order. */
.pdoc-head.pdoc-head-z { display: grid; grid-template-columns: repeat(var(--hcols, 2), minmax(0, 1fr)); column-gap: var(--hgap, 14px); align-items: start; }
.pdoc-head.pdoc-head-rows { display: block; } .pdoc-hrow { display: grid; grid-template-columns: repeat(var(--hcols, 2), minmax(0, 1fr)); column-gap: var(--hgap, 14px); align-items: start; border-radius: var(--hz-r, 0) !important; }
.pdoc-hz { display: flex; flex-direction: column; min-width: 0; border-radius: var(--hz-r, 0) !important; } /* (a column's own corners: the theme squares everything else) */
.pdoc-hz-l { align-items: flex-start; text-align: left; }
.pdoc-hz-c { align-items: center; text-align: center; }
.pdoc-hz-r { align-items: flex-end; text-align: right; }
.pdoc-hz-l .pdoc-kv { margin-left: 0; margin-right: auto; } .pdoc-hz-c .pdoc-kv { margin-left: auto; margin-right: auto; }
.pdoc-hz-c .pdoc-logo-img { margin-left: auto; margin-right: auto; object-position: center top; } .pdoc-hz-r .pdoc-logo-img { margin-left: auto; object-position: right top; }
.pdoc-h-name { font-size: 11pt; font-weight: 700; line-height: 1.3; color: var(--pink); margin-bottom: 2px; }
.pdoc-h-text { font-size: 8.5pt; line-height: 1.45; color: var(--pmuted); margin-bottom: 2px; }
.pdoc.pdoc-hl-fill .pdoc-head :is(.pdoc-h-name, .pdoc-h-text) { color: var(--pdoc-on, white); }
/* The header of the pages after the first, on a sheet (ui.paginate puts it there; on paper it is in the top margin):
   logo or name on the left, the document's name on the right, dressed plain, with a line, a soft fill, filled or boxed. */
.pdoc-head2[hidden] { display: none !important; }
.doc-page > .doc-page-head2 { position: absolute; height: 12mm; box-sizing: border-box; padding: 0 var(--h2-pr, 0mm) 0 var(--h2-pl, 0mm); display: flex; align-items: center; justify-content: space-between; gap: 6mm; font-size: 9pt; font-weight: 600; line-height: 1.2; color: var(--h2-on); }
.doc-page-head2 img { display: block; height: 7mm; width: auto; max-width: 45mm; object-fit: contain; object-position: left center; }
.doc-page-head2 .h2-name { font-size: 10.5pt; font-weight: 700; white-space: nowrap; }
.doc-page > .doc-page-head2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 4mm; } .doc-page-head2 > .h2-s { display: flex; align-items: center; min-width: 0; grid-row: 1; } .doc-page-head2 > .h2-s0 { grid-column: 1; justify-content: flex-start; } .doc-page-head2 > .h2-s1 { grid-column: 2; justify-content: center; } .doc-page-head2 > .h2-s2 { grid-column: 3; justify-content: flex-end; }
.doc-page-head2 .h2-text { color: var(--h2-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.doc-page-head2.is-rule { border-bottom: 2px solid var(--h2-accent); }
.doc-page-head2.is-tint { background: var(--h2-soft); }
.doc-page-head2.is-fill { background: var(--h2-accent); } .doc-page-head2.is-fill .h2-text { color: var(--h2-on); }
.doc-page-head2.is-boxed { border: 1px solid var(--h2-hair); }
/* the address boxes (and the payment box, which follows them): no box, or a soft fill */
.pdoc.pdoc-bx-plain :is(.pdoc-party, .pdoc-pay) { border: 0; padding: 0; }
.pdoc.pdoc-bx-fill :is(.pdoc-party, .pdoc-pay), .pdoc.pdoc-has-bg.pdoc-bx-fill :is(.pdoc-party, .pdoc-pay) { border: 0; border-radius: 6px; background: var(--pdoc-soft); }
/* the items table: a filled heading row, striped rows, or a full grid */
.pdoc:is(.pdoc-tb-filled, .pdoc-tb-striped, .pdoc-tb-grid) .pdoc-body > .ptbl :is(th, td):first-child { padding-left: 7px; }
.pdoc:is(.pdoc-tb-filled, .pdoc-tb-striped, .pdoc-tb-grid) .pdoc-body > .ptbl :is(th, td):last-child { padding-right: 7px; }
.pdoc.pdoc-tb-filled .pdoc-body > .ptbl th { background: var(--pdoc-accent, var(--navy)); color: var(--pdoc-on, white); border-bottom-color: var(--pdoc-accent, var(--navy)); }
.pdoc.pdoc-tb-striped .pdoc-body > .ptbl tbody tr:nth-child(even) td { background: var(--pdoc-soft); }
.pdoc.pdoc-tb-striped .pdoc-body > .ptbl td { border-bottom-color: transparent; }
.pdoc.pdoc-tb-grid .pdoc-body > .ptbl :is(th, td) { border: 1px solid var(--phair); }
.pdoc.pdoc-tb-grid .pdoc-body > .ptbl th { background: var(--pdoc-soft); }
/* A section's text size, when a template sets it apart from the usual (small or large). */
.pdoc.pdoc-z-kv-small .pdoc-kv { font-size: 7.5pt; } .pdoc.pdoc-z-kv-large .pdoc-kv { font-size: 9.5pt; }
.pdoc.pdoc-z-box-small .pdoc-party { font-size: 8pt; } .pdoc.pdoc-z-box-large .pdoc-party { font-size: 10pt; }
.pdoc.pdoc-z-tbl-small .pdoc-body > .ptbl { font-size: 8pt; } .pdoc.pdoc-z-tbl-small .pdoc-body > .ptbl th { font-size: 6.5pt; } .pdoc.pdoc-z-tbl-small .pdoc-line-desc { font-size: 7pt; }
.pdoc.pdoc-z-tbl-large .pdoc-body > .ptbl { font-size: 10pt; } .pdoc.pdoc-z-tbl-large .pdoc-body > .ptbl th { font-size: 7.5pt; } .pdoc.pdoc-z-tbl-large .pdoc-line-desc { font-size: 9pt; }
.pdoc.pdoc-z-tot-small .pdoc-totals { font-size: 8.5pt; } .pdoc.pdoc-z-tot-small .pdoc-totals :is(.grand, .due) { font-size: 10pt; }
.pdoc.pdoc-z-tot-large .pdoc-totals { font-size: 10.5pt; } .pdoc.pdoc-z-tot-large .pdoc-totals :is(.grand, .due) { font-size: 12pt; }
.pdoc.pdoc-z-note-small :is(.pdoc-note, .pdoc-pay, .pdoc-paykv, .pdoc-after .ptbl-compact td) { font-size: 7.5pt; }
.pdoc.pdoc-z-note-large :is(.pdoc-note, .pdoc-pay, .pdoc-paykv, .pdoc-after .ptbl-compact td) { font-size: 9.5pt; }
.pdoc.pdoc-z-tc-small .pdoc-tc { font-size: 7pt; } .pdoc.pdoc-z-tc-large .pdoc-tc { font-size: 9pt; }
/* The watermark: large faint words across the page, behind nothing and in front of nothing that matters. On paper it is
   on every page; on screen a document cut into sheets gets one a sheet (ui.paginate), and the one in the document hides. */
.pdoc-wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; z-index: 2; color: var(--pink); }
.pdoc-wm > span { transform: rotate(-32deg); font-size: 64pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: .07; }
.pdoc.pdoc-small .pdoc-wm > span { font-size: 44pt; }
.doc-window .pdoc-wm { display: none; }
@media print { body.print-mode #print-root > .pdoc > .pdoc-wm { position: fixed; } }
/* The total in words sits in the empty half to the left of the totals, its foot level with the balance. */
.pdoc-sum { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 12px; break-inside: avoid; }
.pdoc-sum > div:last-child { flex: none; width: calc(50% - 10px); min-width: 250px; }
.pdoc-sum .pdoc-totals { width: 100%; min-width: 0; margin: 0; }
.pdoc-words { flex: 1 1 0; min-width: 0; margin: 0 0 7px; font-size: 8.5pt; line-height: 1.45; color: var(--pink); }
.pdoc-words > .pdoc-label { display: block; margin-bottom: 2px; }
.pdoc.pdoc-z-tot-small .pdoc-words { font-size: 7.5pt; } .pdoc.pdoc-z-tot-large .pdoc-words { font-size: 9.5pt; }
.pdoc.pdoc-small .pdoc-sum > div:last-child { width: 62%; min-width: 0; } /* a small sheet: the totals take more of the row, and never run off it */
/* The payment QR code is under the payment instructions, in their box, always black on white so a phone reads it. */
.pdoc-qr { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; font-size: 7pt; color: var(--pmuted); line-height: 1.35; }
.pdoc-qr > svg { width: 25mm; height: 25mm; display: block; flex: none; }
.pdoc-qr > span { max-width: 26mm; }
/* The designs to start a template from: a row of small sheets, each drawn in its own colours. */
.tpl-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.tpl-design { display: grid; gap: 6px; justify-items: center; padding: 8px 6px; border: 1px solid var(--line); border-radius: var(--corner, 8px); background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.tpl-design:hover { border-color: var(--hover-line, var(--line)); background: var(--hover); }
.tpl-design:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tpl-design.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.tpl-mini { width: 48px; height: 62px; padding: 5px; display: grid; align-content: start; gap: 3px; border: 1px solid var(--line); background: var(--p); overflow: hidden; }
.tpl-mini i { display: block; height: 2px; background: var(--l); }
.tpl-mini i.h { height: 5px; width: 55%; background: var(--a); }
.tpl-mini.hl-fill i.h, .tpl-mini.hl-tint i.h { width: auto; height: 12px; margin: -5px -5px 2px; }
.tpl-mini.hl-tint i.h { background: color-mix(in srgb, var(--a) 22%, var(--p)); }
.tpl-mini.hl-rule i.h { width: auto; height: 2px; margin-top: 6px; }
.tpl-mini.hs-centred i.h { margin-left: auto; margin-right: auto; }
.tpl-mini.hs-reversed i.h { margin-left: auto; }
.tpl-mini i.t { height: 3px; background: var(--t); width: 70%; }
.tpl-mini.tb-filled i.th { height: 4px; background: var(--a); }
/* A template's settings as a menu, the way a phone's settings are: a list of rows (icon, name, what is set now, a
   chevron), each opening its own page with a way back. A page is sections: a small heading over a card. */
.tpl-nav { display: block; }
.tpl-menu[hidden], .tpl-page[hidden] { display: none !important; } /* one of them shows at a time */
.tpl-menu { display: grid; overflow: hidden; }
.tpl-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px 8px 14px; border: 0; border-bottom: 1px solid var(--line-soft, var(--line)); border-radius: 0 !important; background: none; font: inherit; font-size: 14px; font-weight: 400; color: var(--ink); text-align: left; cursor: pointer; }
.tpl-row:last-child { border-bottom: 0; }
.tpl-row:hover { background: var(--hover); }
.tpl-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tpl-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--blue-bg); color: var(--link); }
/* (all four corners take the theme's; said this firmly because a card rounds only the top of whatever comes first in it, which left the first row's icon round on top and square below, and the rest square) */
.tpl-menu .tpl-row > span.tpl-ico { border-radius: min(var(--corner, 0px), 8px) !important; }
.tpl-ico .ms { font-size: 19px; }
.tpl-row-name { flex: none; color: var(--head); }
.tpl-row-sum { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--slate); text-align: right; }
.tpl-row > .ms:last-child { flex: none; font-size: 20px; color: var(--slate); }
.tpl-dot { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line); }
.tpl-page { display: grid; gap: 14px; }
/* On a page the title at the top is a path: the template's name, an arrow, the page's name; a back arrow sits to its
   left. The title's line is as tall as that arrow at all times, so nothing below moves when it comes and goes. */
.page-head h1.tpl-h1 { display: flex; align-items: center; flex-wrap: wrap; min-height: 36px; transition: color .22s ease; }
.page-head > div:has(> h1.tpl-h1) { flex: 1 1 auto; min-width: 0; } /* the title's line is as wide as the pane, so the star can sit at its right end */
.tpl-star { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; color: var(--yellow); } .tpl-star .ms { font-size: 24px; font-variation-settings: "FILL" 1; }
.page-head h1.tpl-h1-deep { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; } /* the path stays on one line, so the line keeps its height */
.page-head h1.tpl-h1-deep > .tpl-h1-crumb.is-here { flex: 0 1 auto; min-width: 0; } .page-head h1.tpl-h1-deep > .tpl-h1-crumb.is-here > span { overflow: hidden; text-overflow: ellipsis; }
.page-head h1.tpl-h1-in { color: var(--slate); }
.tpl-h1-back { flex: none; margin: 0 8px 0 0; } /* (the app's own icon button: its border, corners and colours are the theme's) */
.tpl-h1-back .ms { font-size: 20px; }
.tpl-h1-crumb { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--head); }
.tpl-h1-crumb > .ms { font-size: 24px; color: var(--slate); max-width: 24px; overflow: hidden; transition: max-width .22s ease, opacity .22s ease, margin .22s ease; }
.tpl-h1-root { flex: none; } .tpl-h1-root[hidden] { display: none; }
/* two steps in, the template's name has closed: the step that now leads has no arrow before it, and sits where the name sat */
.tpl-h1-noroot > .tpl-h1-crumb:not(.is-here):not(.is-leaving) { margin-left: 0; transition: margin .22s ease; } .tpl-h1-noroot > .tpl-h1-crumb:not(.is-here):not(.is-leaving) > .ms { max-width: 0; opacity: 0; margin-right: -6px; }
@media (prefers-reduced-motion: reduce) { .tpl-h1-crumb > .ms, .tpl-h1-noroot > .tpl-h1-crumb { transition: none; } }
.tpl-h1-crumb:not(.is-here) { color: var(--slate); } /* a step on the way: grey, and a link back to it */
.tpl-h1-step { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.tpl-h1-step:hover { color: var(--link); } .tpl-h1-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .page-head h1.tpl-h1 { transition: none; } }
.tpl-group { display: grid; gap: 6px; }
.tpl-group > h2 { margin: 0 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.tpl-page > .tpl-group:only-of-type > h2 { display: none; } /* a page with one section needs no second heading */
/* The header's elements, as a list to arrange: drag a row (or use its arrows), choose its side, switch it off, take it out. */
.tpl-els { display: grid; border: 1px solid var(--line); border-radius: var(--corner, 0); overflow: hidden; background: var(--surface); }
.tpl-el { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 8px 5px 6px; border-bottom: 1px solid var(--line-soft, var(--line)); background: var(--surface); }
.tpl-el:last-child { border-bottom: 0; }
.tpl-el.is-off .tpl-el-name { color: var(--slate); }
.tpl-el.is-drag { opacity: .45; } .tpl-el.is-over { box-shadow: inset 0 2px 0 var(--blue); }
.tpl-el-grip { flex: none; display: grid; place-items: center; width: 22px; color: var(--slate); cursor: grab; } .tpl-el-grip .ms { font-size: 18px; }
.tpl-el-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 2px; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.tpl-el-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tpl-el:hover { background: var(--hover); }
.tpl-el-name { flex: none; font-size: 14px; color: var(--head); white-space: nowrap; }
.tpl-el-sum { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--slate); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-el-text { flex: 1 1 120px; min-width: 0; }
.tpl-el .tpl-seg { flex: none; } .tpl-el .tpl-seg button { min-width: 28px; padding: 4px 8px; }
.tpl-el-btn { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--corner, 0); background: none; color: var(--slate); cursor: pointer; }
.tpl-el-btn:hover:not([disabled]) { background: var(--hover); color: var(--ink); } .tpl-el-btn[disabled] { opacity: .3; cursor: default; }
.tpl-el-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .tpl-el-btn .ms { font-size: 18px; }
.tpl-cols { display: grid; gap: 10px; }
.tpl-col { border: 1px solid var(--line); border-radius: var(--corner, 0); background: var(--surface); overflow: hidden; } /* (tinted further down) */
/* a column's heading is a tinted bar with a column mark, and its layers sit indented under it, so the two read apart */
.tpl-col-head { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 8px 4px 12px; background: color-mix(in srgb, var(--blue) 9%, var(--surface)); }
.tpl-col-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border-radius: min(var(--corner, 0px), 6px) !important; background: var(--blue); color: white; } .tpl-col-mark .ms { font-size: 16px; }
.tpl-col .tpl-el { padding-left: 18px; } .tpl-col .tpl-col-empty { margin-top: 8px; }
.tpl-col { border-color: color-mix(in srgb, var(--blue) 28%, var(--line)); } .tpl-col .tpl-els { border-top-color: color-mix(in srgb, var(--blue) 28%, var(--line)); }
.tpl-col-name { flex: none; font-size: 13px; font-weight: 600; color: var(--head); }
.tpl-col-sum { flex: 1 1 auto; margin-left: 6px; font-size: 13px; color: var(--slate); }
.tpl-col .tpl-els { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.tpl-col-empty { min-height: 44px; margin: 0 8px 8px; display: grid; place-items: center; font-size: 13px; color: var(--slate); border: 1px dashed var(--line); border-radius: var(--corner, 0); }
.tpl-col.is-over { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.tpl-col.is-drag { opacity: .45; }
.tpl-col-empty[hidden] { display: none; }
.tpl-el.is-drag { background: var(--hover); box-shadow: inset 0 0 0 1px var(--blue); opacity: .6; }
.tpl-col-head[draggable="true"] { cursor: grab; } .tpl-col-head .tpl-el-grip { margin-left: -6px; }
/* the theme squares every corner unless a rule says otherwise: these follow its corner setting */
.tpl-els, .tpl-col, .tpl-col-empty, .tpl-el-btn { border-radius: var(--corner, 0) !important; } .tpl-col .tpl-els { border-radius: 0 !important; }
.tpl-seg [data-col-align] { display: inline-flex; align-items: center; gap: 6px; } .tpl-seg [data-col-align] .ms { font-size: 17px; }
.tpl-col-add { margin-top: 8px; }
/* the body's rows: a row's columns side by side, each a cell of block chips */
.tpl-rcells { display: grid; grid-template-columns: repeat(var(--rc, 1), minmax(0, 1fr)); gap: 8px; padding: 8px; border-top: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)); }
.tpl-rcell { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 4px; border: 1px dashed var(--line); border-radius: var(--corner, 0) !important; }
.tpl-rcell-head { display: flex; align-items: center; gap: 2px; min-height: 28px; } .tpl-rcell-n { flex: 1 1 auto; padding-left: 6px; font-size: 12.5px; color: var(--slate); } .tpl-rcell-list { display: grid; gap: 6px; min-height: 36px; }
.tpl-blk.is-off .tpl-blk-open { color: var(--slate); } .tpl-blk > .tpl-el-btn { width: 26px; height: 26px; }
.tpl-blk { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--corner, 0) !important; background: var(--surface); cursor: grab; } .tpl-blk:hover { background: var(--hover); } .tpl-blk.is-drag { opacity: .6; box-shadow: inset 0 0 0 1px var(--blue); } .tpl-rowbox.is-drag { opacity: .45; }
.tpl-blk-open { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 400; color: var(--ink); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .tpl-blk-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } span.tpl-blk-open { cursor: inherit; }
.tpl-nav .tpl-el .tpl-band-words { flex: 1 1 auto; min-width: 0; height: 32px !important; min-height: 0 !important; font-size: 13.5px; font-weight: 400; } .tpl-col[data-band-col] .tpl-el { padding-left: 12px; } .tpl-col[data-band-col] > .tpl-layer-add { border-top: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)); padding-left: 12px; }
button.tpl-lay-pick { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; font: inherit; text-align: left; }
.tpl-insp-l .ms { font-size: 18px; color: var(--slate); vertical-align: middle; }
/* the header's columns, and a band's three places, in the body builder's look: column boxes side by side, their layers as chips */
.tpl-hcells { display: grid; grid-template-columns: repeat(var(--rc, 2), minmax(0, 1fr)); gap: 8px; align-items: start; }
.tpl-hcells > .tpl-col > .tpl-col-head { min-height: 34px; padding: 2px 4px 2px 8px; gap: 2px; } .tpl-hcells > .tpl-col > .tpl-col-head .tpl-col-name { flex: 1 1 auto; min-width: 0; font-weight: 400; color: var(--slate); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tpl-hcells .tpl-col-head .tpl-el-grip { margin-left: -4px; width: 18px; }
.tpl-hcells > .tpl-col > .tpl-els { display: grid; gap: 6px; padding: 6px; border-top: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)); }
.tpl-hcells .tpl-el.tpl-chip { min-height: 36px; padding: 4px 4px 4px 8px; gap: 6px; border: 1px solid var(--line); border-radius: var(--corner, 0) !important; cursor: grab; } .tpl-hcells .tpl-chip .tpl-el-open { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 0; overflow: hidden; } .tpl-hcells .tpl-chip .tpl-el-name { flex: 1 1 auto; min-width: 0; } span.tpl-el-open { cursor: inherit; } .tpl-hcells .tpl-chip .tpl-el-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; } .tpl-hcells .tpl-chip > .tpl-el-btn { width: 24px; height: 24px; } .tpl-hcells .tpl-chip > .tpl-el-btn .ms { font-size: 16px; }
.tpl-hcells[style*="--rc:4"] .tpl-chip > .tpl-lay-ico, .tpl-hcells[style*="--rc:3"] .tpl-chip > .tpl-lay-ico { display: none; } /* (three or four columns are narrow: the name has the room) */
.tpl-hcells > .tpl-col > .tpl-col-empty { min-height: 36px; margin: 6px; border: 1px dashed var(--line); } .tpl-hcells .tpl-band-words { padding: 0 6px !important; }
/* The editor (a template's page), three fixed parts: a toolbar that is always at the top (tools and actions only), the
   sheet as a canvas, and the form's pane as a side panel that is always open at the right (Template, Layers, Selected). */
@media (min-width: 1101px) {
  .sales-view.tpl-canvas > .page-head, .sales-view.tpl-canvas .crumbs, .tpl-canvas .rec-stick > .page-head { display: none !important; }
  .sales-view.tpl-canvas > .sales-split.rec-doc.is-rev { grid-template-columns: minmax(0, 1fr); position: relative; }
  .sales-view.tpl-canvas > .rec-doc.is-rev > .stack:not(.rec-stick) { padding-top: 0; }
  .tpl-canvas .rec-doc.is-rev .tpl-acts { position: sticky; top: 0; z-index: 5; margin: 0 -8px; padding: 10px 8px; gap: 6px; flex-wrap: nowrap; align-items: center; background: var(--canvas); border-bottom: 1px solid var(--line); }
  .sales-view.tpl-canvas > .rec-doc.is-rev > .rec-stick { position: absolute !important; left: auto !important; right: 0 !important; top: var(--pop-t, 56px) !important; bottom: 0; width: 348px !important; max-height: none !important; z-index: 4; margin: 0; padding: 0 12px 20px; border: 0; border-left: 1px solid var(--line); border-radius: 0 !important; background: var(--surface); overflow-y: auto; } /* the side panel: docked at the right, under the toolbar, as tall as the page, always open */
  .tpl-left { position: absolute; left: 0; top: var(--pop-t, 56px); bottom: 0; width: 256px; z-index: 4; padding: 0 10px 20px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); } .tpl-canvas.has-left .docs-preview { padding-left: 264px; } /* the left panel: what can be added, and the layers; shut from the toolbar to give the sheet the room */
  .tpl-canvas.has-panel .docs-preview { padding-right: 356px; } /* (the sheet moves aside for it) */
  .sales-view.tpl-canvas > .rec-doc.is-rev > .rec-stick:not(.is-pop) { display: none; }
  .tpl-canvas .rec-stick .tpl-group[data-sec="Rows"], .tpl-canvas .rec-stick .tpl-struct, .tpl-canvas .rec-stick .tpl-insp-row[data-grp="place"], .tpl-canvas .rec-stick [data-tpl-menu] { display: none !important; } /* (rows are arranged on the sheet, and moving, adding and removing are the toolbar's: their controls stay in the form, unseen, as what the toolbar presses) */
  .tpl-canvas .rec-stick .tpl-group > .card { border: 0; background: none; box-shadow: none; } .tpl-canvas .rec-stick .tpl-group > .card > .card-body { padding: 0; } .tpl-canvas .rec-stick .tpl-group > h2 { margin-top: 2px; }
  .tpl-canvas .tpl-insp > .tpl-insp-row.tpl-insp-sp { grid-column: 1 / -1 !important; border-left: 0 !important; }
  .tpl-canvas .docs-preview { padding-top: 16px; }
  .tpl-canvas .tpl-bar-right .btn:not(.btn-primary) { width: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; } .tpl-canvas .tpl-bar-right .btn:not(.btn-primary) .ms { font-size: 19px; margin: 0; } /* (Duplicate, Print preview and the rest: icons, so the tools have the room) */
}
/* the toolbar: quiet buttons (an icon, a word), the pick's path, and the page's own buttons at its right end */
.tpl-ctx { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .tpl-ctx::-webkit-scrollbar { display: none; } .tpl-bar-right { display: inline-flex; gap: 8px; flex: none; margin-left: auto; } .tpl-bar-right .tpl-acts-end { margin-left: 0; }
.tpl-tb { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 34px; padding: 0 7px; border: 0; border-radius: var(--corner, 0) !important; background: none; font: inherit; font-size: 13.5px; font-weight: 400; color: var(--ink); white-space: nowrap; cursor: pointer; } .tpl-tb.is-icon { width: 34px; padding: 0; justify-content: center; } .tpl-tb .ms { font-size: 19px; color: var(--slate); }
.tpl-tb:hover:not([disabled]) { background: var(--hover); } .tpl-tb.is-on { background: var(--blue-bg, var(--hover)); color: var(--link, var(--blue)); } .tpl-tb.is-on .ms { color: inherit; } .tpl-tb[disabled] { opacity: .35; cursor: default; } .tpl-tb:focus-visible, .tpl-tb-step:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tpl-tb-sep { flex: none; width: 1px; height: 20px; margin: 0 6px; background: var(--line); } .tpl-tb-seg { display: inline-flex; flex: none; margin-right: 4px; }
.tpl-tb-name { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 4px; font-size: 15px; font-weight: 600; color: var(--head); white-space: nowrap; } .tpl-tb-star { display: inline-grid; color: var(--yellow); } .tpl-tb-star .ms { font-size: 18px; font-variation-settings: "FILL" 1; }
.tpl-tb-where { display: inline-flex; align-items: center; flex: none; } .tpl-tb-where > .ms { font-size: 16px; color: var(--slate); }
.tpl-tb-step { flex: none; height: 30px; padding: 0 8px; border: 0; border-radius: var(--corner, 0) !important; background: none; font: inherit; font-size: 13.5px; font-weight: 400; color: var(--slate); white-space: nowrap; cursor: pointer; } .tpl-tb-step:hover { background: var(--hover); color: var(--ink); } .tpl-tb-step.is-on { font-weight: 600; color: var(--head); }
.tpl-struct { justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
/* the side panel's own parts: its top (the template's name, three tabs) stays as the panel scrolls; under it a tab's list (the
   template's settings, the layers) or the pick's path, then the form's page */
.tpl-off { display: none !important; }
/* the block editor's own parts: the left panel's tabs and its tiles of things to add; the right panel's controls for the picked row, column or block */
.tpl-left .tpl-pn-top { margin: 0 -10px 10px; padding: 0 10px; } .tpl-left .tpl-pn-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-pn-tabs.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpl-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 2px 4px; }
.tpl-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--corner, 0) !important; background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 400; line-height: 1.25; color: var(--ink); text-align: center; cursor: pointer; } .tpl-add .ms { font-size: 20px; color: var(--slate); } .tpl-add:hover:not([disabled]) { border-color: var(--blue); background: var(--hover); } .tpl-add[disabled] { opacity: .4; cursor: default; } .tpl-add:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tpl-pat { display: grid; gap: 3px; width: 54px; padding: 4px; border: 1px solid var(--line); background: var(--surface); } .tpl-pat > span { display: flex; gap: 3px; } .tpl-pat i { flex: 1 1 0; height: 8px; background: color-mix(in srgb, var(--slate) 30%, transparent); } .tpl-pat i.is-box { background: none; outline: 1px solid color-mix(in srgb, var(--blue) 70%, transparent); outline-offset: -1px; } .tpl-pat-tile { min-height: 74px; } /* a pattern's picture: its rows, each a line of its columns */
.tpl-bi { border: 1px solid var(--line); border-radius: var(--corner, 0) !important; } .tpl-bi-text { display: block; width: 100%; min-height: 120px; resize: vertical; } .tpl-bi-one { padding: 2px 0 10px; }
.tpl-fill { display: inline-flex; align-items: center; gap: 6px; } .tpl-fill input[type="color"] { width: 36px; height: 30px; padding: 2px; border: 1px solid var(--field-line, var(--line)); border-radius: var(--corner, 0) !important; background: var(--surface); cursor: pointer; } .tpl-fill.is-none input[type="color"] { opacity: .35; } .tpl-fill-none { min-width: 34px; font-size: 13px; color: var(--slate); text-align: center; }
.tpl-bi .tpl-tools button { font-size: 12.5px; } .tpl-bi select.input { width: 170px; min-width: 0; } .tpl-bi-pic { position: relative; overflow: hidden; } .tpl-bi-pic input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .tpl-bi-thumb { display: block; max-width: 100%; max-height: 110px; margin: 0 0 10px; border: 1px solid var(--line); } .tpl-mini.is-blank > i { visibility: hidden; } /* (the Blank design's picture: an empty page) */
.tpl-pn-top { position: sticky; top: 0; z-index: 2; margin: 0 -12px 10px; padding: 12px 12px 0; background: var(--surface); border-bottom: 1px solid var(--line); } .tpl-pn-top .tpl-tb-name { display: flex; padding: 0 2px 8px; }
.tpl-pn-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .tpl-pn-tab { height: 34px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0 !important; background: none; font: inherit; font-size: 13.5px; font-weight: 400; color: var(--slate); cursor: pointer; } .tpl-pn-tab:hover { color: var(--ink); } .tpl-pn-tab.is-on { font-weight: 600; color: var(--head); border-bottom-color: var(--blue); } .tpl-pn-tab:focus-visible, .tpl-pn-item:focus-visible, .tpl-ly:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tpl-pn-item, .tpl-ly { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 8px; border: 0; border-radius: var(--corner, 0) !important; background: none; font: inherit; font-size: 14px; font-weight: 400; color: var(--ink); text-align: left; cursor: pointer; } .tpl-pn-item:hover, .tpl-ly:hover { background: var(--hover); } .tpl-pn-item .ms, .tpl-ly .ms { flex: none; font-size: 19px; color: var(--slate); } .tpl-pn-item > span, .tpl-ly > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-ly { height: 30px; gap: 8px; font-size: 13.5px; } .tpl-ly .ms { font-size: 16px; } .tpl-ly { padding-left: 2px; gap: 6px; } .tpl-ly[data-d="1"] { padding-left: 20px; } .tpl-ly[data-d="2"] { padding-left: 38px; }
.tpl-ly-tw { flex: none; display: inline-grid; place-items: center; width: 20px; height: 24px; padding: 0; border: 0; border-radius: var(--corner, 0) !important; background: none; color: var(--slate); cursor: pointer; } .tpl-ly-tw .ms { font-size: 18px; color: inherit; } button.tpl-ly-tw:hover { background: var(--surface); color: var(--ink); } .tpl-ly-tw:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .tpl-pn-cap { display: flex; align-items: center; gap: 4px; padding-left: 2px; } .tpl-ly.is-on { background: var(--blue-bg, var(--hover)); color: var(--link, var(--blue)); } .tpl-ly.is-on .ms { color: inherit; } .tpl-ly.is-dim > span, .tpl-ly.is-dim > .ms { opacity: .45; } .tpl-ly { cursor: grab; user-select: none; -webkit-user-select: none; } .tpl-ly.is-drag { opacity: .4; } .tpl-ly.is-drop { box-shadow: inset 0 2px 0 var(--blue); background: var(--hover); }
.tpl-ly-eye { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: -4px; padding: 0; border: 0; border-radius: var(--corner, 0) !important; background: none; color: var(--slate); cursor: pointer; } .tpl-ly-eye .ms { font-size: 16px; color: inherit; } .tpl-ly-eye:hover { background: var(--surface); color: var(--ink); } .tpl-ly-eye:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tpl-pn-cap { padding: 10px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); } .tpl-pn-hint { margin: 0; padding: 18px 8px; font-size: 13.5px; color: var(--slate); }
.tpl-pn-path { display: flex; align-items: center; flex-wrap: wrap; padding-bottom: 8px; } .tpl-pn-path > .ms { font-size: 16px; color: var(--slate); } .tpl-pn-sub { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--head); }
/* guides: every row and column of the sheet outlined, each row tagged at its corner; the toolbar's Guides button shows and hides them, and they are never printed */
.tpl-canvas.has-guides [data-docprev] [data-sel*=".row-"] { outline: 1px dashed var(--blue); outline-offset: 2px; } .tpl-canvas.has-guides [data-docprev] [data-sel*=".col-"] { outline: 1px dotted color-mix(in srgb, var(--blue) 70%, transparent); outline-offset: -1px; background-color: color-mix(in srgb, var(--blue) 3%, transparent); }
.tpl-canvas.has-guides [data-docprev] div[data-sel*=".row-"] { position: relative; } .tpl-canvas.has-guides [data-docprev] div[data-sel*=".row-"]::before { content: attr(data-tag); position: absolute; left: -3px; top: -3px; z-index: 1; padding: 0 4px; font: 400 8px/1.6 var(--font, inherit); letter-spacing: 0; text-transform: none; white-space: nowrap; color: white; background: var(--blue); pointer-events: none; }
/* picking on the page: what the pointer is over is outlined faintly, what is picked firmly */
.tpl-canvas [data-docprev] :is([data-sel], [data-el]) { cursor: pointer; } .tpl-canvas [data-docprev] [data-el][draggable="true"] { cursor: grab; }
.tpl-canvas [data-docprev] [data-sel]:hover:not(:has([data-sel]:hover, [data-el]:hover)), .tpl-canvas [data-docprev] [data-el]:hover { outline: 1px dashed var(--blue); outline-offset: 1px; }
.tpl-canvas [data-docprev] .is-sel { outline: 1.5px solid var(--blue) !important; outline-offset: 1px; } .tpl-canvas [data-docprev] .is-sel-el { outline: 1.5px solid var(--blue) !important; outline-offset: 2px; background-color: color-mix(in srgb, var(--blue) 6%, transparent); } .tpl-canvas [data-docprev] .is-drop { outline: 2px dashed var(--blue) !important; outline-offset: 1px; }
.tpl-canvas [data-docprev] :is(.pdoc-rcol, .pdoc-hz).is-empty { min-height: 9mm; outline: 1px dashed var(--line); outline-offset: -1px; }
/* the inspector: a card of tool rows (a short name, a small control), in the theme's line, surface and corner */
.tpl-insp { display: grid; border: 1px solid var(--line); border-radius: var(--corner, 0) !important; background: var(--surface); overflow: hidden; } .tpl-insp + .tpl-insp, .tpl-insp + .field, .field + .tpl-insp, .tpl-opts + .tpl-insp { margin-top: 12px; }
.tpl-insp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 5px 8px 5px 14px; border-bottom: 1px solid var(--line-soft, var(--line)); } .tpl-insp-row:last-child { border-bottom: 0; } .tpl-insp-row[hidden] { display: none; }
.tpl-insp-l { flex: none; font-size: 13.5px; font-weight: 400; color: var(--ink); }
.tpl-tools button { display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 7px; } .tpl-tools button .ms { font-size: 18px; }
.tg-bd { display: block; width: 18px; height: 0; border-top: 2px solid currentColor; } .tg-bd-dashed { border-top-style: dashed; } .tg-bd-dotted { border-top-style: dotted; }
.tpl-step { display: inline-flex; align-items: center; border: 1px solid var(--field-line, var(--line)); border-radius: var(--corner, 0) !important; background: var(--surface); overflow: hidden; }
.tpl-step button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0 !important; background: none; color: var(--slate); cursor: pointer; } .tpl-step button .ms { font-size: 18px; } .tpl-step button:hover:not([disabled]) { background: var(--hover); color: var(--ink); } .tpl-step button[disabled] { opacity: .35; cursor: default; } .tpl-step button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tpl-nav .tpl-step input, .tpl-bi .tpl-step input { width: 52px !important; min-width: 0; height: 30px !important; min-height: 0 !important; padding: 0 2px !important; border: 0 !important; border-left: 1px solid var(--line-soft, var(--line)) !important; border-right: 1px solid var(--line-soft, var(--line)) !important; border-radius: 0 !important; background: none; font-size: 13.5px; font-weight: 400; text-align: center; -moz-appearance: textfield; appearance: textfield; box-shadow: none; }
.tpl-step input::-webkit-outer-spin-button, .tpl-step input::-webkit-inner-spin-button, .tpl-pad4 input::-webkit-outer-spin-button, .tpl-pad4 input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* the four sides of a thing, drawn: a small box with a number above, below, left and right of it */
.tpl-pad4 { display: grid; grid-template-columns: auto 52px auto; grid-template-rows: auto 72px auto; gap: 5px; align-items: center; justify-items: center; border-radius: var(--corner, 0) !important; }
.tpl-pad4 .sd-t { grid-area: 1 / 1 / 2 / 4; } .tpl-pad4 .sd-r { grid-area: 2 / 3; } .tpl-pad4 .sd-b { grid-area: 3 / 1 / 4 / 4; } .tpl-pad4 .sd-l { grid-area: 2 / 1; }
.tpl-pad4-c { grid-area: 2 / 2; width: 100%; height: 100%; border-radius: min(var(--corner, 0px), 4px) !important; }
/* Margin is the space outside a thing: the thing is the box in the middle and the numbers stand around it.
   Padding is the space inside: the thing is the frame and the numbers stand within it, around its contents. */
.is-m .tpl-pad4-c { border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line)); background: color-mix(in srgb, var(--blue) 12%, var(--surface)); }
.is-p .tpl-pad4 { padding: 6px; border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line)); background: color-mix(in srgb, var(--blue) 12%, var(--surface)); } .is-p .tpl-pad4-c { display: none; }
/* a side's number is a small stepper, as Width and Radius are; the left and right ones stand upright (plus above, minus below) */
.tpl-step-s button { width: 22px; height: 26px; } .tpl-step-s button .ms { font-size: 15px; } .tpl-nav .tpl-step.tpl-step-s input { width: 34px !important; height: 26px !important; font-size: 13px; }
.tpl-step-s:is(.sd-l, .sd-r) { flex-direction: column-reverse; } .tpl-step-s:is(.sd-l, .sd-r) button { width: 36px; height: 22px; }
.tpl-nav .tpl-step.tpl-step-s:is(.sd-l, .sd-r) input { width: 36px !important; height: 24px !important; border-left: 0 !important; border-right: 0 !important; border-top: 1px solid var(--line-soft, var(--line)) !important; border-bottom: 1px solid var(--line-soft, var(--line)) !important; }
/* a spacing row: its name over its drawing; Margin and Padding sit side by side at the foot of the card when a thing has both */
.tpl-insp:has(.tpl-insp-sp) { grid-template-columns: 1fr 1fr; } .tpl-insp:has(.tpl-insp-sp) > .tpl-insp-row { grid-column: 1 / -1; } .tpl-insp > .tpl-insp-row.tpl-insp-sp { order: 9; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 12px 8px 14px; border-bottom: 0; }
.tpl-insp:has(.tpl-insp-sp ~ .tpl-insp-sp) > .tpl-insp-sp { grid-column: auto; } .tpl-insp > .tpl-insp-sp ~ .tpl-insp-sp { border-left: 1px solid var(--line-soft, var(--line)); }
.tpl-insp:has(.tpl-insp-sp) > .tpl-insp-row:not(.tpl-insp-sp) { border-bottom: 1px solid var(--line-soft, var(--line)); }
.tpl-rcell-head[draggable="true"] { cursor: grab; } .tpl-rcell-head .tpl-el-grip { width: 18px; } .tpl-rcell.is-drag { opacity: .5; }
.tpl-layer-add { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 6px 12px 6px 18px; border: 0; border-top: 1px solid var(--line-soft, var(--line)); border-radius: 0 !important; background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 400; color: var(--link, var(--blue)); text-align: left; cursor: pointer; }
.tpl-layer-add .ms { font-size: 18px; } .tpl-layer-add:hover { background: var(--hover); } .tpl-layer-add:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tpl-col-empty + .tpl-layer-add { border-top: 0; }
.tpl-lay-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: min(var(--corner, 0px), 6px) !important; background: var(--blue-bg, var(--hover)); color: var(--blue); } .tpl-lay-ico .ms { font-size: 16px; }
.tpl-lay-row .tpl-lay-name { flex: 1 1 auto; min-width: 0; } .tpl-lay-row input { flex: none; width: 16px; height: 16px; accent-color: var(--blue); }
/* A choice among a few looks: a row of picture buttons, each a small drawing of the result with its name under it. */
.tpl-nav .form-grid:has(.tpl-opts) { grid-template-columns: minmax(0, 1fr); }
.tpl-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-opt { display: grid; justify-items: center; align-content: start; gap: 5px; width: 84px; padding: 7px 4px 6px; border: 1px solid var(--line); border-radius: var(--corner, 8px); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 400; line-height: 1.25; color: var(--slate); text-align: center; cursor: pointer; }
.tpl-opt:hover:not([disabled]) { border-color: var(--hover-line, var(--line)); background: var(--hover); color: var(--ink); }
.tpl-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tpl-opt.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); color: var(--ink); }
.tpl-opt[disabled] { opacity: .55; cursor: default; }
.tpl-seg { width: fit-content; justify-self: start; align-self: start; } /* as wide as its three buttons, not the whole field */
.tpl-seg button { min-width: 40px; }
/* corners follow the theme (--corner), as buttons and cards do; the small drawings take at most a slight rounding */
.tpl-opt, .tpl-design { border-radius: var(--corner, 0) !important; }
.tg, .tpl-mini { border-radius: min(var(--corner, 0px), 4px) !important; }
/* the drawings: a 44 by 30 sheet, the accent in --ta, text and lines in --tl */
.tg { --ta: var(--blue); --tl: color-mix(in srgb, var(--slate) 55%, transparent); position: relative; display: block; width: 44px; height: 30px; border-radius: 4px; background: var(--surface-2); overflow: hidden; font-style: normal; }
.tg::before, .tg::after { content: ""; position: absolute; }
.tg-txt { display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink); }
.tg-txt.tg-slant { font-size: 10px; letter-spacing: .06em; color: var(--tl); } .tg-txt.tg-slant::before { content: none; }
/* (the logo drawings don't turn with the colour mode: the light-mode logo is a dark mark on white paper, the dark-mode one a white mark on dark) */
.tg-logo { --mark: color-mix(in srgb, black 82%, white); background: white; border: 1px solid var(--line); }
.tg-logo::before { left: 14px; top: 7px; width: 14px; height: 14px; border-radius: 3px; background: var(--mark); }
.tg-logo.is-dark { background: var(--mark); } .tg-logo.is-dark::before { background: white; }
/* header layout: the logo (a block) and the title (two lines) */
.tg-hs-std::before, .tg-hs-rev::before, .tg-hs-mid::before { width: 10px; height: 10px; border-radius: 2px; background: var(--ta); }
.tg-hs-std::after, .tg-hs-rev::after, .tg-hs-mid::after { width: 14px; height: 2px; background: var(--tl); box-shadow: 0 5px 0 var(--tl); }
.tg-hs-std::before { left: 6px; top: 10px; } .tg-hs-std::after { right: 6px; top: 11px; }
.tg-hs-rev::before { right: 6px; top: 10px; } .tg-hs-rev::after { left: 6px; top: 11px; }
.tg-hs-mid::before { left: 17px; top: 5px; } .tg-hs-mid::after { left: 15px; top: 19px; }
/* footer layout: its line of words, left, centred or right */
.tg-fs-std::before, .tg-fs-mid::before, .tg-fs-end::before { bottom: 8px; width: 18px; height: 2px; background: var(--tl); }
.tg-fs-std::before { left: 6px; } .tg-fs-mid::before { left: 13px; } .tg-fs-end::before { right: 6px; }
.tg-fs-std::after, .tg-fs-mid::after, .tg-fs-end::after { left: 6px; right: 6px; bottom: 14px; height: 1px; background: var(--tl); opacity: .6; }
/* looks: words alone, a line under, a line over, an accent line over, a soft fill, filled, boxed */
.tg-plain::before, .tg-rule::before, .tg-over::before, .tg-accent::before { left: 12px; top: 14px; width: 20px; height: 2px; background: var(--tl); }
.tg-rule::after { left: 6px; right: 6px; top: 21px; height: 2px; background: var(--ta); }
.tg-over::after { left: 6px; right: 6px; top: 8px; height: 1px; background: var(--tl); }
.tg-accent::after { left: 6px; right: 6px; top: 7px; height: 2px; background: var(--ta); }
.tg-tint::before, .tg-fill::before, .tg-boxed::before { inset: 7px 6px; border-radius: 3px; }
.tg-tint::before { background: color-mix(in srgb, var(--ta) 24%, transparent); } .tg-fill::before { background: var(--ta); } .tg-boxed::before { border: 1.5px solid var(--tl); }
.tg-tint::after, .tg-fill::after, .tg-boxed::after { left: 13px; top: 14px; width: 18px; height: 2px; background: var(--tl); } .tg-fill::after { background: white; }
/* no header at all on the following pages */
.tg-none::before { left: 14px; right: 14px; top: 14px; height: 2px; background: var(--tl); transform: rotate(-30deg); }
/* orientation: the sheet upright, or on its side */
/* (each sheet is centred in its drawing by the box itself, its border counted in its size: placed by hand they sat a pixel or two off) */
.tg-o-port::before, .tg-o-land::before { inset: 0; margin: auto; box-sizing: border-box; border: 1.5px solid var(--tl); border-radius: 2px; background: var(--surface); }
.tg-o-port::before { width: 14px; height: 20px; }
.tg-o-land::before { width: 20px; height: 14px; }
/* the items table: lines between rows, a filled heading row, striped rows, a full grid */
.tg-rows::before, .tg-thead::before { left: 6px; right: 6px; top: 9px; height: 1px; background: var(--tl); box-shadow: 0 6px 0 var(--tl), 0 12px 0 var(--tl); }
.tg-thead::after { left: 6px; right: 6px; top: 5px; height: 5px; background: var(--ta); }
.tg-thead::before { top: 15px; box-shadow: 0 6px 0 var(--tl); }
.tg-stripes::before { left: 6px; right: 6px; top: 6px; height: 4px; background: color-mix(in srgb, var(--ta) 24%, transparent); box-shadow: 0 8px 0 color-mix(in srgb, var(--ta) 24%, transparent), 0 16px 0 color-mix(in srgb, var(--ta) 24%, transparent); }
.tg-grid::before { inset: 6px; border: 1px solid var(--tl); background: linear-gradient(var(--tl), var(--tl)) 0 5px / 100% 1px no-repeat, linear-gradient(var(--tl), var(--tl)) 0 11px / 100% 1px no-repeat, linear-gradient(var(--tl), var(--tl)) 10px 0 / 1px 100% no-repeat, linear-gradient(var(--tl), var(--tl)) 21px 0 / 1px 100% no-repeat; }
.tpl-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@container (max-width: 420px) { .tpl-sizes { grid-template-columns: minmax(0, 1fr); } }


/* A template's typeface: the whole document, in a face every computer has. Standard is Cirro's own. */
.pdoc.pdoc-font-serif, .pdoc.pdoc-font-serif *:not(.ms) { font-family: Georgia, "Times New Roman", Times, serif; }
.pdoc.pdoc-font-plain, .pdoc.pdoc-font-plain *:not(.ms) { font-family: Arial, Helvetica, sans-serif; }
/* Its signature area: two equal lines to sign on. Its terms and conditions: small print after everything else, a
   paragraph a line, which can start on a page of its own. */
.pdoc-sign.pdoc-sign-2 { grid-template-columns: 1fr 1fr; margin-top: 44px; }
.pdoc-tc { margin-top: 22px; font-size: 8pt; line-height: 1.5; color: var(--pmuted); }
.pdoc-tc p { margin: 0 0 5px; }
.pdoc-tc > .pdoc-label { break-after: avoid; page-break-after: avoid; }
/* the dark-mode logo is asked for and none is uploaded: the usual logo, in white */
.pdoc.pdoc-logo-inv .pdoc-logo-img { filter: brightness(0) invert(1); }
.pdoc.pdoc-logo-inv .pdoc-logo { color: white; }
.pdoc-tc.pdoc-tc-page { break-before: page; page-break-before: always; }

/* A template's colours: a row for each (its name, then circles to pick from, the last being a picker for any colour).
   The chosen one has a ring. */
.tpl-colours { display: grid; gap: 12px; }
.tpl-colour-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
.tpl-colour-name { font-size: 12.5px; font-weight: 600; color: var(--head); } /* (a field's label, as everywhere else in the form) */
.tpl-colour { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; }
.tpl-pick { flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid var(--field-line, var(--line)); border-radius: 50% !important; background: var(--c); cursor: pointer; }
.tpl-pick.is-on, .tpl-colour input.tpl-swatch.is-on { outline: 2px solid var(--blue); outline-offset: 2px; }
.tpl-pick:focus-visible, .tpl-swatch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tpl-colour input.tpl-swatch { -webkit-appearance: none; appearance: none; flex: none; width: 28px !important; min-width: 28px; height: 28px !important; min-height: 28px !important; max-height: 28px !important; padding: 0 !important; border: 1px dashed var(--slate) !important; border-radius: 50% !important; background: none; overflow: hidden; cursor: pointer; }
.tpl-swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.tpl-swatch::-webkit-color-swatch { border: 0; border-radius: 50%; }
.tpl-swatch::-moz-color-swatch { border: 0; border-radius: 50%; }
/* A coloured page: the document paints its colour and spreads it to the edges of its sheet (the sheet clips it), so the
   margins are coloured too. Sheets split into pages are coloured by ui.paginate; the printed page by ui.printPageCss. */
.pdoc.pdoc-has-bg { background: var(--pdoc-bg); box-shadow: 0 0 0 200vmax var(--pdoc-bg); }
.doc-paper:has(> .pdoc-has-bg), .print-sheet:has(> .pdoc-has-bg) { overflow: hidden; }
.pdoc.pdoc-has-bg .pdoc-party, .pdoc.pdoc-has-bg .pdoc-pay { background: transparent; }

/* The company's box and the customer's box are set side by side: two short lists of switches, a card each. They go one
   under the other where the pane is too narrow for both. */
.tpl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* A template's setting groups open in place, one at a time, like the sections of the contact window. */
.tpl-sec > summary { justify-content: flex-start; gap: 8px; padding-bottom: 16px; cursor: pointer; list-style: none; user-select: none; }
.tpl-sec > .card-body { padding-top: 0; }
.tpl-sec.is-closing > summary .ms { transform: none; }
.tpl-pair .label { display: block; margin-bottom: 10px; }
.tpl-sec > summary::-webkit-details-marker { display: none; }
.tpl-sec > summary .ms { color: var(--slate); font-size: 20px; transition: transform .15s ease; }
.tpl-sec[open] > summary .ms { transform: rotate(90deg); }
.tpl-sec > summary:hover h2 { color: var(--link); }
.tpl-sec > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .tpl-sec > summary .ms { transition: none; } }
@container (max-width: 420px) { .tpl-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .tpl-pair { grid-template-columns: minmax(0, 1fr); } }
/* a customer's or supplier's form as a page (/customers/new, /:id/edit): Details across the page, the other groups as cards two to a row */
.cm-page .cm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }

/* the summary box at the end of setting up an organisation takes the corner setting */
.wiz-sum, .bp-app, .mv-bank-card, .mv-bank-cur, .demo-tag { border-radius: var(--corner, 0) !important; }

/* A customer or supplier page: Details and Contact side by side, the same height (stacked on a phone) */
.cm-page > .cm-head-cards { align-items: stretch; }
.cm-page > .cm-head-cards > .card { height: 100%; }
.form-grid.cm-reach { grid-template-columns: 1fr; }
@media (max-width: 900px) { .cm-page > .cm-head-cards { grid-template-columns: 1fr; } }

/* A phone number: the country code (flag and code) beside the number */
.phone-in { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.phone-in > .dd-btn, .phone-in > select { flex: 0 0 auto; width: auto; min-width: 96px; }
.phone-in > input[data-phone-num] { flex: 1 1 auto; min-width: 0; }