/* Sovereign - the suite as one application.

   /sovereign-suite used to be a page of 122 links, each to a separate page
   with its own header, footer and way back. This is the program those pages
   were always parts of: a window with a tab strip, a sidebar that holds the
   whole suite, a start screen that takes a file and says which tools can
   open it, and every tool running inside it.

   Every colour here is a theme.css token, so the thirteen colourways and both
   modes follow without a line of their own. The only values written out are
   geometry. The page still works with no script: the tool index below is
   plain links, and the shell only appears once sovereign-app.js has built
   it (html.sv-live).

   Or once the code is on its way: theme.js marks <html data-pro-code=
   "loading"> in the head when there is a key to send, and the window takes
   its shape from that. sovereign-app.js arrives through pro-load.js at the
   foot of the page, so the first paint lands before it runs, and a shell
   laid out only by the script painted without its title bar and then
   dropped the whole page 46px (0.22 of the viewport, in settles.mjs). If
   the server refuses the key the attribute turns "refused", the application
   is hidden (theme.css), and none of this applies. */

html:is(.sv-live, [data-pro-code="loading"]), html:is(.sv-live, [data-pro-code="loading"]) body { height: 100%; overflow: hidden; }
html:is(.sv-live, [data-pro-code="loading"]) body { background: var(--paper); }

/* The corner badge says what the status bar already says, on top of it. */
html:is(.sv-live, [data-pro-code="loading"]) #ppBadge { display: none !important; }

.sv,
.sv-palette {
  --sv-bar: 49px;
  --sv-status: 28px;
  --sv-side: 280px;
  --sv-line: var(--rule);
  --sv-chrome: var(--paper-inset);
  --sv-hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --sv-press: color-mix(in srgb, var(--ink) 10%, transparent);
  --sv-r: 7px;
  --sv-ui: 13px;
  font-family: var(--font-sans);
  font-size: var(--sv-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- layout */

html:is(.sv-live, [data-pro-code="loading"]) .sv {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--sv-side) minmax(0, 1fr);
  grid-template-rows: var(--sv-bar) minmax(0, 1fr) var(--sv-status);
  grid-template-areas: "bar bar" "side main" "status status";
  background: var(--paper);
}
html:is(.sv-live, [data-pro-code="loading"]) .sv.sv-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
html:is(.sv-live, [data-pro-code="loading"]) .sv.sv-collapsed .sv-side { visibility: hidden; }

/* Without the script, the shell's own furniture has nothing to do. */
html:not(.sv-live):not([data-pro-code="loading"]) #sv .sv-bar,
html:not(.sv-live):not([data-pro-code="loading"]) #sv .sv-side,
html:not(.sv-live):not([data-pro-code="loading"]) #sv .sv-status,
html:not(.sv-live):not([data-pro-code="loading"]) #sv .sv-open,
html:not(.sv-live):not([data-pro-code="loading"]) #sv .sv-home-row { display: none; }

/* ----------------------------------------------------------------- title bar */

.sv-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 8px;
  background: var(--sv-chrome);
  border-bottom: 1px solid var(--sv-line);
  min-width: 0;
}

.sv-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 10px 0 6px;
  margin-right: 4px;
  border-radius: var(--sv-r);
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: 14px;
  letter-spacing: -0.01em;
  flex: none;
  transition: background-color var(--dur-2) var(--ease-standard);
}
.sv-brand:hover { background: var(--sv-hover); }
.sv-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: transparent;
  color: var(--paper);
  display: grid;
  place-items: center;
  flex: none;
}
.sv-mark svg { width: 14px; height: 14px; }
/* The family icon (brand.mjs), which carries its own field. */
.sv-mark img { display: block; width: 22px; height: 22px; }

.sv-iconbtn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--sv-r);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  flex: none;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.sv-iconbtn:hover { background: var(--sv-hover); color: var(--ink); }
.sv-iconbtn:active { background: var(--sv-press); }
.sv-iconbtn svg { width: 17px; height: 17px; }
.sv-iconbtn[aria-pressed="true"] { color: var(--accent-strong); }

/* Tabs. Home is always first and cannot be closed. */
.sv-tabs {
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-top: 7px;
}
.sv-tabs::-webkit-scrollbar { display: none; }

.sv-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  min-width: 0;
  max-width: 210px;
  padding: 0 8px 0 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  flex: 0 1 auto;
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.sv-tab:hover { background: var(--sv-hover); color: var(--ink); }
/* A tab somebody has just opened rises into the strip (sovereign-app.js
   marks it); the tabs that come back with the page do not. */
.sv-tab.sv-tab-in { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.sv-tab[aria-selected="true"] {
  background: var(--paper);
  border-color: var(--sv-line);
  color: var(--ink);
  margin-bottom: -1px;
  height: 39px;
  z-index: 1;
}
.sv-tab-label { overflow: hidden; text-overflow: ellipsis; }
.sv-tab-home { padding: 0 12px; flex: none; }
.sv-tab-home svg { width: 15px; height: 15px; }
.sv-tab .sv-gico { width: 18px; height: 18px; border-radius: 5px; }
.sv-tab .sv-gico svg { width: 12px; height: 12px; }
.sv-tab-x {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 5px;
  color: var(--ink-faint);
  flex: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.sv-tab:hover .sv-tab-x,
.sv-tab[aria-selected="true"] .sv-tab-x,
.sv-tab-x:focus-visible { opacity: 1; }
.sv-tab-x:hover { background: var(--sv-press); color: var(--ink); }
.sv-tab-x svg { width: 11px; height: 11px; }
/* While its tool is still loading, a tab's mark breathes by opacity alone:
   the site's one slow beat (--dur-sweep), and never a spinner. With motion
   switched down it runs once, which is to say it does not. */
.sv-tab.sv-busy .sv-gico { animation: sv-pulse var(--dur-sweep) var(--ease-standard) infinite; }
@keyframes sv-pulse { 50% { opacity: .45; } }

.sv-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  width: 260px;
  flex: 0 1 260px;
  min-width: 0;
  padding: 0 6px 0 10px;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r);
  background: var(--paper-raised);
  color: var(--ink-faint);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.sv-search:hover { border-color: var(--rule-strong); color: var(--ink-soft); }
.sv-search svg { width: 15px; height: 15px; flex: none; }
.sv-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  padding: 4px 5px;
  border: 1px solid var(--sv-line);
  border-radius: 4px;
  color: var(--ink-faint);
  background: var(--paper);
  flex: none;
}

/* ------------------------------------------------------------------ sidebar */

.sv-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sv-chrome);
  border-right: 1px solid var(--sv-line);
  overflow: hidden;
}

.sv-filter {
  position: relative;
  margin: 12px 12px 6px;
}
.sv-filter svg {
  position: absolute; left: 9px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}
.sv-filter input {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  padding: 0 30px 0 30px;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* iOS zooms anything smaller; scaled back below */
}
@media (hover: hover) and (pointer: fine) { .sv-filter input { font-size: var(--sv-ui); } }
.sv-filter input::placeholder { color: var(--ink-faint); }
.sv-filter input:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
.sv-filter .sv-kbd { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); }

.sv-nav { flex: 1; overflow-y: auto; padding: 4px 8px 16px; overscroll-behavior: contain; }
/* The Suite's sidebar has no find box of its own (the bar's search is the
   one search), so its list starts where the box was. */
.sv-side > .sv-nav:first-child { padding-top: 12px; }

.sv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.sv-item:hover { background: var(--sv-hover); color: var(--ink); }
.sv-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.sv-item > svg { width: 16px; height: 16px; flex: none; }
.sv-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  flex: none;
}

.sv-sect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 8px 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* A group: its mark, its name, its count, and its tools beneath. */
.sv-group { margin: 1px 0; }
.sv-group-head { font-weight: 500; color: var(--ink); gap: 9px; }
.sv-group-head .sv-gico { width: 20px; height: 20px; border-radius: 5px; }
.sv-group-head .sv-gico svg { width: 13px; height: 13px; }
.sv-group-head .sv-chev {
  width: 12px; height: 12px;
  color: var(--ink-faint);
  transition: transform var(--dur-2) var(--ease-standard);
  flex: none;
}
.sv-group[data-open="true"] .sv-chev { transform: rotate(90deg); }
/* A plain group: the chevron leads, in a mark's place, drawn in the ink of
   the rows round it; the services keep the only icons. */
.sv-group-plain .sv-chev { width: 22px; height: 12px; }
.sv-group-list { display: none; padding: 2px 0 6px; }
.sv-group[data-open="true"] .sv-group-list { display: block; }
/* A group opened by hand deals its tools out a step apart (sovereign-app.js
   marks it sv-opening as it opens); the sidebar is drawn again with every
   tab change, and a group that was already open stays still then. */
.sv-group.sv-opening .sv-group-list > * { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.sv-tool {
  padding-left: 36px;
  min-height: 28px;
  font-size: 12.5px;
  position: relative;
}
.sv-tool .sv-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--good);
  flex: none;
}

/* Group marks: the same hue and glyph the group wears on /sitemap and in
   the palette, lifted off the index this page already carries. */
.sv-gico {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--ico, var(--ink-faint));
  color: #fff;
  flex: none;
}
.sv-gico svg { width: 14px; height: 14px; }

.sv-empty-note { padding: 10px 8px; color: var(--ink-faint); font-size: 12px; line-height: 1.45; }

/* --------------------------------------------------------------------- main */

.sv-main {
  grid-area: main;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}
html:not(.sv-live):not([data-pro-code="loading"]) .sv-main { overflow: visible; }

.sv-view { position: absolute; inset: 0; display: none; }
.sv-view.sv-on { display: flex; flex-direction: column; }
html:not(.sv-live):not([data-pro-code="loading"]) .sv-home { position: static; display: block; }

/* ------------------------------------------------------------------ home */

.sv-home { overflow-y: auto; }
.sv-home-in {
  width: 100%;
  max-width: 1120px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 44px 40px 56px;
}
/* The start screen is not the page's to lay out: sovereign-app.js puts the
   services in it and moves the flagship beside the open panel, from what the
   Pro code carries. While that code is on its way the window's frame is
   drawn and its start screen is not, and then it arrives by fading only, as
   the Photo Editor's window does - nothing moves, so nothing is clicked in
   the wrong place while it settles. data-motion="none" (theme.css) ends the
   fade at once. The parts of the start screen are dealt in below (section
   "arriving"), each time it is brought forward. */
html[data-pro-code="loading"]:not(.sv-live) .sv-home-in { visibility: hidden; }
.sv-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sv-eyebrow i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.sv-home .sv-home-title {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sv-lead {
  margin: 10px 0 0;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* The open panel: one place to put a file. */
.sv-home-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 28px;
  align-items: start;
}
.sv-card {
  background: var(--paper-raised);
  border: 1px solid var(--sv-line);
  border-radius: 12px;
}
.sv-open {
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.sv-open-idle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  padding: 28px 30px;
}
.sv-open-glyph {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--sv-line);
  color: var(--ink);
  margin-bottom: 10px;
}
.sv-open-glyph svg { width: 22px; height: 22px; }
.sv-open h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.sv-open p { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; max-width: 440px; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sv-open-idle .ob-example { margin-top: 4px; }
.sv-open.sv-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.sv-btn {
  box-sizing: border-box; /* a link styled as a button measures as one */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--sv-r);
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.sv-btn:hover { background: var(--paper-inset); }
.sv-btn svg { width: 15px; height: 15px; }
/* The one that does the thing carries the accent, as it does in every
   other application. */
.sv-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sv-btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.sv-btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }

/* A file is in: what it is, and what can open it. */
.sv-file { display: none; flex-direction: column; min-height: 0; }
.sv-open.sv-has-file .sv-open-idle { display: none; }
/* The file's card fades in where the drop zone was, its type badge pops
   on the spring, and the tools that can open it are dealt below it. */
.sv-open.sv-has-file .sv-file { display: flex; --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
.sv-open.sv-has-file .sv-file-type { --os-fade: var(--dur-fade); animation: os-pop var(--dur-4) var(--ease-spring) backwards; }
.sv-file-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--sv-line);
}
.sv-file-type {
  width: 44px; height: 52px;
  border-radius: 6px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 7px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-soft);
  flex: none;
  text-transform: uppercase;
}
.sv-file-meta { flex: 1; min-width: 0; }
.sv-file-name { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-file-sub {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-matches { overflow-y: auto; max-height: 340px; padding: 6px; }
.sv-match-sect { padding: 10px 12px 4px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }

/* A row: the one shape every list in the app is made of. */
.sv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard);
}
.sv-row:hover, .sv-row.sv-hot { background: var(--sv-hover); }
.sv-row-text { flex: 1; min-width: 0; }
.sv-row-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-row-sub { display: block; margin-top: 1px; color: var(--ink-faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ink-faint);
  flex: none;
}
.sv-row .sv-go { width: 14px; height: 14px; color: var(--ink-faint); flex: none; opacity: 0; transition: opacity var(--dur-2) var(--ease-standard); }
.sv-row:hover .sv-go, .sv-row.sv-hot .sv-go { opacity: 1; }

/* The flagship: the Console, lifted out of the index into the start row.
   A card like the ones beside it, on the same paper and rule in light and
   dark, and told apart by what it says rather than by an inverted block. */
.sv-home-row .os-suite-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 22px 22px 20px;
  border-radius: 12px;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--sv-line);
  text-decoration: none;
  box-shadow: none;
  min-height: 0;
  transition: border-color var(--dur-2) var(--ease-standard);
}
.sv-home-row .os-suite-hero:hover { border-color: var(--rule-strong); }
.sv-home-row .os-suite-hero-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.sv-home-row .os-suite-hero-mark {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--good);
}
.sv-home-row .os-suite-hero-name { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); margin-top: 4px; }
.sv-home-row .os-suite-hero-sub { font-size: 13px; line-height: 1.55; color: var(--ink-soft); flex: 1; }
.sv-home-row .os-suite-hero-cta {
  align-self: flex-start;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--sv-r);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-weight: 650;
  font-size: 12.5px;
  font-family: var(--font-sans);
  transition: background-color var(--dur-2) var(--ease-standard);
}
.sv-home-row .os-suite-hero:hover .os-suite-hero-cta { background: var(--paper-inset); }

/* Recent and pinned, side by side under the start row. */
.sv-shelves { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sv-shelves[hidden], .sv-shelf[hidden] { display: none; }
.sv-shelf { padding: 14px 8px 8px; }
.sv-shelf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 8px;
  font-size: 12px; font-weight: 650; color: var(--ink);
}
.sv-shelf-head span { font-weight: 500; color: var(--ink-faint); font-size: 11.5px; }
.sv-shelf-empty { padding: 6px 10px 12px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; }

/* The library: the suite index this page has always carried, set as the
   app's catalogue rather than as a wall of cards. */
.sv-lib { margin-top: 44px; }
.sv-lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.sv-lib-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sv-lib-head p { margin: 0; color: var(--ink-faint); font-size: 12.5px; }

html:is(.sv-live, [data-pro-code="loading"]) .sv-lib .boot-jump { display: none; }
.sv-lib .os-tool-groups { margin: 0; padding: 0; max-width: none; }
.sv-lib .boot-groups { display: block; margin: 0; }
.sv-lib .boot-sect {
  animation: none;
  opacity: 1;
  transform: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--sv-line);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
}
.sv-lib .boot-sect-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 8px 0 0;
  font-size: 13.5px;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  scroll-margin-top: 16px;
}
.sv-lib .boot-sect-ico {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--ico);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  margin: -2px 0 0;
}
.sv-lib .boot-sect-ico svg { width: 14px; height: 14px; }
.sv-lib .boot-sect-title { flex: 1; line-height: 1.35; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.sv-lib .boot-sect-sub { display: none; }
.sv-lib .boot-grid-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 12px;
  margin: 0;
}
.sv-lib .boot-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  min-height: 0;
  height: auto;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  transform: none;
  animation: none;
  opacity: 1;
}
.sv-lib .boot-tile::after { display: none; }
.sv-lib .boot-tile { transition: background-color var(--dur-2) var(--ease-standard); }
.sv-lib .boot-tile:hover { background: var(--sv-hover); transform: none; box-shadow: none; }
.sv-lib .boot-tile-tool:not(.boot-tile-app) .boot-tile-sub {
  display: block;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
  color: var(--ink);
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  max-height: none;
  margin: 0;
}
.sv-lib .boot-tile-tool:not(.boot-tile-app) .boot-tile-name {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink-faint);
  margin: 0 !important;
  order: 0;
  white-space: normal;
  overflow: visible;
}
.sv-lib .boot-tile-tool:not(.boot-tile-app) .boot-tile-sub { order: 1; margin: 0 !important; }

.sv-home .boot-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--sv-line);
  font-size: 12.5px;
  color: var(--ink-faint);
  justify-content: flex-start;
}
.sv-home .boot-foot a { color: var(--ink-soft); }

/* ----------------------------------------------------------------- tool view */

.sv-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--sv-line);
  background: var(--paper);
  flex: none;
  min-width: 0;
}
.sv-toolbar .sv-gico { width: 28px; height: 28px; border-radius: 7px; }
.sv-toolbar .sv-gico svg { width: 16px; height: 16px; }
.sv-tool-id { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 10px; }
/* The name keeps its width; the task line takes only the room left over
   (width 0, then grows), and the chain beside them gives way first. On a
   phone, where the chain is hidden, the name is cut with an ellipsis
   rather than drawn under the buttons. */
.sv-toolbar .sv-tool-id { min-width: auto; }
.sv-tool-name { font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em; white-space: nowrap; flex: none; }
.sv-tool-task { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; width: 0; min-width: 0; }
@media (max-width: 640px) {
  .sv-toolbar .sv-tool-id { min-width: 0; }
  .sv-tool-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.sv-accepts { display: flex; gap: 4px; flex: none; }
.sv-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--paper-inset);
  color: var(--ink-soft);
  border: 1px solid var(--sv-line);
  text-transform: uppercase;
}
.sv-tool-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.sv-sep { width: 1px; height: 20px; background: var(--sv-line); margin: 0 6px; flex: none; }

.sv-stage { position: relative; flex: 1; min-height: 0; display: flex; }
.sv-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--paper);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-standard);
}
.sv-frame.sv-ready { opacity: 1; }
/* A tool or a service still on its way: a hairline of the accent along
   the top of the stage that breathes, the one slow beat the site keeps
   for waiting (--dur-sweep), and under it, only once the wait has lasted
   long enough to be worth a word (--dur-wait), what is opening. No ring
   turns: nothing in this window spins. With motion switched down the
   line simply sits there, faint, until the screen arrives. */
.sv-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  pointer-events: none;
}
.sv-loading::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: .35;
  animation: sv-breathe var(--dur-sweep) var(--ease-standard) infinite alternate;
}
@keyframes sv-breathe { to { opacity: .9; } }
.sv-loading span {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
  --os-fade: var(--dur-fade);
  animation: os-fade-in var(--dur-3) var(--ease-standard) var(--dur-wait) backwards;
}
.sv-frame.sv-ready + .sv-loading { display: none; }

/* The inspector: what the tool is for, what it takes, and its neighbours. */
.sv-inspect {
  width: 300px;
  flex: none;
  border-left: 1px solid var(--sv-line);
  background: var(--paper);
  overflow-y: auto;
  display: none;
  padding: 18px 16px 24px;
  box-sizing: border-box;
}
.sv-view.sv-inspecting .sv-inspect { display: block; --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
.sv-inspect h3 { margin: 0 0 6px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sv-inspect p { margin: 0 0 18px; line-height: 1.55; color: var(--ink-soft); }
.sv-inspect .sv-accepts { flex-wrap: wrap; margin-bottom: 18px; }
.sv-inspect .sv-row { padding: 7px 8px; margin: 0 -8px; width: calc(100% + 16px); }
.sv-guarantee {
  display: flex; gap: 10px;
  padding: 12px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: var(--good-soft);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
}
.sv-guarantee svg { width: 16px; height: 16px; color: var(--good); flex: none; margin-top: 1px; }

/* ---------------------------------------------------------------- status bar */

.sv-status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  background: var(--sv-chrome);
  border-top: 1px solid var(--sv-line);
  font-size: 11.5px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
}
.sv-status button {
  display: flex; align-items: center; gap: 7px;
  height: 22px; padding: 0 6px; margin: 0 -6px;
  border: 0; border-radius: 5px;
  background: transparent;
  font: inherit; color: inherit;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.sv-status button:hover { background: var(--sv-hover); color: var(--ink); }
.sv-led { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; box-shadow: 0 0 0 3px var(--good-soft); }
.sv-status b { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sv-status .sv-spacer { flex: 1; }

/* ----------------------------------------------------------- quick open */

.sv-palette {
  font-family: var(--font-sans);
  font-size: var(--sv-ui, 13px);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}
/* The dim fades up and the palette rises into it, as the site's dialogs
   do; a fade of 100ms with motion switched down. */
.sv-palette.sv-on { display: flex; --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
.sv-palette.sv-on .sv-pal { --os-fade: var(--dur-fade); animation: os-rise var(--dur-3) var(--ease-standard) backwards; }
.sv-pal {
  width: min(620px, calc(100vw - 32px));
  max-height: min(560px, 76vh);
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .08);
  overflow: hidden;
}
.sv-pal-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--sv-line); }
.sv-pal-in svg { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }
.sv-pal-in input {
  flex: 1;
  height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  box-shadow: none;
  padding: 0;
}
.sv-pal-in input:focus, .sv-pal-in input:focus-visible { outline: 0; box-shadow: none; border: 0; }
.sv-pal-list { overflow-y: auto; padding: 6px; }
.sv-pal-foot {
  display: flex; gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--sv-line);
  background: var(--paper);
  font-size: 11.5px;
  color: var(--ink-faint);
}
.sv-pal-foot .sv-kbd { margin-right: 4px; }

/* ----------------------------------------------------------------- focus */

.sv :focus-visible,
.sv-palette :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

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

@media (max-width: 1100px) {
  .sv-accepts { display: none; }
  .sv-inspect .sv-accepts { display: flex; }
  .sv-lib .boot-sect { grid-template-columns: 1fr; gap: 10px; }
  .sv-search { width: 200px; flex-basis: 200px; }
}

@media (max-width: 860px) {
  html:is(.sv-live, [data-pro-code="loading"]) .sv { grid-template-columns: 0 minmax(0, 1fr); }
  html:is(.sv-live, [data-pro-code="loading"]) .sv-side {
    position: fixed;
    top: var(--sv-bar);
    bottom: var(--sv-status);
    left: 0;
    width: min(320px, 86vw);
    z-index: 50;
    transform: translateX(-102%);
    /* The sheet leaves on the exit curve, in two thirds of the time it
       took to come in; the dim behind it goes with it. */
    transition: transform var(--dur-4-out) var(--ease-exit), box-shadow var(--dur-4-out) var(--ease-exit);
    box-shadow: 0 0 0 100vmax transparent;
  }
  html:is(.sv-live, [data-pro-code="loading"]) .sv.sv-drawer .sv-side {
    transform: none;
    transition-duration: var(--dur-4);
    transition-timing-function: var(--ease-standard);
    box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--ink) 30%, transparent);
  }
  html:is(.sv-live, [data-pro-code="loading"]) .sv.sv-collapsed .sv-side { visibility: visible; }
  .sv-home-row { grid-template-columns: 1fr; }
  .sv-shelves { grid-template-columns: 1fr; }
  .sv-inspect { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: -12px 0 30px -18px rgba(0,0,0,.35); }
}

/* A tablet's width: the bar keeps its tabs by taking the phone's compact
   controls early. At 641 to 960 pixels the full search box, Sign in with
   its word and Home with its label left the tab strip 22 to 72 pixels, and
   Home read "H" (21 October 2026). */
@media (max-width: 960px) {
  .sv-search { width: 44px; flex: none; padding: 0; justify-content: center; border: 0; background: transparent; color: var(--ink-soft); }
  .sv-search svg { width: 18px; height: 18px; }
  /* The search button is its icon here, and keeps its name for a screen
     reader as Sign in does: hidden outright, the phone heard "button". */
  .sv-search #svSearchLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sv-search .sv-kbd { display: none; }
  .sv-tab-home { min-width: 44px; padding: 0 12px; justify-content: center; }
  .sv-tab-home .sv-tab-label { display: none; }
  .sv-tabs { flex: 1 1 44px; min-width: 44px; }
  .sv-signin { min-width: 44px; padding: 0; justify-content: center; }
  .sv-signin span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 640px) {
  .sv { --sv-bar: 52px; }
  .sv-brand { display: none; }
  .sv-lib .boot-grid-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
  .sv-lib .boot-tile { padding: 8px 6px; }
  .sv-lib-head { flex-direction: column; gap: 4px; }
  #svTheme, .sv-bar > a.sv-iconbtn { display: none; }
  .sv-bar { gap: 2px; padding: 0 4px; }
  .sv-tab { min-width: 118px; padding: 0 4px 0 10px; }
  /* Home is its icon alone here, and keeps the 44 pixels it was given
     above: the rule before this one, written for tabs with names, had
     made it 118 wide, so with one tool open the strip overflowed its 176
     pixels and scrolled, and Home sat cut off at the left edge. */
  .sv-tab-home { min-width: 44px; padding: 0 12px; }
  /* Everything a finger presses is 44 pixels on any phone. These were in
     the 380 block below, so a 390-pixel iPhone, the commonest phone there
     is, got the 30-pixel desktop rows. */
  .sv-iconbtn, .sv-search { width: 44px; height: 44px; }
  .sv-hide-narrow { display: none; }
  .sv-status .sv-hide-narrow { display: none; }
  /* The status bar too: at 28 pixels it clipped On-device's 44 to its own
     height, so the top and bottom of the button pressed the page instead. */
  .sv, .sv-palette, .sv-drawer { --sv-status: 44px; }
  .sv-item { min-height: 44px; }
  .sv-row { min-height: 44px; }
  .sv-btn { min-height: 44px; }
  .sv-lib .boot-tile { min-height: 44px; }
}
@media (max-width: 380px) {
  .sv-bar { gap: 0; }
  .sv-tab { height: 44px; max-width: 150px; }
  .sv-tab[aria-selected="true"] { height: 45px; }
  .sv-tab-x { opacity: 1; width: 44px; height: 44px; margin-right: -4px; border-radius: 8px; }
  .sv-home-in { padding: 28px 16px 40px; }
  .sv-home .sv-home-title { font-size: 30px; }
  .sv-open-idle { padding: 22px 18px; }
  .sv-tool-task { display: none; }
  .sv-toolbar { padding: 0 6px 0 12px; }
}

.sv-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ================================================================ services

   A service is a job several tools do one after another. On the start
   screen it is a card naming the tools it is built from; in a tab it is a
   form of numbered steps with a summary beside it. Same tokens, same row,
   same button as everything else - a service is a screen of this
   application, not a page of its own. */

/* Security overview: one card per concern, what stands, and the one
   thing to do about it. */
.sv-overview { margin-top: 28px; }
.sv-overview .sv-lib-head { margin-bottom: 10px; }
.sv-overview .sv-lib-head h2 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sv-ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sv-ov { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; }
.sv-ov-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; width: 100%; }
.sv-ov h3 { margin: 0; font-size: 14px; font-weight: 650; }
.sv-ov-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); }
.sv-ov-good .sv-ov-state::before,
.sv-ov-attention .sv-ov-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.sv-ov-attention .sv-ov-state::before { background: var(--warn); }
.sv-ov-attention .sv-ov-state { color: var(--ink-soft); }
.sv-overview-start .sv-ov-state::before { content: none; }
.sv-ov p { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.sv-ov .sv-btn { margin-top: 4px; text-decoration: none; }
.sv-ov .sv-btn .sv-go { width: 13px; height: 13px; margin: 0; opacity: 1; transform: none; }

.sv-services { margin-top: 28px; }
.sv-services .sv-lib-head { margin-bottom: 10px; }
.sv-services .sv-lib-head h2 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sv-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--sv-line); }
.sv-area { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 26px 0 12px; }
.sv-lib-head + .sv-area { margin-top: 6px; }
.sv-area h3 { margin: 0; font-size: 15px; font-weight: 650; color: var(--ink); }
.sv-area p { margin: 0; font-size: 13px; color: var(--ink-faint); }
/* A row of a list, as the sidebar's are: the mark, the name and one line,
   a hairline under each, and the row itself lit under the pointer. */
.sv-service {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--sv-line);
  border-radius: 0;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-standard);
}
.sv-service:hover { background: var(--sv-hover); }
.sv-service:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-sm); }
.sv-service-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sv-service-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sv-service-sub { overflow: hidden; color: var(--ink-faint); font-size: 12.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

/* Arriving: the cards at the top a step apart, as the site's panels do,
   then each group of services rising into view as it is scrolled to (the
   site's reveal, theme.css). With motion switched down, a short fade. */
.sv-home-row > * { --os-fade: var(--dur-fade); animation: os-rise var(--dur-4) var(--ease-emph) backwards; animation-delay: var(--os-step); }
.sv-home-row > :nth-child(2) { animation-delay: calc(var(--os-step) * 3); }
@supports (animation-timeline: view()) {
  .sv-services .sv-area, .sv-services-grid {
    animation: os-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* The chain beside a service's name: it gives way before the name does.
   What does not fit on the one line wraps onto a second that is out of
   sight, a whole link at a time, so the name is never covered. */
.sv-chainchips { align-items: center; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; height: 24px; overflow: hidden; }
.sv-chainlink { display: inline-flex; align-items: center; gap: 4px; height: 24px; }
.sv-chainchips a.sv-chip { text-decoration: none; transition: border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.sv-chainchips a.sv-chip:hover { border-color: var(--rule-strong); color: var(--ink); }

.sv-service-stage { overflow-y: auto; display: block; }

.svs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 40px 64px;
  box-sizing: border-box;
  align-items: start;
}
.svs-head h1 {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.svs-head { margin-bottom: 24px; }

.svs-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--sv-line);
}
.svs-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.svs-body h2 { margin: 2px 0 12px; font-size: 15px; font-weight: 650; }
.svs-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.svs-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--sv-r);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
@media (hover: hover) and (pointer: fine) { .svs-input { font-size: 13.5px; } }
.svs-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
textarea.svs-input { resize: vertical; line-height: 1.5; }
select.svs-input { appearance: auto; }
.svs-mono { font-family: var(--font-mono); font-size: 12.5px; }
.svs-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }
.svs-hint-top { margin: 0 0 12px; }
.svs-hint.svs-bad { color: var(--danger); font-weight: 600; }
.svs-explain { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.svs-explain b { color: var(--ink); }
.svs-mn { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
.svs-field { display: block; }
.svs-narrow { max-width: 320px; }

.svs-meter { display: flex; gap: 4px; margin-top: 10px; max-width: 452px; }
.svs-meter i { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); }
.svs-meter i.on.s1 { background: var(--warn); }
.svs-meter i.on.s2, .svs-meter i.on.s3 { background: var(--good); }

.svs-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.svs-opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  background: var(--paper-raised);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.svs-opt:hover { background: var(--paper-inset); }
.svs-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.svs-opt input { margin: 3px 0 0; accent-color: var(--accent); }
.svs-opt b { display: block; font-size: 13px; }
.svs-opt small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 12px; line-height: 1.45; }
.svs-own { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.svs-own[hidden] { display: none; }

.svs-go { display: flex; align-items: center; gap: 14px; padding: 22px 0 0 44px; border-top: 1px solid var(--sv-line); }
.svs-cta { height: 40px; padding: 0 20px; }
.svs-cta[disabled] { opacity: .55; cursor: progress; }

.svs-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.svs-summary { padding: 18px 18px 16px; }
.svs-summary h3 { margin: 0 0 10px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.svs-summary h3 + .svs-chain { margin-bottom: 10px; }
.svs-sumrow { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.svs-sumrow:last-of-type { margin-bottom: 18px; }
.svs-big { font-size: 22px; font-weight: 700; color: var(--ink); min-width: 26px; font-variant-numeric: tabular-nums; }
.svs-small { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
.svs-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.svs-arrow { color: var(--ink-faint); }
.svs-link {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--sv-line);
  background: var(--paper-inset);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-standard);
}
.svs-link:hover { border-color: var(--rule-strong); }

/* What a service made or found, once there is something: it rises in
   under the steps the moment it is shown (every result block is hidden
   until then), so the eye is carried from the button to the answer. */
.svs-result { margin-top: 28px; }
.svs-result[hidden] { display: none; }
.svs-result:not([hidden]) { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-4) var(--ease-standard) backwards; }
.svs-ok {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--good-soft);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
}
.svs-ok svg { width: 18px; height: 18px; color: var(--good); flex: none; margin-top: 1px; }
.svs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 16px; }
.svs-pic {
  margin: 0;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-raised);
}
.svs-pic img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.svs-pic figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 8px 12px; }
.svs-pic b { display: block; font-size: 12.5px; }
.svs-pic small { display: block; color: var(--ink-faint); font-size: 10.5px; margin-top: 1px; }
.svs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.svs-texts { margin-top: 14px; }
.svs-texts[hidden] { display: none; }
.svs-textrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sv-line); }
.svs-textrow code { word-break: break-all; color: var(--ink-soft); font-size: 11.5px; }
.svs-rules { margin-top: 22px; }
.svs-rules h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; }
.svs-rules ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }

.svs-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 16px;
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  background: var(--paper-raised);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.svs-drop svg { width: 26px; height: 26px; color: var(--ink-soft); margin-bottom: 6px; }
.svs-drop b { font-size: 14px; }
.svs-drop small { color: var(--ink-faint); font-size: 12.5px; }
.svs-drop:hover, .svs-drop.svs-over { border-color: var(--accent); background: var(--accent-soft); }
.svs-list { list-style: none; margin: 12px 0 0; padding: 0; }
.svs-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 4px; border-top: 1px solid var(--sv-line); }
.svs-list li:first-child { border-top: 0; }
.svs-file { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.svs-file svg { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.svs-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.svs-list .sv-iconbtn svg { width: 13px; height: 13px; }
.svs-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--paper-inset);
  color: var(--ink-soft);
  white-space: nowrap;
}
.svs-tag svg { width: 12px; height: 12px; }
.svs-tag-ok { background: var(--good-soft); color: var(--ink); }
.svs-tag-ok svg { color: var(--good); }
.svs-tag-bad { background: var(--danger-soft); color: var(--ink); }
.svs-more { margin-top: 14px; }
.svs-more summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.svs-more textarea { margin-top: 10px; }
.svs-secret { margin-top: 14px; }

@media (max-width: 1100px) {
  .svs { grid-template-columns: 1fr; gap: 24px; }
  .svs-side { position: static; }
  .sv-service-view .sv-chainchips { display: flex; }
}
@media (max-width: 640px) {
  .sv-services-grid { grid-template-columns: 1fr; }
  .sv-ov-grid { grid-template-columns: 1fr; }
  .svs { padding: 24px 16px 48px; }
  .svs-head h1 { font-size: 26px; }
  .svs-mn, .svs-choice { grid-template-columns: 1fr; }
  .svs-go { padding-left: 0; flex-wrap: wrap; }
  .svs-step { grid-template-columns: 1fr; gap: 8px; }
  .svs-textrow { grid-template-columns: 1fr auto; }
  .svs-textrow .svs-label { grid-column: 1 / -1; margin: 0; }
  .sv-service-view .sv-chainchips { display: none; }
  .svs-input { min-height: 44px; }
  .svs-link { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 12px; }
  .svs-more summary { display: flex; align-items: center; min-height: 44px; }
}

/* ---------------------------------------------------- native tool screens */

.svt-modes {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 8px;
  border-radius: 9px;
  background: var(--paper-inset);
  border: 1px solid var(--sv-line);
}
.svt-modes button {
  min-width: 96px;
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.svt-modes button:hover { color: var(--ink); background: var(--sv-hover); }
.svt-modes button[aria-selected="true"] {
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--sv-line);
}
[data-panel][hidden] { display: none; }
/* A view of a service's own (Overview, Controls, Frameworks, Evidence, and
   every other row of modes) fades in as it is chosen. The panel is what is
   hidden and shown, so the fade runs once per choice and not again when
   the panel is drawn afresh for a change inside it. */
.sv-service-stage [role="tabpanel"]:not([hidden]),
.sv-drawer-body [data-pane-body]:not([hidden]) { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }

.svt-pic {
  position: relative;
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  background: var(--paper-raised);
  overflow: hidden;
}
.svt-pic { transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
.svt-pic.svs-over { border-color: var(--accent); background: var(--accent-soft); }
.svt-pic-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 28px 16px;
  text-align: center;
}
.svt-pic-empty[hidden] { display: none; }
.svt-pic-empty svg { width: 26px; height: 26px; color: var(--ink-soft); margin-bottom: 6px; }
.svt-pic-empty b { font-size: 14px; }
.svt-pic-empty small { color: var(--ink-faint); font-size: 12.5px; max-width: 420px; line-height: 1.45; }
.svt-pic canvas { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; background: var(--paper-inset); }
.svt-pic canvas[hidden] { display: none; }
.svt-picbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.svt-picbar[hidden] { display: none; }
.svt-picbar .svs-hint { margin: 0; }

.svt-fill { height: 4px; margin-top: 10px; border-radius: 2px; background: var(--rule); overflow: hidden; }
/* A bar settles to its new length rather than jumping (a readiness
   figure's bar, a scan's progress); with motion switched down it jumps. */
.svt-fill i { display: block; height: 100%; width: 0; background: var(--good); transition: width var(--dur-4) var(--ease-standard); }
.svt-fill i.svt-over { background: var(--danger); }

.svt-onepic { max-width: 420px; margin-top: 16px; }
.svt-onepic img { aspect-ratio: auto; max-height: 280px; object-fit: contain; background: var(--paper-inset); }
.svt-p { margin: 0 0 14px; }
.svt-p a, .svs-hint a { color: var(--accent-strong); }

.svs-hint.svs-good { color: var(--good); font-weight: 600; }
.svs-failed { margin: 40px; }

.svt-pieces { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.svt-piece {
  padding: 10px 10px 12px 14px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  background: var(--paper-raised);
}
.svt-piece-head { display: flex; align-items: center; gap: 10px; }
.svt-piece-head b { font-size: 13px; }
.svt-piece-head .svs-hint { margin: 0; }
.svt-piece-acts { margin-left: auto; display: flex; gap: 2px; }
.svt-piece code { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-soft); word-break: break-all; line-height: 1.5; }

@media (max-width: 640px) {
  .svt-modes { display: flex; }
  .svt-modes button { flex: 1; height: 44px; }
  .svt-picbar { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------ service screens

   What the screens of more than one batch wear: a heading, the facts
   grid, the certificate inventory's rows, the watched folder's verdict
   and counts, the SOC 2 tracker's chips and the rest below, each block
   named after the service it was first written for. A service's own rules
   are in its batch's sheet, /sovereign-b1.css to /sovereign-b8.css, which
   only the Suite loads (see pro-code/sovereign-services.js). */

.slk-h { margin: 22px 0 8px; font-size: 13px; font-weight: 650; }
.svs-result .svs-list li { gap: 10px; }

/* A wider main column, for Clean files' table of files. */
.svs-wide { grid-template-columns: minmax(0, 1fr) 280px; }
.sck-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 16px 0 0; }
.sck-facts div { min-width: 0; }
.sck-facts dt { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sck-facts dd { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.svs-summary a { color: var(--accent-strong); }

@media (max-width: 1100px) {
  .svs-wide { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sck-facts { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- session */

.sv-session-btn { position: relative; }
.sv-badge {
  position: absolute; top: 3px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sv-badge[hidden] { display: none; }

.sv-drawer {
  position: fixed;
  top: var(--sv-bar, 49px);
  bottom: var(--sv-status, 28px);
  right: 0;
  width: 380px;
  max-width: 100vw;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  box-shadow: -18px 0 40px -28px rgba(0, 0, 0, .45);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.sv-drawer[hidden] { display: none; }
/* The session's sheet comes in from the right edge by the theme's
   distance, which is nought with motion switched down, so it fades. */
.sv-drawer:not([hidden]) { --os-fade: var(--dur-fade); animation: sv-from-right var(--dur-4) var(--ease-standard) backwards; }
@keyframes sv-from-right { from { opacity: 0; transform: translate3d(var(--os-rise), 0, 0); } }
.sv-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--rule); }
.sv-drawer-head .svt-modes { margin: 0; }
.sv-drawer-head .svt-modes button { min-width: 0; }
.sv-drawer-head .sv-count { margin-left: 4px; }
.sv-drawer-body { flex: 1; overflow-y: auto; padding: 12px 12px 16px; }
.sv-drawer-body [hidden] { display: none; }
.sv-drawer-add { margin: 0 0 10px 4px; }
.sv-drawer-empty { margin: 8px 4px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.55; }
.sv-drawer-empty[hidden] { display: none; }
.sv-drawer-foot { border-top: 1px solid var(--rule); padding: 10px 16px 12px; background: var(--paper-inset); }
.sv-drawer-foot p { margin: 0 0 8px; font-size: 11.5px; color: var(--ink-faint); }
.sv-drawer-acts { display: flex; gap: 8px; }

.sv-tray { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sv-tray-item { border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-raised); padding: 10px 6px 10px 12px; }
.sv-tray-top { display: flex; align-items: flex-start; gap: 10px; }
.sv-tray-top > svg { width: 18px; height: 18px; color: var(--ink-soft); flex: none; margin-top: 1px; }
.sv-tray-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sv-tray-meta b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-tray-meta span { font-size: 11.5px; color: var(--ink-faint); }
.sv-tray-sha { font-family: var(--font-mono); font-size: 10.5px !important; color: var(--ink-faint); word-break: break-all; }
.sv-tray-top .sv-iconbtn { width: 28px; height: 28px; flex: none; }
.sv-tray-top .sv-iconbtn svg { width: 15px; height: 15px; }
.sv-tray-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 0 28px; }
.sv-tray-uses > span { font-size: 11px; color: var(--ink-faint); margin-right: 2px; }
.sv-tray-uses .sv-chip { cursor: pointer; font-family: var(--font-sans); text-transform: none; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; transition: border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
.sv-tray-uses .sv-chip:hover { border-color: var(--rule-strong); color: var(--ink); background: var(--paper-raised); }

.sv-log { list-style: none; margin: 0; padding: 0; }
.sv-log li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--rule); }
.sv-log time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); padding-top: 1px; }
.sv-log b { display: block; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.sv-log span { display: block; font-size: 11.5px; color: var(--ink-faint); }

.sv-btn-danger { color: var(--danger); }
.sv-btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.sv-btn-danger-fill { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.sv-btn-danger-fill:hover { filter: brightness(0.94); background: var(--danger); }

.sv-dialog {
  width: min(460px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 22px 24px 20px;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-sans);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35);
}
/* No backdrop colour of its own: theme.css fades the dim up and down with
   the dialog, and a colour set here outranked that, so the dim snapped
   back while the dialog was still fading. */
.sv-dialog { font-size: 13px; }
.sv-dialog .sv-btn { font-size: 13px; }
.sv-dialog h2 { margin: 0 0 10px; font-size: 18px; }
.sv-dialog p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.sv-dialog-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.sv-keylist { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; align-items: baseline; }
.sv-keylist dt { white-space: nowrap; }
.sv-keylist dd { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.sv-keylist kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--sv-line); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--paper-inset); font-family: var(--font-mono); font-size: var(--text-2xs); text-align: center; color: var(--ink); }

#svClearAll { color: var(--ink-faint); }
#svClearAll:hover { color: var(--danger); }

@media (max-width: 640px) {
  .sv-drawer { width: 100vw; border-left: 0; }
  .sv-drawer-head .svt-modes { display: inline-flex; }
  .sv-tray-top .sv-iconbtn { width: 44px; height: 44px; }
  .sv-tray-uses .sv-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .sv-drawer-acts .sv-btn { flex: 1; }
  #svClearAll { min-height: 28px; }
  .sv-keylist { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sv-keylist dd { margin-bottom: 8px; }
}
.srp-tick { position: relative; width: 24px; height: 24px; margin-top: 1px; cursor: pointer; }
.srp-tick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.srp-box { position: absolute; inset: 0; display: grid; place-items: center; border: 1.5px solid var(--rule-strong); border-radius: 6px; background: var(--paper-raised); color: transparent; pointer-events: none; }
.srp-box svg { width: 15px; height: 15px; }
.srp-tick input:checked + .srp-box { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.srp-tick input:focus-visible + .srp-box { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .srp-tick { width: 44px; height: 44px; margin: -10px 0 0 -10px; }
  .srp-box { inset: 10px; }
}

/* ---------------------------------------------- Back up passwords and codes */
.svv-warn { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.svv-warn svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--warn); }
.svv-side-acts { margin: 12px 0 18px; }
.svv-side-acts .sv-btn svg { width: 13px; height: 13px; }

/* ------------------------------------------------ Watch a folder for changes */

.svw-opt { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.svw-opt input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.svw-bar { height: 4px; margin-top: 10px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.svw-bar[hidden] { display: none; }
.svw-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--dur-3) var(--ease-standard); }
.svw-more { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--sv-line); }
.svw-recs { list-style: none; margin: 0 0 18px; padding: 0; }
.svw-recs li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--sv-line); }
.svw-recs li:first-child { border-top: 0; padding-top: 0; }
.svw-recs li > span { flex: 1; min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; }
.svw-recs svg { width: 15px; height: 15px; color: var(--ink-faint); margin-top: 1px; }
.svw-recs b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svw-recs small { grid-column: 2; font-size: 11.5px; color: var(--ink-faint); }
.svw-recs .sv-iconbtn svg { width: 12px; height: 12px; }
.svw-verdict { padding: 18px 20px; border: 1px solid var(--sv-line); border-radius: 12px; background: var(--paper-raised); }
.svw-verdict h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -0.01em; }
.svw-verdict p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.svw-verdict-same { border-color: var(--good); }
.svw-verdict-changed { border-color: var(--warn); }
.svw-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.svw-count { font-size: 12.5px; color: var(--ink-faint); }
.svw-count b { margin-right: 5px; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.svw-count-on, .svw-count-on b { color: var(--ink); }
.svw-group { margin-top: 20px; }
.svw-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 650; }
.svw-group h3 span { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--paper-inset); color: var(--ink-soft); }
.svw-group h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.svw-changed::before { background: var(--warn) !important; }
.svw-added::before { background: var(--accent) !important; }
.svw-removed::before { background: var(--danger) !important; }
.svw-group ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sv-line); }
.svw-group li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 7px 0; border-bottom: 1px solid var(--sv-line); }
.svw-group code { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.svw-group small { font-size: 12px; color: var(--ink-faint); }
.svw-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--danger-soft); font-size: 13px; line-height: 1.45; }
.svw-warn svg { flex: none; width: 16px; height: 16px; color: var(--danger); margin-top: 1px; }
@media (max-width: 640px) {
  .svw-opt { min-height: 44px; }
}

/* ---------------------------------------------- Check this browser's privacy */
.svs-actions .sv-btn svg { flex: none; }

/* ------------------------------------------------------- Find sensitive data */
.sfd-kind { margin-bottom: 10px; font-size: 12.5px; line-height: 1.45; }
.sfd-kind b { display: block; font-size: 13px; color: var(--ink); }
.sfd-kind span { color: var(--ink-faint); }
.sfd-kind:last-of-type { margin-bottom: 18px; }
.sfd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sfd-table th { text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--sv-line); }
.sfd-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--sv-line); color: var(--ink-soft); vertical-align: top; }
.sfd-table td:first-child { color: var(--ink); }
.sfd-table code { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.sfd-skipped { list-style: none; margin: 8px 0 0; padding: 0; }
.sfd-skipped li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--sv-line); font-size: 12.5px; }
.sfd-skipped code { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.sfd-skipped small { color: var(--ink-faint); }

/* ----------------------------------------------------- Certificate inventory */

.sci-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--sv-line); }
.sci-row { border-bottom: 1px solid var(--sv-line); }
.sci-row summary { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; padding: 12px 0; cursor: pointer; list-style: none; }
.sci-row summary::-webkit-details-marker { display: none; }
.sci-when { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.sci-when.sci-bad { color: var(--danger); }
.sci-when.sci-warn { color: var(--warn); }
.sci-flag { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 650; background: var(--paper-inset); color: var(--ink-soft); }
.sci-flag.sci-bad { background: var(--danger-soft); color: var(--ink); }
.sci-flag.sci-warn { background: var(--warn-soft); color: var(--ink); }
.sci-name { min-width: 0; }
.sci-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sci-name b { font-size: 13.5px; overflow-wrap: anywhere; }
.sci-name small { display: block; font-size: 12px; color: var(--ink-faint); overflow-wrap: anywhere; }
.sci-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.sci-issues { list-style: none; margin: 0 0 12px; padding: 0; }
.sci-issues li { position: relative; padding: 3px 0 3px 16px; font-size: 13px; line-height: 1.5; }
.sci-issues li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.sci-issues .sci-bad::before { background: var(--danger); }
.sci-issues .sci-warn::before { background: var(--warn); }
.sci-row .sck-facts { margin: 0 0 12px; }
.sci-row details > .svs-actions { margin: 0 0 14px; }
.sci-row .sv-btn svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
  .sci-row summary { grid-template-columns: 64px minmax(0, 1fr); min-height: 44px; }
  .sci-date { grid-column: 2; }
}

/* ------------------------------------------------------- Get ready for SOC 2 */

.soc-disclaim { margin-top: 10px; }
.soc-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding: 16px 0; border-top: 1px solid var(--sv-line); border-bottom: 1px solid var(--sv-line); }
.soc-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-chip { position: relative; cursor: pointer; }
.soc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.soc-chip span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--sv-line); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--paper-raised); transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.soc-chip:hover span { border-color: var(--rule-strong); color: var(--ink); }
.soc-chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.soc-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.soc-body { padding: 0 0 16px 66px; }
.soc-body > p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; max-width: 68ch; }
.soc-body h4 { margin: 0 0 4px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.soc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 12px; }
.soc-tools .svs-label { flex-basis: 100%; margin: 0; }
.soc-tools .sv-btn svg { width: 13px; height: 13px; }
.soc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; margin-bottom: 12px; }
.soc-io { margin-top: 24px; }
.soc-groups { margin: 14px 0 16px; }
.soc-g { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--sv-line); }
.soc-g:first-child { border-top: 0; }
.soc-g b { font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 640px) {
  .soc-body { padding-left: 0; }
  .soc-fields { grid-template-columns: 1fr; }
  .soc-chip span { min-height: 44px; }
}

/* The session report's check, at the head of the activity list. */
.sv-log-check { padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--sv-line); }
.sv-log-check p { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.sv-log-check p:empty { display: none; }
.sv-log-check p.sv-good { color: var(--good); font-weight: 600; }
.sv-log-check p.sv-bad { color: var(--danger); font-weight: 600; }
#svClearKept ul { margin: 0 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.55; }
#svClearKept p { margin-bottom: 4px; }

/* --------------------------------------------------------------- Your data */

.syd-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sv-line); }
.syd-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--sv-line); }
.syd-what { flex: 1; min-width: 200px; }
.syd-what b { display: block; font-size: 13.5px; }
.syd-what > span { display: block; font-size: 12.5px; color: var(--ink-faint); }
.syd-list .sv-btn svg { width: 13px; height: 13px; }

/* ------------------------------------------------ the workspace and its lock

   Which organisation's registers are open, in the title bar where a
   consultant with several clients cannot miss it, and a demonstration
   company marked as one wherever it shows. */

.sv-ws { position: relative; flex: none; }
.sv-ws-btn {
  display: flex; align-items: center; gap: 7px;
  height: 32px; max-width: 220px; padding: 0 10px;
  border: 1px solid var(--sv-line); border-radius: var(--radius-md);
  background: var(--paper-raised); color: var(--ink-soft);
  font: inherit; font-size: var(--text-2xs); font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.sv-ws-btn:hover { border-color: var(--rule-strong); color: var(--ink); }
.sv-ws-btn svg { width: 16px; height: 16px; flex: none; }
.sv-ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-ws-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 240px; max-width: 320px; padding: 6px;
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--ink) 40%, transparent);
}
.sv-ws-menu[hidden] { display: none; }
.sv-ws-menu:not([hidden]) { --os-fade: var(--dur-fade); animation: os-menu-in var(--dur-3) var(--ease-standard) backwards; }
.sv-ws-menu button {
  display: block; width: 100%; min-height: 36px; padding: 6px 10px 6px 28px; position: relative;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink);
  font: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard);
}
.sv-ws-menu button:hover, .sv-ws-menu button:focus-visible { background: var(--sv-hover); }
.sv-ws-menu button[aria-checked="true"]::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: var(--accent); }
.sv-ws-menu small { color: var(--ink-faint); font-size: var(--text-2xs); }
.sv-ws-menu hr { border: 0; border-top: 1px solid var(--sv-line); margin: 6px 0; }
.sv-lock-btn[hidden] { display: none; }
.sv-lock-btn.sv-locked { width: auto; gap: 6px; padding: 0 10px; display: flex; align-items: center; color: var(--on-accent); background: var(--accent-strong); font-size: var(--text-2xs); font-weight: 650; }
.sv-lock-btn.sv-locked:hover { background: var(--accent); color: var(--on-accent); }

/* Locked: in place of a service's screen, or of the start screen's
   overview, the one thing that can be done. */
.sv-unlock { display: flex; gap: 16px; align-items: flex-start; max-width: 560px; margin: 24px auto; padding: 22px 24px; }
.sv-unlock > svg { width: 28px; height: 28px; flex: none; color: var(--accent-strong); }
.sv-unlock-body { flex: 1; min-width: 0; }
.sv-unlock h2 { margin: 0 0 6px; font-size: var(--text-md); }
.sv-unlock p { margin: 0 0 12px; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.sv-unlock [role="status"]:empty { display: none; }
.sv-overview-locked .sv-unlock { margin: 0; }
/* Home asks for a passphrase before the overview, in line with it. */
.sv-unlock.sv-seal { margin: 28px 0 0; }

/* The undo in the notice at the foot of the window, after a deletion. */
.sv-undo {
  flex: none; min-height: 44px; padding: 0 14px;
  border: 1px solid currentColor; border-radius: var(--radius-md);
  background: transparent; color: inherit; font: inherit; font-weight: 650; cursor: pointer;
}

/* ------------------------------------------- the workspace's state, on Home

   Five figures in a row, each opening the service it counts: a ruled
   strip, not cards, read across like an instrument panel. */

.sv-state { margin: 26px 0 0; }
.sv-state[hidden] { display: none; }
.sv-state-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--sv-line); border-radius: var(--radius-lg); background: var(--paper-raised); overflow: hidden; }
.sv-state-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px 15px; color: var(--ink); text-decoration: none; border-left: 1px solid var(--sv-line); }
.sv-state-cell:first-child { border-left: 0; }
.sv-state-cell { transition: background-color var(--dur-2) var(--ease-standard); }
.sv-state-cell:hover { background: var(--paper-inset, var(--paper)); }
.sv-state-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sv-state-n { font-size: var(--text-xl); line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sv-state-label { font-size: var(--text-2xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sv-state-sub { font-size: var(--text-2xs); line-height: 1.4; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sv-state-warn .sv-state-n { color: var(--danger); }
@media (max-width: 1100px) {
  .sv-state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-state-cell:nth-child(3n + 1) { border-left: 0; }
  .sv-state-cell:nth-child(n + 4) { border-top: 1px solid var(--sv-line); }
}
@media (max-width: 600px) {
  .sv-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-state-cell { min-height: 44px; padding: 12px 14px; }
  .sv-state-cell:nth-child(3n + 1) { border-left: 1px solid var(--sv-line); }
  .sv-state-cell:nth-child(2n + 1) { border-left: 0; }
  .sv-state-cell:nth-child(n + 3) { border-top: 1px solid var(--sv-line); }
  .sv-state-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sv-state-n { font-size: var(--text-lg); }
}

/* --------------------------------------------------- what is due, on Home */

.sv-due { margin: 22px 0 18px; }
.sv-due[hidden] { display: none; }
.sv-due .sv-lib-head { margin-bottom: 10px; }
.sv-due .sv-lib-head h2 { margin: 0; font-size: var(--text-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sv-due-list { padding: 6px; }
.sv-due-list .sv-row > svg { width: 18px; height: 18px; flex: none; color: var(--ink-faint); }
.sv-due-when { flex: none; font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sv-due-when.sv-due-late { color: var(--danger); }
.sv-due-all .sv-row-title { color: var(--ink-soft); font-weight: 600; }

/* ---------------------------------------------------- the register table

   One table for every register (pro-code/sovereign-table.js). Below 600
   pixels each row is a card: the primary column as its heading, the
   others as labelled lines. */

.sv-table { display: flex; flex-direction: column; gap: 8px; }
.sv-table-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sv-table-find { flex: 1 1 220px; max-width: 360px; }
.sv-table-find .svs-input { width: 100%; }
.sv-table-count { font-size: var(--text-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sv-table-cols { position: relative; margin-left: auto; }
.sv-table-cols > summary { list-style: none; }
.sv-table-cols > summary::-webkit-details-marker { display: none; }
.sv-table-cols[open] > .sv-table-colbox { --os-fade: var(--dur-fade); animation: os-menu-in var(--dur-3) var(--ease-standard) backwards; }
.sv-table-colbox {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 8px 10px;
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-md);
}
.sv-table-scroll { max-height: 62vh; overflow: auto; border: 1px solid var(--sv-line); border-radius: var(--radius-md); background: var(--paper-raised); }
.sv-table table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.sv-table thead th { position: sticky; top: 0; z-index: 1; background: var(--paper-inset); text-align: left; border-bottom: 1px solid var(--sv-line); padding: 0; }
.sv-table-sort {
  display: flex; align-items: center; gap: 4px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: var(--text-2xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; text-align: left;
  transition: color var(--dur-2) var(--ease-standard);
}
.sv-table-sort:hover { color: var(--ink); }
.sv-table-dir { color: var(--accent-strong); }
.sv-table td { padding: 8px 10px; border-bottom: 1px solid var(--sv-line); vertical-align: top; color: var(--ink-soft); overflow-wrap: anywhere; }
.sv-table td.sv-table-primary { color: var(--ink); font-weight: 600; }
.sv-table td small { display: block; color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 400; }
.sv-table tbody tr[data-row] { cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard); }
.sv-table tbody tr[data-row]:hover { background: var(--sv-hover); }
.sv-table tbody tr.sv-table-hot:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.sv-table-gap td { padding: 0; border: 0; }
.sv-table-none td { padding: 18px 12px; color: var(--ink-faint); text-align: center; }
.sv-table-cards table, .sv-table-cards tbody, .sv-table-cards thead { display: block; }
.sv-table-cards thead tr { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
.sv-table-cards thead th { position: static; border: 0; background: transparent; }
.sv-table-cards .sv-table-sort { min-height: 44px; width: auto; border: 1px solid var(--sv-line); border-radius: var(--radius-pill); }
.sv-table-cards tbody tr[data-row] { display: block; padding: 10px 12px; border-bottom: 1px solid var(--sv-line); }
.sv-table-cards tbody td { display: flex; gap: 10px; padding: 2px 0; border: 0; }
.sv-table-cards tbody td::before { content: attr(data-label); flex: 0 0 34%; color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 600; }
.sv-table-cards tbody td.sv-table-primary { display: block; font-size: var(--text-sm); padding-bottom: 4px; }
.sv-table-cards tbody td.sv-table-primary::before, .sv-table-cards tbody td[data-label=""]::before { content: none; }
.sv-table-cards .sv-table-gap, .sv-table-cards .sv-table-gap td, .sv-table-cards .sv-table-none, .sv-table-cards .sv-table-none td { display: block; }
.sv-table-cards .sv-table-cols { display: none; }

/* ---------------------------------------------------------- what was sent */

.sv-drawer-note { margin: 0 4px 10px; color: var(--ink-soft); font-size: var(--text-2xs); line-height: 1.5; }
.sv-drawer-note:empty { display: none; }
.sv-sent b { overflow-wrap: anywhere; font-family: var(--font-mono); font-weight: 600; }
.sv-sent details { margin-top: 4px; }
.sv-sent summary { cursor: pointer; font-size: var(--text-2xs); color: var(--accent-strong); }
.sv-sent-body { margin: 4px 0 0; padding: 8px; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-2xs); background: var(--paper-inset); border-radius: var(--radius-sm); }

/* ------------------------------------------------------ phones and fingers

   Review and decision screens are used on phones: below 600 pixels a
   service's actions stay in reach at the foot of the screen, and every
   control is big enough for a finger (WCAG 2.5.8 asks 24 pixels; 44 is
   what a thumb needs). */
@media (max-width: 600px) {
  .svs .svs-actions { position: sticky; bottom: 0; z-index: 2; padding: 8px 0; background: var(--paper); box-shadow: 0 -10px 12px -10px var(--paper); }
  .svs .svs-actions .sv-btn, .svs .sv-btn-sm { min-height: 44px; }
  .svs .svw-opt { min-height: 44px; align-items: center; }
  .svs-input { min-height: 44px; }
  .sv-ws-btn { max-width: 44px; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .sv-ws-btn .sv-ws-name { display: none; }
}
@media (pointer: coarse) {
  .sv-table-sort, .sv-ws-menu button { min-height: 44px; }
}

/* ------------------------------------------------------------ arriving

   How the window moves, in the site's own measures (theme.css: --dur-2
   for a colour under the pointer, --dur-3 for a notice or a list's rows,
   --dur-4 for a screen, --stagger between rows). Every entrance here uses
   theme.css's keyframes or moves by its distances, and says so with
   --os-fade, so with motion switched down each is a fade of 100ms and
   nothing moves; gentle keeps the fades and the steps. No rule of this
   sheet's own ends motion: data-motion on <html> governs all of it, as
   it does on every other page. Nothing below runs on its own: each is
   the reply to a thing somebody did, over in 450ms at most.

   The start screen deals itself out each time it is brought forward: the
   title block, then the open panel and the Console beside it (above), the
   figures, what is due, the cards of the overview a step apart, and the
   services. */
.sv-home.sv-on .sv-eyebrow, .sv-home.sv-on .sv-home-title, .sv-home.sv-on .sv-lead,
.sv-home.sv-on .sv-state, .sv-home.sv-on .sv-due, .sv-home.sv-on .sv-overview > .sv-lib-head, .sv-home.sv-on .sv-ov-grid > .sv-ov,
.sv-home.sv-on .sv-services, .sv-home.sv-on .sv-shelves { --os-fade: var(--dur-fade); }
.sv-home.sv-on .sv-eyebrow, .sv-home.sv-on .sv-home-title, .sv-home.sv-on .sv-lead { animation: os-rise var(--dur-4) var(--ease-emph) backwards; }
.sv-home.sv-on .sv-lead { animation-delay: var(--os-step); }
.sv-home.sv-on .sv-state, .sv-home.sv-on .sv-due, .sv-home.sv-on .sv-shelves { animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; animation-delay: calc(var(--os-step) * 2); }
.sv-home.sv-on .sv-overview > .sv-lib-head, .sv-home.sv-on .sv-services { animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; animation-delay: calc(var(--os-step) * 3); }
.sv-home.sv-on .sv-ov-grid > .sv-ov { animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; animation-delay: calc(var(--os-step) * 3); }
.sv-home.sv-on .sv-ov-grid > .sv-ov:nth-child(2) { animation-delay: calc(var(--os-step) * 3 + var(--stagger)); }
.sv-home.sv-on .sv-ov-grid > .sv-ov:nth-child(n+3) { animation-delay: calc(var(--os-step) * 3 + var(--stagger) * 2); }

/* A screen brought forward, Home to a service or one service to another:
   its toolbar fades in where it sits and the work rises under it, with
   the summary beside it a step behind. The view is hidden and shown as
   tabs change, so this runs each time one is brought forward, and not
   when a screen is drawn again for a change inside it. */
.sv-view.sv-on > .sv-toolbar { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
.sv-service-stage > .svs { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-4) var(--ease-standard) backwards; }
.sv-service-stage > .svs > .svs-side { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-4) var(--ease-standard) var(--os-step) backwards; }

/* Lists dealt a step apart, within 450ms however long they are: the
   tools that can open the file just dropped on Home, a register table's
   rows the first time it is drawn (sovereign-table.js), a sidebar group
   opened by hand, and any list a service marks svs-deal the first time
   it draws it (Frameworks and controls does, for the cards of the
   frameworks). */
.svs-deal > *, .sv-matches > *, .sv-table-fresh > tr[data-row] { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
:is(.svs-deal, .sv-matches, .sv-table-fresh, .sv-group.sv-opening .sv-group-list) > :nth-child(2) { animation-delay: var(--stagger); }
:is(.svs-deal, .sv-matches, .sv-table-fresh, .sv-group.sv-opening .sv-group-list) > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
:is(.svs-deal, .sv-matches, .sv-table-fresh, .sv-group.sv-opening .sv-group-list) > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
:is(.svs-deal, .sv-matches, .sv-table-fresh, .sv-group.sv-opening .sv-group-list) > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
:is(.svs-deal, .sv-matches, .sv-table-fresh, .sv-group.sv-opening .sv-group-list) > :nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
:is(.svs-deal, .sv-matches, .sv-table-fresh, .sv-group.sv-opening .sv-group-list) > :nth-child(n+7) { animation-delay: calc(var(--stagger) * 6); }

/* A row just added to a list (a control of your own, a finding logged, a
   piece of evidence filed) rises into it on the curve for a large
   entrance, ahead of anything else arriving; SovereignKit.arrived marks
   it the once and takes the mark off after. A figure that has changed
   pops on the spring (svs-bump), as a tick does elsewhere on the site.
   A status line rises in as it is said (SovereignKit.note marks it). */
.svs-new { --os-fade: var(--dur-fade); animation: os-rise var(--dur-4) var(--ease-emph) backwards; animation-delay: 0s; }
.svs-bump { display: inline-block; --os-fade: var(--dur-fade); animation: os-pop var(--dur-4) var(--ease-spring); }
.svs-hint.svs-said { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }

/* The tour (sovereign-app.js), drawn as the Photo Editor's is: a card
   beside each stop with the part it describes outlined. */
.sv-coach {
  position: fixed; z-index: 1001; width: min(300px, calc(100vw - 16px)); box-sizing: border-box; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px var(--accent), 0 14px 36px -10px rgba(0,0,0,.45);
  font-size: var(--text-xs); line-height: 1.45;
}
.sv-coach h2 { margin: 0 0 4px; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.sv-coach p { margin: 0 0 10px; color: var(--ink-soft); }
.sv-coach .sv-coach-n { margin: 0 0 4px; font-size: var(--text-2xs); color: var(--accent-strong); }
.sv-coach-row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.sv-coach-target { outline: 2px solid var(--accent) !important; outline-offset: -2px; }