/* 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;
}
.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;
}
.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;
}
.sv-tab:hover { background: var(--sv-hover); color: var(--ink); }
.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;
}
.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; }
.sv-tab.sv-busy .sv-gico { animation: sv-pulse 1s ease-in-out 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;
}
.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;
}
.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 .15s ease;
  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; }
.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. */
@keyframes sv-arrive { from { opacity: 0; } }
html[data-pro-code="loading"]:not(.sv-live) .sv-home-in { visibility: hidden; }
html.sv-live .sv-home-in { animation: sv-arrive .2s ease-out both; }
.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;
}
.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.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;
}
.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; }
.sv-open.sv-has-file .sv-file { display: flex; }
.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;
}
.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; }
.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;
}
.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);
}
.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: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 .12s ease;
}
.sv-frame.sv-ready { opacity: 1; }
.sv-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  pointer-events: none;
}
.sv-loading span {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
}
.sv-loading span::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  border-top-color: var(--ink-soft);
  animation: sv-spin .7s linear infinite;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }
.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; }
.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;
}
.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);
}
.sv-palette.sv-on { display: flex; }
.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%);
    transition: transform .2s ease;
    box-shadow: 0 0 0 100vmax transparent;
  }
  html:is(.sv-live, [data-pro-code="loading"]) .sv.sv-drawer .sv-side {
    transform: none;
    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; }
  /* 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; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-frame, .sv-side, .sv-chev { transition: none !important; }
}
:root[data-motion="none"] .sv-frame,
:root[data-motion="none"] .sv-side { transition: none !important; }

.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; }
.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;
}
.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;
}
.svs-link:hover { border-color: var(--rule-strong); }

.svs-result { margin-top: 28px; }
.svs-result[hidden] { display: none; }
.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;
}
.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;
}
.svt-modes button:hover { color: var(--ink); }
.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; }

.svt-pic {
  position: relative;
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  background: var(--paper-raised);
  overflow: hidden;
}
.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; }
.svt-fill i { display: block; height: 100%; width: 0; background: var(--good); transition: width .15s ease; }
.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; }
.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; }
.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);
}
.sv-dialog { font-size: 13px; }
.sv-dialog .sv-btn { font-size: 13px; }
.sv-dialog::backdrop { background: rgba(10, 10, 14, .35); }
.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 .15s linear; }
.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); }
.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;
}
.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-tag { display: none; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--paper-raised); color: var(--ink); font-size: var(--text-2xs); font-weight: 650; }
.sv.sv-demo .sv-ws-btn { border-color: var(--warn); color: var(--ink); background: var(--warn-soft); }
.sv.sv-demo .sv-ws-tag { display: inline; }
.sv.sv-demo .sv-ws-tag[hidden] { display: none; }
.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 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;
}
.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: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-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;
}
.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; }
.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, .sv.sv-demo .sv-ws-tag { display: none; }
  .sv.sv-demo .sv-ws-btn { box-shadow: inset 0 -3px 0 var(--warn); }
}
@media (pointer: coarse) {
  .sv-table-sort, .sv-ws-menu button { min-height: 44px; }
}

/* Less motion: nothing in the application moves, loops or slides; what
   changes, changes at once. */
@media (prefers-reduced-motion: reduce) {
  .sv *, .sv-palette *, .sv-drawer *, html.sv-live .sv-home-in { animation: none !important; transition: none !important; }
}
:root[data-motion="none"] .sv *,
:root[data-motion="none"] .sv-palette *,
:root[data-motion="none"] .sv-drawer * { animation: none !important; transition: none !important; }

/* 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; }