/* common.css - the part of every program's stylesheet that is the same sheet.

   Generated into each program's webui/ from hte_common/webui/common.css.
   DO NOT EDIT THIS COPY: change the one in hte_common and run
       python3 -m hte_common.launchers

   Loaded before app.css. Only rules that were identical in all three
   programs, in the same order, and that no earlier program-specific rule
   could have been overriding, are here - anything whose position in the
   cascade mattered was left in app.css. The design tokens, the window
   chrome, the traffic lights, tabs, buttons, dialogs, the activity panel. */

/* HTE Invoice Mailer - interface styles.
   Light and dark follow the system appearance via prefers-color-scheme, which
   WKWebView reports correctly as long as the bundle's Info.plist carries
   NSRequiresAquaSystemAppearance = False. */

:root {
    /* Traffic-light glyphs, as masks. Kept with the other tokens so the shapes
     are defined once and referenced by each button. */
  --glyph-close: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5 L8.5 8.5 M8.5 3.5 L3.5 8.5' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --glyph-minimise: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.1 6 L8.9 6' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --glyph-zoom: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.3 3.3 L7.1 3.3 L3.3 7.1 Z' fill='black'/%3E%3Cpath d='M8.7 8.7 L4.9 8.7 L8.7 4.9 Z' fill='black'/%3E%3C/svg%3E");

  --accent: #0a7cff;
  --accent-hover: #0a6fe0;
  --accent-text: #ffffff;

  --window: #ececed;
  --toolbar: rgba(246,246,247,0.86);
  --content: #ffffff;
  --elevated: #ffffff;
  --sunken: #f6f6f7;

  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #a1a1a6;

  --border: rgba(0,0,0,0.10);
  --border-strong: rgba(0,0,0,0.16);
  --divider: rgba(0,0,0,0.06);

  --ok: #1a7f37;
  --warn: #c9372c;
  --amber: #9a6200;

  --row-hover: rgba(0,0,0,0.035);
  --scroll-thumb: rgba(0,0,0,0.28);
  --scroll-thumb-hover: rgba(0,0,0,0.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.07);
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;

  --relaunch-bg: #0b57d0;
  --relaunch-fg: #ffffff;
  --relaunch-hover: #0a4fbd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #0a84ff;
    --accent-hover: #339dff;

    --window: #1c1c1e;
    --toolbar: rgba(40,40,43,0.86);
    --content: #232326;
    --elevated: #2c2c2f;
    --sunken: #1a1a1c;

    --text: #f2f2f7;
    --text-secondary: #a1a1a8;
    --text-tertiary: #78787f;

    --border: rgba(255,255,255,0.12);
    --border-strong: rgba(255,255,255,0.18);
    --divider: rgba(255,255,255,0.08);

    --ok: #4ad66d;
    --warn: #ff6961;
    --amber: #f0a93b;

    --row-hover: rgba(255,255,255,0.045);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.06);

    --relaunch-bg: #004a77;
    --relaunch-fg: #c2e7ff;
    --relaunch-hover: #0b5a8e;
    --scroll-thumb: rgba(255,255,255,0.26);
    --scroll-thumb-hover: rgba(255,255,255,0.42);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--content);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.toolbar {
  background: var(--toolbar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--border);
  padding: 0 16px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

body.framed .traffic { display: none; }
/* Under the shell the system's own lights sit where these are drawn: the space stays, the drawing goes. */
body.shell .traffic { visibility: hidden; }

/* Windows draws its own title bar with the program's name in it,
   so ours would be the second one saying the same thing. What sits
   beside it - which run is loaded - is not repeated anywhere. */

body.framed .win-name { display: none; }

body.framed .toolbar { height: 44px; }

.traffic { display: flex; gap: 8px; align-items: center; }

.light {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.14);
}

.light.red    { background: #ff5f57; }

.light.yellow { background: #febc2e; }

.light.green  { background: #28c840; }

.light:active { filter: brightness(0.85); }

/* The glyphs inside the lights.
   Drawn as a mask rather than a background image so one shape definition
   works whatever colour the button is, and the glyph colour is set in one
   place. They appear on hovering the group, not the individual button, which
   is how macOS behaves - reaching for close should light all three. */

.light { position: relative; }

.light::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 90ms ease-out;
  background-color: rgba(0, 0, 0, 0.55);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-position: center;
}

.light.red::before {
  -webkit-mask-image: var(--glyph-close);
  mask-image: var(--glyph-close);
}

.light.yellow::before {
  -webkit-mask-image: var(--glyph-minimise);
  mask-image: var(--glyph-minimise);
}

.light.green::before {
  -webkit-mask-image: var(--glyph-zoom);
  mask-image: var(--glyph-zoom);
}

.traffic:hover .light::before { opacity: 1; }

/* A window that is not the focused one has grey lights, as everywhere else on
   the system. Hovering them brings the colour back along with the glyphs -
   macOS does that too, and without it the buttons look disabled rather than
   merely inactive. */

body.unfocused .light { background: #d5d5d6; box-shadow: none; }

body.unfocused .traffic:hover .light.red    { background: #ff5f57; }

body.unfocused .traffic:hover .light.yellow { background: #febc2e; }

body.unfocused .traffic:hover .light.green  { background: #28c840; }

@media (prefers-color-scheme: dark) {
  body.unfocused .light { background: #4e4e51; }
  .light::before { background-color: rgba(0, 0, 0, 0.62); }
}

.win-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }

.win-sub { color: var(--text-tertiary); font-weight: 400; }

.toolbar-right { margin-left: auto; display: flex; gap: 8px; }

.tabstrip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 14px 0;
  background: var(--window);
  flex-shrink: 0;
}

.tab {
  position: relative;
  padding: 9px 20px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
}

.tab:not(.active):hover { background: var(--row-hover); }

/* "Relaunch to update": Chrome's pill, at the right end of the tab strip.
   Hidden until a code update has been downloaded and checked in the
   background; pressing it opens a fresh copy of the program and closes this
   one, which is the "close and reopen" the person used to be asked to do. */
.relaunch {
  margin-left: auto; align-self: center; margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 16px;
  border-radius: 999px; border: none;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
  background: var(--relaunch-bg); color: var(--relaunch-fg);
  cursor: default;
}
.relaunch::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--relaunch-fg); opacity: 0.9;
}
.relaunch:hover { background: var(--relaunch-hover); }
.relaunch:active { transform: scale(0.98); }
.relaunch[hidden] { display: none; }

.tab.active {
  background: var(--content);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 -0.5px 0 var(--border) inset,
              0.5px 0 0 var(--border) inset,
             -0.5px 0 0 var(--border) inset;
}

.tab.active::before, .tab.active::after {
  content: ""; position: absolute; bottom: 0;
  width: 10px; height: 10px; background: var(--content);
}

.tab.active::before {
  left: -10px; border-bottom-right-radius: 10px;
  box-shadow: 3px 3px 0 3px var(--content);
  clip-path: inset(50% -10px 0 50%);
}

.tab.active::after {
  right: -10px; border-bottom-left-radius: 10px;
  box-shadow: -3px 3px 0 3px var(--content);
  clip-path: inset(50% 50% 0 -10px);
}

.content {
  background: var(--content);
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  overflow-y: auto;
}

.content[hidden] { display: none; }

h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

.subtitle { color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }

.btn {
  font: inherit;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-strong);
  background: var(--elevated);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 120ms ease, transform 60ms ease, opacity 120ms ease;
}

.btn:hover:not(:disabled) { background: var(--sunken); }

.btn:active:not(:disabled) { transform: scale(0.98); }

.btn:disabled { opacity: 0.4; }

.btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(10,124,255,0.36);
}

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

.btn.danger { background: var(--warn); border-color: transparent; color: #fff; font-weight: 600; }

.btn.small { padding: 5px 12px; font-size: 12px; border-radius: var(--radius-sm); }

.filerow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--sunken);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
}

.filename { font-weight: 500; }

.filemeta { color: var(--text-tertiary); font-size: 12px; margin-top: 1px; }

.actions { display: flex; align-items: center; gap: 10px; }

.spacer { margin-left: auto; }

.hint { color: var(--text-tertiary); font-size: 12px; }

.selbar { display: flex; align-items: center; gap: 12px; }

.selbar[hidden] { display: none; }

.count {
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
}

.tablewrap {
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--elevated);
  /* The list scrolls inside itself so the activity log below stays visible
     however many employees are in the run. */
  max-height: 44vh;
  overflow: auto;
}

#tab-roster .tablewrap { max-height: none; flex: 1; }

.tablewrap[hidden] { display: none; }

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

thead th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 9px 12px;
  background: var(--sunken);
  border-bottom: 0.5px solid var(--border);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}

thead th.num { text-align: right; }

tbody td {
  padding: 8px 12px;
  border-bottom: 0.5px solid var(--divider);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 0;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background: var(--row-hover); }

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

.mono-id { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

.check {
  width: 17px; height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
}

tr.excluded td:not(:first-child),
tr.locked td:not(:first-child) { color: var(--text-tertiary); }

tr.locked { background: color-mix(in srgb, var(--warn) 4%, transparent); }

.badge {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}

.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 34px;
  text-align: center;
  color: var(--text-tertiary);
}

.empty[hidden] { display: none; }

.empty-icon { font-size: 26px; margin-bottom: 8px; opacity: 0.65; }

.empty-title { font-weight: 600; color: var(--text-secondary); }

.empty-text { margin-top: 3px; font-size: 12px; }

.section-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 7px;
}

.activity {
  background: var(--sunken);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px; line-height: 1.75;
  height: 118px; overflow-y: auto;
  -webkit-user-select: text; user-select: text;
}

.card {
  background: var(--sunken);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 13px;
}

.field { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 12px; }

.field label { color: var(--text-secondary); font-weight: 500; }

.field input[type=text], .field input[type=password] {
  font: inherit;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-strong);
  background: var(--content);
  color: var(--text);
  -webkit-user-select: text; user-select: text;
}

.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.field-hint { grid-column: 2; font-size: 11.5px; color: var(--text-tertiary); }

.checkrow { display: flex; gap: 10px; align-items: flex-start; }

.checkrow input { margin-top: 2px; }

.statusbar {
  border-top: 0.5px solid var(--border);
  background: var(--toolbar);
  padding: 9px 20px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  display: flex; gap: 8px; align-items: center;
  flex-shrink: 0;
}

.statusbar .dot { opacity: 0.5; }

.statusbar .spacer { flex: 1; }

/* The bits on the left keep their spacing when they are wrapped in one span
   so the footer line can sit at the other end. */
#statusBits { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

/* The one-line activity at the right end of the status bar. */
.statusbar .footnote {
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 55%;
}
.statusbar .footnote.good { color: var(--ok); }
.statusbar .footnote.bad  { color: var(--warn); }

.scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}

.scrim[hidden] { display: none; }

.modal {
  width: 520px; max-width: calc(100vw - 60px);
  max-height: calc(100vh - 100px);
  background: var(--content);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  padding: 22px 24px 18px;
  display: flex; flex-direction: column; gap: 14px;
}

.modal-title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  /* A long customer name is a name, not a layout problem. Windows falls back
     to a wider face than the Mac's, so a title that fits on one line there
     wants two here - and it must wrap rather than be cut off mid-word. */
  white-space: normal;
  overflow-wrap: break-word;
}

.modal-body { color: var(--text-secondary); line-height: 1.55; overflow-y: auto; }

.modal-body strong { color: var(--text); }

.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.modal.wide { width: 860px; }

/* The Machines table (who runs what), inside the wide modal: one card per
   machine, a coloured tag per program for its code and for its app. */
.mx-sum { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.mx-sum .n { font-weight: 700; color: var(--text); font-size: 13px; margin-right: 4px; }
.vtag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px 3px 7px; border-radius: 999px; white-space: nowrap; line-height: 1.3; }
.vtag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.vtag.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.vtag.behind { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.vtag.oldapp { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.vtag.quiet { background: color-mix(in srgb, var(--text-tertiary) 16%, transparent); color: var(--text-secondary); }
.vtag .to { font-weight: 500; opacity: .85; }
.mx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 52vh; overflow: auto; }
.mx-card { background: var(--sunken); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; }
.mx-card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.mx-card .name { font-weight: 700; color: var(--text); font-size: 13px; white-space: nowrap; }
.mx-card .meta { font-size: 11px; color: var(--text-tertiary); text-align: right; }
.mx-card .row { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; align-items: center;
  padding: 5px 0; border-top: 0.5px solid var(--divider); }
.mx-card .row:first-of-type { border-top: none; }
.mx-card .prog { font-size: 12px; color: var(--text-secondary); }
.mx-card .tags { display: flex; gap: 6px; flex-wrap: wrap; }

.modal-list {
  background: var(--sunken);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 12px;
  max-height: 220px; overflow-y: auto;
}

.modal-list div { padding: 2px 0; }

.modal .field { grid-template-columns: 130px 1fr; }

.warnline {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-weight: 500;
}

.pwpreview {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  color: var(--text);
}

/* progress */

.progress {
  height: 6px; border-radius: 3px;
  background: var(--divider);
  overflow: hidden;
}

.progress > div {
  height: 100%; width: 0;
  background: var(--accent);
  transition: width 200ms ease;
}

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }

.preset {
  font: inherit;
  padding: 7px 13px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-strong);
  background: var(--elevated);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.preset small { display: block; font-size: 11px; opacity: 0.75; font-weight: 400; }

.when {
  background: var(--sunken);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  font-size: 13px;
}

.when strong { color: var(--text); }

.modal input[type=date], .modal input[type=time] {
  font: inherit;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-strong);
  background: var(--content);
  color: var(--text);
  -webkit-user-select: text; user-select: text;
}

#keyCard .section-label { margin-bottom: 0; }

#keyFound[hidden], #keyFields[hidden] { display: none; }

#authCard .keypath { color: var(--text); }

#keyCard[hidden] { display: none; }

.folderrow .field { grid-template-columns: 130px 1fr; }

.folderrow input[type=text] {
  font: inherit; font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-strong);
  background: var(--content); color: var(--text);
  -webkit-user-select: text; user-select: text;
}

/* ---------- the Sage indicator (the toolbar pill, and its details) ---------- */

.sagechip {
  font: inherit; font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 11px 0 9px;
  border-radius: 999px; border: 0.5px solid var(--border);
  background: var(--elevated); color: var(--text-secondary);
  cursor: pointer; white-space: nowrap;
}
.sagechip:hover { color: var(--text); background: var(--row-hover); }
.sagechip .sdot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--text-tertiary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-tertiary) 22%, transparent);
}
.sagechip .slabel { font-weight: 600; color: var(--text); }
.sagechip.ok .sdot    { background: var(--ok);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.sagechip.amber .sdot { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
.sagechip.bad .sdot   { background: var(--warn);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }

.sagepop {
  position: fixed; z-index: 40; width: 330px;
  background: var(--elevated); color: var(--text);
  border: 0.5px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.18), var(--shadow-sm);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.sagepop .phead { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sagepop .phead .badge { margin-left: auto; }
.sagepop dl { display: grid; grid-template-columns: 96px 1fr; gap: 5px 10px; font-size: 12px; }
.sagepop dt { color: var(--text-tertiary); }
.sagepop dd { color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.sagepop .pnote { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.45; }
.sagepop .actions { justify-content: flex-end; }

/* ==========================================================================
   Refresh of 2026-09-24 (the canvas "HTE Apps UI refresh"). Later rules win,
   so this block restyles what is above it: the tabs live in the title bar,
   the paragraph under a title is behind an (i), the status card is one line,
   rows carry a second line instead of an e-mail column, the buttons that act
   on a selection sit in a bar that follows it, and the activity box is one
   line that opens. The shared page code (common.js: wireRefresh) does the
   small DOM work these rules assume.
   ========================================================================== */
:root {
  --accent: #0a66e8;
  --accent-hover: #0854c0;
  --accent-soft: rgba(10,102,232,0.10);
  --window: #f2f2f4;
  --toolbar: rgba(255,255,255,0.92);
  --sunken: #f7f7f8;
  --selected: rgba(10,102,232,0.07);
  --sent: #5f6b7a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3b8dff;
    --accent-hover: #5ea1ff;
    --accent-text: #0b1b33;
    --accent-soft: rgba(59,141,255,0.16);
    --window: #1c1c1e;
    --toolbar: rgba(36,36,39,0.92);
    --content: #242427;
    --elevated: #2c2c2f;
    --sunken: #1b1b1d;
    --selected: rgba(59,141,255,0.12);
    --sent: #9aa3ad;
    --relaunch-bg: #3b8dff; --relaunch-fg: #0b1b33; --relaunch-hover: #5ea1ff;
  }
}

/* --- the title bar: lights · name · tabs · status cluster ------------------ */
.toolbar { gap: 14px; padding: 0 14px 0 14px; }
.win-title { color: var(--text-secondary); white-space: nowrap; }
.toolbar .tabstrip {
  margin: 0 auto; padding: 3px; gap: 2px;
  background: var(--sunken); border: 0.5px solid var(--border); border-radius: 8px;
  align-items: center;
}
.toolbar .tab { padding: 4px 12px; font-size: 13px; border-radius: 6px; font-weight: 500; }
.toolbar .tab.active { background: var(--elevated); box-shadow: var(--shadow-sm); font-weight: 600; }
.toolbar .tab.active::before, .toolbar .tab.active::after { display: none; }
.toolbar .tab .count {
  margin-left: 6px; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums;
}
.toolbar .tab .count:empty { display: none; }
.toolbar-right { align-items: center; }
.toolbar-right .relaunch { margin: 0; height: 28px; padding: 0 12px; font-size: 12px; }
body.framed .toolbar .tab { padding: 3px 10px; }

/* --- the page: title row with the (i), no paragraph ------------------------ */
.content { background: var(--window); padding: 16px 24px 0; gap: 12px; }
.pagehead { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.pagehead h1 { font-size: 20px; }
.pagehead .subtitle { display: none; }
.pagehead .seg, .pagehead .search, .pagehead .btn { margin-left: 0; }
.pagehead .spacer { margin-left: auto; }
.infobtn {
  width: 20px; height: 20px; border-radius: 50%; padding: 0; flex: none;
  border: 0.5px solid var(--border-strong); background: transparent; color: var(--text-secondary);
  font: 700 11px/1 inherit; font-family: inherit; display: inline-flex; align-items: center; justify-content: center;
}
.infobtn:hover { background: var(--row-hover); color: var(--text); }
.infopop {
  position: fixed; z-index: 40; width: 420px; max-width: calc(100vw - 40px);
  background: var(--elevated); color: var(--text-secondary); line-height: 1.5;
  border: 0.5px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.18), var(--shadow-sm); padding: 12px 14px;
}
.infopop[hidden] { display: none; }

/* --- one-line status strip (the "weekrow" of every program) ---------------- */
.weekrow, .strip {
  display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 4px 12px;
  background: var(--elevated); border: 0.5px solid var(--border); border-radius: var(--radius-md);
  font-size: 12.5px; color: var(--text-secondary);
}
.weekrow .weektext { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.weekrow .weekname { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.weekrow .weeknote { font-size: 12.5px; color: var(--text-secondary); }
.weekrow .weeknote:empty { display: none; }
.weekrow .linkbtn { color: var(--accent); }
/* "Earlier" is for the rare case; Settings → Advanced brings it back. */
#sinceSeg [data-since="earlier"] { display: none; }
body.show-earlier #sinceSeg [data-since="earlier"] { display: inline-flex; }

/* --- cards, empty states, segments ---------------------------------------- */
.card { background: var(--elevated); }
.empty { background: var(--elevated); border-style: dashed; padding: 26px; }
.empty-icon { font-size: 22px; }
.seg .n { font-variant-numeric: tabular-nums; }

/* --- tables ------------------------------------------------------------------ */
.tablewrap { max-height: 60vh; background: var(--elevated); }
thead th { padding: 8px 10px; letter-spacing: 0.04em; }
tbody td { padding: 6px 10px; height: 42px; }
tbody tr.excluded td, tbody tr.locked td { color: var(--text-tertiary); }
tbody tr.locked { background: transparent; }
tbody tr.excluded:hover, tbody tr.locked:hover { background: var(--row-hover); }
tbody td.two { line-height: 1.25; }
tbody td.two .sub {
  display: block; color: var(--text-secondary); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
tbody tr.excluded td.two .sub, tbody tr.locked td.two .sub { color: var(--text-tertiary); }
/* The little "+ cc / + card / + relevo" pills show on the row under the pointer, not on every row. */
tbody td .pills { opacity: 0; transition: opacity 80ms ease; }
tbody tr:hover td .pills, tbody tr:focus-within td .pills, tbody td .pills:has(.own) { opacity: 1; }
tbody td.mailcell .pills { display: inline-flex; gap: 4px; margin: 0 0 0 8px; vertical-align: middle; }
.check { width: 16px; height: 16px; border-radius: 4px; }
/* Status: a dot and a word, instead of a coloured capsule. Tags that name
   things (job, weeks, auto) keep their capsule in the program's own sheet. */
.badge { background: transparent !important; padding: 0; color: var(--text-secondary); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); flex: none; }
.badge.ok::before { background: var(--ok); }
.badge.amber::before { background: var(--amber); }
.badge.warn::before { background: var(--warn); }
.badge.sent::before { background: var(--text-tertiary); }
.badge.ok, .badge.amber, .badge.warn { color: var(--text); }
.badge.job, .badge.auto, .badge.credit, .badge.mini { background: var(--sunken) !important; padding: 1px 7px; border-radius: 5px; font-size: 11px; color: var(--text-secondary); }
.badge.job::before, .badge.auto::before, .badge.credit::before, .badge.mini::before { display: none; }

/* --- the bar that follows the selection ---------------------------------------- */
.actionbar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; min-height: 52px;
  margin: 4px -24px 0; padding: 8px 16px;
  background: var(--elevated); border-top: 0.5px solid var(--border);
}
.actionbar .selbar { gap: 8px; }
.actionbar .count {
  background: transparent; color: var(--text); padding: 0; font-weight: 600; font-size: 13px;
}
.actionbar .count .amt { color: var(--text-secondary); font-weight: 500; margin-left: 8px; font-variant-numeric: tabular-nums; }
.actionbar .hint { font-size: 12px; }
.actionbar .btn.ghost, .actionbar .btn.quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--text-secondary); }
.actionbar .btn.ghost:hover:not(:disabled), .actionbar .btn.quiet:hover:not(:disabled) { background: var(--row-hover); color: var(--text); }
.actionbar .spacer { margin-left: auto; }
.actionbar[hidden] { display: none; }
/* With a short list the bar still sits at the foot: the panes grow, the bar takes the slack. */
.content > .pane, .pane > .pane { flex: 1 1 auto; }
.actionbar { margin-top: auto; }

/* --- activity: the footer's line stands for the box; "Show log" opens it ---- */
.statusbar { padding: 6px 16px; min-height: 30px; }
.statusbar .footnote::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-tertiary); margin-right: 8px; vertical-align: 1px;
}
.statusbar .footnote.good::before { background: var(--ok); }
.statusbar .footnote.bad::before { background: var(--warn); }
.statusbar.busy .footnote::before { background: var(--accent); }
.statusbar .footnote { color: var(--text-secondary); }
.statusbar .footnote.good, .statusbar .footnote.bad { color: var(--text-secondary); }
.statusbar .atoggle { color: var(--accent); background: none; border: 0; font: inherit; padding: 0 0 0 12px; white-space: nowrap; margin-left: auto; }
.statusbar .spacer ~ .atoggle { margin-left: 0; }
.statusbar .atoggle[hidden] { display: none; }
.actbox { position: sticky; bottom: 0; z-index: 2; margin: 0 -24px; background: var(--sunken); border-top: 0.5px solid var(--border); padding: 8px 16px 10px; }
.actbox .section-label { display: none; }
.actbox .activity { border: 0; border-radius: 0; background: transparent; padding: 0; height: 140px; }
.actbox.folded { display: none; }
.content:has(.actbox:not(.folded)) .actionbar { bottom: 159px; }

/* --- Windows: the shell draws no chrome of ours; keep the same proportions ------ */
body.framed .content { padding-top: 14px; }

/* --- Settings: a rail of short pages; the Save row at the foot ---------------- */
/* flex-shrink 0: a tall page (Job invoices with its employee table) must push the
   Save bar down, not be squeezed to the window and paint through the bar. */
.ssplit { display: flex; gap: 20px; align-items: flex-start; flex: 1 0 auto; }
.srail { width: 190px; flex: none; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.srail a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--text-secondary); font-size: 13px; text-decoration: none; }
.srail a:hover { background: var(--row-hover); color: var(--text); }
.srail a.on { background: var(--elevated); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.smain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.smain > [data-group][hidden] { display: none; }
#settingsBar { margin-top: auto; }

/* --- the Machines matrix (Settings → Updates → Machines) --------------------------- */
.mx-wrap { max-height: 56vh; overflow: auto; border: 0.5px solid var(--border); border-radius: var(--radius-md); }
.mx { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.mx th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); padding: 7px 10px; background: var(--sunken); border-bottom: 0.5px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: static; }
.mx td { padding: 8px 10px; border-bottom: 0.5px solid var(--divider); vertical-align: top; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 0; height: auto; }
.mx tr:last-child td { border-bottom: 0; }
.mx td.m { font-weight: 600; }
.mx td.m span { display: block; font-weight: 400; color: var(--text-tertiary); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.mx td.none, .mx td.dim { color: var(--text-tertiary); }
.mx .cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.mx .cell .vtag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-flex; }
.mx .cell .app { font-size: 11.5px; color: var(--text-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx .cell .app.old { color: var(--accent); }
.mx .cell .app.warn { color: var(--amber); }

/* The matrix wants the width: the wide dialog grows with the window. */
.modal.wide { width: min(1180px, calc(100vw - 60px)); }

.btn { white-space: nowrap; }

/* --- Settings cards as sketched: a title row, label · value · hint rows, switches -- */
.card .section-label { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); margin-bottom: 2px; }
.cardhead { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.cardhead h2 { font-size: 14px; font-weight: 600; margin: 0; }
.cardhead .spacer { margin-left: auto; }
.srow { display: flex; align-items: center; gap: 12px; min-height: 30px; flex-wrap: wrap; }
.srow > label:first-child { width: 170px; flex: none; color: var(--text-secondary); font-size: 12.5px; }
.srow .hint { flex: 1 1 200px; min-width: 0; }
.srow select { font: inherit; padding: 5px 9px; border-radius: var(--radius-sm); border: 0.5px solid var(--border-strong); background: var(--content); color: var(--text); }
.srow .keypath { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch { position: relative; width: 34px; height: 20px; flex: none; display: inline-block; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 10px; background: var(--text-tertiary); transition: background 120ms; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 120ms; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { left: 16px; }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The old check rows read as switches too. */
.checkrow input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 10px; background: var(--text-tertiary); position: relative; flex: none; margin: 0; cursor: pointer; transition: background 120ms; }
.checkrow input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 120ms; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.checkrow input[type=checkbox]:checked { background: var(--accent); }
.checkrow input[type=checkbox]:checked::after { left: 16px; }
.checkrow { align-items: center; }
#machinesBody .mx-wrap { max-height: none; }

/* --- Group rows inside a list (CSRs by state, weeks by job) ------------------------- */
tbody tr.group td { height: 30px; padding: 4px 10px; background: var(--sunken); color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
tbody tr.group td .n { margin-left: 8px; color: var(--text-tertiary); font-weight: 500; letter-spacing: 0; text-transform: none; }
tbody tr.group:hover { background: transparent; }

/* --- Notices in the page (an interrupted send, invoices without a vendor) ----------- */
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--amber) 14%, transparent); font-size: 12.5px; line-height: 1.45; }
.notice.info { background: var(--accent-soft); }
.notice.bad { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.notice b { font-weight: 600; }
.notice .acts { margin-left: auto; display: flex; gap: 6px; flex: none; }
.notice[hidden] { display: none; }
.notice .modal-list { margin-top: 6px; max-height: 120px; }

/* --- The count in the bar: "9 selected · $16,905.75" ------------------------------ */
.actionbar .count .amt { font-weight: 500; }

/* ==========================================================================
   Second pass of 2026-09-24: every tab against its board. What the first
   block left as it was is brought to the sketches here - the title bar's
   cluster, the footer as the activity line with the drawer under it, the
   Settings rail with its icons and the group's name as the page title, the
   strip as one line with a dot, chips for orders, tiles, and the rows a
   selection tints.
   ========================================================================== */

/* --- title bar: name · tabs · Sage chip · relaunch pill · the program's button --- */
.toolbar-right { flex: none; gap: 8px; margin-left: auto; }
.toolbar .tabstrip { flex: none; }
.win-title { flex: 0 1 auto; min-width: 40px; overflow: hidden; text-overflow: ellipsis; }
.toolbar-right > * { order: 3; }
.toolbar-right .sagechip { order: 1; }
.toolbar-right .relaunch {
  order: 2; height: 26px; padding: 0 12px; margin: 0; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.toolbar-right .relaunch::before { background: var(--accent); opacity: 1; }
.toolbar-right .relaunch:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.sagechip .swhen { font-weight: 400; color: var(--text-secondary); }
.sagechip .swhen:empty { display: none; }

/* --- the strip: a dot, a bold count, the rest in a line; controls at the right end --- */
.strip, .weekrow { gap: 10px; }
.ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); flex: none; display: inline-block; }
.ldot.ok { background: var(--ok); }
.ldot.warn, .ldot.amber { background: var(--amber); }
.ldot.bad { background: var(--warn); }
.ldot.busy, .ldot.new { background: var(--accent); }
.ldot.big { width: 18px; height: 18px; }
.strip b, .weekrow b { color: var(--text); font-weight: 600; }
.strip .sep { width: 0.5px; align-self: stretch; margin: 6px 0; background: var(--border-strong); flex: none; }
.strip .text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .text.wrap { white-space: normal; }
.strip a, .strip .linkbtn, .weekrow .linkbtn, .pagehead .linkbtn {
  color: var(--accent); background: none; border: 0; font: inherit; padding: 0; cursor: pointer; white-space: nowrap;
}
.strip .spacer, .weekrow .spacer { margin-left: auto; }
.strip .seg, .weekrow .seg, .strip .search { margin-left: 0; flex: none; }
.strip .pager, .weekrow .pager { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.strip .pager .cur, .weekrow .pager .cur { font-weight: 600; color: var(--text); padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.strip .pager .btn, .weekrow .pager .btn { width: 26px; height: 26px; padding: 0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }

/* --- the page title row: segments, ghost links, the search with its glass ------------ */
.pagehead .btn.ghost, .pagehead .btn.link {
  border-color: transparent; background: transparent; box-shadow: none; color: var(--text-secondary);
}
.pagehead .btn.ghost:hover, .pagehead .btn.link:hover { background: var(--row-hover); color: var(--text); }
.pagehead .legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
.pagehead .legend .ldot { width: 7px; height: 7px; }
.content .search input {
  padding-left: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8a8e' stroke-width='1.6' stroke-linecap='round'><circle cx='7' cy='7' r='4.2'/><path d='M10.2 10.2 13.5 13.5'/></svg>");
  background-repeat: no-repeat; background-position: 10px center; background-size: 14px 14px;
}

/* --- tables: the selection tints its rows; orders and ids in chips ----------------- */
tbody tr:has(> td:first-child input[type=checkbox]:checked) { background: var(--selected); }
tbody tr:has(> td:first-child input[type=checkbox]:checked):hover { background: color-mix(in srgb, var(--accent) 11%, var(--elevated)); }
.po, .idchip {
  display: inline-block; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px;
  padding: 1px 6px; border-radius: 5px; border: 0.5px solid var(--border-strong); background: var(--sunken);
  color: var(--text); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.po.na { color: var(--text-tertiary); border-style: dashed; background: transparent; }
.po.new, .idchip.new { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
td.mono, .mono { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
tbody tr.sent td, tbody tr.done td { color: var(--text-tertiary); }
tbody tr.sent td.two .sub, tbody tr.done td.two .sub { color: var(--text-tertiary); }
tbody td.act a, tbody td .rowlink { color: var(--accent); }
tbody td .rowlink.dim { color: var(--text-tertiary); }
tbody tr:hover td .rowlink.dim { color: var(--accent); }
/* A thin progress bar in a cell: blue for the part billed, red past the end, green when done. */
.bar { display: inline-block; width: 100%; max-width: 150px; height: 5px; border-radius: 3px; background: var(--sunken); border: 0.5px solid var(--border); overflow: hidden; vertical-align: middle; }
.bar i { display: block; height: 100%; background: var(--accent); }
.bar.over i { background: var(--warn); width: 100% !important; }
.bar.done i { background: var(--ok); }
.bar.unknown { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--border) 4px 5px); }

/* --- tiles: a label, a value with a ring, a line under it (the Bridge, Leave) ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tile { background: var(--elevated); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 11px 14px 12px; min-width: 0; }
.tile .tl { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.tile .tv { font-size: 17px; font-weight: 700; margin-top: 3px; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .tv .ring { width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--text-tertiary); flex: none; }
.tile .tv .ring.ok { border-color: var(--ok); }
.tile .tv .ring.warn { border-color: var(--amber); }
.tile .tv .ring.bad { border-color: var(--warn); }
.tile .ts { font-size: 12px; color: var(--text-secondary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- the bar that follows the selection: one line, never a stack ------------------------ */
.actionbar .count, .actionbar .sum { white-space: nowrap; flex: none; }
.actionbar .count .why, .actionbar .hint, .actionbar .note {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; color: var(--text-tertiary);
}
.actionbar .sender { display: none; }
.actionbar .btn.link { border-color: transparent; background: transparent; box-shadow: none; color: var(--text-secondary); }
.actionbar .btn.link:hover:not(:disabled) { background: var(--row-hover); color: var(--text); }

/* --- the footer is the activity line; the drawer opens under it ---------------------------- */
.statusbar { gap: 10px; }
.statusbar #statusBits { display: none; }
.statusbar > .spacer { display: none; }
.statusbar .footnote { flex: 1 1 auto; max-width: none; min-width: 0; margin-right: auto; color: var(--text-secondary); }
.statusbar .footnote b { font-weight: 600; color: var(--text); }
.statusbar .footnote .stamp { color: var(--text-tertiary); font-variant-numeric: tabular-nums; margin-left: 8px; }
.statusbar .footnote:empty::before { display: none; }
.statusbar .atoggle { margin-left: 0; padding-left: 0; }
.statusbar .flink { color: var(--accent); white-space: nowrap; }
body > .actbox { position: static; margin: 0; flex: none; background: var(--sunken); border-top: 0.5px solid var(--border); padding: 8px 20px 10px; }
body > .actbox .activity { height: 132px; }
body > .actbox.folded { display: none; }
.content:has(.actbox:not(.folded)) .actionbar { bottom: 0; }
/* The status bits that used to sit in the footer live in the list they describe. */
.pagehead .bits, .strip .bits { display: inline-flex; gap: 8px; align-items: center; color: var(--text-tertiary); font-size: 12px; min-width: 0; }
.pagehead .bits .dot, .strip .bits .dot { opacity: 0.5; }

/* --- Settings: icons in the rail, the group's name as the title, hints at the right end ----- */
.srail { width: 186px; gap: 2px; }
.srail a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; }
.srail a svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: 0.85; }
.srail a.on svg { opacity: 1; }
.pagehead .grouphint { color: var(--text-secondary); font-size: 13px; font-weight: 400; margin-left: 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagehead #settingsHeadActs { display: inline-flex; gap: 8px; margin-left: auto; align-items: center; }
.pagehead #settingsHeadActs:empty { display: none; }
.cardhead.lifted { display: none; }
.card .srow > * + .hint:last-child:not(.l) { margin-left: auto; flex: 0 1 auto; text-align: right; max-width: 48%; }
.card .srow > .switch + .hint:last-child, .card .srow > .seg + .hint:last-child { margin-left: 0; text-align: left; flex: 1 1 200px; max-width: none; color: var(--text-secondary); }
.card .srow .keypath.hint { max-width: 60%; }
.srow .field.mono, .srow .box { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; padding: 5px 9px; border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--content); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .cardhead .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The version pills in the Machines matrix carry their colour in the pill, not a dot (the board). */
.vtag::before { display: none; }
.vtag { color: var(--text); }
.vtag.ok { color: #1f6b3a; }
.vtag.behind { color: #7a5200; }
.vtag.oldapp { color: var(--accent); }
.vtag.quiet { color: var(--text-secondary); }
@media (prefers-color-scheme: dark) { .vtag.ok { color: #7fd39a; } .vtag.behind { color: #f2c46d; } }
.mx-sum .n { display: none; }
/* The title in the bar keeps its name; the tabs give a little. */
.toolbar .tab { padding: 4px 10px; }
.win-title { min-width: 120px; }
/* A status never breaks or clips: the cell takes the words' width. */
.badge { white-space: nowrap; }
tbody td:has(> .badge:first-child) { white-space: nowrap; }

/* ==========================================================================
   Dialogs, direction A (2026-09-24, board "Dialogs — A · icon sheet").
   A tinted icon says what kind of dialog it is; the title and its text sit
   beside it; forms and wide ones run their body the full width under it;
   buttons bottom right, one primary, a quiet extra bottom left.
   ========================================================================== */
.modal.dlg {
  width: 480px; max-width: calc(100vw - 60px); max-height: calc(100vh - 80px);
  background: var(--elevated); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.14);
  padding: 20px 20px 16px;
  display: grid; grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 6px;
}
@media (prefers-color-scheme: dark) {
  .modal.dlg { box-shadow: 0 18px 48px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.10); }
}
.modal.dlg.full { width: 540px; }
.modal.dlg.lg { width: 600px; }
.modal.dlg.xl { width: min(1180px, calc(100vw - 60px)); }
.modal.dlg.wide { width: min(1000px, calc(100vw - 60px)); }
.modal.dlg > .mic { grid-column: 1; grid-row: 1 / span 2; align-self: start;
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft, rgba(10,102,232,0.10)); color: var(--accent); }
.modal.dlg > .mic svg { width: 19px; height: 19px; }
.modal.dlg.k-notice > .mic { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.modal.dlg.k-ok > .mic { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.modal.dlg.k-bad > .mic, .modal.dlg.k-danger > .mic { background: color-mix(in srgb, var(--warn) 13%, transparent); color: var(--warn); }
.modal.dlg > .modal-title { grid-column: 2; grid-row: 1; align-self: start; padding-top: 7px;
  font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.modal.dlg.haslead > .modal-title { padding-top: 0; }
.modal.dlg > .modal-lead { grid-column: 2; grid-row: 2; color: var(--text-secondary); line-height: 1.5; }
.modal.dlg > .modal-lead:empty { display: none; }
.modal.dlg > .modal-lead b, .modal.dlg > .modal-lead strong { color: var(--text); font-weight: 600; }
.modal.dlg > .modal-body { grid-column: 2; grid-row: 2 / span 2; min-height: 0; overflow-y: auto;
  color: var(--text-secondary); line-height: 1.5; }
.modal.dlg.full > .modal-body { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
.modal.dlg > .modal-body:empty { display: none; }
.modal.dlg > .modal-body b, .modal.dlg > .modal-body strong { color: var(--text); font-weight: 600; }
.modal.dlg > .modal-actions { grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center;
  justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal.dlg > .modal-actions:empty { display: none; }
.modal.dlg > .modal-actions .left { margin-right: auto; display: flex; align-items: center; gap: 8px; }
.modal.dlg > .modal-actions .btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.modal.dlg > .modal-actions .btn.ghost:hover:not(:disabled) { background: var(--sunken); color: var(--text); }
.modal.dlg .btn.danger { background: var(--warn); border-color: transparent; color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .modal.dlg .btn.danger { color: #1c0d0b; } }
.modal.dlg .btn:focus { outline: none; }
.modal.dlg .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft, rgba(10,102,232,0.18)); }
.modal.dlg .btn.primary:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.modal.dlg > .modal-actions .danger { margin-right: 0; }
.modal.dlg > .modal-actions .left .danger { margin-right: 0; }

/* The reason a machine gave, in its own box. */
.modal.dlg .mdetails { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
  line-height: 1.5; color: var(--text-secondary); background: var(--sunken); border: 0.5px solid var(--border);
  border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }

/* The shared pieces dialog bodies are built from, in the same style. */
.modal.dlg .field { grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; margin: 0 0 8px; }
.modal.dlg .field > label { color: var(--text-secondary); font-weight: 400; font-size: 12.5px; }
.modal.dlg .field input[type=text], .modal.dlg .field input[type=password], .modal.dlg .field input[type=email],
.modal.dlg .field input[type=date], .modal.dlg .field input[type=time], .modal.dlg .field input[type=number], .modal.dlg .field input:not([type]),
.modal.dlg .field select, .modal.dlg .field textarea, .modal.dlg input.inp, .modal.dlg select.inp {
  height: 30px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--content);
  padding: 0 9px; font: inherit; font-size: 13px; color: var(--text); box-sizing: border-box; }
.modal.dlg .field textarea { height: auto; padding: 6px 9px; }
.modal.dlg .field input:focus, .modal.dlg .field select:focus, .modal.dlg .field textarea:focus, .modal.dlg input.inp:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(10,102,232,0.12)); }
.modal.dlg .field-hint { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }
.modal.dlg .field + .field-hint, .modal.dlg .field-hint.under { margin: -4px 0 8px 162px; }
.modal.dlg .hint { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.modal.dlg .section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.modal.dlg .warnline { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--text);
  border-radius: 8px; padding: 8px 11px; font-weight: 400; font-size: 12.5px; margin-bottom: 10px; line-height: 1.45; }
.modal.dlg .modal-list { background: var(--sunken); border: 0.5px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 12px; }
.modal.dlg .progress { height: 6px; border-radius: 3px; background: var(--sunken); border: 0.5px solid var(--border); }
.modal.dlg .progress > div { border-radius: 3px; }
.modal.dlg code { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; background: var(--sunken); border-radius: 4px; padding: 1px 4px; }

/* New pieces the refreshed dialogs are drawn with. */
.modal.dlg .dl-grp { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.modal.dlg .dl-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.modal.dlg .dl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.modal.dlg .dl-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal.dlg .dl-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--content); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.modal.dlg .dl-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong)); }
.modal.dlg .dl-card.on { border-color: var(--accent); background: var(--accent-soft, rgba(10,102,232,0.10)); box-shadow: 0 0 0 1px var(--accent) inset; }
.modal.dlg .dl-card:disabled { opacity: 0.5; cursor: default; }
.modal.dlg .dl-card .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal.dlg .dl-card .t b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.modal.dlg .dl-card .t span { font-size: 11.5px; color: var(--text-secondary); line-height: 1.35; }
.modal.dlg .dl-pg { flex: none; width: 30px; height: 36px; position: relative; }
.modal.dlg .dl-pg i { position: absolute; width: 22px; height: 28px; border-radius: 3px; background: var(--elevated); border: 1px solid var(--border-strong); }
.modal.dlg .dl-pg i:nth-child(1) { left: 0; top: 0; }
.modal.dlg .dl-pg i:nth-child(2) { left: 6px; top: 6px; border-color: var(--ok); }
.modal.dlg .dl-pg i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 6px; height: 10px;
  background: repeating-linear-gradient(to bottom, var(--border-strong) 0 1.5px, transparent 1.5px 4px); }
.modal.dlg .dl-pg i:nth-child(2)::after { background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ok) 60%, transparent) 0 1.5px, transparent 1.5px 4px); }
.modal.dlg .dl-seg { display: flex; padding: 3px; gap: 2px; background: var(--sunken); border: 0.5px solid var(--border); border-radius: 8px; }
.modal.dlg .dl-seg button { flex: 1; border: 0; background: transparent; padding: 5px 10px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.modal.dlg .dl-seg button.on { background: var(--elevated); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.modal.dlg .dl-seg button:disabled { color: var(--text-tertiary); cursor: default; }
.modal.dlg .dl-seg.fit { display: inline-flex; }
.modal.dlg .dl-seg.fit button { flex: none; }
.modal.dlg .dl-note { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px;
  background: var(--accent-soft, rgba(10,102,232,0.10)); font-size: 12px; line-height: 1.45; color: var(--text); }
.modal.dlg .dl-note.amber { background: color-mix(in srgb, var(--amber) 14%, transparent); }
.modal.dlg .dl-note.bad { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.modal.dlg .dl-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--accent); }
.modal.dlg .dl-facts { display: flex; gap: 20px; margin: 4px 0 8px; }
.modal.dlg .dl-facts div { display: flex; flex-direction: column; }
.modal.dlg .dl-facts .v { font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.modal.dlg .dl-facts .k { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.modal.dlg .dl-notes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.modal.dlg .dl-notes .n { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.45; }
.modal.dlg .dl-notes .n i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-tertiary); position: relative; top: -1px; }
.modal.dlg .dl-notes .n i.ok { background: var(--ok); } .modal.dlg .dl-notes .n i.warn { background: var(--amber); }
.modal.dlg .dl-notes .n i.bad { background: var(--warn); } .modal.dlg .dl-notes .n i.info { background: var(--accent); }
.modal.dlg .dl-ids { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text); }
.modal.dlg .dl-sum { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); }
.modal.dlg .dl-sum b { color: var(--text); font-weight: 600; }
.modal.dlg .dl-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: var(--text-tertiary); }
.modal.dlg .dl-dot.ok { background: var(--ok); } .modal.dlg .dl-dot.warn { background: var(--amber); } .modal.dlg .dl-dot.bad { background: var(--warn); }
.modal.dlg .dl-conf { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.modal.dlg .dl-conf.amber { color: var(--amber); } .modal.dlg .dl-conf.red { color: var(--warn); }
.modal.dlg .kbd { display: inline-block; min-width: 18px; padding: 0 4px; height: 17px; line-height: 16px; text-align: center;
  border: 1px solid var(--border-strong); border-radius: 4px; font-size: 10.5px; color: var(--text-secondary); background: var(--content); margin: 0 2px; }
.modal.dlg .dl-move { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.modal.dlg .dl-move .arrow { color: var(--text-tertiary); }
.modal.dlg .dl-folder { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; background: var(--sunken); border: 0.5px solid var(--border); min-width: 0; }
.modal.dlg .dl-folder span { font-size: 10.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.modal.dlg .dl-folder b { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; color: var(--text); }
.modal.dlg .dl-file { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px;
  background: var(--sunken); border: 0.5px solid var(--border); font-size: 12px; color: var(--text); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal.dlg .dl-progline { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.modal.dlg .dl-steps { display: flex; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--text-tertiary); }
.modal.dlg .dl-steps span { display: inline-flex; align-items: center; gap: 5px; }
.modal.dlg .dl-steps i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.modal.dlg .dl-steps .done { color: var(--ok); }
.modal.dlg .dl-steps .now { color: var(--text); font-weight: 600; }
.modal.dlg .dl-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modal.dlg .dl-row { display: flex; gap: 8px; align-items: center; }
.modal.dlg .dl-row input[type=date] { width: 150px; } .modal.dlg .dl-row input[type=time] { width: 110px; }
.modal.dlg .dl-verdict { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; margin-top: 4px;
  background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--text); font-size: 12.5px; }
.modal.dlg .dl-verdict.bad { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.modal.dlg .dl-verdict strong { font-weight: 600; }
/* Cards and switches drawn over plain radio buttons: the radio stays the
   value the code reads, the label is what is seen. */
.modal.dlg .dl-card input[type=radio], .modal.dlg .dl-card input[type=checkbox],
.modal.dlg .dl-seg input[type=radio] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.modal.dlg label.dl-card { position: relative; }
.modal.dlg .dl-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, rgba(10,102,232,0.10)); box-shadow: 0 0 0 1px var(--accent) inset; }
.modal.dlg .dl-card:has(input:disabled) { opacity: 0.5; cursor: default; }
.modal.dlg .dl-card:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft, rgba(10,102,232,0.18)); }
.modal.dlg .dl-seg label { flex: 1; position: relative; text-align: center; padding: 5px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.modal.dlg .dl-seg label:has(input:checked) { background: var(--elevated); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.modal.dlg .dl-seg label:has(input:disabled) { color: var(--text-tertiary); cursor: default; }
.modal.dlg .dl-seg label:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent-soft, rgba(10,102,232,0.25)); }
.modal.dlg .dl-foot { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.modal.dlg .dl-foot b { color: var(--text); font-weight: 600; }
/* Field rows (label · value), columns, and a page of text beside them. */
.modal.dlg .dl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.modal.dlg .dl-cols.paged { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; }
.modal.dlg .dl-cols.paged:has(> #poWorkBlock[hidden]) { grid-template-columns: minmax(0, 1fr) 320px; }
.modal.dlg .dl-fg { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; align-items: center; min-width: 0; }
.modal.dlg .dl-fg[hidden] { display: none; }
.modal.dlg .dl-fg > label { color: var(--text-secondary); font-size: 12.5px; }
.modal.dlg .dl-val { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.modal.dlg .dl-val .checkrow { gap: 8px; }
.modal.dlg .dl-sub { grid-column: 2; font-size: 11.5px; color: var(--text-secondary); margin-top: -4px; line-height: 1.4; }
.modal.dlg .dl-sub a { color: var(--accent); text-decoration: none; }
.modal.dlg .dl-sep { grid-column: 1 / -1; height: 1px; background: var(--divider); margin: 2px 0; }
.modal.dlg .dl-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
.modal.dlg .dl-head b { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.modal.dlg .dl-head span { font-size: 11.5px; color: var(--text-secondary); }
.modal.dlg .inp.s { width: 90px; } .modal.dlg .inp.m { width: 160px; } .modal.dlg .inp.w { width: 100%; max-width: 320px; }
.modal.dlg .inp.flag { border-color: color-mix(in srgb, var(--amber) 60%, transparent); background: color-mix(in srgb, var(--amber) 12%, var(--content)); }
.modal.dlg .dl-page { background: var(--sunken); border: 0.5px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; max-height: 520px; overflow: hidden; }
.modal.dlg .dl-page .ph { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-bottom: 0.5px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.modal.dlg .dl-page .ph b { color: var(--text); font-weight: 600; }
.modal.dlg .dl-page .spacer { flex: 1; }
.modal.dlg .dl-page pre { margin: 0; padding: 10px 12px; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; overflow: auto; }
.modal.dlg mark { background: var(--accent-soft, rgba(10,102,232,0.14)); color: var(--text); border-radius: 3px; padding: 0 2px; }
.modal.dlg mark.w { background: color-mix(in srgb, var(--amber) 22%, transparent); }
/* A list to tick from, with its own tick-all line. */
.modal.dlg .dl-pick { border: 0.5px solid var(--border); border-radius: 9px; overflow: hidden; }
.modal.dlg .dl-pick .ph { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: var(--sunken); border-bottom: 0.5px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.modal.dlg .dl-pick .ph b { color: var(--text); font-weight: 600; }
.modal.dlg .dl-pick .ph .spacer { flex: 1; }
.modal.dlg .dl-pick .rows { max-height: 300px; overflow: auto; }
.modal.dlg .dl-pick .pr { display: grid; grid-template-columns: 22px 110px minmax(0, 1fr) 130px; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border-bottom: 0.5px solid var(--divider); font-size: 12.5px; color: var(--text); cursor: pointer; }
.modal.dlg .dl-pick .pr:last-child { border-bottom: 0; }
.modal.dlg .dl-pick .pr .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal.dlg .dl-pick .pr .amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.modal.dlg .dl-pick .pr .amt.neg { color: var(--warn); }
.modal.dlg .linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
/* Radio rows. */
.modal.dlg .dl-radios { display: flex; flex-direction: column; gap: 2px; }
.modal.dlg .dl-radio { display: flex; align-items: flex-start; gap: 9px; padding: 6px 8px; border-radius: 7px; font-size: 12.5px; color: var(--text); cursor: pointer; position: relative; }
.modal.dlg .dl-radio input { position: absolute; opacity: 0; pointer-events: none; }
.modal.dlg .dl-radio .o { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none; margin-top: 1px; background: var(--content); box-sizing: border-box; }
.modal.dlg .dl-radio:has(input:checked) { background: var(--accent-soft, rgba(10,102,232,0.10)); }
.modal.dlg .dl-radio:has(input:checked) .o { border: 4.5px solid var(--accent); }
.modal.dlg .dl-radio:has(input:disabled) { opacity: 0.5; cursor: default; }
.modal.dlg .dl-radio:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent-soft, rgba(10,102,232,0.25)); }
.modal.dlg .dl-radio .t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.modal.dlg .dl-radio .t span { font-size: 11.5px; color: var(--text-secondary); }
.modal.dlg .dl-radio .n { margin-left: auto; padding-left: 8px; font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A big amount box. */
.modal.dlg .dl-amount { display: flex; align-items: center; gap: 8px; }
.modal.dlg .dl-amount .cur { font-size: 18px; color: var(--text-tertiary); }
.modal.dlg .dl-amount input { height: 40px; width: 210px; border-radius: 8px; border: 1px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(10,102,232,0.12)); background: var(--content); padding: 0 12px; font: inherit; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); outline: none; }
.modal.dlg .dl-file svg { width: 13px; height: 13px; color: var(--text-secondary); flex: none; }
.modal.dlg .dl-changes { border: 0.5px solid var(--border); border-radius: 8px; overflow: hidden; margin: 6px 0 4px; }
.modal.dlg .dl-changes .cr { display: grid; grid-template-columns: 96px 100px minmax(0, 1fr); gap: 8px; padding: 6px 10px; border-bottom: 0.5px solid var(--divider); font-size: 12px; align-items: baseline; color: var(--text); }
.modal.dlg .dl-changes .cr:last-child { border-bottom: 0; }
.modal.dlg .dl-changes .cr .f { color: var(--text-secondary); }
.modal.dlg .dl-changes s { color: var(--text-tertiary); }
.modal.dlg .bar { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--sunken); border: 0.5px solid var(--border); overflow: hidden; }
.modal.dlg .bar i { display: block; height: 100%; background: var(--accent); }
.modal.dlg .dl-ribbon { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.modal.dlg .dl-seg.xs button, .modal.dlg .dl-seg.xs label { padding: 2px 8px; font-size: 11.5px; }
/* Tick-box choices (the workbook comparison and others) as switch rows. */
.modal.dlg .bookchoices { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 12.5px; }
.modal.dlg .bookchoices label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; color: var(--text); cursor: pointer; }
.modal.dlg .bookchoices label:hover { background: var(--sunken); }
.modal.dlg .bookchoices input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 28px; height: 16px; border-radius: 8px; background: var(--text-tertiary); position: relative; flex: none; margin: 1px 0 0; cursor: pointer; transition: background 120ms; }
.modal.dlg .bookchoices input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left 120ms; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.modal.dlg .bookchoices input[type=checkbox]:checked { background: var(--accent); }
.modal.dlg .bookchoices input[type=checkbox]:checked::after { left: 14px; }
.modal.dlg .bookchoices input[type=radio] { margin-top: 2px; accent-color: var(--accent); }
.modal.dlg .bookchoices .field-hint { display: block; color: var(--text-secondary); margin-top: 1px; }
.modal.dlg .bookfacts { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
/* Tables inside a dialog: the kit's head row, hairlines, a rounded frame. */
.modal.dlg .sheetwrap { border: 0.5px solid var(--border); border-radius: 10px; overflow: auto; margin-top: 8px; background: var(--content); }
.modal.dlg table.compare, .modal.dlg table.sheetrows { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.modal.dlg table.compare th, .modal.dlg table.sheetrows th { position: sticky; top: 0; z-index: 1; background: var(--sunken); text-align: left; font-size: 11px;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); padding: 7px 10px; border-bottom: 0.5px solid var(--border); white-space: nowrap; }
.modal.dlg table.compare td, .modal.dlg table.sheetrows td { padding: 7px 10px; border-bottom: 0.5px solid var(--divider); color: var(--text); vertical-align: top; }
.modal.dlg table.compare tr:last-child td, .modal.dlg table.sheetrows tr:last-child td { border-bottom: 0; }
.modal.dlg .sheetproblems { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--amber) 13%, transparent); border-radius: 8px; padding: 8px 10px; }
.modal.dlg .capnote { font-size: 11px; color: var(--text-tertiary); }
.modal.dlg .modal-list .usedrow { padding: 4px 0; border-bottom: 0.5px solid var(--divider); }
.modal.dlg .modal-list .usedrow:last-child { border-bottom: 0; }
.modal.dlg .field > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.modal.dlg .field > span > .field-hint { flex-basis: 100%; }
.modal.dlg select.yearpick, .modal.dlg .field select { height: 30px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--content); padding: 0 8px; font: inherit; font-size: 13px; color: var(--text); }
.modal.dlg .field:not(:has(> label)) { grid-template-columns: minmax(0, 1fr); }
.modal.dlg .field:not(:has(> label)) > input { width: 100%; }
/* Candidate lists (which invoice, which vendor): rows to pick from. */
.modal.dlg .candlist { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.modal.dlg .candlist label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--content); color: var(--text); cursor: pointer; font-size: 12.5px; }
.modal.dlg .candlist label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, rgba(10,102,232,0.10)); }
.modal.dlg .candlist label.agrees { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.modal.dlg .candlist input { margin-top: 2px; accent-color: var(--accent); }
.modal.dlg .candlist .why { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.modal.dlg .pickrow { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; border-bottom: 0.5px solid var(--divider); font-size: 12.5px; color: var(--text); }
.modal.dlg .pickrow:last-child { border-bottom: 0; }
.modal.dlg .mono-id { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; }
.modal.dlg ul { margin: 8px 0 0 18px; padding: 0; color: var(--text); }
.modal.dlg li { margin: 2px 0; }
.modal.dlg > .modal-actions { flex-wrap: wrap; row-gap: 8px; }
.modal.dlg table.compare .num, .modal.dlg table.sheetrows .num { text-align: right; font-variant-numeric: tabular-nums; }
.modal.dlg .bar { max-width: none; }