/* OBSCURA OS: Practice.

   One window, as Case is: the top bar across (the practice, its screens,
   the running timer, the save state and the lock), and the screen under
   it, which scrolls. Screens are pages of panels and tables. Tables are
   dense, numbers right-aligned in tabular figures; on a phone each row of
   a table becomes a block with its column names beside the values, and
   every control is at least 44px tall.

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

body.pr-app { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--paper); color: var(--ink); font: var(--text-sm)/var(--leading-ui) var(--font-sans); }
.pr *, .pr *::before, .pr *::after { box-sizing: border-box; }
/* At no weight, so a button's own class decides its colour and weight:
   at one class's weight this reset outranked .pr-btn-main, and the
   main button was ink on the accent, unreadable in the default colourway. */
:where(.pr) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.pr-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pr-grow { flex: 1; }
.pr code, .pr kbd { font: var(--text-xs) var(--font-mono); padding: 1px var(--space-1); border-radius: var(--radius-sm); background: var(--paper-inset); }
.pr kbd { border: 1px solid var(--rule); }
.pr svg { flex: none; }

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

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

.pr-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.pr-home { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); }
.pr-home:hover { background: var(--paper-inset); }
.pr-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.pr-pick { position: relative; min-width: 0; }
.pr-pick-btn { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 240px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; }
.pr-pick-btn:hover:not(:disabled), .pr-pick-btn[aria-expanded="true"] { border-color: var(--rule-strong); background: var(--paper-inset); }
.pr-pick-btn:disabled { cursor: default; color: var(--ink-faint); }
.pr-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pr-pick-btn svg { width: 16px; height: 16px; color: var(--ink-faint); }
.pr-menu { position: absolute; z-index: 50; top: calc(100% + var(--space-1)); left: 0; min-width: 260px; max-width: min(340px, calc(100vw - 20px)); padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); animation: pr-pop var(--dur-3) var(--ease-standard); }
.pr-menu[hidden] { display: none; }
/* Help, at the right-hand end of the bar, opens leftwards. */
.pr-helpwrap { position: relative; flex: none; }
.pr-menu-right { left: auto; right: 0; }
.pr-menu-head { margin: var(--space-1) 11px var(--space-2); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 36px; padding: var(--space-2) 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.pr-menu button:hover, .pr-menu button:focus-visible { background: var(--paper-inset); outline: none; }
.pr-menu kbd { font-size: var(--text-2xs); color: var(--ink-faint); }
@keyframes pr-pop { from { opacity: 0; transform: translateY(-4px); } }

.pr-tabs { display: flex; gap: 2px; min-width: 0; padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper-inset); overflow-x: auto; scrollbar-width: none; }
.pr-tabs[hidden] { display: none; }
.pr-tabs::-webkit-scrollbar { display: none; }
.pr-tabs button { flex: none; min-height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.pr-tabs button:hover { color: var(--ink); }
.pr-tabs button[aria-current="page"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, .08); }
.pr-state { margin: 0; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-faint); }
.pr-state[data-save-state="failed"], .pr-state[data-save-state="unsaved"] { color: var(--danger); font-weight: 600; }
.pr-timerchip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--accent-border); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--ink); font-size: var(--text-xs); cursor: pointer; }
.pr-timerchip[hidden] { display: none; }
.pr-timerwrap { position: relative; flex: none; }
.pr-timerwrap[hidden] { display: none; }
.pr-timerchip:hover { border-color: var(--accent); }
.pr-timerchip[data-state="idle"] { border-color: var(--rule); background: transparent; color: var(--ink-soft); }
.pr-timerchip[data-state="idle"]:hover { border-color: var(--rule-strong); color: var(--ink); }
.pr-timerchip[data-state="late"] { border-color: var(--warn); background: var(--warn-soft); }
.pr-chip-i { display: inline-flex; color: inherit; }
.pr-timerchip[data-state="late"] .pr-chip-i { color: var(--warn); }
.pr-chip-i svg { width: 16px; height: 16px; }
.pr-menu-warn { margin: 0 11px var(--space-2); font-size: var(--text-xs); line-height: 1.4; color: var(--warn); }
.pr-menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--rule); }
.pr-menu button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-menu button kbd { flex: none; }
.pr-menu-t { flex: none; font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pr-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pr-chip-m { font-family: var(--font-mono); font-weight: 600; }
.pr-chip-t { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.pr-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); cursor: pointer; }
.pr-icon-btn:hover { background: var(--paper-inset); color: var(--ink); }
.pr-icon-btn[hidden] { display: none; }
.pr-icon-btn svg { width: 20px; height: 20px; }
.pr :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------------- the screen */

.pr-main { position: relative; min-height: 0; overflow: hidden; }
.pr-boot { margin: var(--space-6); }
.pr-boot[hidden] { display: none; }
.pr-view { height: 100%; overflow-y: auto; }
.pr-view[hidden] { display: none; }
.pr-page { padding: var(--space-5) max(var(--space-5), calc((100% - 1120px) / 2)) var(--space-8); animation: pr-arrive var(--dur-4) var(--ease-standard); }
.pr-page-wide { padding-left: max(var(--space-5), calc((100% - 1320px) / 2)); padding-right: max(var(--space-5), calc((100% - 1320px) / 2)); }
@keyframes pr-arrive { from { opacity: 0; transform: translateY(6px); } }
.pr-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); }
.pr-h { margin: 0; font: 650 var(--text-2xl)/1.15 var(--font-headline); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pr-h:focus { outline: none; }
.pr-h4 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; }
.pr-eyebrow { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--ink-soft); }
.pr-lead { max-width: var(--measure); margin: 0 0 var(--space-5); font-size: var(--text-md); line-height: var(--leading-prose); color: var(--ink-soft); }
.pr-prose { max-width: var(--measure); line-height: var(--leading-prose); }
.pr-prose p { margin: 0 0 var(--space-3); }
.pr-hint { display: block; margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
.pr-quiet { color: var(--ink-faint); }
.pr-strong { font-weight: 600; }
.pr-mono { font-family: var(--font-mono); font-size: .92em; white-space: nowrap; }
.pr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pr-secbar { margin: 0 0 var(--space-3); }
.pr-back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; margin: 0 0 var(--space-2) calc(var(--space-1) * -1); padding: 0 var(--space-2) 0 var(--space-1); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.pr-back:hover { background: var(--paper-inset); color: var(--ink); }
.pr-back svg { width: 16px; height: 16px; }

/* Buttons: the same three everywhere. */
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.pr-btn svg { width: 16px; height: 16px; margin-left: -2px; }
.pr-btn:hover:not(:disabled) { background: var(--paper-inset); }
.pr-btn:active:not(:disabled) { transform: translateY(1px); }
.pr-btn:disabled { opacity: .5; cursor: default; }
.pr-btn-main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.pr-btn-main:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.pr-btn-danger { border-color: var(--danger); background: var(--danger); color: var(--on-accent); }
.pr-btn-danger:hover:not(:disabled) { background: var(--danger); filter: brightness(.92); }
.pr-btn-sm { min-height: 30px; padding: 3px 10px; font-size: var(--text-xs); }
.pr-link { min-height: 30px; padding: 0 var(--space-1); border: 0; background: none; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 600; cursor: pointer; text-align: left; }
.pr-link:hover { text-decoration: underline; }

/* Panels: a hairline and the raised paper, no more. */
.pr-panel { margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); min-width: 0; }
.pr-panel > h3, .pr-panelhead h3 { margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: 650; }
.pr-panelhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-3); }
.pr-panelhead h3 { margin: 0; }
.pr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); align-items: start; }
.pr-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.pr-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.pr-card h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.pr-card p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.pr-card .pr-field { width: 100%; }
.pr-card > .pr-btn { margin-top: auto; }
.pr-details summary { cursor: pointer; font-weight: 600; padding: var(--space-1) 0; }
.pr-details[open] summary { margin-bottom: var(--space-2); }
.pr-jump { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-xs); }
.pr-jump a { color: var(--accent-strong); font-weight: 600; }

/* The figures across the top of a screen: one strip, ruled between. */
.pr-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 0 var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); overflow: hidden; }
.pr-fig { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-left: 1px solid var(--rule); min-width: 0; }
.pr-fig:first-child { border-left: 0; }
.pr-fig-l { font-size: var(--text-xs); color: var(--ink-soft); }
.pr-fig-v { font-size: var(--text-xl); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pr-fig-s { font-size: var(--text-xs); color: var(--ink-faint); }
.pr-fig.is-warn .pr-fig-s, .pr-fig.is-warn .pr-fig-v { color: var(--danger); }

/* Notes: a rule down the side, the colour saying what kind. */
.pr-note { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper-inset); line-height: 1.5; }
.pr-note.is-info { border-left-color: var(--accent); }
.pr-note.is-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.pr-note.is-danger { border-left-color: var(--danger); background: var(--danger-soft); }
.pr-note .pr-btn { margin-left: var(--space-2); }
.pr-flag { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.pr-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pr-flag.is-warn { color: var(--warn); }
.pr-flag.is-danger { color: var(--danger); }
.pr-good { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; color: var(--good); font-weight: 600; }
.pr-good svg { width: 18px; height: 18px; }
.pr-empty { padding: var(--space-5) var(--space-3); text-align: center; color: var(--ink-faint); }
.pr-empty p { max-width: 52ch; margin: 0 auto var(--space-3); line-height: 1.5; }

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

.pr-tablewrap { overflow-x: auto; margin: 0 0 var(--space-2); }
.pr-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.pr-table th { position: sticky; top: 0; padding: 7px 10px; border-bottom: 1px solid var(--rule-strong); background: var(--paper-raised); color: var(--ink-soft); font-weight: 600; text-align: left; white-space: nowrap; }
.pr-table td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; overflow-wrap: anywhere; }
.pr-table .pr-link { min-height: 0; padding: 2px var(--space-1); }
.pr-table tr.pr-group th { position: static; padding: var(--space-4) 10px 6px; border-bottom: 1px solid var(--rule-strong); background: none; color: var(--ink); font-size: var(--text-sm); font-weight: 650; }
.pr-table tbody tr.pr-group:first-child th { padding-top: var(--space-2); }
.pr-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-table tfoot td { border-top: 1px solid var(--rule-strong); border-bottom: 0; font-weight: 650; }
.pr-table tr.is-click { cursor: pointer; }
.pr-table tr.is-click:hover td { background: var(--paper-inset); }
.pr-table tr.is-click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pr-table tr.is-quiet td { color: var(--ink-faint); }
.pr-table tr.is-danger td { background: var(--danger-soft); }
.pr-table tr.is-strong td { background: var(--warn-soft); }
.pr-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.pr-docname { font-weight: 600; }
.pr-totaltable { width: 100%; max-width: 440px; margin: var(--space-2) 0 var(--space-3) auto; border-collapse: collapse; font-size: var(--text-sm); }
.pr-totaltable th { padding: 4px var(--space-2); font-weight: 400; text-align: left; color: var(--ink-soft); }
.pr-totaltable td { padding: 4px var(--space-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-totaltable tr.is-sum th, .pr-totaltable tr.is-sum td { border-top: 1px solid var(--rule); }
.pr-totaltable tr.is-total th, .pr-totaltable tr.is-total td { border-top: 2px solid var(--ink); color: var(--ink); font-weight: 650; }
.pr-cols-3 .pr-totaltable { max-width: none; }
.pr-keys td:first-child { white-space: nowrap; }

/* ---------------------------------------------------------------- toolbars and fields */

.pr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.pr-bar select { width: auto; max-width: 280px; }
.pr-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; }
.pr-search svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
.pr-field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; font-size: var(--text-xs); color: var(--ink-soft); min-width: 0; }
.pr-field > span:first-child { font-weight: 600; }
.pr-field-inline { flex-direction: row; align-items: center; gap: var(--space-2); }
.pr-field-inline > span:first-child { white-space: nowrap; }
.pr-field-inline input { width: auto; }
.pr-opt { font-style: normal; font-weight: 400; color: var(--ink-faint); }
.pr input:not([type="checkbox"]):not([type="file"]), .pr select, .pr textarea { width: 100%; min-height: 36px; padding: 6px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font-size: var(--text-sm); }
.pr input[type="date"], .pr input[type="time"] { font-variant-numeric: tabular-nums; }
.pr textarea { resize: vertical; line-height: 1.5; }
/* After the rule above, which they refine and tie with. */
.pr .pr-search input[type="search"] { padding-left: 34px; }
.pr .pr-money-in input[inputmode] { padding-left: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.pr .pr-money-in.is-sm input[inputmode] { min-height: 30px; padding-top: 2px; padding-bottom: 2px; font-size: var(--text-xs); }
.pr input:focus, .pr select:focus, .pr textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.pr input[type="file"] { font-size: var(--text-xs); }
.pr-check { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 36px; padding: 6px 0; font-size: var(--text-sm); color: var(--ink); cursor: pointer; }
.pr-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.pr-money-in { position: relative; display: flex; align-items: center; }
.pr-money-in > span { position: absolute; left: 10px; color: var(--ink-faint); pointer-events: none; }
.pr-money-in.is-sm { width: 120px; margin-left: auto; }
.pr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.pr-form-grid .is-wide { grid-column: 1 / -1; }
.pr-pbform { margin: var(--space-3) 0; }
/* The pre-bill: its lines, and beside them the invoice they make, which
   stays in view as the lines scroll. */
.pr-pb { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.pr-pb-side { position: sticky; top: var(--space-3); }
.pr-pb-side .pr-totaltable { max-width: none; }
.pr-pb-side .pr-form-grid { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------- the dialog */

.pr-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); box-shadow: 0 24px 64px rgba(0, 0, 0, .28); overflow: hidden; }
.pr-dialog.is-wide { width: min(860px, calc(100vw - 24px)); }
.pr-dialog::backdrop { background: rgba(10, 10, 14, .45); }
.pr-dialog[open] { animation: pr-pop var(--dur-3) var(--ease-standard); }
.pr-dialog-form { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); margin: 0; }
.pr-dialog-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-5); border-bottom: 1px solid var(--rule); }
.pr-dialog-head h2 { flex: 1; margin: 0; font-size: var(--text-md); font-weight: 650; overflow-wrap: anywhere; }
.pr-dialog-body { padding: var(--space-4) var(--space-5); overflow-y: auto; }
.pr-dialog-intro { margin: 0 0 var(--space-4); line-height: 1.5; color: var(--ink-soft); }
.pr-dialog-intro p { margin: 0 0 var(--space-2); }
.pr-dialog-intro .pr-tablewrap { margin-top: var(--space-2); }
.pr-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--rule); background: var(--paper); }
.pr-dialog-err { flex: 1 1 100%; margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--ink); font-size: var(--text-xs); line-height: 1.5; }
.pr-dialog-err[hidden] { display: none; }
.pr-dialog-body > .pr-row { margin-top: var(--space-4); }
.pr-pre { max-height: 50vh; margin: var(--space-3) 0; padding: var(--space-3); overflow: auto; border-radius: var(--radius-md); background: var(--paper-inset); font: var(--text-xs)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.pr-docimg { display: block; max-width: 100%; max-height: 50vh; margin: var(--space-3) auto; border: 1px solid var(--rule); }
.pr-letter { max-height: 52vh; margin: 0 0 var(--space-2); padding: var(--space-5) var(--space-6); overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font: var(--text-sm)/1.55 var(--font-serif); }
.pr-letter h1 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); }
.pr-letter h2 { font-size: var(--text-md); margin: var(--space-3) 0 var(--space-1); }
.pr-letter p { margin: 0 0 var(--space-2); }
.pr-missing { padding: 0 2px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); font-family: var(--font-mono); font-size: .88em; }
.pr-likely { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.pr-csout, .pr-limout { margin-top: var(--space-3); }
.pr-limres { padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); }
.pr-limlast { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.pr-limrule { margin: 0 0 var(--space-2); line-height: 1.5; }
.pr-limrule cite { font-style: normal; font-weight: 600; }
.pr-limres ol { margin: 0 0 var(--space-2); padding-left: 1.3em; line-height: 1.55; }

/* ---------------------------------------------------------------- particular screens */

.pr-kv { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); gap: 6px var(--space-4); margin: 0; }
.pr-kv > div { display: contents; }
.pr-kv dt { color: var(--ink-soft); font-size: var(--text-xs); padding-top: 2px; }
.pr-kv dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.pr-mhead .pr-h { font-size: var(--text-xl); }
.pr-mmeta { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-soft); }
.pr-subtabs { display: flex; gap: var(--space-1); margin: 0 0 var(--space-4); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.pr-subtabs::-webkit-scrollbar { display: none; }
.pr-subtabs button { flex: none; min-height: 36px; padding: 0 var(--space-3); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; }
.pr-subtabs button:hover { color: var(--ink); }
.pr-subtabs button[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
.pr-dlist { margin: 0; padding: 0; list-style: none; }
.pr-dlist li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: var(--space-2); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: var(--text-xs); }
.pr-dlist li:last-child { border-bottom: 0; }
.pr-dlist time { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.pr-dlist li.is-late time { color: var(--danger); font-weight: 600; }
.pr-dlist li.is-today time { color: var(--ink); font-weight: 600; }
.pr-dlist-m { font-family: var(--font-mono); }
.pr-attn { margin: 0; padding: 0; list-style: none; }
.pr-attn li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 7px 0 7px var(--space-3); border-bottom: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); font-size: var(--text-xs); line-height: 1.45; }
.pr-attn li:last-child { border-bottom: 0; }
.pr-attn li.is-warn { border-left-color: var(--warn); }
.pr-attn li.is-danger { border-left-color: var(--danger); }
.pr-attn li.is-info { border-left-color: var(--accent); }
.pr-timers { margin: 0; padding: 0; list-style: none; }
.pr-timer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.pr-timer:last-child { border-bottom: 0; }
.pr-timer-about { min-width: 0; font-size: var(--text-xs); }
.pr-timer-n { display: block; margin-top: 2px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-timer-t { font: 600 var(--text-lg)/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.pr-timer.is-on .pr-timer-t { color: var(--accent-strong); }
.pr-timer-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); justify-content: flex-end; }
.pr-review { margin: 0; padding: 0; list-style: none; }
.pr-review li { border-bottom: 1px solid var(--rule); }
.pr-recsum { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-left-width: 3px; border-radius: var(--radius-md); background: var(--paper-raised); line-height: 1.5; }
.pr-recsum svg { width: 20px; height: 20px; }
.pr-recsum.is-ok { border-left-color: var(--good); }
.pr-recsum.is-ok svg { color: var(--good); }
.pr-recsum.is-bad { border-left-color: var(--danger); }
.pr-recsum.is-bad svg { color: var(--danger); }
.pr-drop { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-4); border: 1.5px dashed var(--rule-strong); border-radius: var(--radius-md); color: var(--ink-soft); cursor: pointer; }
.pr-drop svg { width: 22px; height: 22px; }
.pr-drop b { color: var(--accent-strong); }
.pr-drop.is-over, .pr-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.pr-reports { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pr-replist { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.pr-replist button { min-height: 34px; padding: 0 var(--space-3); border: 0; border-left: 2px solid transparent; background: none; color: var(--ink-soft); font-weight: 600; font-size: var(--text-xs); text-align: left; cursor: pointer; }
.pr-replist button:hover { color: var(--ink); background: var(--paper-inset); }
.pr-replist button[aria-current="page"] { border-left-color: var(--accent); color: var(--ink); background: var(--paper-raised); }
.pr-repbody { min-width: 0; }
.pr-repbody > .pr-h4 { margin-top: 0; }

/* The lock screen inside the application. */
.pr-lockpage .pr-h { margin-bottom: var(--space-2); }
.pr-locked { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); color: var(--ink-soft); }
.pr-locked svg { width: 18px; height: 18px; }
.pr-vaults { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); max-width: 560px; }
.pr-vault { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); }
.pr-vault-about b { display: block; }
.pr-vault-about span { font-size: var(--text-xs); color: var(--ink-soft); }
.pr-vault-err { margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--danger); background: var(--danger-soft); font-size: var(--text-xs); }
.pr-vault-err[hidden] { display: none; }
.pr-strength[data-score="0"], .pr-strength[data-score="1"] { color: var(--danger); }
.pr-strength[data-score="3"], .pr-strength[data-score="4"] { color: var(--good); }

/* Notes on a matter. */
.pr-notes { margin: 0; padding: 0; list-style: none; }
.pr-note-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.pr-note-item:last-child { border-bottom: 0; }
.pr-note-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); }
.pr-note-head b { color: var(--ink); font-size: var(--text-sm); }
.pr-note-head time { font-variant-numeric: tabular-nums; }
.pr-note-text { margin: var(--space-2) 0 0; max-width: 72ch; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
/* Find. */
.pr-findlist { margin: var(--space-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.pr-findhit { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; width: 100%; min-height: 40px; padding: 6px var(--space-2); border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.pr-findhit:hover { background: var(--paper-inset); }
.pr-findkind { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.pr-findlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-findhit .pr-quiet { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22em; }
/* Plug-in reports, under their own heading in the list. */
.pr-replist-h { margin: var(--space-3) 0 var(--space-1); padding: 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
/* A discount on a pre-bill. */
.pr-pbdisc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); margin: 0 0 var(--space-2); }
.pr-disctable { margin-bottom: 0; }
.pr-disctable td { color: var(--ink-soft); }
.pr-wolist { max-height: 46vh; overflow-y: auto; }
/* Plug-ins in Settings. */
.pr-plugsrc { max-height: 40vh; margin: var(--space-2) 0 0; padding: var(--space-3); overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font: var(--text-xs)/1.5 var(--font-mono); white-space: pre; }
/* A document's version, and the folders of a matter's documents. */
.pr-ver { margin-left: var(--space-1); padding: 0 5px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); font: var(--text-2xs) var(--font-mono); color: var(--ink-soft); }
.pr-folders { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-3); }
.pr-folder { min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.pr-folder:hover { border-color: var(--rule-strong); color: var(--ink); }
.pr-folder[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.pr-docmove { margin: var(--space-3) 0; }
.pr-table tr.is-thread td:nth-child(4) { padding-left: var(--space-5); }
/* A plain bar for how far a workflow or a week has got. */
.pr-meter { height: 6px; margin: var(--space-2) 0 var(--space-3); border-radius: var(--radius-pill); background: var(--paper-inset); overflow: hidden; }
.pr-meter > span { display: block; height: 100%; background: var(--accent); }
.pr-flowsum + .pr-flowsum { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.pr-flowsum .pr-panelhead { margin-bottom: 0; }
.pr-keydates { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.pr-flowtable td:first-child { width: 36px; }
/* The week's timesheet. */
.pr-week th[scope="row"] { position: static; max-width: 22em; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); font-weight: 400; white-space: normal; }
.pr-week thead th.is-today { color: var(--accent-strong); }
.pr-week abbr { text-decoration: none; }
.pr-week tfoot th { padding: 7px 10px; border-top: 1px solid var(--rule-strong); border-bottom: 0; text-align: left; font-weight: 650; }
.pr-cell { min-width: 3em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-cell.is-empty { color: var(--ink-faint); }
.pr-weekfigs { margin-top: var(--space-3); }
.pr-pickbar { margin-top: var(--space-2); }
/* Signing on the device. */
.pr-letter-sm { max-height: 34vh; }
.pr-sigwrap { display: flex; flex-direction: column; gap: var(--space-2); }
.pr-sigwrap[hidden] { display: none; }
.pr-field-l { font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.pr-sigpad { display: block; width: 100%; height: 180px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); touch-action: none; cursor: crosshair; }
.pr-field[hidden] { display: none; }
/* An intake form's questions. */
.pr-ifq { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.pr-ifq-n { padding-top: 22px; font: 600 var(--text-xs) var(--font-mono); color: var(--ink-faint); }
.pr-ifq-body { display: grid; gap: var(--space-2); min-width: 0; }
.pr-ifq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.pr-ifq .pr-check { min-height: 30px; padding: 0; }

/* Budgets, closure, AML, sanctions, bundles. */
.pr-budgethead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.pr-budgethead p { margin: 0; font-size: var(--text-sm); }
.pr-budgetbar { position: relative; display: block; flex: 1 1 220px; max-width: 360px; height: 8px; border-radius: var(--radius-sm); background: var(--paper-inset); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.pr-budgetbar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.pr-budgetbar.is-near i { background: var(--warn); }
.pr-budgetbar.is-over i { background: var(--danger); }
.pr-budgetbar b { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-faint); }
.pr-num { font-variant-numeric: tabular-nums; }
.pr-closelist { margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.pr-closelist li { display: flex; align-items: flex-start; gap: var(--space-2); padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: var(--text-xs); line-height: 1.45; }
.pr-closelist li > span:first-child { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.pr-closelist li > span:first-child svg { width: 16px; height: 16px; }
.pr-closelist li.is-ok > span:first-child { color: var(--good); }
.pr-closelist li.is-open > span:first-child { color: var(--warn); }
.pr-closelist li.is-block > span:first-child { color: var(--danger); }
.pr-amlout { margin-top: var(--space-3); }
.pr-amlout p { margin: 0 0 var(--space-2); }
.pr-screenhit { margin: 0 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); min-width: 0; }
.pr-screenhit legend { padding: 0 var(--space-1); font-weight: 650; }
.pr-bundlepick input[type="number"] { width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
.pr-bundlepick select { max-width: 100%; }
.pr-h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); font-weight: 650; }
.pr-mytasks select { min-width: 0; max-width: 100%; }

/* pdf-layout.js lays a document out off the screen before writing it. */
.ck-layout-host { position: absolute; left: -200000px; top: 0; pointer-events: none; }

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1100px) {
  .pr-cols-3, .pr-pb { grid-template-columns: minmax(0, 1fr); }
  .pr-pb-side { position: static; }
}
@media (max-width: 900px) {
  .pr-top { flex-wrap: wrap; row-gap: 6px; }
  .pr-tabs { order: 10; flex: 1 1 100%; }
  .pr-state { order: 3; }
  .pr-cols { grid-template-columns: minmax(0, 1fr); }
  .pr-reports { grid-template-columns: minmax(0, 1fr); }
  .pr-replist { flex-direction: row; overflow-x: auto; position: static; border-bottom: 1px solid var(--rule); }
  .pr-replist button { flex: none; border-left: 0; border-bottom: 2px solid transparent; }
  .pr-replist button[aria-current="page"] { border-bottom-color: var(--accent); }
}

/* A phone: a table's rows become blocks, every control is 44px, and the
   page fits its width. */
@media (max-width: 640px) {
  .pr-page, .pr-page-wide { padding: var(--space-4) var(--space-3) var(--space-7); }
  /* Practice has no status bar, so on a phone the foot of the window is
     kept as one for the privacy badge, as the other applications' bars
     hold it, rather than the badge lying over the start screen's buttons. */
  .pr { box-sizing: border-box; padding-bottom: 48px; }
  .pr::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 48px; background: var(--paper-raised); border-top: 1px solid var(--rule); }
  body.pr-app #ppBadge { left: auto; right: var(--space-2); bottom: 2px; }
  .pr-h { font-size: var(--text-xl); }
  .pr-brand, .pr-top > .pr-grow, .pr-chip-m { display: none; }
  .pr-pick { flex: 1 1 0; }
  .pr-pick-btn { width: 100%; max-width: none; }
  .pr-state { display: none; }
  .pr-btn, .pr-icon-btn, .pr-pick-btn, .pr-back, .pr-tabs button, .pr-subtabs button, .pr-replist button, .pr-timerchip { min-height: 44px; }
  .pr-btn-sm { min-height: 44px; padding: 6px 12px; }
  .pr-menu button { min-height: 44px; }
  .pr-timerwrap .pr-menu { position: fixed; top: 58px; left: 10px; right: 10px; max-width: none; }
  .pr-link { min-height: 44px; padding: 0 var(--space-2); }
  .pr-icon-btn, .pr-home { width: 44px; height: 44px; }
  .pr input:not([type="checkbox"]):not([type="file"]), .pr select, .pr textarea { min-height: 44px; font-size: var(--text-md); }
  .pr-check { min-height: 44px; }
  .pr-check input, .pr-table input[type="checkbox"] { width: 22px; height: 22px; }
  .pr-form-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-pagehead { align-items: flex-start; }
  .pr-pagehead > .pr-row { width: 100%; }
  .pr-bar select { max-width: 100%; flex: 1 1 140px; }
  .pr-search { max-width: none; flex-basis: 100%; }
  .pr-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-fig { border-left: 0; border-top: 1px solid var(--rule); }
  .pr-fig:nth-child(-n+2) { border-top: 0; }
  .pr-fig:nth-child(even) { border-left: 1px solid var(--rule); }
  .pr-fig-v { font-size: var(--text-lg); }
  .pr-panel { padding: var(--space-3); }
  .pr-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pr-kv dt { padding-top: var(--space-2); }
  .pr-dlist li { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-dlist li time { grid-column: 1 / -1; }
  .pr-timer { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-timer-btns { grid-column: 1 / -1; justify-content: flex-start; }
  .pr-dialog-body, .pr-dialog-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
  .pr-dialog-head { padding-left: var(--space-4); }
  .pr-letter { padding: var(--space-3); }
  .pr-drop { padding: var(--space-3); }
  .pr-money-in.is-sm { width: 100%; }
  /* The table as blocks. */
  .pr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pr-table, .pr-table tbody, .pr-table tfoot, .pr-table tr, .pr-table td { display: block; width: 100%; }
  .pr-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
  .pr-table td { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; border: 0; text-align: right; }
  .pr-table td::before { content: attr(data-l); flex: none; max-width: 45%; color: var(--ink-faint); text-align: left; font-weight: 400; }
  .pr-table td[data-l=""]::before { content: none; }
  .pr-table td[data-l=""] { justify-content: flex-end; }
  .pr-table tr.pr-group { padding: 0; border-bottom: 0; }
  .pr-table tr.pr-group th { display: block; padding: var(--space-4) 0 var(--space-1); }
  .pr-table .pr-link { min-height: 44px; }
  .pr-table td.num { white-space: normal; }
  .pr-table tfoot tr { border-bottom: 0; }
  .pr-table tfoot td:empty, .pr-table td:empty, .pr-table .pr-np { display: none; }
  .pr-totaltable { max-width: none; }
  .pr-findhit { grid-template-columns: minmax(0, 1fr); gap: 2px; min-height: 44px; }
  .pr-findhit .pr-quiet { max-width: none; }
  .pr-pbdisc { grid-template-columns: minmax(0, 1fr); }
  .pr-folder { min-height: 44px; }
  .pr-ifq-row { grid-template-columns: minmax(0, 1fr); }
  .pr-ifq .pr-check { min-height: 44px; }
  .pr-sigpad { height: 160px; }
  .pr-week th[scope="row"] { display: block; max-width: none; padding: var(--space-2) 0 var(--space-1); border: 0; font-weight: 600; }
  .pr-week tfoot th { display: block; padding: var(--space-2) 0 0; border: 0; }
  .pr-cell { min-height: 44px; }
}