/* Cisoly — house style for portal and console.
   Light sidebar with section labels, white cards, indigo accent. */

:root {
  /* Spacing and radius tokens live in tokens.css; nothing is aliased here. */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
a { color: inherit; }
h1 { font-size: 1.6rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.02rem; font-weight: 600; margin: 0; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; background: var(--canvas); border: 1px solid var(--hairline); padding: .1em .4em; border-radius: 6px; }
.icon { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------- layout */
.shell { display: flex; min-height: 100vh; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { padding: 1.7rem 2.2rem 3rem; display: flex; flex-direction: column; gap: 1.3rem; }
/* A form that wraps several cards gives them the same spacing as
   standalone cards. */
.content > form { display: flex; flex-direction: column; gap: 1.3rem; }

/* -------------------------------------------------------------- sidebar */
.sidebar {
  width: 250px; flex: none;
  background: var(--card);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  padding: 1.3rem 1rem 1.1rem;
  gap: 1.1rem;
  /* Fixed at screen height: the menu scrolls inside, name and log out
     stay in view at all times. */
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: .6rem; padding: 0 .5rem .4rem; }
.brand-logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--violet); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
}
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.brand-sub { color: var(--secondary); font-size: .72rem; font-weight: 600; margin-left: auto; letter-spacing: .06em; }

/* The menu scrolls against the sidebar's own border: the list reaches into
   the right padding (negative margin) and puts that padding back on its
   content, so the scrollbar sits at the edge and the items stay where they
   were. */
.side-nav { display: flex; flex-direction: column; gap: .1rem; flex: 1; overflow-y: auto;
  margin-right: -1rem; padding-right: 1rem; scrollbar-width: thin; }
.side-label {
  color: var(--secondary); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 1rem .6rem .35rem;
}
.side-nav > .side-label:first-child { padding-top: .2rem; }
.side-nav-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .6rem; border-radius: 10px;
  text-decoration: none; color: var(--body); font-weight: 500;
}
.side-nav-item .icon { color: var(--secondary); }
.side-nav-item:hover { color: var(--ink); background: var(--canvas); }
.side-nav-item:hover .icon { color: var(--body); }
.side-nav-item.active { color: var(--ink); background: var(--neutral-tint); font-weight: 600; }
.side-nav-item.active .icon { color: var(--violet-text); }

/* No border: the card sits flush at the foot of the sidebar, its top
   rule the only line; the sidebar's own padding around it is cut to 4px
   on the sides and the bottom. */
.sidebar-footer {
  border: 0; border-top: 1px solid var(--user-card-rule); border-radius: 0;
  padding: 10px 0 0; margin: 0 calc(4px - 1rem) calc(4px - 1.1rem);
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-footer .user-card-top, .sidebar-footer .user-card-foot { padding-left: 8px; padding-right: 8px; }
.sidebar-footer .user-card-foot { padding-bottom: 6px; }
.user-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--violet-tint); color: var(--violet-text);
  display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-sans); letter-spacing: .02em;
}
.user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.user-name { font-weight: 600; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.user-mail { font-size: 12px; line-height: 1.3; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-more { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; color: var(--secondary); }
.user-more:hover, .user-more:focus-visible { color: var(--violet-text); background: var(--violet-tint); }
/* The two rules of the card in the lightest grey there is (--skeleton), the
   version small and in the lightest text the brand allows. */
.user-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--user-card-rule); }
.user-card-foot .brand-version { font-size: 11px; color: var(--user-card-text); }
.user-out { color: var(--violet-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.user-out:hover { text-decoration: underline; }
/* Signing out is a POST: the link is a button that looks like the link. */
.user-out-form { margin: 0; }
button.user-out { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
                  cursor: pointer; text-align: right; }

/* -------------------------------------------------------------- top bar */
.top-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: .85rem 2.2rem; background: var(--card); border-bottom: 1px solid var(--hairline);
}
.search-field {
  display: flex; align-items: center; gap: .6rem;
  width: min(420px, 42vw);
  border: 1px solid var(--hairline); border-radius: var(--r-control);
  padding: .5rem .8rem; background: var(--card); color: var(--body);
}
.search-field:focus-within { border-color: var(--violet); }
.search-field input { border: 0; outline: 0; flex: 1; font: inherit; color: var(--ink); background: transparent; }
.search-field kbd {
  font-family: inherit; font-size: .72rem; color: var(--body);
  border: 1px solid var(--hairline); border-radius: 6px; padding: .1rem .4rem; background: var(--canvas);
}
.top-bar-right { display: flex; align-items: center; gap: .85rem; }
/* The domain picker: the same shape as the language picker, a touch wider; a
   fixed domain (a user with a single domain) is shown as plain text. */
.top-bar-left { display: flex; align-items: center; gap: .85rem; }
.domain-picker { max-width: 260px; font-weight: 600; }
.sidebar-domain { display: none; padding: 10px 14px 4px; }
.sidebar-domain .domain-picker { display: block; width: 100%; max-width: 100%; margin-top: 6px; }
.domain-picker.fixed { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--hairline);
  border-radius: 8px; font: 600 13px/1 var(--font-sans); color: var(--ink); white-space: nowrap; }
.top-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--violet-tint); color: var(--violet-text);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.top-who { display: flex; flex-direction: column; line-height: 1.25; }
.top-name { font-weight: 600; font-size: .88rem; }
.top-role { color: var(--body); font-size: .76rem; }

/* --------------------------------------------------------------- page */
.page-heading { display: flex; flex-direction: column; gap: .2rem; }
.page-sub { color: var(--body); }

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 1.25rem 1.4rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.card.stat { display: flex; flex-direction: column; gap: .55rem; }
.stat-heading { display: flex; align-items: center; gap: .55rem; color: var(--body); font-weight: 500; font-size: .86rem; }
.stat-heading .icon {
  width: 30px; height: 30px; padding: 6px; border-radius: 9px;
  background: var(--canvas); border: 1px solid var(--hairline); color: var(--body);
}
.stat-rule { display: flex; align-items: center; gap: .6rem; }
.stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-delta { font-size: .76rem; font-weight: 600; padding: .17rem .5rem; border-radius: 999px; }
.stat-delta.good { color: var(--green-text); background: var(--green-tint); }
.stat-delta.attention { color: var(--red-text); background: var(--red-tint); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.05rem; }
.card-heading-links { display: flex; align-items: center; gap: .6rem; }
.card-heading-links .icon { color: var(--body); }
.card-sub { color: var(--body); font-size: .8rem; }
.card-link { color: var(--violet-text); font-weight: 600; font-size: .84rem; text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.two-column { display: grid; grid-template-columns: 1.1fr 1.3fr; gap: 1rem; }
/* Equal width, not 1.1fr against 1.3fr: on the dashboard the two cards of a
   row carry the same weight -- IT risks beside OT risks -- so an even split
   is what a reader expects. Only the dashboard pairs its columns this way; a
   .two-column without .equal keeps the wider right-hand column. Stays above
   the max-width:980px rule, which has the same specificity and wins only by
   standing later.

   The gap is the 14px of a dashboard card (section 23), not the 24px the
   plain .two-column carries. That is what makes the seam between these two
   cards fall exactly where the seam between the stat cards above it falls:
   both grids then divide the same width by the same gutter, so an even
   number of stat cards lines up with the pair below. */
.two-column.equal { grid-template-columns: 1fr 1fr; gap: 14px; }

/* ------------------------------------------------------------- mobile */
.hamburger { display: none; border: 1px solid var(--hairline); background: var(--card);
             border-radius: 8px; padding: .45rem .55rem; cursor: pointer; color: var(--ink);
             align-items: center; }
.side-scrim { display: none; }
.only-narrow { display: none; }
@media (max-width: 980px) {
  .two-column, .two-column.equal { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 264px;
             overflow-y: auto; transform: translateX(-105%); transition: transform .2s ease;
             box-shadow: 0 10px 40px rgba(15, 18, 34, .18); }
  .shell.sidebar-open .sidebar { transform: none; }
  .shell.sidebar-open .side-scrim { display: block; position: fixed; inset: 0; z-index: 30;
                                   background: rgba(15, 18, 34, .35); }
  .hamburger { display: inline-flex; }
  .search-field { display: none; }
  /* The domain picker moves out of the top bar into the menu. */
  .top-bar-left { display: none; }
  .sidebar-domain { display: block; }
  .top-bar { padding-left: .9rem; padding-right: .9rem; gap: .6rem; }
  .top-who { display: none; }
  .content { padding: 1rem .9rem 2.5rem; gap: 1rem; }
  h1 { font-size: 1.3rem; }
  /* Wide tables scroll inside their card instead of the page. */
  .card { overflow-x: auto; }
  .rule-form { flex-wrap: wrap; }
  .page-heading .page-sub { display: block; }
  /* An action that sits in the last table column on desktop falls out of
     view on a narrow screen; there it belongs under the name. */
  .only-narrow { display: block; margin-top: 4px; }
}
@media (max-width: 700px) {
  /* Inline grids (such as the control editor) stack into a single column. */
  .content [style*="grid-template-columns"] { display: block !important; }
  .content [style*="grid-template-columns"] > * { margin-bottom: .8rem; }
}

/* ------------------------------------------------------------------ bars */
.bars { display: flex; align-items: flex-end; gap: 1rem; height: 200px; padding-top: .4rem; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; height: 100%; justify-content: flex-end; }
.bar i {
  display: block; width: 100%; max-width: 36px; height: var(--h);
  border-radius: 8px;
  background: linear-gradient(180deg, #7C7AF0 0%, #5B57E8 100%);
}
.bar:nth-child(2n) i { background: linear-gradient(180deg, #6EE7DA 0%, #2CC8B4 100%); }
.bar span { font-size: .74rem; color: var(--body); }

/* ---------------------------------------------------------------- table */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--secondary); font-weight: 600; padding: .55rem .6rem; border-bottom: 1px solid var(--hairline);
}
.table td { padding: .72rem .6rem; border-bottom: 1px solid var(--hairline); }
.table tr:last-child td { border-bottom: none; }
.pill { font-size: .74rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; }
.pill.open { color: var(--red-text); background: var(--red-tint); }
.pill.planned { color: var(--violet-text); background: var(--violet-tint); }
.pill.active-green { color: var(--green-text); background: var(--green-tint); }

/* ------------------------------------------------ reports and forms */
.report { border-radius: 10px; padding: .7rem 1rem; font-weight: 500; border: 1px solid var(--hairline); background: var(--card); }
.report.success { border-color: #BFE8D4; background: var(--green-tint); color: var(--green-text); }
.report.error { border-color: #F6C6C2; background: var(--red-tint); color: var(--red-text); }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; align-items: end; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--body); }
.form input[type="text"], .form input[type="email"], .form input:not([type]) {
  border: 1px solid var(--hairline); border-radius: var(--r-control); padding: .55rem .7rem; font: inherit; color: var(--ink);
}
.form .tick-mark { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
.button {
  background: var(--violet); color: #fff; border: 0; border-radius: 10px;
  padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer;
}
.button:hover { background: var(--violet-hover); }
.button.small { padding: .35rem .7rem; font-size: .78rem; background: var(--card); color: var(--ink); border: 1px solid var(--hairline); }
.button.small:hover { border-color: var(--body); }
.button.small.danger { color: var(--red-text); border-color: #F6C6C2; }
.button.small.danger:hover { background: var(--red-tint); }
.button.danger { background: var(--red-text); }
.button.danger:hover { background: #B91C1C; }
.language-picker { border: 1px solid var(--hairline); border-radius: 8px; background: var(--card);
              color: var(--ink); font: inherit; font-size: .8rem; padding: .3rem .5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--violet-tint);
        color: var(--violet-text); border-radius: 999px; padding: .25rem .7rem; font-size: .82rem;
        font-weight: 500; }
.chip-x { border: none; background: none; color: inherit; font-size: 1rem; cursor: pointer;
          line-height: 1; padding: 0; }
.toggle { appearance: none; position: relative; width: 40px; height: 22px; flex: 0 0 40px;
           background: #D1D5DB; border-radius: 999px; cursor: pointer; transition: background .15s; }
.toggle:checked { background: var(--violet); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
                  border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle:checked::after { transform: translateX(18px); }
.toggle:disabled { opacity: .55; cursor: default; }

/* ------------------------------------------------ document workspace */
.doc-workspace { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 980px) { .doc-workspace { grid-template-columns: 1fr; } }
.doc-entry { border: 1px solid var(--hairline); border-radius: 8px; padding: .4rem .6rem;
              font: inherit; font-size: .85rem; }
.doc-section { border-top: 1px solid var(--hairline); padding: 1rem 0; }
.doc-section-title { border: none; background: transparent; font: inherit; font-weight: 600;
                    font-size: 1rem; width: 100%; padding: .2rem 0; }
.doc-section-title:focus { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; }
.doc-toolbar { display: flex; gap: .25rem; margin: .4rem 0; }
.doc-toolbar button { border: 1px solid var(--hairline); background: var(--card); border-radius: 6px;
                      padding: .2rem .55rem; cursor: pointer; font-size: .8rem; color: var(--ink); }
.doc-toolbar button:hover { border-color: var(--violet); color: var(--violet-text); }
.doc-editor { border: 1px solid var(--hairline); border-radius: 10px; padding: .7rem .9rem;
              min-height: 90px; background: var(--card); font-size: .9rem; }
.doc-editor:focus { outline: 2px solid var(--violet); outline-offset: 1px; }
.doc-comments { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.doc-comment { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
                 background: var(--canvas); border-radius: 8px; padding: .45rem .7rem; font-size: .84rem; }
.doc-comment.af { opacity: .5; }

/* The continuous document page (Confluence-like). */
.doc-canvas { padding: 2rem 2.6rem 2.2rem; }
.doc-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
           margin-bottom: .6rem; flex-wrap: wrap; }
.doc-title { font-size: 1.75rem; letter-spacing: -.02em; }
.doc-meta { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; flex-wrap: wrap; }
.doc-toolbar.sticky { position: sticky; top: 0; z-index: 5; background: var(--card);
                        border-bottom: 1px solid var(--hairline); padding: .5rem 0; margin: .4rem 0 0;
                        align-items: center; }
.doc-flow { margin-top: 1.1rem; }
.doc-flow-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.doc-flow-title { font-size: 1.15rem; font-weight: 600; margin: 0; padding: .15rem 0; flex: 1; }
.doc-flow-title:focus { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.doc-flow-actions { display: flex; align-items: center; gap: .35rem; }
.doc-comment-button { border: none; background: none; cursor: pointer; font-size: .85rem;
                      color: var(--body); padding: .2rem .4rem; border-radius: 6px; }
.doc-comment-button:hover { background: var(--canvas); }
.doc-editor.fluid { border: none; border-radius: 0; padding: .2rem 0 .6rem; min-height: 40px; }
.doc-editor.fluid:focus { outline: none; box-shadow: inset 3px 0 0 var(--violet-tint); padding-left: .6rem; }
.doc-comments.thread { background: var(--canvas); border-radius: 10px; padding: .7rem .8rem; margin: .3rem 0 .6rem; }
.statement-block { border: 1px solid var(--hairline); border-left: 3px solid var(--green-text);
                   border-radius: 10px; padding: .6rem .9rem; margin: .5rem 0; background: var(--card); }
.statement-heading { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.doc-editor.statement { border: none; padding: 0; min-height: 24px; font-size: .9rem; }
.doc-editor.statement:focus { outline: none; box-shadow: inset 3px 0 0 var(--green-tint); padding-left: .5rem; }

/* --------------------------------------------- collapsible menu groups */
.side-group { border: none; }
.side-group-heading { display: flex; align-items: center; gap: .55rem; padding: .5rem .55rem;
                border-radius: 9px; cursor: pointer; font-weight: 600; font-size: .86rem;
                color: var(--ink); list-style: none; user-select: none; }
.side-group-heading::-webkit-details-marker { display: none; }
.side-group-heading:hover { background: var(--canvas); }
.side-group-heading .icon { color: var(--body); }
/* The arrow is the fold button: a larger hit area than its 14px glyph. */
.sidegroup-arrow { margin-left: auto; width: 14px; height: 14px; transition: transform .15s; box-sizing: content-box; padding: 6px; margin-right: -6px; }
.side-group[open] > .side-group-heading .sidegroup-arrow { transform: rotate(90deg); }
.side-group .side-nav-item { padding-left: 2.1rem; font-size: .84rem; }
td.actions { display: flex; gap: .4rem; flex-wrap: wrap; }
td.actions form { margin: 0; }

/* -------------------------------------------------------------- row forms */
.rule-form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.rule-form select, .form select {
  border: 1px solid var(--hairline); border-radius: var(--r-control); padding: .45rem .6rem;
  font: inherit; color: var(--ink); background: var(--card);
}
.assignment { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; padding: .6rem 0; border-bottom: 1px solid var(--hairline); }
.assignment:last-of-type { border-bottom: none; }
.assignment .tick-marks { display: flex; gap: .9rem; flex-wrap: wrap; }
.tick-mark { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--body); }

.report.customer_view { border-color: #D9D6FA; background: var(--violet-tint); color: var(--violet-text); }
.report.customer_view a { color: var(--violet-text); font-weight: 600; }

/* Customer logo top left (house style) */
.brand-image { height: 30px; max-width: 140px; object-fit: contain; border-radius: 6px; }
.button.small.subtle { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
.button.small.subtle:hover { background: var(--canvas); }
.pill.danger { color: var(--red-text); background: var(--red-tint); }

/* Document workspace: the controls (grey, process) apart from the paper (white, content) */
.doc-controls { background: var(--canvas); }
.doc-paper {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 1.6rem 2.4rem 2.2rem; margin-top: 1rem;
  box-shadow: 0 1px 4px rgba(20, 24, 40, .06);
}
.statement-tools { display: inline-block; position: relative; }
.statement-tools > summary { list-style: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 1px solid var(--hairline); border-radius: 6px; color: var(--secondary); }
.statement-tools > summary::-webkit-details-marker { display: none; }
.statement-tools[open] > summary { background: var(--canvas); }
/* Tools for a statement: folder, linked requirements, linked
   controls — three labelled groups side by side, stacked on a narrow screen. */
.statement-panel { display: grid; grid-template-columns: minmax(200px, 300px) minmax(240px, 1fr) minmax(240px, 1fr) auto;
  gap: 16px 24px; align-items: start; margin-top: 8px; padding: 12px 14px; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 4px; }
.stmt-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stmt-group > .field-label { font: 600 13px/1.3 var(--font-sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
.stmt-row { display: flex; gap: 8px; align-items: center; }
.stmt-row .doc-entry { flex: 1 1 auto; min-width: 0; }
.stmt-row .button { flex: none; }
.statement-panel .link-pane { min-height: 40px; padding: 4px 8px; gap: 6px; }
.statement-panel .link-pane .chip { height: 28px; padding: 0 4px 0 10px; font-size: 13px; }
.statement-panel .link-pane .chip.fixed { padding-right: 10px; }
.statement-panel .link-pane-entry { min-width: 150px; height: 28px; }
.stmt-actions { align-self: end; }
@media (max-width: 980px) { .statement-panel { grid-template-columns: 1fr; } .stmt-actions { align-self: start; } }
.statement-tools[open] { display: block; }
@media (max-width: 700px) { .doc-paper { padding: 1rem; } }

/* Progress bars on the dashboard */
.progress-bar-row { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.progress-bar-label { color: var(--body); font-size: .78rem; width: 110px; flex: none; }
.progress-bar { flex: 1; height: 8px; background: var(--canvas); border: 1px solid var(--hairline);
         border-radius: 999px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--green-text); border-radius: 999px;
           transition: width .3s ease; }
.progress-bar i.second { background: var(--violet); }
.progress-bar-pct { width: 42px; text-align: right; font-size: .78rem; font-weight: 600;
             font-variant-numeric: tabular-nums; }

/* Link groups on the requirement page: a dropdown per framework/document */
.link-group-box { border-top: 1px solid var(--hairline); padding: .45rem 0; }
.link-group-box > summary { cursor: pointer; display: flex; align-items: center; gap: .55rem;
                         list-style: none; }
.link-group-box > summary::-webkit-details-marker { display: none; }
.link-group-box > summary::before { content: "▸"; color: var(--secondary); font-size: .8rem;
                                 transition: transform .15s ease; }
.link-group-box[open] > summary::before { transform: rotate(90deg); }
.link-group-box .tick-marks { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: .55rem 0 .3rem 1.1rem; }

/* Process steps: a numbered series with arrows */
.process-steps { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }
.process-step { display: inline-flex; align-items: center; gap: .45rem; background: var(--canvas);
               border: 1px solid var(--hairline); border-radius: 999px; padding: .3rem .8rem .3rem .35rem;
               font-size: .84rem; }
.process-step i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; flex: none;
                 background: var(--violet); color: #fff; display: flex; align-items: center;
                 justify-content: center; font-size: .74rem; font-weight: 700; }
.process-arrow { color: var(--secondary); }

/* Tabs (manual) */
/* More tabs than the width allows: the bar scrolls inside itself, never the page. */
.tabbar { display: flex; gap: .3rem; border-bottom: 2px solid var(--hairline); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar .tab { border: none; background: none; cursor: pointer; font: inherit;
                padding: .55rem 1rem; color: var(--body); font-weight: 600;
                border-bottom: 2px solid transparent; margin-bottom: -2px;
                display: flex; align-items: center; gap: .45rem; flex: none; white-space: nowrap; }
.tabbar .tab:hover { color: var(--ink); }
.tabbar .tab.active { color: var(--violet-text); border-bottom-color: var(--violet); }
.tabbar a.tab { text-decoration: none; }

/* Automatically maintained document sections (Version history, Reviewers, Approval) */
.auto-section { background: var(--canvas); border: 1px dashed var(--hairline); border-radius: 12px;
               padding: .7rem 1rem; margin: .8rem 0; }
.auto-section .doc-editor { opacity: .92; }
.pill.auto-badge { color: var(--violet-text); background: var(--violet-tint); }

/* Text fragment maintained by Cisoly (version/date line) */
.cisoly-managed { background: var(--violet-tint); color: var(--violet-text);
                  border-radius: 6px; padding: .05em .4em; white-space: nowrap; }
.cisoly-managed::after { content: " ⟳"; font-size: .82em; opacity: .75; }

/* Small search box for searchable select lists */
.select-search { font-size: .78rem; padding: .2rem .5rem; max-width: 130px; }

/* Relations section: manageable document relations, recognisable in amber */
.relation-section { background: #FFF8EC; border: 1px dashed #F0D9A8; border-radius: 12px;
                  padding: .7rem 1rem; margin: .8rem 0; }
.pill.relation-badge { color: #92600A; background: #FBEED3; }
.relation-block { display: inline-flex; align-items: center; gap: .45rem;
                background: #fff; border: 1px solid #F0D9A8; border-radius: 10px;
                padding: .35rem .7rem; font-size: .84rem; }
.relation-block .card-link { color: #92600A; }

/* Relation rows: one manageable block per line */
.relation-row { display: flex; align-items: center; gap: .6rem; background: #fff;
               border: 1px solid #F0D9A8; border-radius: 10px; padding: .5rem .8rem;
               font-size: .86rem; }
.relation-row.relation-new { background: transparent; border-style: dashed; }
.relation-comment { color: #92600A; font-size: .78rem; background: #FBEED3;
                     border-radius: 999px; padding: .15rem .6rem; }

/* Field cards: the control fields of a document, each in a box of its own
   with a clear label — console and portal. */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .6rem; margin: .8rem 0; }
.field-card { background: var(--card); border: 1px solid var(--hairline); border-radius: 10px;
  padding: .6rem .75rem; display: flex; flex-direction: column; gap: .45rem;
  min-width: 0; overflow: hidden; }
.field-card-label { font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--secondary); }
.field-card-content { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  min-width: 0; }
.field-card-sub { color: var(--body); font-size: .72rem; margin-top: auto; }
/* Fields and forms stay inside their box: they shrink and wrap rather
   than stick out or cut buttons off. */
.field-card form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  min-width: 0; max-width: 100%; }
.field-card .doc-entry { min-width: 0; flex: 1 1 130px; max-width: 100%; }
.field-card input[type="date"].doc-entry { flex: 0 1 auto; }
.field-card .button { flex: 0 0 auto; white-space: nowrap; }

/* Document typography: tables with visible borders and left-aligned
   content, calm paragraph and list spacing — console and portal. */
.doc-editor table { border-collapse: collapse; width: 100%; margin: .5rem 0 .9rem;
  font-size: .85rem; }
.doc-editor th, .doc-editor td { border: 1px solid var(--hairline); padding: .45rem .65rem;
  text-align: left; vertical-align: top; }
.doc-editor th { background: var(--canvas); font-weight: 600; }
.doc-editor td p, .doc-editor th p { margin: 0; }
/* The three registers Cisoly maintains inside a document -- version
   history, reviewers, approval. A document's own tables stay as the writer
   made them; these carry the table of section 23, so the record of who
   reviewed and who approved reads as a record and not as body text. */
.doc-editor table.cisoly-register { border: 1px solid #C9CCD8; border-radius: 4px;
  border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .82rem; }
.doc-editor table.cisoly-register th { background: var(--violet); color: #fff;
  height: 34px; padding: 0 .7rem; border: none; font-weight: 600;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; }
.doc-editor table.cisoly-register td { border: none; border-top: 1px solid #DDE0E8;
  padding: .5rem .7rem; vertical-align: top; }
.doc-editor table.cisoly-register tbody tr:nth-child(even) td { background: #F7F8FA; }
.doc-editor table.cisoly-register tbody tr:first-child td { border-top: none; }
/* Version numbers and dates line up as figures, not as prose. */
.doc-editor table.cisoly-register td:first-child,
.doc-editor table.cisoly-register td:nth-child(2) { font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The "nothing yet" row spans the table and is a sentence, not a figure. */
.doc-editor table.cisoly-register td[colspan] { font-family: var(--font-sans);
  color: var(--secondary); white-space: normal; }
.doc-editor p { margin: .3rem 0 .6rem; line-height: 1.6; }
.doc-editor ul, .doc-editor ol { margin: .3rem 0 .7rem; padding-left: 1.4rem; }
.doc-editor li { margin: .18rem 0; line-height: 1.55; }
.doc-flow { margin-top: 1.5rem; }
.doc-flow-title { font-size: 1.2rem; }

/* Reading view: the document as calmly typeset policy text. */
.read-page { background: var(--card); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 3rem 3.5rem; max-width: 860px; margin: 0 auto;
  font-family: Charter, Georgia, Cambria, "Times New Roman", serif;
  font-size: 1rem; line-height: 1.7; color: var(--ink); }
.read-cover { text-align: center; border-bottom: 3px double var(--hairline);
  padding-bottom: 1.6rem; margin-bottom: 1.6rem; }
.read-kind { text-transform: uppercase; letter-spacing: .25em; font-size: .8rem;
  color: var(--body); margin: 0 0 .6rem; }
.read-cover h1 { font-size: 2rem; letter-spacing: -.01em; margin: 0 0 .4rem;
  font-weight: 700; }
.read-org { font-style: italic; color: var(--body); margin: 0 0 .8rem; }
.read-rule { font-size: .88rem; color: var(--body); margin: 0 0 .4rem; }
.read-status { display: inline-block; font-size: .78rem; font-family: var(--font, ui-sans-serif), system-ui, sans-serif;
  border: 1px solid var(--hairline); border-radius: 999px; padding: .15rem .7rem;
  color: var(--body); margin: 0; }
.read-status.good { border-color: var(--green-text, #16a34a); color: var(--green-text, #16a34a); }
.read-table_of_contents { border: 1px solid var(--hairline); border-radius: 10px;
  padding: 1rem 1.4rem; margin-bottom: 1.8rem; background: var(--canvas); }
.read-table_of_contents h2 { font-size: .95rem; margin: 0 0 .5rem; }
.read-table_of_contents ol { margin: 0; padding-left: 1.3rem; column-count: 2; column-gap: 2rem; }
.read-table_of_contents li { font-size: .88rem; margin: .15rem 0; }
.read-table_of_contents a { color: var(--ink); text-decoration: none; }
.read-table_of_contents a:hover { color: var(--violet-text); }
.read-chapter { margin: 1.8rem 0; }
.read-chapter h2 { font-size: 1.3rem; margin: 0 0 .7rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--hairline); font-weight: 700; }
.read-content p { margin: .4rem 0 .8rem; }
.read-content ul, .read-content ol { margin: .4rem 0 .8rem; padding-left: 1.6rem; }
.read-content table { border-collapse: collapse; width: 100%; margin: .6rem 0 1rem;
  font-size: .9rem; }
.read-content th, .read-content td { border: 1px solid var(--hairline);
  padding: .5rem .7rem; text-align: left; vertical-align: top; }
.read-content th { background: var(--canvas); font-weight: 600; }
.read-content td p, .read-content th p { margin: 0; }
.read-content .cisoly-managed { background: none; }
.read-statement { display: flex; gap: .8rem; align-items: flex-start;
  border-left: 3px solid var(--violet); background: var(--canvas);
  border-radius: 0 8px 8px 0; padding: .6rem .9rem; margin: .6rem 0; }
.read-statement-code { font-family: ui-monospace, Menlo, monospace;
  font-weight: 700; font-size: .82rem; white-space: nowrap; padding-top: .15rem; }
.read-statement p { margin: 0; }
@media (max-width: 760px) { .read-page { padding: 1.4rem 1.2rem; }
  .read-table_of_contents ol { column-count: 1; } }
@media print {
  .sidebar, .side-scrim, .header-bar, .no-print, .report { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
  .read-page { border: none; padding: 0; max-width: none; }
  .read-chapter { break-inside: avoid-page; }
}

/* Register tables: column lines, zebra rows and matrix colours. */
.table.register th, .table.register td { border-right: 1px solid var(--hairline); }
.table.register th:last-child, .table.register td:last-child { border-right: none; }
.table.register tbody tr:nth-child(even) { background: var(--canvas); }
.table.register td { vertical-align: top; }
.cell-layer { background: #e3f4e6 !important; }
.cell-middle { background: #fdf1dc !important; }
.cell-high { background: #fde5e5 !important; }
.cell-score { font-weight: 700; text-align: center; }

/* Input grid: labelled fields in tidy columns with separator lines,
   for every register form. */
.input-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .65rem .9rem; }
.field { display: flex; flex-direction: column; gap: .28rem; min-width: 0;
  border-left: 2px solid var(--hairline); padding-left: .6rem; }
.field-label { font-size: .7rem; font-weight: 700; color: var(--secondary);
  text-transform: uppercase; letter-spacing: .05em; }
.field .doc-entry { width: 100%; }
.field-wide { grid-column: 1 / -1; }
.field-row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
/* One place for the primary action of a card or a form (brand book §23,
   scripts/save_buttons.py): the action row, right aligned, the last thing
   in the card or the form it saves, one per card and one shown per page.
   This is the only definition; a page never moves the row elsewhere.
   .entry-actions, .setting-actions, .rn-actions and .grp-footer each said
   this in their own way, and only two of the four aligned right: forty-eight
   save buttons sat on the left and fifteen on the right, so the reader had to
   look for the button on nearly every screen. */
.card-actions { display: flex; gap: var(--s-2); align-items: center; justify-content: flex-end;
  margin-top: var(--s-3); }
.card-actions .button { flex: none; min-height: 32px; }
/* A note or a hint may sit on the left of the row; it takes the free space so
   the buttons stay on the right. */
.card-actions .card-sub, .card-actions > span:first-child:not(.button) { margin-right: auto; text-align: left; }
/* In a grid form (.form) the row spans every column. */
.form > .card-actions { grid-column: 1 / -1; }

/* Filter bar above a register. */
.filter-bar { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center;
  margin-bottom: .8rem; }
.filter-bar .doc-entry { font-size: .8rem; }

/* A tab that holds several cards (rather than one card) gets the same
   block spacing as the page itself. */
div.tab-panel { display: flex; flex-direction: column; gap: 1.3rem; }
div.tab-panel[hidden] { display: none; }
div.tab-panel > form { display: flex; flex-direction: column; gap: 1.3rem; }

/* Risk levels: freely configurable names on a fixed colour scale. */
.cell-green { background: var(--green-tint) !important; }
.cell-yellow { background: #FEF6E0 !important; }
.cell-orange { background: #FDECD9 !important; }
.cell-red { background: var(--red-tint) !important; }
.cell-darkred { background: #FBD9DA !important; }
.pill.level-green { background: var(--green-tint); color: var(--green-text); }
.pill.level-yellow { background: #FEF6E0; color: #92650A; }
.pill.level-orange { background: #FDECD9; color: #AA4E08; }
.pill.level-red { background: var(--red-tint); color: var(--red-text); }
.pill.level-darkred { background: #FBD9DA; color: #9B1C1C; }
.cell-lightgreen { background: #F1F9E3 !important; }
.pill.level-lightgreen { background: #F1F9E3; color: #4F7D18; }

/* Control blocks on the framework page: one clearly framed block per
   control, with the chain and the evidence as rows inside that block. */
.control-block { border: 1px solid var(--hairline); border-radius: 10px; background: var(--card);
  padding: .85rem 1rem; margin-bottom: .9rem; }
.control-block > header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .6rem; }
.control-block > header .control-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 6px;
  padding: .15rem .45rem; }
.control-block > header .control-title { font-weight: 600; }
.control-grid { display: grid; grid-template-columns: 2fr 1fr; gap: .8rem; }
@media (max-width: 760px) { .control-grid { grid-template-columns: 1fr; } }
.control-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .5rem 0 0; margin-top: .6rem; border-top: 1px dashed var(--hairline); }
.control-row > .field-card-label { min-width: 90px; }

/* =====================================================================
   House style layer — Cisoly Brand Book v1.2.
   Calm surfaces, a single violet, semantic colours only where they carry
   meaning, near-square corners, no shadow on cards at rest.
   ===================================================================== */
body { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--body); }
h1, h2, h3, .stat-value, .brand-name, strong { color: var(--ink); }
h1 { font: 600 28px/1.2 var(--font-sans); letter-spacing: -.015em; }
h2 { font: 600 18px/1.3 var(--font-sans); }
code, .control-code { font-family: var(--font-mono); }

/* Brand mark: a violet coin with an open ring, gap at the top right. */
.brand-logo { background: var(--violet); border-radius: var(--r-full); display: grid;
  place-items: center; width: 28px; height: 28px; }
.brand-logo i { width: 20px; height: 20px; border-radius: 50%; border: 4.5px solid #fff;
  border-right-color: rgba(255, 255, 255, .32); transform: rotate(-45deg); }
.brand-name { font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.brand-sub, .side-label, .field-label, .field-card-label{
  font: var(--text-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }

/* Sidebar: white, a violet tinted pill for the active item. */
.sidebar { width: 260px; border-right: 1px solid var(--hairline); }
.side-nav-item, .side-group-heading { border-radius: var(--r-control); }
.side-nav-item { color: var(--secondary); font-weight: 400; }
.side-nav-item:hover, .side-group-heading:hover { background: var(--canvas); }
.side-nav-item.active { background: var(--violet-tint); color: var(--violet-text); font-weight: 600; }
.side-nav-item.active .icon { color: var(--violet-text); }
.side-group-heading { color: var(--body); font-weight: 500; }
.side-group-heading .icon, .side-nav-item .icon { color: var(--secondary); }
.sidebar-footer { border-color: var(--user-card-rule); }
.user-avatar, .top-avatar { background: var(--violet-tint); color: var(--violet-text); }

/* Top bar of 72px with a filled search field and no border. */
.top-bar { min-height: 72px; }
.search-field { background: var(--canvas); border: none; border-radius: var(--r-control); }
.search-field kbd { background: var(--card); border-color: var(--hairline); border-radius: var(--r-badge);
  font-family: var(--font-mono); }

/* Cards: 24px of air, a hairline, no shadow. */
.card { border-radius: var(--r-card); border: 1px solid var(--hairline); box-shadow: none;
  padding: var(--s-6); }
.cards-row { gap: var(--s-6); }
.content { gap: var(--s-6); padding: var(--s-6) var(--s-8) var(--s-16); }
.content > form, div.tab-panel, div.tab-panel > form { gap: var(--s-6); }

/* Stat card: the number on top, the label below it, the change after that,
   and one tinted disc at the top right. Nothing else. */
.card.stat { gap: var(--s-2); position: relative; }
.stat-rule { order: 1; }
.stat-heading { order: 2; color: var(--secondary); font: var(--text-label); }
.card.stat > .card-sub, .card.stat > .stat-rows { order: 3; }
.stat-heading .icon { position: absolute; top: var(--s-6); right: var(--s-6);
  width: 56px; height: 56px; padding: 16px; border: none;
  border-radius: var(--r-card); background: var(--violet-tint); color: var(--violet-text); }
.card.stat .stat-rule, .card.stat .stat-heading { padding-right: 68px; }
.stat-value { font: var(--text-stat); letter-spacing: -.02em; }
/* The change under the number is a sentence, not a badge — badges are for
   status. Only the colour carries the direction. */
.stat-delta { background: none; padding: 0; border-radius: 0; font-weight: 500;
  font-size: 13px; color: var(--secondary); }
.stat-delta.good { color: var(--green-text); background: none; }
.stat-delta.attention { color: var(--red-text); background: none; }
a.stat-delta { text-decoration: none; }
a.stat-delta:hover { text-decoration: underline; }
.stat-rule { flex-wrap: wrap; align-items: baseline; }
.stat-rows { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.stat-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 14px; }
.stat-row .stat-row-value { font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--ink); }

/* Buttons: 40px, 4px radius, 600; one primary per screen, never a shadow. */
.button { border-radius: var(--r-control); font-weight: 600; padding: .65rem 1.1rem;
  transition: background var(--t-fast) var(--ease); }
.button:hover { background: var(--violet-hover); }
.button.small { border-radius: var(--r-control); border-color: var(--hairline); color: var(--body); }
.button.small:hover { background: var(--canvas); border-color: var(--hairline); }
.button.danger { background: var(--red-deep); } .button.danger:hover { background: #A32C2D; }
.button.small.danger { color: var(--red-text); border-color: var(--red-tint); }
:where(a, button, input, select, textarea, summary, [contenteditable], [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: none; }

/* Fields: white with a hairline, a violet focus ring with a tinted halo. */
.doc-entry, .form input, .form select, .rule-form select, .language-picker {
  border-radius: var(--r-control); border-color: var(--hairline); color: var(--ink); }
.doc-entry:focus, .form input:focus, .form select:focus {
  border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
.doc-entry:focus-visible, .form input:focus-visible, .form select:focus-visible { box-shadow: none; }
.filter-bar .doc-entry { background: var(--canvas); border: none; }
.toggle:checked { background: var(--violet); }

/* Badges and chips: tint with deep text, 2px radius. Never a solid fill. */
.pill { border-radius: var(--r-badge); font-weight: 500; font-size: 12px; padding: .25rem .5rem; }
.pill.active-green { color: var(--green-text); background: var(--green-tint); }
.pill.open { color: var(--amber-text); background: var(--amber-tint); }
.pill.planned { color: var(--violet-text); background: var(--violet-tint); }
.pill.danger { color: var(--red-text); background: var(--red-tint); }
.pill.relation-badge { color: var(--blue-text); background: var(--blue-tint); }
.chip { border-radius: var(--r-badge); background: var(--violet-tint); color: var(--violet-text); }

/* Tabs: a 2px violet underline, the count in mono. */
.tabbar { border-bottom: 1px solid var(--hairline); }
.tabbar .tab { color: var(--secondary); font-weight: 500; }
.tabbar .tab.active { color: var(--violet-text); border-bottom-color: var(--violet); }
.tabbar a.tab { text-decoration: none; }
.tabbar .tab .pill { font-family: var(--font-mono); }

/* Tables: grey header, 1px lines, alternating rows. */
.table th { background: var(--table-head); color: var(--ink); text-transform: none;
  letter-spacing: 0; font: 500 13px/1.4 var(--font-sans); padding: var(--s-3) var(--s-4); }
.table td { padding: var(--s-4); border-bottom: 1px solid var(--hairline); }
.table.register tbody tr:nth-child(even) { background: var(--canvas); }
.table td code, .control-code { font-size: 13px; }

/* Risk scale: six steps, always with black text so the level stays readable. */
.cell-score { color: var(--risk-text); font-variant-numeric: tabular-nums; }
.cell-lightgreen { background: var(--risk-2) !important; }
.cell-green { background: var(--risk-1) !important; }
.cell-yellow { background: var(--risk-3) !important; }
.cell-orange { background: var(--risk-4) !important; }
.cell-red { background: var(--risk-5) !important; }
.cell-darkred { background: var(--risk-6) !important; color: #fff; }
.cell-layer { background: var(--risk-2) !important; }
.cell-middle { background: var(--risk-3) !important; }
.cell-high { background: var(--risk-5) !important; }
.pill.level-lightgreen { background: var(--risk-2); color: var(--risk-text); }
.pill.level-green { background: var(--risk-1); color: var(--risk-text); }
.pill.level-yellow { background: var(--risk-3); color: var(--risk-text); }
.pill.level-orange { background: var(--risk-4); color: var(--risk-text); }
.pill.level-red { background: var(--risk-5); color: var(--risk-text); }
.pill.level-darkred { background: var(--risk-6); color: #fff; }

/* Charts: violet first, then blue and teal; 3px bar radius. */
.bar i { background: var(--violet); border-radius: 3px; }
.bar:nth-child(2n) i { background: var(--blue); }
.progress-bar { background: var(--skeleton); border: none; }
.progress-bar i { background: var(--green); } .progress-bar i.second { background: var(--violet); }
.process-step i { background: var(--violet); }
.process-step { border-radius: var(--r-control); }

/* Messages: tint, deep text, no border or stripe down the side. */
.report { border: none; border-radius: var(--r-control); font-weight: 400; }
.report.success { background: var(--green-tint); color: var(--green-text); }
.report.error { background: var(--red-tint); color: var(--red-text); }
.report.customer_view { background: var(--violet-tint); color: var(--violet-text); }
.report { padding: 12px 16px; font-size: 14px; line-height: 1.4; }
.report a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Blocks, documents and registers follow the same shape. */
.field-card, .control-block, .auto-section, .doc-paper, .read-page, .doc-editor,
.relation-section, .relation-row, .relation-block, .statement-block, .doc-comment {
  border-radius: var(--r-card); }
.control-block { border: 1px solid var(--hairline); background: var(--card); padding: var(--s-6); }
.control-block > header .control-code { background: var(--canvas); border: none;
  border-radius: var(--r-badge); }
.field-card { background: var(--card); border: 1px solid var(--hairline); }
.relation-section { background: var(--amber-tint); border-color: var(--amber); }
.pill.relation-badge { color: var(--blue-text); background: var(--blue-tint); }
.cisoly-managed { background: var(--violet-tint); color: var(--violet-text); border-radius: var(--r-badge); }
.field { border-left: none; padding-left: 0; }

/* Motion explains a change, it never decorates. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------------
   Corrections after the brand book audit: touch targets, states, neutral
   labels, mono, and everything that still fell outside the tokens.
   --------------------------------------------------------------------- */

/* Touch targets: 40px on desktop, 44px for touch input. */
.button { padding: 0 var(--s-4); min-height: 40px; display: inline-flex;
  align-items: center; justify-content: center; gap: var(--s-2); }
.button.small { padding: 0 var(--s-3); min-height: 40px; font-size: 13px;
  background: var(--card); color: var(--body); border: 1px solid var(--hairline); }
.chip-x, .doc-comment-button { min-width: 24px; min-height: 24px; }
@media (pointer: coarse) { .button, .button.small { min-height: 44px; } }

/* States: pressed, disabled, loading. */
.button:active { background: #3A2FA0; }
.button.small:active { background: var(--table-head); }
.button:disabled, .button.small:disabled, .doc-entry:disabled, .form input:disabled,
.form select:disabled, .rule-form select:disabled {
  color: var(--disabled); background: var(--canvas); border-color: var(--hairline);
  cursor: default; }
.button:disabled { background: var(--canvas); }
/* Busy: the ring of the logo (from 12 o'clock anticlockwise to 3 o'clock; the
   quarter between 12 and 3 stays open) fills from 12 o'clock anticlockwise
   to 3 o'clock and then runs back again, to and fro, inside the button
   itself, next to the text. A button with data-loading gets this state when its
   form is submitted (static/js/loads.js). The animation lives in the svg
   itself (SMIL), so a single background image is enough and no extra markup
   is needed. */
.button.loading { position: relative; pointer-events: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; }
.button.loading::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%237367F0'/><g transform='rotate(90 16 16) translate(32 0) scale(-1 1)'><circle cx='16' cy='16' r='8.857' fill='none' stroke='%23A098F5' stroke-width='5.143'/><circle cx='16' cy='16' r='8.857' fill='none' stroke='%23fff' stroke-width='5.143' pathLength='100' stroke-dasharray='100 100' stroke-dashoffset='100'><animate attributeName='stroke-dashoffset' values='100;25;100' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.4 0 0.6 1;0.4 0 0.6 1' dur='1.6s' repeatCount='indefinite'/></circle></g></svg>") center / contain no-repeat; }
.button.small.loading::before { width: 14px; height: 14px; }
.button.loading:disabled { background: var(--violet); color: #fff; opacity: .85; }
.skeleton { background: var(--skeleton); border-radius: var(--r-control); min-height: 14px; }

/* Focus: a 2px ring in the focus colour with 2px of space, on
   :focus-visible only (a click leaves no ring, the keyboard always gets
   one), never removed. An outline, not a shadow: a shadow disappears in
   forced-colour modes and under overflow: hidden. The editors keep the
   shadow ring as well, because their outline would cut through the text. */
.doc-section-title:focus, .doc-flow-title:focus, .doc-editor:focus,
.doc-editor.fluid:focus, .doc-editor.statement:focus {
  outline: none; box-shadow: var(--focus); }
.doc-editor.fluid:focus { padding-left: 0; }
.search-field:focus-within { box-shadow: var(--focus); }

/* Neutral labels: identity is not status. */
.pill.neutral { background: var(--table-head); color: var(--ink); }
.pill.code { background: var(--canvas); color: var(--body); font-family: var(--font-mono); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.card-link.subtle { color: var(--ink); }
/* A card-link that submits a form is still a link. A <button> arrives with
   the browser's own chrome -- a fill, a border, its own padding -- and
   .card-link only ever repainted the text on top of it, so "Switch off" and
   "Delete" sat in native boxes and, where that chrome is the accent colour,
   in the same colour as their own text. */
button.card-link { background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 600; font-size: .84rem; line-height: inherit;
  cursor: pointer; }
button.card-link:hover { text-decoration: underline; }
/* Removing something does not read the same as opening it. */
.card-link.danger { color: var(--red-text); }
.doc-entry.compact { font-size: 13px; padding: var(--s-1) var(--s-2); }
.field-required { color: var(--secondary); font-weight: 400; }
.field-help { font-size: 12px; color: var(--secondary); }
.field-error { font-size: 12px; color: var(--red-text); }
.field-error-entry { border-color: var(--red); }
code { border: none; background: var(--canvas); border-radius: var(--r-badge);
  font-size: 13px; padding: .1em .4em; }
.table td, .table th { font-variant-numeric: tabular-nums; }
.tabbar { border-bottom: 2px solid var(--hairline); }
.table th { font: var(--text-label); }
.hamburger, .brand-image, .doc-toolbar button, .doc-comment-button,
.statement-tools > summary, .statement-panel { border-radius: var(--r-control); }
.doc-comments.thread { border-radius: var(--r-card); }
.sidebar { box-shadow: none; }
.card.stat .stat-rule, .card.stat .stat-heading { padding-right: 80px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--violet);
  width: 18px; height: 18px; }
.toggle { height: 24px; background: var(--disabled);
  transition: background var(--t-fast) var(--ease); }
.toggle::after { top: 3px; background: var(--card); transition: transform var(--t-fast) var(--ease); }
.sidegroup-arrow { transition: transform var(--t-fast) var(--ease); }
.link-group-box > summary::before { transition: transform var(--t-fast) var(--ease); }
.process-step i { border-radius: var(--r-badge); font: 500 11px/1 var(--font-mono); }

/* Risk colours always carry black text and the level. */
.cell-darkred, .pill.level-darkred { color: var(--risk-text-dark); }

/* Document relations are data, not a warning: blue instead of amber. */
.relation-section { background: var(--blue-tint); border: 1px solid var(--blue-tint); }
.relation-block, .relation-row { background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-card); }
.relation-block .card-link { color: var(--blue-text); }
.relation-comment { color: var(--blue-text); background: var(--blue-tint); font-size: 12px;
  border-radius: var(--r-badge); padding: var(--s-1) var(--s-2); }
.auto-section { border: 1px solid var(--hairline); }
.statement-block { border: 1px solid var(--hairline); }
.doc-paper { box-shadow: none; }
.cisoly-managed::after { content: none; }

/* Reading view: the same typeface as the rest, set more calmly. */
.read-page { font-family: var(--font-sans); font: var(--text-body);
  font-family: var(--font-sans); }
.read-cover { border-bottom: 1px solid var(--hairline); }
.read-kind { font: var(--text-eyebrow); letter-spacing: .1em; text-transform: uppercase; }
.read-cover h1 { font: var(--text-h2); letter-spacing: -.015em; }
.read-org { font-style: normal; color: var(--secondary); }
.read-status { font: 500 12px/1.4 var(--font-sans); border: none;
  background: var(--table-head); color: var(--secondary); border-radius: var(--r-badge); }
.read-status.good { background: var(--green-tint); color: var(--green-text); }
.read-table_of_contents { border-radius: var(--r-card); }
.read-table_of_contents h2, .read-chapter h2 { font: 600 18px/1.3 var(--font-sans); }
.read-chapter h2 { font: var(--text-h2); }
.read-statement { border: 1px solid var(--hairline); border-radius: var(--r-card); }
.read-statement-code { font: 500 13px/1.4 var(--font-mono); }

/* Framework coverage: an 8px bar, threshold colour, percentage in mono. */
.progress-bar, .progress-bar i { border-radius: var(--r-badge); }
.progress-bar i { transition: width var(--t-slow) var(--ease); }
.progress-bar-pct { width: 48px; font: 500 13px/1.4 var(--font-mono); }
.progress-bar-label { font: var(--text-label); width: 112px; }

/* Empty and error state: a disc, one sentence, one action. */
.is-empty { display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2); padding: var(--s-8) var(--s-6); text-align: center; }
.is-empty .disc { width: 56px; height: 56px; border-radius: var(--r-card);
  background: var(--violet-tint); color: var(--violet-text); display: grid; place-items: center; }
.is-empty.error .disc { background: var(--red-tint); color: var(--red-text); }
.is-empty h3, .is-empty h2 { font: 600 18px/1.3 var(--font-sans); color: var(--ink); margin: 0; }
.is-empty p { color: var(--secondary); margin: 0; }

/* Audit log: dots on a hairline spine. */
.timeline { display: flex; flex-direction: column; gap: var(--s-3);
  border-left: 1px solid var(--hairline); padding-left: var(--s-4); }
.timeline-row { position: relative; display: flex; gap: var(--s-3);
  align-items: baseline; justify-content: space-between; }
.timeline-row::before { content: ""; position: absolute; left: calc(var(--s-4) * -1 - 5px);
  top: 6px; width: 10px; height: 10px; border-radius: var(--r-full); background: var(--secondary); }
.timeline-row.good::before { background: var(--green); }
.timeline-row.attention::before { background: var(--amber); }
.timeline-row.error::before { background: var(--red); }
.timeline-row strong { font-weight: 600; }
.timeline-row .time { font: 500 12px/1.4 var(--font-mono); color: var(--secondary); }

/* The 64px rail from the brand book asks for an icon per menu item; our
   items only carry an icon at group level. Until that set exists the
   sidebar stays a drawer below 1280px — see the report. */

/* Dark mode: the same tokens, different neutrals. Light is the
   default; dark only comes on when the user chooses it. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #1C1F2E; --card: #252838; --hairline: #33374A; --table-head: #2B2F41;
  --ink: #F3F4F8; --body: #B4B8C8; --secondary: #9196A9; --skeleton: #2B2F41;
  --violet-text: #9D94F4; --blue-text: #66A3EB;
    --neutral-tint: #2B2F41; --table-rule: #3A3E52;
  --violet-tint: rgba(115, 103, 240, .18); --green-tint: rgba(40, 199, 111, .16);
  --red-tint: rgba(234, 84, 85, .18); --amber-tint: rgba(245, 185, 66, .16);
  --blue-tint: rgba(43, 127, 227, .18); --teal-tint: rgba(60, 197, 192, .16);
  --green-text: #4ED897; --red-text: #FF8A8A; --amber-text: #F5B942;
  --focus: 0 0 0 2px #1C1F2E, 0 0 0 4px var(--focus-ring);
}
body { background: var(--canvas); color: var(--body); }
.sidebar, .card, .top-bar .search-field { background: var(--card); }
.theme-button { border: none; background: none; color: var(--secondary); cursor: pointer;
  padding: var(--s-2); border-radius: var(--r-control); display: inline-flex; }
.theme-button:hover { background: var(--canvas); color: var(--ink); }

/* Icons inside a badge or chip are at text size, not at nav size. */
.pill .icon, .chip .icon, .stat-delta .icon { width: 14px; height: 14px; }
.button .icon, .button.small .icon { width: 16px; height: 16px; }
.field-label { display: block; }
.doc-toolbar button .icon { width: 16px; height: 16px; }

:root[data-theme="light"] { color-scheme: light; }

/* Stat cards: four per row on desktop, two on tablet, one on mobile —
   the 12-column grid from the brand book, with 24px gutters. */
.cards-row { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.two-column { gap: var(--s-6); }
@media (max-width: 767px) { .cards-row { grid-template-columns: 1fr; } }

/* =====================================================================
   Brand Book v1.3
   ===================================================================== */

/* Risk scale: six saturated levels, black text — white on Critical. */
.cell-lightgreen { background: var(--risk-2) !important; }
.cell-green      { background: var(--risk-1) !important; }
.cell-yellow       { background: var(--risk-3) !important; }
.cell-orange     { background: var(--risk-4) !important; }
.cell-red       { background: var(--risk-5) !important; }
.cell-darkred { background: var(--risk-6) !important; color: #fff; }
.cell-layer { background: var(--risk-2) !important; }
.cell-middle { background: var(--risk-3) !important; }
.cell-high { background: var(--risk-5) !important; }
.cell-lightgreen, .cell-green, .cell-yellow, .cell-orange, .cell-red { color: var(--risk-text); }
.pill.level-lightgreen { background: var(--risk-2); color: var(--risk-text); }
.pill.level-green      { background: var(--risk-1); color: var(--risk-text); }
.pill.level-yellow       { background: var(--risk-3); color: var(--risk-text); }
.pill.level-orange     { background: var(--risk-4); color: var(--risk-text); }
.pill.level-red       { background: var(--risk-5); color: var(--risk-text); }
.pill.level-darkred { background: var(--risk-6); color: #fff; }

/* Neutral badges: tint for roles and categories, outlined mono for
   codes, IDs, frameworks and versions. */
.pill.neutral { background: var(--neutral-tint); color: var(--ink); }
.pill.code { background: transparent; color: var(--body); border: 1px solid var(--hairline);
  font-family: var(--font-mono); }

/* Tables as a framed grid: an ink header with white text, lines in both
   directions, 52px rows, no zebra. Only risk cells are filled. */
.table thead th { background: var(--table-head-bg); color: #fff; font: 500 13px/1.4 var(--font-sans);
  border: 1px solid var(--table-rule); }
.table tbody th { background: transparent; color: var(--ink); font: 600 14px/1.4 var(--font-sans);
  text-align: left; border: 1px solid var(--table-rule); }
.table td { border: 1px solid var(--table-rule); }
.table td, .table th { padding: var(--s-3) var(--s-4); }
/* A count on a violet surface: a darker translucent badge, so that white
   text keeps 4.5:1 (a lighter one dropped to 3.9:1). */
.table thead .pill, .table thead .pill.neutral { background: rgba(0, 0, 0, .2); color: #fff;
  border-color: transparent; }
.table tbody tr { min-height: 52px; }
.table tbody td { height: 52px; }
.table tr:last-child td { border-bottom: 1px solid var(--table-rule); }
.table.register th, .table.register td { border-right: 1px solid var(--table-rule); }
.table.register th:last-child, .table.register td:last-child { border-right: 1px solid var(--table-rule); }
.table.register tbody tr:nth-child(even) { background: transparent; }
.table tbody tr:hover { background: var(--canvas); }
/* In a table status is outlined, so that only risk is filled. */
.table .pill.active-green { background: transparent; color: var(--green-text); border: 1px solid var(--green); }
.table .pill.open { background: transparent; color: var(--amber-text); border: 1px solid var(--amber); }
.table .pill.danger { background: transparent; color: var(--red-text); border: 1px solid var(--red); }
.table .pill.planned { background: transparent; color: var(--violet-text); border: 1px solid var(--violet); }
.table .pill.neutral { background: transparent; color: var(--body); border: 1px solid var(--hairline); }
.table .cell-score { font-family: var(--font-mono); }

/* Framework coverage: violet, 12px, 2px radius, a hairline as the track.
   The percentage carries the judgement — no threshold colours. */
.progress-bar { height: 12px; background: transparent; border: 1px solid var(--hairline);
  border-radius: var(--r-badge); }
.progress-bar i, .progress-bar i.second, .progress-bar i.coverage-good, .progress-bar i.coverage-middle,
.progress-bar i.coverage-layer { background: var(--violet); border-radius: var(--r-badge); }

/* Document workspace: a sheet of paper, not a form. */
.doc-paper { max-width: none; padding: 40px; }
.read-page { max-width: 760px; padding: 40px; margin-inline: auto; }
.doc-canvas { max-width: none; }
.doc-editor, .read-content { font: 400 15px/1.7 var(--font-sans); }
.doc-toolbar button { width: 28px; height: 28px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; color: var(--body); }
.doc-toolbar button.active { background: var(--violet-tint); color: var(--violet-text); }
.doc-comments.thread { background: var(--amber-tint); box-shadow: inset 0 -2px 0 var(--amber); }
.doc-comment.af { background: transparent; opacity: .6; }
.doc-stored { font: 500 12px/1.4 var(--font-mono); color: var(--secondary); }

/* Print: no canvas grey, no tints, no shadow; risk fills stay, with a
   point scale and a repeating table header. */
@media print {
  :root { --canvas: #fff; --card: #fff; --hairline: #9DA2B4; --table-head: #EEF0F4;
    --table-rule: #9DA2B4; --ink: #111; --body: #4A4F63; --secondary: #4A4F63;
    --shadow-float: none; }
  @page { size: A4; margin: 20mm; }
  body { font: 10.5pt/15pt var(--font-sans); color: var(--ink); background: #fff; }
  h1 { font: 600 22pt/26pt var(--font-sans); border-bottom: 1.5pt solid var(--violet);
    padding-bottom: 6pt; }
  h2 { font: 600 15pt/20pt var(--font-sans); }
  h3 { font: 600 12pt/16pt var(--font-sans); }
  .table, table { font-size: 9.5pt; }
  .table th, table th { background: var(--ink); color: #fff; }
  .table td, .table th, table td, table th { border: .5pt solid var(--table-rule); }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .pill, .chip { background: none !important; border: .5pt solid var(--hairline);
    color: var(--ink) !important; }
  .cell-score, [class*="cell-"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cell-darkred { color: #fff !important; }
  .no-print, nav, aside, .sidebar, .top-bar, .side-scrim, .report { display: none !important; }
  .doc-paper, .read-page { max-width: none; padding: 0; border: none; }
}

/* In a filled risk cell everything inherits the cell colour — otherwise a
   bold count turns ink-coloured again on dark red. */
[class*="cell-"] strong, [class*="cell-"] b, [class*="cell-"] a,
.pill[class*="level-"] strong { color: inherit; }

/* Stat card v1.3: title → count → change on the left, and on the right a
   ring meter with the percentage. Counts keep the icon tile and set the
   count large. */
.card.stat { display: flex; flex-direction: column; gap: var(--s-2);
  padding: 22px var(--s-6); position: relative; }
.card.stat > * { min-width: 0; }
/* The ring sits beside the content on the right and does not set the height. */
.card.stat > .stat-meter { position: absolute; top: 50%; right: var(--s-6);
  transform: translateY(-50%); }
.card.stat.meter { min-height: 128px; justify-content: center; }
.card.stat.meter > *:not(.stat-meter) { padding-right: 108px; }
.stat-heading { order: 1; font: var(--text-label); color: var(--body); }
.stat-rule { order: 2; }
.card.stat > .stat-delta { order: 3; }
.card.stat > .card-sub, .card.stat > .stat-rows, .card.stat > .field-row { order: 4; }
.card.stat.meter .stat-value { font: 600 22px/1 var(--font-sans); letter-spacing: -.02em; }
.card.stat.meter .stat-delta { margin-top: var(--s-2); }
.stat-delta { font: 600 13px/1.4 var(--font-sans); }
.stat-unit { font: var(--text-label); color: var(--body); }
.stat-meter-trace { fill: none; stroke: var(--skeleton); }
.stat-meter-value { fill: none; stroke: var(--violet); }
.stat-meter-text { font: 600 14px/1 var(--font-sans); fill: var(--ink); }
/* The icon tile of a count card: 56px, tinted, vertically centred. */
.card.stat .stat-heading .icon { position: absolute; top: 50%; right: var(--s-6);
  transform: translateY(-50%); width: 56px; height: 56px; padding: 16px;
  border-radius: var(--r-card); background: var(--violet-tint); color: var(--violet-text);
  border: none; }
.card.stat:not(.meter) .stat-rule, .card.stat:not(.meter) .stat-heading { padding-right: 80px; }
/* On a count card the change sits under the number, not beside it. */
.card.stat .stat-rule { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-1) var(--s-2); }
.card.stat:not(.meter) .stat-rule .stat-delta { flex-base: 100%; }
/* A button that happens to be a link stays a button. */
a.button, a.button:hover { text-decoration: none; }

/* Library rail (§18): categories with a mono count{ padding: var(--s-4) var(--s-3); }
/* Workflow strip (§18): 44px under the heading, 24px avatars, deadline in
   mono, the actions on the right. */
.workstrip { display: flex; align-items: center; gap: var(--s-6); min-height: 44px;
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.workstrip-group { display: flex; align-items: center; gap: var(--s-2); }
.workstrip-label { font: var(--text-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  color: var(--secondary); }
.workstrip-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; }
.avatar { width: 24px; height: 24px; border-radius: var(--r-full); background: var(--violet-tint);
  color: var(--violet-text); font: 600 10px/24px var(--font-sans); text-align: center;
  display: inline-block; flex: none; letter-spacing: .02em; }
/* A reviewer who marked the current round as reviewed: a 2px ring in the
   platform green on the avatar (also over the violet ring of a group member,
   iso.css .avatar.via) and on a group's chip once one of its people did. */
.avatar.reviewed, .avatar.via.reviewed { box-shadow: 0 0 0 2px var(--green); }
.chip.grp-reviewer.reviewed { box-shadow: 0 0 0 2px var(--green); }
.avatar.dotted { background: transparent; border: 1px dashed var(--disabled);
  color: var(--secondary); line-height: 22px; cursor: pointer; }
.avatar.dotted:hover { border-color: var(--violet); color: var(--violet-text); }
.avatar-shape { display: inline-flex; position: relative; margin: 0; }
.avatar-gone { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px;
  border-radius: var(--r-full); border: none; background: var(--ink); color: var(--card);
  font-size: 11px; line-height: 16px; padding: 0; cursor: pointer; opacity: 0;
  min-width: 0; min-height: 0; }
.avatar-shape:hover .avatar-gone, .avatar-shape:focus-within .avatar-gone { opacity: 1; }
.avatar-add { position: relative; }
.avatar-add > summary::-webkit-details-marker { display: none; }
.avatar-add > summary { list-style: none; }
.avatar-add[open] > form { position: absolute; top: 30px; left: 0; z-index: 5;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--shadow-float); padding: var(--s-2); }

/* One height for every control: fields, select lists and buttons are
   40px (32px when compact), so that they line up. */
.doc-entry, .form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form select, .rule-form select, .rule-form input:not([type="file"]),
.filter-bar .doc-entry, .language-picker, select.doc-entry {
  box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 var(--s-3);
  line-height: 38px; font-size: 14px; vertical-align: middle; }
select.doc-entry, .form select, .rule-form select, .language-picker {
  padding-right: 32px; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7388' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; }
textarea.doc-entry { height: auto; min-height: 80px; line-height: 1.6; padding: var(--s-2) var(--s-3); }
.doc-entry.compact, select.doc-entry.compact, .rule-form select.compact {
  height: 32px; min-height: 32px; line-height: 30px; padding: 0 var(--s-2); font-size: 13px; }
select.doc-entry.compact { padding-right: 28px; }
.button.small.compact { min-height: 32px; }
.rule-form { align-items: center; }

/* Risk donut on the dashboard: a thick ring in the six levels, total in
   the middle, legend with count and change since the last assessment. */
.risk-donut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.risk-card-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.risk-card-open { font-size: 14px; color: var(--secondary); }
.risk-card-open strong { font: 600 22px/1.1 var(--font-sans); color: var(--ink); margin-right: 4px; }
.legend-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.legend-bar { display: block; height: 4px; border-radius: 2px; background: var(--skeleton); overflow: hidden; }
.legend-bar > span { display: block; height: 100%; border-radius: 2px; }
.risk-legend .swatch-unscored { background: var(--skeleton); }
.legend-bar > .bar-unscored { background: var(--secondary); opacity: .5; }
.risk-card-foot { display: flex; gap: 24px; margin-top: 12px; }
.risk-card-foot > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; flex: none; }
.risk-card-foot > span:last-child { flex: 1; }
.risk-card-foot strong { font-weight: 600; color: var(--ink); }
.donut { flex: none; }
.donut-trace { fill: none; stroke: var(--skeleton); }
.donut-part { fill: none; }
.donut-part.colour-lightgreen { stroke: var(--risk-2); }
.donut-part.colour-green      { stroke: var(--risk-1); }
.donut-part.colour-yellow       { stroke: var(--risk-3); }
.donut-part.colour-orange     { stroke: var(--risk-4); }
.donut-part.colour-red       { stroke: var(--risk-5); }
.donut-part.colour-darkred { stroke: var(--risk-6); }
.donut-number { font: 600 14px/1 var(--font-sans); fill: var(--ink); }
.donut-label { font: 400 5px/1 var(--font-sans); fill: var(--secondary); }
.risk-legend { border-collapse: collapse; flex: 1; min-width: 200px; }
.risk-legend td { padding: var(--s-1) var(--s-2); border: none; font-size: 14px;
  height: auto; vertical-align: middle; }
.risk-legend td:first-child { width: 22px; padding-left: 0; }
.risk-legend .number { text-align: right; font-weight: 600; }
.risk-legend .swatch { display: inline-block; width: 14px; height: 14px;
  border-radius: var(--r-badge); }
.delta-worse { color: var(--red-text); font-weight: 600; }
.delta-better { color: var(--green-text); font-weight: 600; }

/* Dashboard blocks: distribution bars, checklist, work list, recent. */
.distributions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-8); }
.distribution-heading { display: flex; justify-content: space-between; align-items: baseline;
  font: 600 15px/1.3 var(--font-sans); color: var(--ink); margin-bottom: var(--s-2); }
.distribution-gauge { display: flex; height: 12px; border-radius: var(--r-badge); overflow: hidden;
  background: var(--skeleton); gap: 2px; }
.distribution-part { display: block; min-width: 4px; }
.distribution-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2);
  font-size: 13px; color: var(--body); }
.distribution-legend span { display: inline-flex; align-items: center; gap: var(--s-1); }
.distribution-legend i { width: 10px; height: 10px; border-radius: var(--r-badge); display: inline-block; }
.series-1 { background: var(--violet); } .series-2 { background: var(--blue); }
.series-3 { background: var(--teal); } .series-4 { background: var(--amber); }
.series-rest { background: var(--disabled); }
.distribution-part.good, .distribution-legend i.good { background: var(--green); }
.distribution-part.attention, .distribution-legend i.attention { background: var(--amber); }
.distribution-part.error, .distribution-legend i.error { background: var(--red); }
.risk-lightgreen { background: var(--risk-2); } .risk-green { background: var(--risk-1); }
.risk-yellow { background: var(--risk-3); } .risk-orange { background: var(--risk-4); }
.risk-red { background: var(--risk-5); } .risk-darkred { background: var(--risk-6); }
.three-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6); }
.checklist, .work_list, .recent { list-style: none; margin: 0; padding: 0; }
.checklist li, .work_list li, .recent li { display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.checklist li:first-child, .work_list li:first-child, .recent li:first-child { border-top: none; padding-top: 0; }
.checklist .tick { width: 18px; height: 18px; border-radius: var(--r-badge); flex: none;
  border: 1px solid var(--disabled); display: grid; place-items: center; }
.checklist li.ready .tick { background: var(--violet); border-color: var(--violet); color: #fff; }
.checklist .tick .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.checklist li.ready a { color: var(--secondary); }
.work_list .dot { width: 10px; height: 10px; border-radius: var(--r-full); flex: none; }
.work_list .dot.good { background: var(--green); } .work_list .dot.attention { background: var(--amber); }
.work_list .dot.error { background: var(--red); }
.work_list a, .recent a { flex: 1; min-width: 0; }
.work_list .days { color: var(--secondary); white-space: nowrap; }
.work_list .days.error { color: var(--red-text); font-weight: 600; }
.recent .icon { color: var(--secondary); flex: none; }
.recent .time { color: var(--secondary); text-align: right; line-height: 1.2; white-space: nowrap; }
.recent .time small { font-size: 10px; }

/* Donut legend: colour and name on the left, count and change on the
   right, every line a link to the register at that level. */
.risk-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; }
.risk-legend li { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; }
.risk-legend li:first-child { padding-top: 0; }
.risk-legend li:last-child { padding-bottom: 0; }
.legend-level { display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--ink); text-decoration: none; font-weight: 500; }
.legend-level:hover { color: var(--violet-text); }
.legend-count { min-width: 32px; text-align: right; font: 600 14px/1.4 var(--font-sans); color: var(--ink); }
.legend-delta { min-width: 44px; text-align: right; font: 600 12px/1.4 var(--font-mono);
  padding: 2px 6px; border-radius: var(--r-badge); }
.legend-delta.worse { background: var(--red-tint); color: var(--red-text); }
.legend-delta.better { background: var(--green-tint); color: var(--green-text); }
.donut-number { font-weight: 600; }

/* Matrix & settings: large filled cells with white seams, axes in
   mono, the appetite line as a dotted top border, settings on the right. */
.matrix-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: var(--s-6); align-items: start; }
@media (max-width: 1100px) { .matrix-layout { grid-template-columns: 1fr; } }
.matrix-side-column { display: flex; flex-direction: column; gap: var(--s-6); }
.matrix-side-column form, .matrix-layout > form { display: flex; flex-direction: column; gap: var(--s-6); }
.matrix-raster { display: grid; grid-template-columns: 40px repeat(var(--columns), minmax(0, 1fr)); gap: 3px; }
.matrix-cell { aspect-ratio: 1.6; min-height: 56px; display: grid; place-items: center;
  font: 600 20px/1 var(--font-sans); color: var(--risk-text); position: relative; }
.matrix-cell.cell-darkred { color: #fff; }
.matrix-cell.empty .matrix-score { font: 400 14px/1 var(--font-mono); opacity: .55; }
.matrix-cell.appetite { box-shadow: inset 0 3px 0 0 var(--ink); }
.matrix-cell.appetite::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0;
  border-top: 3px dashed var(--ink); }
.matrix-cell.appetite { box-shadow: none; }
.matrix-as { display: grid; place-items: center; font: 500 12px/1 var(--font-mono); color: var(--secondary); }
.matrix-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-4);
  font: 500 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--body); }
.matrix-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.matrix-legend i { width: 14px; height: 14px; border-radius: var(--r-badge); display: inline-block; }
.matrix-legend i.appetite-line { width: 18px; height: 0; border-top: 3px dashed var(--ink); border-radius: 0; }
.segment { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-control); overflow: hidden; }
.segment-button { background: var(--card); color: var(--body); border: none; border-right: 1px solid var(--hairline);
  padding: 0 var(--s-4); min-height: 40px; font: 600 14px/1 var(--font-sans); cursor: pointer;
  display: inline-flex; align-items: center; }
.segment-button:last-child { border-right: none; }
.segment-button.active { background: var(--violet-tint); color: var(--violet-text); }
.segment-button input { position: absolute; opacity: 0; width: 0; height: 0; }
.segment-button:has(input:disabled) { cursor: default; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
.settings-grid .field { gap: var(--s-2); }
.settings-grid .field .doc-entry + .doc-entry { margin-top: var(--s-1); }

/* Framework coverage (brand book §07): one bar per framework — solid violet
   for implemented, violet hatching for in progress, a hairline for not started. */
.coverage-row { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline); }
.coverage-row:first-of-type { border-top: none; padding-top: 0; }
.coverage-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.coverage-gauge-row { display: flex; align-items: center; gap: var(--s-3); }
.coverage-gauge { flex: 1; display: flex; height: 12px; border: 1px solid var(--hairline);
  border-radius: var(--r-badge); overflow: hidden; background: var(--card); }
.coverage-gauge i { display: block; height: 100%; }
.part-ready { background: var(--violet); }
.part-busy { background: repeating-linear-gradient(135deg, var(--violet) 0 3px, var(--violet-tint) 3px 7px); }
.coverage-pct { width: 48px; text-align: right; font: 500 13px/1.4 var(--font-mono); }
.coverage-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3);
  font-size: 12px; color: var(--secondary); }
.coverage-legend span { display: inline-flex; align-items: center; gap: var(--s-1); }
.coverage-legend i { width: 14px; height: 10px; border-radius: var(--r-badge); display: inline-block; }
.coverage-legend i.part-empty { border: 1px solid var(--hairline); background: var(--card); }
/* display:grid beats the hidden attribute; hidden grids are explicitly gone. */
.matrix-raster[hidden] { display: none; }

/* Framework cards (portal): name with a mono subline, ring meter on the right,
   one sentence, Open plus gap report or a tonal update button. Suggested
   frameworks are dotted cards with an Add button. */
.page-heading-row { flex-direction: row; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; }
.page-heading-row > div { flex: 1 1 320px; min-width: 0; }
.page-heading-row > .button { flex: none; }
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-6); }
.fw-card { display: flex; flex-direction: column; gap: var(--s-4); }
.fw-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); min-height: 48px; }
.fw-heading > div { flex: 1 1 auto; min-width: 0; }
.fw-heading > .stat-meter { flex: none; }
.fw-name { font: 600 18px/1.3 var(--font-sans); color: var(--ink); margin: 0 0 var(--s-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fw-eyebrow { font: var(--text-eyebrow); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--secondary); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-text { margin: 0; color: var(--body); flex: 1; }
.fw-actions { display: flex; align-items: center; gap: var(--s-4); min-height: 32px; }
.fw-card.proposal { border-style: dashed; flex-direction: row; align-items: center;
  justify-content: space-between; }
.fw-card.proposal form { margin: 0; }
.button.small.tonal { background: var(--violet-tint); color: var(--violet-text); border-color: transparent; }
.button.small.tonal:hover { background: var(--violet); color: #fff; }

/* People (portal): count cards, a member row with avatar and mono e-mail,
   roles as segmented buttons (several at once), MFA dot and last active. */
.stat-grid.four { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-6); }
.stat-value.red { color: var(--red-text, #B42318); }
.table.members td { vertical-align: middle; }
.member { display: flex; align-items: center; gap: var(--s-3); }
.member-avatar { width: 36px; height: 36px; font-size: 12px; flex: none; }
.avatar.tint-1, .avatar.tint-6 { background: #E3E9FB; color: #3E4C8A; }
.avatar.tint-2, .avatar.tint-7 { background: #DDF4F1; color: #1E6B62; }
.avatar.tint-3, .avatar.tint-8 { background: #FBF0D5; color: #7A5A12; }
.avatar.tint-4, .avatar.tint-9 { background: #E9E6FB; color: #5B4FD9; }
.avatar.tint-5, .avatar.tint-10 { background: #DFF3E1; color: #1F6B32; }
.member-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.member-text strong { font-weight: 600; color: var(--ink); }
.member-text .mono { font: 13px/1.4 var(--font-mono); color: var(--secondary); }
.table.members tr.out .member-text strong { color: var(--secondary); }
.table.members .segment-button { min-height: 32px; padding: 0 var(--s-3); font-size: 13px; }
.segment-button:has(input:checked) { background: var(--violet-tint); color: var(--violet-text); }
.table.members .dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-full); }
.table.members .dot.good { background: var(--green); } .table.members .dot.attention { background: var(--amber); }
.table.members .dot.error { background: var(--red); }

/* Setup (portal): a two-column card with title and explanation on the left,
   fields with mono labels on the right and the button aligned right. */
.card.setting { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: var(--s-6); align-items: start; }
.setting-heading h2 { font: 600 18px/1.3 var(--font-sans); color: var(--ink); margin: 0 0 var(--s-2); }
.setting-heading p { margin: 0; color: var(--body); }
.setting-content { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.setting-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
.eyebrow { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--secondary); display: block; }
.field > .eyebrow { margin-bottom: var(--s-1); }
.field-value { color: var(--ink); font-weight: 500; }
.field-value.mono, .doc-entry.mono { font-family: var(--font-mono); }
.button-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.toggle-row { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; color: var(--body); }
/* The console's "What Soly AI may read" card: one switch per manifest item,
   in columns that wrap (docs/FLOWS.md 7.41). */
.ai-reading { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--s-4);
  align-items: start; }
.ai-reading .toggle-row { min-width: 0; }
/* A setting with a single toggle: the state sits at the top in one sentence on a
   tinted surface (§13: tint, deep accent text, no border), the toggle with
   its label below it on one row. */
.setting-toggle { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.setting-state { margin: 0; align-self: stretch; padding: 10px 12px; border-radius: var(--r-control);
  background: var(--violet-tint); color: var(--violet-text); font: 400 13px/1.45 var(--font-sans); }
[data-theme="dark"] .setting-state { color: var(--violet-text); }
.setting-toggle .toggle-row { gap: 10px; min-height: 36px; font-size: 13px; color: var(--ink); }
.setting-toggle .toggle-row > span { min-width: 0; line-height: 1.3; }
.logo-row { display: flex; gap: var(--s-6); align-items: flex-start; }
.logo-box { width: 144px; height: 144px; flex: none; border: 1px dashed var(--disabled); border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: var(--s-3); }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-explanation { display: flex; flex-direction: column; gap: var(--s-2); }
.logo-explanation p { margin: 0; color: var(--body); }
.upload-link { color: var(--violet-text); font-weight: 600; cursor: pointer; width: fit-content; }
.upload-link:hover { text-decoration: underline; }
.upload-link input { display: none; }
.account-row { display: flex; align-items: center; gap: var(--s-4); }
.avatar.large { width: 64px; height: 64px; font-size: 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; }
.account-row .pill { margin-left: auto; }
@media (max-width: 800px) {
  .card.setting, .setting-fields { grid-template-columns: 1fr; }
}

/* Roles per member: assigned roles as chips with a cross, a select
   list adds a role and saves it straight away. */
.role-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.role-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding-right: var(--s-1); }
.chip-gone { border: none; background: transparent; color: inherit; font: 600 14px/1 var(--font-sans);
  cursor: pointer; padding: 0 var(--s-1); border-radius: var(--r-badge); opacity: .7; }
.chip-gone:hover { opacity: 1; background: rgba(0,0,0,.08); }
.role-select { width: auto; min-width: 130px; }

/* Sign-in log: a filter bar above the table and paging below it. */
.log-filter { gap: var(--s-3); align-items: flex-end; }
.log-filter .doc-entry { width: auto; min-width: 150px; }
.log-date { display: flex; flex-direction: column; gap: 2px; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.pagination-buttons { display: flex; align-items: center; gap: var(--s-2); }
.hist-filter { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 10px; flex-wrap: wrap; }
.hist-filter input { width: 260px; max-width: 100%; }
.control-history .pagination { margin-top: 10px; }

/* Table headers in the brand violet with light separators between the columns. */
.table thead th { background: var(--table-head-bg); color: #fff; border-color: rgba(255,255,255,.28); }
.table thead th:first-child { border-left-color: var(--table-head-bg); }
.table thead th:last-child { border-right-color: var(--table-head-bg); }
.table thead tr { border-top-color: var(--table-head-bg); }

/* Toggles: the generic rule for input[type="checkbox"] (18x18) has a
   higher specificity than .toggle and squeezed the toggle into a little
   square. Hence the same selector plus the class, with an equal margin
   of 3px around the knob in both positions. */
input[type="checkbox"].toggle { appearance: none; -webkit-appearance: none; box-sizing: border-box;
  position: relative; width: 40px; height: 24px; flex: 0 0 40px; padding: 0; margin: 0;
  background: var(--hairline); border: none; border-radius: var(--r-full); cursor: pointer;
  transition: background var(--t-fast) var(--ease); }
input[type="checkbox"].toggle::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: var(--r-full); background: #fff;
  box-shadow: 0 1px 2px rgba(15, 18, 32, .25);
  transition: transform var(--t-fast) var(--ease); }
input[type="checkbox"].toggle:checked { background: var(--violet); }
input[type="checkbox"].toggle:checked::after { transform: translateX(16px); }
input[type="checkbox"].toggle:disabled { opacity: .55; cursor: default; }

:root[data-theme="dark"] input[type="checkbox"].toggle { background: #3F4459; }

/* Profile photo: the same round shape as the initials avatar. */
.avatar.photo, .user-avatar.photo, .top-avatar.photo { object-fit: cover; padding: 0;
  border-radius: var(--r-full); background: var(--neutral-tint); }
.photo-rule { display: flex; flex-direction: column; gap: var(--s-2); }
.photo-rule p { margin: 0; }

/* MFA: the policy above the member table and per row the state with one action. */
.mfa-policy { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-4); }
.mfa-cell { display: flex; align-items: center; gap: var(--s-2); }
.mfa-cell .card-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--violet-text); font-weight: 600; }
.mfa-cell .card-link:hover { text-decoration: underline; }

/* Framework workspace (console): draft bar, control tree with badges and
   the detail with text, kind, rhythm, links and change log. */
.draft-bar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  background: var(--violet-tint); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: var(--s-4) var(--s-6); margin-bottom: var(--s-6); }
.draft-bar.quiet { background: var(--neutral-tint); }
.draft-text { color: var(--body); flex: 1; min-width: 220px; }
.draft-text strong { color: var(--ink); }
.draft-buttons { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.draft-buttons form { margin: 0; }
.notice-card { background: var(--amber-tint); }
.notice-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.diff-panel { margin-bottom: var(--s-6); }
.diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-6); }
.diff-grid > div { display: flex; flex-direction: column; gap: var(--s-1); }
.control-heading { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4); }
.control-heading h1 { font: 600 22px/1.3 var(--font-sans); margin: 0; flex: 1; }
.control-code-chip { background: var(--neutral-tint); border: 1px solid var(--hairline);
  border-radius: var(--r-control); padding: var(--s-2) var(--s-3); font-size: 14px; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.link-row { margin-top: var(--s-4); }
.control-gone { margin-top: var(--s-3); display: flex; justify-content: flex-end; }
.log-list { display: flex; flex-direction: column; gap: var(--s-2); }
.log-line { display: flex; gap: var(--s-4); color: var(--body); }
.log-line .mono { color: var(--secondary); white-space: nowrap; }

/* The action in a log line: an outlined chip, so the column stays calm
   next to the free-text detail beside it. */
.action-chip { display: inline-block; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline); border-radius: var(--r-control);
  background: var(--card); color: var(--ink); font-weight: 600; font-size: 13px;
  line-height: 1.2; white-space: nowrap; }
.log-search { min-width: 220px; }

/* The right-hand column of a workspace stacks its cards with the same
   spacing as the rest of the page; without this rule they stick
   together. */
.doc-page { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }   /* the control workspace's column */
.control-form { display: flex; flex-direction: column; gap: var(--s-4); }
.version-new { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.version-new .doc-entry { width: 110px; }
.draft-bar .back-arrow { margin-right: var(--s-3); }
/* Document workspace (console): heading with reference and title, one action row,
   the management panels side by side and the templates card under the tree. */
.doc-main { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4); }
.doc-main-title { font: 600 22px/1.3 var(--font-sans); color: var(--ink); margin: 0; }
.doc-main-meta { margin-left: auto; white-space: nowrap; }
.pill.production-pill { text-transform: uppercase; letter-spacing: .06em; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3); margin-top: var(--s-4); align-items: start; }
/* Closed, the panels sit side by side as one row of headings; an opened
   panel takes the full width, so that tables and buttons really fit
   inside instead of spilling out of a narrow column. */
.panel[open] { grid-column: 1 / -1; }
.panel { border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--card); }
.panel > summary { list-style: none; cursor: pointer; }
.panel > summary::-webkit-details-marker { display: none; }
.panel-heading { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4);
  color: var(--ink); font-weight: 500; }
.panel-heading::before { content: "›"; color: var(--secondary); font-size: 16px; line-height: 1;
  transition: transform var(--t-fast) var(--ease); }
.panel[open] > .panel-heading::before { transform: rotate(90deg); }
.panel-heading .icon { color: var(--secondary); flex: none; }
.panel-heading > span:not(.panel-count) { flex: 1; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.panel-count { color: var(--secondary); font-size: 13px; }
.panel > *:not(summary) { padding: 0 var(--s-4) var(--s-4); max-height: 22rem;
  overflow: auto; }
/* Everything inside a panel stays inside the border: forms wrap and
   input fields shrink along. */
.panel .rule-form { flex-wrap: wrap; }
.panel .doc-entry, .panel input, .panel select { min-width: 0; max-width: 100%; }
.panel .table { min-width: 34rem; }
.panel .doc-comment { flex-wrap: wrap; }
.stored-on { color: var(--secondary); }
.template-card { display: flex; flex-direction: column; gap: var(--s-1); text-decoration: none;
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.template-card-title { display: flex; align-items: center; gap: var(--s-2); color: var(--ink);
  font-weight: 600; }
.template-card:hover .template-card-title { color: var(--violet-text); }

/* The toolbar turns every button into a square 28px icon button. That
   does not apply to the primary button or to buttons with text in them. */
.doc-toolbar .button { width: auto; height: auto; min-height: 40px; padding: 0 var(--s-4);
  background: var(--violet); color: #fff; border: none; border-radius: var(--r-control);
  font: 600 14px/1 var(--font-sans); }
.doc-toolbar .button:hover { background: var(--violet-hover); border-color: transparent; color: #fff; }
.doc-toolbar button:not(:has(.icon)):not(.button) { width: auto; padding: 0 var(--s-2); }
/* Show changes: a hairline toggle right of the formatting buttons, on the
   same 28px line as the inline buttons; `on` while the marks are shown. */
.doc-toolbar .button.doc-changes-toggle, .doc-changes-toggle { min-height: 28px; padding: 0 10px; font-size: 12px;
  font-weight: 600; background: var(--card); color: var(--body); border: 1px solid var(--hairline);
  border-radius: var(--r-control); text-decoration: none; display: inline-flex; align-items: center;
  white-space: nowrap; flex: none; }
.doc-toolbar .button.doc-changes-toggle:hover, .doc-changes-toggle:hover { background: var(--canvas); color: var(--ink);
  border-color: var(--hairline); }
.doc-toolbar .button.doc-changes-toggle.on, .doc-changes-toggle.on { color: var(--violet-text); border-color: var(--violet); }
.doc-changes-sub { margin: 8px 0 0; }
.doc-changes-pill { display: inline-block; white-space: normal; line-height: 1.4; }
/* The marks themselves: an insertion on a soft green ground, a deletion
   struck through on a soft red one; both from the theme's tint tokens, so
   the dark theme reads the same. The title on an insertion says who and when. */
ins.doc-ins { background: var(--green-tint); text-decoration: none; border-radius: 2px; padding: 0 1px; }
del.doc-del { background: var(--red-tint); color: var(--red-text); text-decoration: line-through;
  border-radius: 2px; padding: 0 1px; }
.doc-flow-title del.doc-del { font-weight: 400; font-size: .9rem; }
/* Who else has the editor open (the lease, docs/FLOWS.md 7.4): one line at
   the top of the editor card with an avatar per person. Hidden when nobody. */
.doc-editors { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; margin-bottom: 8px;
  border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--canvas);
  color: var(--body); font-size: 13px; }
.doc-editors .icon { width: 18px; height: 18px; color: var(--violet-text); flex: none; }
.doc-editors-avatars { display: inline-flex; gap: 4px; flex: none; }
.doc-editors-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A section refused by the save because someone else saved it first: the
   posted text stays on the page, marked, so nothing is lost. */
.doc-flow.doc-conflict > .doc-editor, .doc-editor.doc-conflict { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 2px; }
.doc-conflict-note { margin: 4px 0 8px; color: var(--red-text); }
/* The version page: a section this version added or the one before had. */
.doc-flow.doc-added > .doc-editor { border-left: 3px solid var(--green); padding-left: 10px; }
.doc-flow.doc-removed { opacity: .8; }
.empty-row { display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--secondary); font-size: 13px; }
.empty-row .icon { width: 24px; height: 24px; flex: none; color: var(--violet-text); }
.empty-row span { min-width: 0; }
.empty-row .button { flex: none; margin-left: auto; }
.read-versions { margin-top: var(--s-4); }

/* Control detail in the portal follows the workspace from the console:
   on the left the controls of the same framework{ display: inline-block; margin-top: var(--s-2); }
/* Status dot per control in the rail: green when met, orange when in
   progress, empty with a border when open{ background: var(--green); }
/* Controls of a single framework: every control is a card of its own with
   its own header bar, so the separation between controls shows at once.
   The two bottom lines (design and operation) sit as a strip of their own
   with a mono label on the left, the content in the middle and the actions on the right. */
.control-block { padding: 0; overflow: hidden; }
.control-block + .control-block { margin-top: 0; }
.control-headerbar { background: var(--neutral-tint); border-bottom: 1px solid var(--hairline);
  padding: var(--s-3) var(--s-4); gap: var(--s-3); }
.control-block > form, .control-block > .control-row { padding: var(--s-4); margin: 0; }
.control-block > .control-row { border-top: 1px solid var(--hairline); }
.control-block > form + .control-row { border-top: 1px solid var(--hairline); }
.control-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: var(--s-4); align-items: start; }
.control-row-label { padding-top: 10px; }
.control-row-content { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  min-height: 40px; min-width: 0; }
.control-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  justify-content: flex-end; }
.control-row-actions .rule-form { flex-wrap: wrap; }
.control-row-actions .doc-entry { min-width: 170px; max-width: 220px; }
.control-row-actions input[type="file"].doc-entry { min-width: 190px; }
.control-save { margin-top: var(--s-4); }
@media (max-width: 900px) {
  .control-row { grid-template-columns: 1fr; }
  .control-row-actions { justify-content: flex-start; }
}

/* Controls per framework as collapsible cards: closed, one row with
   code, title, status and counters; open, a violet header bar with the
   control's own text, the status and the two strips design and operation below it. */
.explanation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-6); }
.explanation-card { display: flex; gap: var(--s-3); align-items: flex-start; background: var(--card);
  border: 1px solid var(--hairline); border-radius: var(--r-card); padding: var(--s-4); }
.explanation-card p { margin: 0; color: var(--body); }
.explanation-icon { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--r-control); }
.explanation-icon.setup { background: var(--violet-tint); color: var(--violet-text); }
.explanation-icon.operation { background: var(--green-tint); color: var(--green-text); }

details.control-block { padding: 0; overflow: hidden; }
details.control-block + details.control-block { margin-top: 0; }
details.control-block > summary { list-style: none; cursor: pointer; }
details.control-block > summary::-webkit-details-marker { display: none; }
.control-headerbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); background: var(--card); }
details.control-block[open] > .control-headerbar { background: var(--violet-tint);
  border-bottom: 1px solid var(--hairline); }
.control-headerbar .control-title { font-weight: 600; color: var(--ink); }
.control-counters { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.counter { display: inline-flex; align-items: center; gap: var(--s-2); border: 1px solid var(--hairline);
  border-radius: var(--r-control); padding: var(--s-1) var(--s-3); color: var(--secondary);
  font-size: 13px; background: var(--card); }
.counter strong { color: var(--ink); }
.counter .icon { width: 14px; height: 14px; }
.control-chevron { color: var(--secondary); font-size: 18px; line-height: 1;
  transition: transform var(--t-fast) var(--ease); }
details.control-block[open] .control-chevron { transform: rotate(90deg); }
.control-body > .control-grid { padding: var(--s-6); gap: var(--s-6); }
.control-open { margin-left: var(--s-2); }
.control-side { display: flex; flex-direction: column; gap: var(--s-3); }
.control-buttons { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.original { margin-top: var(--s-2); }
.original > summary { list-style: none; cursor: pointer; display: flex; gap: var(--s-3);
  align-items: center; }
.original > summary::-webkit-details-marker { display: none; }
.original p { margin: var(--s-2) 0 0; }

/* The design and operation strips: label on the left, next to it first what
   is already there and below that the form. On one line it all became unreadable. */
.control-body .control-row { grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--s-3) var(--s-6); padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--hairline); }
.control-body .control-row-label { grid-column: 1; grid-row: 1; padding-top: 10px; }
.control-body .control-row-content { grid-column: 2; grid-row: 1; min-height: 0; }
.control-body .control-row-actions { grid-column: 2; grid-row: 2; justify-content: flex-start; }
.control-body .control-row-actions .rule-form { flex-wrap: wrap; gap: var(--s-2); width: 100%; }
.control-body .control-row-actions .doc-entry { flex: 1 1 190px; min-width: 170px; max-width: 260px; }
.control-body .chip { white-space: nowrap; }
@media (max-width: 900px) {
  .control-body .control-row { grid-template-columns: 1fr; }
  .control-body .control-row-label, .control-body .control-row-content,
  .control-body .control-row-actions { grid-column: 1; grid-row: auto; }
}

/* Link field: the search box and the select list belong together and wrap
   together, so that the row does not fall apart into loose pieces. */
.link-field-box { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 300px;
  min-width: 0; max-width: 380px; }
.link-field-box .select-search { flex: 0 1 120px; min-width: 90px; }
.link-field-box select { flex: 1 1 160px; min-width: 0; }
.control-body .control-row-actions .link-field-box .doc-entry { max-width: none; }

/* The controls form one list: the page keeps its normal spacing around
   them, between the lines themselves it stays tight. */
.control-items { display: flex; flex-direction: column; gap: 0; }
.control-items > details.control-block { border-radius: 0; margin-top: -1px; }
.control-items > details.control-block:first-child { border-radius: var(--r-card) var(--r-card) 0 0;
  margin-top: 0; }
.control-items > details.control-block:last-child { border-radius: 0 0 var(--r-card) var(--r-card); }
.control-items > details.control-block[open] { margin: var(--s-4) 0; border-radius: var(--r-card);
  position: relative; z-index: 1; }

/* Domain sections: the controls of a framework are grouped by subject,
   with a heading above them and the count after it. */
.domain-section + .domain-section { margin-top: var(--s-6); }
.domain-heading { font: var(--text-eyebrow); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--secondary); margin: 0 0 var(--s-2);
  display: flex; align-items: center; gap: var(--s-2); }
.domain-heading .mono { color: var(--secondary); }
.domain-section[hidden] { display: none; }
/* Row headers in the first column get the same violet bar as the column
   headers at the top. A pill or code inside needs no border or surface
   of its own there: the violet is the background, the letters are white. */
.table tbody th { background: var(--table-head-bg); color: #fff;
  border-color: rgba(255, 255, 255, .28); }
.table tbody th:first-child { border-left-color: var(--table-head-bg); }
.table tbody tr:last-child th { border-bottom-color: var(--table-head-bg); }
.table tbody th .pill, .table tbody th .pill.neutral, .table tbody th code {
  background: none; border: none; color: #fff; padding: 0; }

/* An action cell stayed a table cell: with display:flex it fell out of the
   table layout and stuck out past the border. The buttons now sit next to
   each other inside the cell and wrap when it gets tight. */
td.actions { display: table-cell; vertical-align: middle; }
td.actions > form, td.actions > a, td.actions > button { display: inline-flex; margin: 0;
  vertical-align: middle; }
td.actions > * + * { margin-left: var(--s-2); }

/* An empty state inside a table stays a table cell; with display:flex the
   cell fell out of the table and did not span its columns. */
td.is-empty, th.is-empty { display: table-cell; text-align: center;
  padding: var(--s-6); color: var(--secondary); }

/* Compliance chain on the control detail: the linked requirements on a
   line of their own, the link fields below that, and only then the table. */
.chain-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-3); }
.chain-label { flex: 0 0 auto; margin-right: var(--s-2); }
.chain-actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin: var(--s-3) 0; }
.chain-actions .rule-form { flex-wrap: wrap; gap: var(--s-2); }

/* A badge stays on one line. "In progress" must not break into "In" with
   "progress" below it; if it really does not fit, the row around it may
   wrap or scroll, but never the wording of the badge itself. */
.pill, .chip, .counter, .action-chip, .control-code, .control-code-chip {
  white-space: nowrap; max-width: 100%; }
.pill, .chip { display: inline-flex; align-items: center; gap: var(--s-1); }
.pill > .icon, .chip > .icon { flex: none; }

/* My account: the photo as a block of its own with the file field and the
   buttons on one line, and the account details as fields with mono labels. */
.photo-block { display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4) 0; border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline); }
.photo-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.photo-row input[type="file"] { max-width: 260px; }
.account-row .member-text .mono { font-size: 13px; }

/* Import wizard: step bar, section list with a handle and a checkbox, and
   the document details beside it. */
.stepbar { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6);
  flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--secondary); }
.step-bullet { width: 28px; height: 28px; border-radius: var(--r-full); display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--hairline);
  font: 600 13px/1 var(--font-sans); flex: none; }
.step.active { color: var(--ink); font-weight: 600; }
.step.active .step-bullet { background: var(--violet); border-color: var(--violet); color: #fff; }
.step.ready { color: var(--green-text); }
.step.ready .step-bullet { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.step-line { flex: 1 1 40px; height: 2px; background: var(--hairline); min-width: 24px; }
.step-line.ready { background: var(--green); }
.wizard-shape { display: flex; flex-direction: column; gap: var(--s-6); }
.wizard-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-6); align-items: start; }
.wizard-side { display: flex; flex-direction: column; gap: var(--s-4); }
.section-list { list-style: none; margin: 0; padding: 0; }
.section-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--hairline); cursor: grab; }
.section-row:last-child { border-bottom: none; }
.section-row.dragging { opacity: .5; }
.section-row.out .section_title { text-decoration: line-through; color: var(--secondary); }
.section-row .grip { color: var(--disabled); cursor: grab; }
.section-number { color: var(--secondary); min-width: 34px; }
.section_title { flex: 1; color: var(--ink); font-weight: 500; }
.section-row .level-pill { font-family: var(--font-mono); }
.example-paper { max-height: 22rem; overflow: auto; }
.source-example > summary { list-style: none; cursor: pointer; }
.source-example > summary::-webkit-details-marker { display: none; }
.wizard-footer { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); border-top: 1px solid var(--hairline); padding-top: var(--s-4); }
.wizard-footer-right { display: flex; align-items: center; gap: var(--s-3); }
@media (max-width: 900px) { .wizard-two { grid-template-columns: 1fr; } }

/* Control card exactly as in the mockup: labels with a small icon, a
   character before the status, grey strips with a drop zone for evidence
   and the chevron in a little box of its own. */
.icon.mini { width: 14px; height: 14px; vertical-align: -2px; }
.eyebrow .icon.mini { color: var(--disabled); margin-right: var(--s-1); }
.field-with-character { position: relative; display: block; }
.field-with-character .character { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; }
.field-with-character.good .character { color: var(--green); }
.field-with-character.busy .character { color: var(--amber); }
.field-with-character.open .character { color: var(--secondary); }
.field-with-character select { padding-left: 34px; width: 100%; }
.control-body .control-row { background: var(--canvas); }
.drop-zone { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px;
  padding: 0 var(--s-4); border: 1px dashed var(--disabled); border-radius: var(--r-control);
  color: var(--secondary); cursor: pointer; background: var(--card); max-width: 240px; }
.drop-zone:hover { border-color: var(--violet); color: var(--violet-text); }
.drop-zone input[type="file"] { display: none; }
.drop-zone span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-chevron { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--hairline); border-radius: var(--r-control);
  color: var(--secondary); background: var(--card); flex: none; }

/* ================================================================
   Brand book §23 — the layout contract. Hard numbers, and therefore the
   last layer: height follows content, spacing is fixed, nothing stretches.
   ================================================================ */
.content { padding: 20px; gap: 14px; }
.card { padding: 16px; }
.card-heading { min-height: 32px; margin-bottom: 10px; align-items: center; }
.card-heading h2, .setting-heading h2 { font: 600 18px/1.3 var(--font-sans); }
.page-heading { gap: 4px; margin-bottom: 4px; }

/* Cards never stretch to match their neighbours. Exception: a row of stat cards
   is one band of equal height (§23 gives them 72-88px), so those do stretch. */
.fw-grid, .link-grid, .panel-grid,
.setting-fields, .two-column, .three-column, .explanation-grid, .distribution-grid,
.control-grid, .wizard-two, .diff-grid { align-items: start; }
.cards-row, .stat-grid { align-items: stretch; grid-auto-rows: 1fr; }
.cards-row > *, .stat-grid > * { height: 100%; }
.cards-row > .card.stat, .stat-grid > .card.stat { min-height: 88px; }
.cards-row, .stat-grid, .fw-grid, .link-grid { gap: 14px; }

/* Buttons and fields equally tall, so that a row keeps one line. */
.button { min-height: 32px; padding: 0 12px; font-size: 13px; }
.button.small, .button.small-plus { min-height: 28px; padding: 0 10px; font-size: 12px; }
.doc-entry, .form input, .form select, .form textarea,
.rule-form input, .rule-form select, .field input, .field select,
.segment-button, .drop-zone, .search-field { min-height: 32px; }
.doc-entry.compact { min-height: 28px; }
textarea.doc-entry { min-height: 64px; }
@media (pointer: coarse) { .button, .button.small { min-height: 40px; } }

/* Tables: dense rows, alternating with a grey tint. */
.table thead th { padding: 6px 12px; height: 34px; font-size: 12px; }
.table td { padding: 8px 12px; font-size: 13px; }
.table tbody tr:nth-child(even) > td { background: #F7F8FA; }
:root[data-theme="dark"] .table tbody tr:nth-child(even) > td { background: #20232F; }

/* Empty state: one line on the left, no illustration filling the page. */
.is-empty { flex-direction: row; align-items: center; justify-content: flex-start;
  text-align: left; padding: 12px; gap: 8px; min-height: 56px; }
.is-empty .disc { width: 20px; height: 20px; border-radius: var(--r-control);
  background: none; color: var(--secondary); }
.is-empty .disc svg { width: 16px; height: 16px; }
.is-empty h3, .is-empty h2 { font: 600 14px/1.3 var(--font-sans); }
.is-empty p { font-size: 13px; }

/* Nothing inside the content is screen height. */
.content .card, .content section, .content article { min-height: 0; }

/* [hidden] must always win: our own display rules would otherwise push
   it aside, which makes hidden blocks appear after all. */
[hidden] { display: none !important; }

/* On the dashboard the cards sit side by side at equal height: the row then
   reads as one row. Elsewhere the contract from section 23 applies, where a
   card explicitly does not stretch to match its neighbour. */
.equal { align-items: stretch; }
/* Equal height across several grid rows too: otherwise the second row of
   tiles ends up shorter than the first. */
.equal { grid-auto-rows: 1fr; }
.equal > * { height: 100%; }
.equal > .card.stat { min-height: 88px; }

/* ---------------------------------------------------------------- links
   Card grid per §21.5: for each group a heading with icon tile, title and
   count, below it cards with a monogram, name, one sentence and at the
   bottom the status with one action. Roomier than the registers: this is a
   catalogue, not a table. */
.link-filters { display: flex; align-items: center; gap: 8px; }
.link-filters .search-field { min-width: 280px; background: var(--canvas); border: none;
  min-height: 36px; }
.link-filters .segment { min-height: 36px; }
.link-filters .segment-button { min-height: 36px; padding: 0 16px; font-size: 13px; }

.link-banner { display: flex; align-items: center; gap: 12px; background: var(--violet-tint);
  border-radius: var(--r-card); padding: 14px 16px; color: var(--body); font-size: 14px;
  margin: 16px 0 24px; }
.link-banner .icon { color: var(--violet-text); flex: none; width: 18px; height: 18px; }
.link-banner span { flex: 1; min-width: 0; }
.link-banner .card-link { white-space: nowrap; font-size: 14px; }

.link-group + .link-group { margin-top: 28px; }
.link-group-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.link-group-heading .explanation-icon { width: 32px; height: 32px; }
.link-group-heading h2 { font: 600 18px/1.3 var(--font-sans); color: var(--ink); margin: 0; }
.link-group-heading .eyebrow { font-size: 12px; letter-spacing: .08em; color: var(--secondary); }
.link-group-heading .group-show { margin-left: auto; background: none; border: none; padding: 0;
  font: 600 13px/1 var(--font-sans); color: var(--violet-text); cursor: pointer; }
.link-group-heading .group-show:hover { text-decoration: underline; }

.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; align-items: stretch; grid-auto-rows: 1fr; }
.link-card { display: flex; flex-direction: column; gap: 12px; background: var(--card);
  border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 20px; height: 100%; }
.link-heading { display: flex; align-items: center; gap: 12px; }
.link-heading strong { font: 600 15px/1.3 var(--font-sans); color: var(--ink); }
.link-brand { width: 40px; height: 40px; flex: none; border-radius: var(--r-control);
  background: var(--neutral-tint); color: var(--secondary); display: inline-flex;
  align-items: center; justify-content: center; font: 500 12px/1 var(--font-mono); }
.link-target { margin: 0; flex: 1; color: var(--body); font-size: 14px; line-height: 1.45; }
.link-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 4px; }
.link-footer .pill { font-size: 12px; padding: 4px 10px; }
.link-footer .button { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* Per integration card a compact disclosure at the top right: how it stays
   secure, what we provision and what the other side sets up. */
.link-card { position: relative; }
.link-more > summary { list-style: none; cursor: pointer; position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border: 1px solid var(--hairline); border-radius: var(--r-control);
  display: inline-flex; align-items: center; justify-content: center; color: var(--secondary);
  background: var(--card); }
.link-more > summary::-webkit-details-marker { display: none; }
.link-more > summary .icon { transform: rotate(90deg); transition: transform var(--t-fast) var(--ease); }
.link-more[open] > summary .icon { transform: rotate(-90deg); }
.link-more > summary:hover { color: var(--violet-text); border-color: var(--violet); }
.link-explanation { margin: 44px 0 0; padding: 10px 12px; background: var(--canvas);
  border-radius: var(--r-control); display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 10px; font-size: 12px; line-height: 1.4; color: var(--body); }
.link-explanation dt { font: 500 11px/1.5 var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--secondary); }
.link-explanation dd { margin: 0; }
.link-card .link-heading { padding-right: 36px; }

/* Two disclosure buttons at the top right of an integration card: features
   (list icon) and the secure setup (chevron). */
.link-explanation-heading { grid-column: 1 / -1; font: 500 11px/1.5 var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--secondary); }
.link-function { display: block; }
.link-function ul { margin: 4px 0 0; padding-left: 16px; }
.link-function li { margin: 2px 0; }
.link-card .link-heading { padding-right: 36px; }

/* Features below the setup, in the same disclosure. */
.link-explanation + .link-function { margin-top: 8px; }

/* The direction at the head of each feature line (Cisoly → Slack) reads as a label. */
.link-function li { color: var(--body); }

/* The reason at the top of the disclosure: which problem the integration solves. */
.link-explanation .link-why { color: var(--ink); font-weight: 500; }

/* Product overview under Settings: four disclosure panels stacked. */
.panel-grid.one-column { grid-template-columns: 1fr; }
.prod-items ul { margin: 0; padding-left: 18px; }
.prod-items li { margin: 4px 0; color: var(--body); line-height: 1.5; }
.prod-main { margin: 0 0 8px; color: var(--ink); font-weight: 600; }

/* Product overview: requirements list with red for whatever is not met yet */
.prod-legend{font-size:12px;color:#464B63;margin:0 0 6px}
.prod-group{font-size:13px;font-weight:600;margin:10px 0 4px;color:#1B1F3B}
.prod-group:first-of-type{margin-top:0}
.prod-counter{font-family:"IBM Plex Mono",monospace;font-weight:500;color:#6E7388;margin-left:6px}
/* The kind of the original list (F, N, T, O) as a small mono pill before the name. */
.prod-kind{display:inline-block;font-size:11px;font-weight:600;line-height:16px;padding:0 5px;border:1px solid var(--hairline,#DDE0E8);border-radius:var(--r-badge,2px);color:var(--secondary,#6E7388);background:var(--card,#fff);margin-right:4px;vertical-align:1px;white-space:nowrap}
.requirements-table td.prod-no .prod-kind{color:var(--secondary,#6E7388)}
.requirements-wrap{overflow-x:auto;margin-bottom:6px}
.requirements-table{width:100%;min-width:640px}
.requirements-table td{vertical-align:top;font-size:13px;line-height:1.35}
.requirements-table td:first-child{width:26%}
.requirements-table td:last-child,.requirements-table th:last-child{white-space:nowrap;width:1%}
.requirements-table td.prod-no,.requirements-table td.prod-no strong{color:var(--red-text,#C93A3B)}
.requirements-table td em{font-style:normal;color:#6E7388}
.pill.vst-ok{color:var(--green-text);background:var(--green-tint)}
.pill.vst-busy{color:var(--red-text);background:var(--red-tint)}
.pill.vst-pending{color:var(--red-text,#C53637);background:var(--red-tint,#FDE8E8)}
.pill.vst-excluded{color:#464B63;background:#EEF0F4}
/* Product overview across the full width: heading above, tables below */
#product_overview.card.setting { grid-template-columns: 1fr; }
#product_overview .panel > *:not(summary) { max-height: 34rem; }
#product_overview .panel .requirements-table { min-width: 0; width: 100%; }
.requirements-table td:first-child { width: 22%; }
.requirements-table th { white-space: nowrap; }

/* My account: an identity card with roles and insight, below it a field
   list with a pictogram, a value and an action per row (§23). */
.acc-card { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 16px; border: 1px solid var(--hairline);
  border-radius: var(--r-card); background: var(--card); }
.acc-person { display: flex; align-items: center; gap: 14px; min-width: 0; }
.acc-avatar { position: relative; display: inline-flex; flex: none; }
.acc-camera { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: var(--r-full); background: var(--card); border: 1px solid var(--hairline);
  color: var(--secondary); transition: color var(--t-fast), border-color var(--t-fast); }
.acc-camera:hover { color: var(--violet-text); border-color: var(--violet); }
.acc-camera .icon { width: 14px; height: 14px; }
.acc-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-name strong { font: 600 18px/1.3 var(--font-sans); color: var(--ink); }
.acc-name .mono { font-family: var(--font-mono); font-size: 13px; color: var(--secondary); }
.acc-meta { display: flex; align-items: flex-start; gap: 16px; flex: none; }
.acc-meta-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acc-meta-block + .acc-meta-block { border-left: 1px solid var(--hairline); padding-left: 16px; }
.acc-level { display: inline-flex; align-items: center; gap: 6px; }
.acc-level .icon { width: 16px; height: 16px; color: var(--secondary); flex: none; }
.pill.violet { background: var(--violet-tint); color: var(--violet-text); }
.acc-fields { border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--card); }
.acc-field { display: grid; grid-template-columns: minmax(150px, 13rem) minmax(0, 1fr) auto;
  align-items: center; gap: 14px; margin: 0; padding: 16px; }
.acc-field + .acc-field { border-top: 1px solid var(--hairline); }
.acc-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  font-weight: 600; color: var(--ink); white-space: nowrap; }
.acc-label .icon { width: 18px; height: 18px; color: var(--secondary); flex: none; }
.acc-value { min-width: 0; color: var(--body); line-height: 1.45; }
.acc-value.mono { font-family: var(--font-mono); color: var(--ink); }
.acc-action { display: inline-flex; align-items: center; gap: 8px; justify-self: end;
  white-space: nowrap; flex: none; }
.acc-action.subtle { color: var(--secondary); font-size: 13px; }
.acc-action .icon.mini { margin-right: 2px; }
.acc-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.button.small { cursor: pointer; }
.acc-footer { display: flex; align-items: center; gap: 8px; margin: 0;
  color: var(--secondary); font-size: 13px; }
.acc-footer .icon { flex: none; }
@media (max-width: 760px) {
  .acc-field { grid-template-columns: 1fr; gap: 6px; }
  .acc-action { justify-self: start; }
  .acc-meta-block + .acc-meta-block { border-left: 0; padding-left: 0; }
}

/* Import flows at the sizes of brand book §21.4: step bar as a card with
   22px dots and 1px lines; list card without inner margin and rows of
   12px; assignment on the right with eyebrows; footer as a separate bar. */
.stepbar { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 12px 16px; margin: 0; gap: 0; font-size: 12px; flex-wrap: nowrap; }
.step { gap: 8px; white-space: nowrap; }
.step-bullet { width: 22px; height: 22px; font: 600 11px/1 var(--font-sans); }
.step-line { height: 1px; margin: 0 12px; flex: 1 1 40px; }
.wizard-shape { gap: 14px; }
.wizard-two { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.wizard-side { gap: 14px; }
.wiz-list-card { padding: 0; overflow: hidden; }
.wiz-list-card > .card-heading { padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--hairline); }
.wiz-list-card > .card-heading h2 { font-size: 13px; }
.wiz-list-card > .card-heading .card-sub { font-size: 12px; }
.section-list { font-size: 12px; }
.section-row { padding: 8px 14px; gap: 10px; border-bottom: 1px solid #EEF0F4; }
.section-row.sub { padding-left: 34px; }
.section-row.heading { cursor: default; background: var(--canvas); }
.section-row.heading .section_title { font-weight: 600; }
.section-row:last-child { border-bottom: none; }
.section-number { font: 500 11px/1.4 var(--font-mono); color: var(--body); min-width: 24px; }
.section_title { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-row .level-pill, .level-pill { font: 500 10px/1.4 var(--font-mono); color: var(--secondary);
  background: none; padding: 0; border-radius: 0; flex: none; }
.section-row:hover { background: var(--canvas); }
.section-row:focus-within, .section-row.selected { background: #F1F0FE; box-shadow: inset 2px 0 0 var(--violet); outline: none; }
.section-row:focus-within .section_title, .section-row:focus-within .section-number, .section-row:focus-within .level-pill { color: #5B4FD9; }
.section-row.out, .section-row.out .section-number, .section-row.out .level-pill { color: var(--secondary); }
.section-row.out .section_title { font-weight: 400; }
.section-row .grip { font-size: 14px; }
.section-row .tick-mark input { width: 14px; height: 14px; margin: 0; }
.wiz-assignment { gap: 12px; display: flex; flex-direction: column; }
.wiz-assignment > .card-heading { margin: 0; }
.wiz-assignment > .card-heading h2 { font-size: 13px; }
.wiz-assignment .eyebrow { font-size: 10.5px; display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.wiz-assignment .eyebrow .icon { width: 12px; height: 12px; color: var(--disabled); }
.wiz-assignment .doc-entry { min-height: 32px; font-size: 12px; }
.wiz-assignment .field-value { font-size: 12px; min-height: 32px; display: flex; align-items: center;
  border: 1px solid var(--hairline); border-radius: var(--r-control); padding: 0 10px; }
.wiz-assignment .segment { height: 30px; font-size: 12px; font-weight: 600; width: 100%; }
.wiz-assignment .segment-button { flex: 1; justify-content: center; }
.wiz-assignment .setting-fields { gap: 12px; }
.source-example > summary.card-heading { margin: 0; font-size: 12px; }
.source-example > summary h2 { font-size: 13px; }
.source-example > summary .card-link { color: var(--violet-text); font-weight: 600; font-size: 12px; }
.source-example[open] > summary { margin-bottom: 10px; }
.report.notice { background: #FDF4E0; border: 1px solid #F5B942; color: #7A5A0E; font-size: 12px;
  line-height: 1.5; border-radius: var(--r-card); padding: 10px 12px; margin: 0; }
.wizard-footer { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 10px 20px; min-height: 52px; }
.wizard-footer .button { min-height: 32px; font-size: 12px; }
.wizard-footer .wizard-footer-right { gap: 8px; }

/* Stat card at the sizes of §23: card 72–88px, ring 48px, value 18px/600,
   label 12px #464B63. Replaces the larger sizes of v1.3, which put the
   cards at 110–166px. */
.card.stat { padding: 16px; gap: 6px; min-height: 72px; }
.card.stat.meter { min-height: 88px; }
.stat-value, .card.stat.meter .stat-value { font: 600 18px/1.2 var(--font-sans);
  letter-spacing: -.01em; }
.stat-heading { font: 500 12px/1.4 var(--font-sans); color: var(--body); }
.stat-delta, .card.stat.meter .stat-delta { font: 500 12px/1.4 var(--font-sans); margin-top: 0; }
.stat-unit { font: 500 12px/1.4 var(--font-sans); }
.card.stat > .stat-meter { right: 16px; width: 48px; height: 48px; }
.stat-meter-text { font: 600 16px/1 var(--font-sans); }
.card.stat .stat-rule, .card.stat .stat-heading,
.card.stat.meter > *:not(.stat-meter) { padding-right: 64px; }
.stat-heading .icon { top: 16px; right: 16px; width: 40px; height: 40px; padding: 10px; }
.cards-row > .card.stat, .stat-grid > .card.stat { min-height: 72px; }

/* Nothing runs underneath the icon tile or the ring meter. The old rules
   only kept space free for the heading and the number, so an extra line or
   a link below did run through after all. Now it applies to every line in
   the card, in portal and console. */
.card.stat:has(> .stat-meter) > *:not(.stat-meter),
.card.stat:has(.stat-heading .icon) > * { padding-right: 64px; }
.card.stat > .stat-meter, .stat-heading .icon { padding-right: 0; }
.stat-heading .icon { padding: 10px; }

/* Stat card: a long unbroken text must never run under the tile. */
.card.stat > * { overflow-wrap: anywhere; }

/* OT segmentation board: per Purdue level one row with the layer on the left
   and on the right the zones as tiles with SL target, level achieved and
   asset count. The conduits hang under the row they leave from. */
.seg-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--secondary); }
.seg-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg-plane { width: 12px; height: 12px; border-radius: 2px; border: 1.5px solid; flex: none; }
.seg-plane.good { border-color: var(--green); background: var(--green-tint); }
.seg-plane.under { border-color: var(--red); background: var(--red-tint); }
.seg-line { width: 16px; height: 2px; background: var(--violet); border-radius: 1px; flex: none; }
.seg-plate { border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden;
  background: var(--canvas); }
.seg-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.seg-row + .seg-row { border-top: 1px solid var(--hairline); }
.seg-level { display: flex; align-items: center; gap: 12px; padding: 18px 16px;
  border-right: 1px solid var(--hairline); }
.seg-code { font: 500 13px/1 var(--font-mono); color: var(--violet-text); flex: none; min-width: 38px; }
.seg-name { font: 600 14px/1.3 var(--font-sans); color: var(--ink); min-width: 0; }
.seg-zones { display: flex; flex-wrap: wrap; gap: 14px 20px; padding: 18px 16px; min-width: 0; align-items: flex-start; }
.seg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.seg-zone { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--card);
  padding: 7px 12px; }
.seg-zone.under { border-color: #F6C6C2; }
.seg-zone-name { font: 600 14px/1.3 var(--font-sans); color: var(--ink); max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-sl { font: 500 12px/1 var(--font-mono); border: 1px solid var(--hairline);
  border-radius: var(--r-badge); padding: 4px 7px; color: var(--body);
  white-space: nowrap; flex: none; }
.seg-sl.good { background: var(--green-tint); border-color: transparent; color: var(--green-text); }
.seg-sl.under { background: var(--red-tint); border-color: transparent; color: var(--red-text); }
.seg-assets { font: 500 12px/1 var(--font-mono); color: var(--secondary);
  white-space: nowrap; flex: none; text-transform: uppercase; letter-spacing: .04em; }
/* No fixed tint per layer; the row lights up on hover. */
.seg-row:hover { background: #F3F1FF; }
.seg-row:hover .seg-level { background: #F3F1FF; }
/* Columns; the board scrolls horizontally, the level column stays on the left. */
.seg-plate { overflow-x: auto; position: relative; }
.seg-row { grid-template-columns: 200px max-content; min-width: 100%; }
.seg-level { position: sticky; left: 0; z-index: 3; background: var(--canvas); }
/* Per row a fixed space above the zones for the incoming lines (34px for
   one, 16px extra for each next one), so that all zones in the row line up. */
.seg-zones { display: grid; grid-template-columns: repeat(var(--seg-columns, 1), minmax(300px, 340px));
  gap: 0 24px; padding: calc(14px + 34px * min(var(--in, 0), 1) + 16px * max(var(--in, 0) - 1, 0)) 16px
    calc(18px + 30px * min(var(--side, 0), 1));
  align-items: stretch; }
.seg-cell { display: flex; flex-direction: column; min-width: 0; }
.seg-zone { padding: 9px 14px; gap: 10px; width: 100%; box-sizing: border-box; position: relative; z-index: 2; }
.seg-zone-name { max-width: none; flex: 1 1 auto; }
.seg-sl { padding: 4px 8px; font-size: 12.5px; }
.seg-assets { margin-left: auto; }
/* The line layer covers the whole (scrollable) board. */
svg.seg-lines { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.seg-line { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linejoin: round; }
.seg-dot { fill: var(--violet); }
.seg-label { font: 500 12px var(--font-mono); fill: var(--violet); }
.seg-line-link { pointer-events: auto; cursor: pointer; }
.seg-line-link:hover .seg-label, .seg-line-link:focus .seg-label { text-decoration: underline; }
.seg-line-link:hover .seg-line { stroke-width: 3; }
.seg-conduit-data, .seg-in, .seg-stubs { display: none; }
@media (max-width: 760px) { .seg-row { grid-template-columns: 1fr; }
  .seg-level { border-right: none; border-bottom: 1px solid var(--hairline); } }

/* Criticality as a full colour block in the last column of the register. */
.table td.crit { padding: 0; }
.table td.crit > span { display: flex; align-items: center; height: 100%; min-height: 36px;
  padding: 8px 16px; font: 600 13px/1.4 var(--font-sans); color: var(--risk-text); }
.table td.crit.high > span { background: #B3261E; }
.table td.crit.middle > span { background: #E07B39; }
.table td.crit.layer > span { background: var(--green); }

/* Asset register: EOL as a tinted month pill, criticality as a colour block with
   its score in the brand book risk scale (--risk-1 to --risk-6, text --risk-text). */
.eol-pill { display: inline-block; font: 500 12px/1 var(--font-mono); padding: 5px 8px;
  border-radius: var(--r-badge); color: var(--body); }
.eol-pill.past { background: var(--red-tint); color: var(--red-text); }
.eol-pill.soon { background: var(--amber-tint); color: var(--amber-text); }
.table td.crit > span { gap: 8px; }
.table td.crit > span small { font: 500 12px/1 var(--font-mono); opacity: .85; }
.table td.crit.c1 > span { background: var(--risk-1); color: var(--risk-text); }
.table td.crit.c2 > span { background: var(--risk-2); color: var(--risk-text); }
.table td.crit.c3 > span { background: var(--risk-3); color: var(--risk-text); }
.table td.crit.c4 > span { background: var(--risk-4); color: var(--risk-text); }
.table td.crit.c5 > span { background: var(--risk-5); color: var(--risk-text); }
.table td.crit.c6 > span { background: var(--risk-6); color: var(--risk-text-dark); }
.table td.crit.c6 > span small { color: var(--risk-text-dark); }
.table td.crit > span small { color: var(--risk-text); opacity: .7; }

/* Sub-headings inside a sidebar group (Settings: Organisation / Personal). */
.side-nav-heading { display: block; padding: 12px 12px 4px; font: 500 11px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.side-nav-item .icon { width: 18px; height: 18px; flex: none; }

/* Criticality as a pill (asset detail) in the same six colours as the register. */
.pill.crit-pill { color: var(--risk-text); font-family: var(--font-sans); }
.pill.crit-pill small { font: 500 11px/1 var(--font-mono); opacity: .7; }
.pill.crit-pill.c1 { background: var(--risk-1); }
.pill.crit-pill.c2 { background: var(--risk-2); }
.pill.crit-pill.c3 { background: var(--risk-3); }
.pill.crit-pill.c4 { background: var(--risk-4); }
.pill.crit-pill.c5 { background: var(--risk-5); }
.pill.crit-pill.c6 { background: var(--risk-6); }

/* The score stays on the line (elsewhere small renders as a block). */
.table td.crit > span > small, .pill.crit-pill > small { display: inline-block !important; margin: 0; }

/* Zones on the board are links into the asset register, filtered by that zone. */
a.seg-zone { color: inherit; text-decoration: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
a.seg-zone:hover { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet-tint); }
a.seg-zone:hover .seg-zone-name { color: var(--violet-text); }

/* The conduit that was jumped to from the board. */
tr:target { background: var(--violet-tint) !important; }
tr:target td { box-shadow: inset 2px 0 0 var(--violet); }

/* Audit programme: scope choice in the list style of the import wizard, and
   the execution table with one form per row. */
.scope-items { border: 1px solid var(--hairline); border-radius: var(--r-card); margin-top: 10px; max-height: 26rem; overflow: auto; }
.scope-items .section-row { cursor: default; }
.audit-table td { vertical-align: middle; }
.audit-table tr.audit-group td { background: var(--canvas); font-weight: 600; }
.audit-table tr.audit-open th { box-shadow: inset 3px 0 0 var(--amber); }
.audit-table .doc-entry.compact { min-height: 28px; font-size: 12.5px; }
.audit-table td.actions { white-space: nowrap; }

/* Framework cards (imported, available, suggested) at equal height in one row. */
.fw-grid { align-items: stretch; grid-auto-rows: 1fr; }
.fw-grid > .fw-card { height: 100%; box-sizing: border-box; }
.fw-card.proposal { align-items: center; }

/* Needs attention: one row with the numbers that count first. */
.card.attention { padding: 12px 16px; }
.card.attention > .card-heading { margin-bottom: 10px; }
.card.attention .pill, .attention-cause-card .pill { font-size: 12.5px; padding: 5px 10px; text-decoration: none; white-space: normal; }
/* Needs attention: the causes as columns, a count and a title on one line,
   the lines as a column of pills, the other causes hidden until asked. */
.attention-causes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.attention-cause { min-width: 0; }
.attention-cause-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.attention-cause-n { font: 600 18px/1.2 var(--font-sans); color: var(--body); }
.attention-cause-title { font: 600 13px/1.3 var(--font-sans); color: var(--body); }
.chip-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.attention-more { font-size: 12px; }
.attention-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--secondary); }
.attention-list { display: flex; flex-direction: column; gap: 16px; }
.attention-cause-card h2 .attention-cause-n { margin-right: 2px; }
@media (max-width: 1024px) { .attention-causes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .attention-causes { grid-template-columns: minmax(0, 1fr); } }

/* §23 stat card, exact: three lines beside the ring or the icon tile —
   heading 12px, value 18px, label 12px — each on one line with an
   ellipsis. The dashboard grew to 149px because the change sat on a line
   of its own and the caption wrapped; now 72–88px, in the equal-height
   grid as well. */
.card.stat, .card.stat.meter { padding: 12px 16px; gap: 4px; min-height: 72px;
  max-height: 88px; justify-content: center; }
.card.stat > .stat-heading { display: block; font: 500 12px/1.3 var(--font-sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.stat .stat-rule { flex-wrap: nowrap; align-items: baseline; gap: 0 8px;
  min-width: 0; line-height: 1.2; }
.card.stat .stat-rule .stat-value { flex: none; }
.card.stat:not(.meter) .stat-rule .stat-delta { flex-base: auto; }
.card.stat .stat-delta, .card.stat .stat-unit { min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.card.stat > .card-sub { display: block; margin: 0; min-width: 0;
  font: 400 12px/1.3 var(--font-sans); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.card.stat > .card-sub .card-link { white-space: nowrap; }
.card.stat > .stat-rows { gap: 2px; margin-top: 0; }
.card.stat > .stat-rows .stat-row { font: 400 12px/1.3 var(--font-sans); }

/* ------------------------------------------------ workspace tree
   The list on the left of a workspace, one shape for controls and documents,
   in portal and console: a heading with feedback, percentage and a
   search field; groups as a violet bar with a progress meter; rows of 44px
   with a status stripe on the left; at the bottom the legend and the actions
   of the page. The list scrolls internally from 480px (§23), so the tree
   never stretches the page. */
.tree { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tree-heading { display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.tree-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tree-back { flex: none; white-space: nowrap; text-decoration: none;
  font: 600 13px/1.2 var(--font-sans); color: var(--violet-text); }
.tree-back:hover { color: var(--violet-text); text-decoration: underline; }
.tree-pct { flex: none; white-space: nowrap; padding: 4px 6px; border-radius: var(--r-badge);
  font: 600 12px/1 var(--font-mono); color: var(--green-text); background: var(--green-tint); }
.tree-title { margin: 0; font: 600 18px/1.3 var(--font-sans); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-search { width: 100%; height: 32px; padding: 0 10px; background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--r-control);
  font: 400 13px/1 var(--font-sans); color: var(--ink); }
.tree-search::placeholder { color: var(--secondary); }
.tree-search:focus { border-color: var(--violet); }

.tree-items { display: flex; flex-direction: column; gap: 8px; padding: 8px; max-height: 520px;
  overflow: auto; background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-card); }
.tree-group[hidden] { display: none; }
.tree-group > summary { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  list-style: none; cursor: pointer; background: var(--card); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  font: 600 14px/1.2 var(--font-sans); }
.tree-group > summary::-webkit-details-marker { display: none; }
.tree-group > summary:hover { background: var(--canvas); }
.tree-group[open] > summary { border-radius: var(--r-card) var(--r-card) 0 0;
  border-bottom-color: var(--hairline); }
.tree-arrow { flex: none; width: 0; height: 0; border-left: 5px solid var(--ink);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.tree-group[open] .tree-arrow { transform: rotate(90deg); }
.tree-group-code { flex: none; font: 600 13px/1 var(--font-mono); color: var(--violet-text); }
.tree-group-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.tree-meter { flex: none; display: flex; width: 56px; height: 6px; overflow: hidden;
  border-radius: var(--r-full); background: var(--skeleton); }
.tree-meter-part { flex: none; height: 100%; }
.tree-meter-part.k-good { background: var(--green); }
.tree-meter-part.k-busy { background: var(--amber); }
.tree-meter-part.k-rest { background: var(--skeleton); }

.tree-rows { max-height: 300px; overflow-y: auto; background: var(--card);
  border: 1px solid var(--hairline); border-top: none;
  border-radius: 0 0 var(--r-card) var(--r-card); }
.tree-row { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px;
  text-decoration: none; color: var(--ink); border-left: 4px solid var(--table-rule);
  border-bottom: 1px solid var(--hairline); }
.tree-row:last-child { border-bottom: none; }
.tree-row[hidden] { display: none; }
.tree-row.k-good { border-left-color: var(--green); }
.tree-row.k-busy { border-left-color: var(--amber); }
.tree-row:hover { background: var(--canvas); }
.tree-row.active { background: var(--violet-tint); }
.tree-row.active .tree-row-code, .tree-row.active .tree-row-name { color: var(--violet-text); font-weight: 600; }
.tree-row-code { flex: none; font: 500 12px/1 var(--font-mono); color: var(--secondary); }
.tree-row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 13px/1.3 var(--font-sans); }
.tree-row .pill.small-pill { flex: none; margin: 0; }
.tree-row-arrow { flex: none; opacity: 0; font-size: 15px; line-height: 1; color: var(--violet-text); }
.tree-row.active .tree-row-arrow { opacity: 1; }
.tree-empty { margin: 0; padding: 12px; font: 400 13px/1.4 var(--font-sans); color: var(--secondary); }

.tree-footer { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.tree-legend { display: flex; flex-wrap: wrap; gap: 6px 14px;
  font: 400 12px/1.3 var(--font-sans); color: var(--secondary); }
.tree-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tree-legend span::before { content: ""; flex: none; width: 3px; height: 12px; border-radius: 1px;
  background: var(--table-rule); }
.tree-legend .k-good::before { background: var(--green); }
.tree-legend .k-busy::before { background: var(--amber); }
.tree-footer .button, .tree-footer .button.small { width: 100%; }
.tree-footer details > summary { list-style: none; cursor: pointer; }
.tree-footer details > summary::-webkit-details-marker { display: none; }
.tree-footer details > form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tree-footer .doc-entry { width: 100%; }

/* The workspace gets a little more room on the left: code plus title then
   fit on one line in the tree. */
.doc-workspace { grid-template-columns: 280px 1fr; }
@media (max-width: 980px) { .doc-workspace { grid-template-columns: 1fr; } }

/* Without the search field the top-bar-right is the only block in the top
   bar; it belongs against the right edge, also when the hamburger on the
   left joins in on narrow screens. */
.top-bar-right { margin-left: auto; }

/* ------------------------------------------------ top bar account menu
   The block at the top right is a button: clicking it opens a menu with
   your own account page and log out. The menu hangs under the button, is
   32px per line and follows the card line of §23. */
.top-account { position: relative; }
.top-account-button { display: flex; align-items: center; gap: 10px; padding: 4px 6px;
  background: none; border: 1px solid transparent; border-radius: var(--r-card);
  cursor: pointer; color: inherit; font: inherit; text-align: left; }
.top-account-button:hover { background: var(--violet-tint); }
.top-account-button[aria-expanded="true"] { background: var(--violet-tint); border-color: var(--hairline); }
.top-account-button .top-who { align-items: flex-start; }
.top-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 200px;
  display: flex; flex-direction: column; padding: 4px; background: var(--card);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: 0 6px 20px rgba(47, 51, 73, .12); }
.top-menu-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px;
  border-radius: var(--r-control); text-decoration: none; color: var(--ink);
  font: 500 13px/1 var(--font-sans); white-space: nowrap; }
.top-menu-item:hover { background: var(--violet-tint); color: var(--violet-text); }
.top-menu-item .icon { width: 16px; height: 16px; flex: none; }
.top-menu form { margin: 0; display: flex; flex-direction: column; }
button.top-menu-item { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; }

/* ------------------------------------------------ table corners
   Tables were the only block left with square corners in an interface that
   rounds everything else by 4px. With collapsed borders the browser ignores
   every radius, so the borders now sit per cell (right and bottom, left and
   top only on the outside) and the four corner cells get the §23 radius. */
.table { border-collapse: separate; border-spacing: 0; }
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td { border-style: solid; border-width: 0 1px 1px 0; }
.table > thead > tr > th:first-child,
.table > tbody > tr > th:first-child,
.table > tbody > tr > td:first-child { border-left-width: 1px; }
.table > thead > tr:first-child > th,
.table > tbody:first-child > tr:first-child > th,
.table > tbody:first-child > tr:first-child > td { border-top-width: 1px; }
.table > thead > tr:first-child > th:first-child,
.table > tbody:first-child > tr:first-child > th:first-child,
.table > tbody:first-child > tr:first-child > td:first-child { border-top-left-radius: var(--r-card); }
.table > thead > tr:first-child > th:last-child,
.table > tbody:first-child > tr:first-child > th:last-child,
.table > tbody:first-child > tr:first-child > td:last-child { border-top-right-radius: var(--r-card); }
.table > tbody:last-of-type > tr:last-child > th:first-child,
.table > tbody:last-of-type > tr:last-child > td:first-child { border-bottom-left-radius: var(--r-card); }
.table > tbody:last-of-type > tr:last-child > th:last-child,
.table > tbody:last-of-type > tr:last-child > td:last-child { border-bottom-right-radius: var(--r-card); }
/* The coloured block of a criticality fills its cell; in the corner the
   fill follows the rounding of the table. */
.table > tbody:last-of-type > tr:last-child > td.crit:first-child > span { border-bottom-left-radius: var(--r-card); }
.table > tbody:last-of-type > tr:last-child > td.crit:last-child > span { border-bottom-right-radius: var(--r-card); }

/* The explanation with a control: what the standard asks and how you meet it.
   Reading text, so a wider line height and a maximum line length. */
.card.control-explanation { display: block; }
.control-explanation .explanation-text { margin: 0; max-width: 72ch;
  font: 400 14px/1.6 var(--font-sans); color: var(--body); }
.control-explanation .explanation-heading { margin: 14px 0 6px; font: 600 13px/1.3 var(--font-sans);
  color: var(--ink); }

/* ------------------------------------------------ history per control
   One line per event: arrow, glyph, what happened, who and when. Clicking
   expands the note or the explanation below it. Rows of 40px, tinted
   alternately, like a table in §23. */
.control-history .hist-items { list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; }
.hist-rule + .hist-rule { border-top: 1px solid var(--hairline); }
.hist-rule:nth-child(even) { background: var(--canvas); }
.hist-rule > details > summary { display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 6px 12px; list-style: none; cursor: pointer; }
.hist-rule > details > summary::-webkit-details-marker { display: none; }
.hist-rule > details > summary:hover { background: var(--violet-tint); }
.hist-rule > details.bare > summary { cursor: default; }
.hist-rule > details.bare > summary:hover { background: none; }
.hist-rule > details.bare .hist-arrow { visibility: hidden; }
.hist-arrow { flex: none; width: 0; height: 0; border-left: 5px solid var(--disabled);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.hist-rule > details[open] .hist-arrow { transform: rotate(90deg); }
.hist-rule > details > summary > .icon { flex: none; width: 16px; height: 16px; color: var(--secondary); }
.hist-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 13px/1.4 var(--font-sans); color: var(--ink); }
.hist-who { flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font: 400 12px/1.4 var(--font-sans); color: var(--secondary); }
.hist-time { flex: none; white-space: nowrap; font: 500 12px/1.4 var(--font-mono);
  color: var(--secondary); }
.hist-detail { padding: 2px 12px 12px 41px; }
.hist-text { margin: 0; max-width: 72ch; font: 400 13px/1.6 var(--font-sans); color: var(--body); }
.hist-text.empty { color: var(--secondary); font-style: italic; }
.hist-detail .card-link { display: inline-block; margin-top: 6px; }
@media (max-width: 700px) { .hist-who { display: none; } }

/* ------------------------------------------------ sidebar as a rail
   Option from brand book §14: the sidebar collapses into a 64px rail with
   glyphs only, the logo as the brand mark and the active group in a violet
   tint. Hovering or focusing opens the menu of that group beside it, names
   included; the glyph itself carries a tooltip and an aria-label. */
.rail-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px;
  padding: 0 10px; background: none; border: none; border-radius: var(--r-control);
  cursor: pointer; color: var(--secondary); font: 500 13px/1.2 var(--font-sans); }
.rail-button:hover { background: var(--canvas); color: var(--ink); }
.rail-button .icon { width: 16px; height: 16px; flex: none; }

.rail .sidebar { width: 64px; padding: 14px 8px 12px; gap: 10px; align-items: center;
  overflow: visible; z-index: 50; }
.rail .sidebar .brand { padding: 0; justify-content: center; }
.rail .brand-name, .rail .brand-sub, .rail .side-nav-heading, .rail .sidegroup-arrow,
.rail .side-group-heading > span, .rail .user-info, .rail .rail-button-text { display: none; }
.rail .user-card-top { justify-content: center; }
.rail .side-nav { align-items: center; gap: 4px; overflow: visible; width: 100%; }
.side-group-sleeve { display: contents; }
.rail .side-group-sleeve { display: block; position: relative; width: 100%; }
.rail .side-group { width: 100%; display: flex; flex-direction: column; align-items: center; }
.rail .side-group > .side-nav-item { display: none; }
.rail .side-group-heading { width: 36px; height: 36px; padding: 0; justify-content: center;
  border-radius: var(--r-control); }
.rail .side-group-heading .icon { width: 18px; height: 18px; }
.rail .side-group-sleeve:has(.side-nav-item.active) .side-group-heading { background: var(--violet-tint); }
.rail .side-group-sleeve:has(.side-nav-item.active) .side-group-heading .icon { color: var(--violet-text); }
.rail .rail-button { width: 36px; height: 36px; padding: 0; justify-content: center; }
.rail .rail-button .icon { transform: rotate(180deg); }
.rail .sidebar-footer { border: none; padding: 0; margin: 0; align-items: center; }

/* The flyout is an ordinary card: a hairline all round, 4px corners, and it
   floats eight pixels off the rail. The bridge across that gap hangs on the
   group itself, because the flyout scrolls internally and clips away
   everything that falls outside its border. */
.rail-tile { display: none; position: absolute; left: calc(100% + 8px); top: -6px; z-index: 60;
  min-width: 208px; max-height: 70vh; overflow-y: auto; padding: 6px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: 0 8px 24px -6px rgba(47, 51, 73, .22); }
.rail .side-group-sleeve::after { content: ""; position: absolute; left: 100%; top: -6px;
  width: 12px; height: calc(100% + 12px); }
.rail .side-group-sleeve:hover > .rail-tile,
.rail .side-group-sleeve:focus-within > .rail-tile { display: block; }

.rail-tile-heading { display: block; padding: 4px 8px 6px; font: 600 13px/1.3 var(--font-sans);
  color: var(--ink); }
.rail-tile .side-nav-item { display: flex; white-space: nowrap; padding-left: 8px;
  font-size: 13px; }

/* Below 980px the sidebar is already a drawer behind the hamburger; a rail
   makes no sense there, so the collapsed state does not count. */
@media (max-width: 980px) {
  .rail .sidebar { width: 264px; padding: 1.3rem 1rem 1.1rem; align-items: stretch;
    z-index: 40; }
  .rail .brand-name, .rail .brand-sub, .rail .rail-button-text { display: block; }
  .rail .side-group-heading > span { display: inline; }
  .rail .user-info { display: flex; }
  .rail .side-nav-heading { display: block; }
  .rail .sidegroup-arrow { display: inline-block; }
  .rail .side-group > .side-nav-item { display: flex; }
  .rail .side-group-heading { width: auto; height: auto; padding: .5rem .55rem;
    justify-content: flex-start; }
  .rail .rail-button { width: 100%; height: auto; min-height: 32px; padding: 0 10px;
    justify-content: flex-start; }
  .rail .rail-button .icon { transform: none; }
  .rail .rail-tile { display: none !important; }
  .rail .sidebar-footer { border: 0; border-top: 1px solid var(--user-card-rule); padding: 10px 0 0; margin: 0 calc(4px - 1rem) calc(4px - 1.1rem); }
  .rail .user-card-top { justify-content: flex-start; }
  html.rail .user-card-foot, html.rail .user-more { display: flex; }
  /* The rail centres everything for its 64px; the drawer is the full menu
     again, so the brand, the groups and their items stand left as always. */
  .rail .sidebar .brand { padding: 0 .5rem .4rem; justify-content: flex-start; }
  .rail .side-nav { align-items: stretch; gap: .1rem; overflow-y: auto; }
  .rail .side-group { display: block; align-items: stretch; }
  .rail .side-group-sleeve { display: contents; }
  .rail .side-group-sleeve::after { display: none; }
  .rail .sidebar-footer { align-items: stretch; }
}

/* The status dot: one shape for work lists, member tables and the
   two-factor column in the console. */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-full);
  flex: none; background: var(--disabled); }
.dot.good { background: var(--green); }
.dot.attention { background: var(--amber); }
.dot.error { background: var(--red); }

/* ------------------------------------------------ toggle
   The knob filled almost the whole track and the track was nearly white, so
   a switched-off toggle looked like a loose dot. Now a track of 36x20 with
   a hairline, a knob of 16px with equal margins, and violet with a white
   knob when it is on. */
input[type="checkbox"].toggle { width: 36px; height: 20px; flex: 0 0 36px;
  /* Inside a form every input field gets a 32px minimum height; a
     toggle is not an input field and keeps its own size. */
  min-height: 20px; max-height: 20px;
  background: var(--skeleton); border: 1px solid var(--hairline); }
input[type="checkbox"].toggle::after { top: 1px; left: 1px; width: 16px; height: 16px;
  box-shadow: 0 1px 2px rgba(15, 18, 32, .18); }
input[type="checkbox"].toggle:hover { border-color: var(--table-rule); }
input[type="checkbox"].toggle:checked { background: var(--violet); border-color: var(--violet); }
input[type="checkbox"].toggle:checked:hover { background: var(--violet-hover);
  border-color: var(--violet-hover); }
input[type="checkbox"].toggle:checked::after { transform: translateX(16px); }
:root[data-theme="dark"] input[type="checkbox"].toggle { background: #3F4459;
  border-color: #4A5068; }

/* Sensitive text in the customer view: red for whoever is looking on or
   editing, invisible to the customer themselves and to elevated support.
   The colour is a marking, not security — that comes with the encryption. */
/* "To be encrypted": for support below elevated this shows not the value
   but a dotted chip with a padlock and the field name. Input fields with
   such a value get the same dotted line and blurred text. */
.sensitive { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; vertical-align: middle;
  border: 1px dashed #A098F5; border-radius: var(--r-control); color: #6E7388; background: transparent;
  font: 500 13px/1.4 var(--font-sans); white-space: nowrap; text-decoration: none; }
.sensitive::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
a.sensitive, .sensitive a { color: inherit; }
.sensitive.hidden { border-color: #C9CCD8; color: #6E7388; }
/* No longer decryptable: the customer's key is gone or unreachable. */
.sensitive.unreadable { border-color: #F5B5A8; color: var(--red-text, #bf2600); }
/* Input fields with a hidden value: padlock on the left, blurred text; the normal border stays. */
[data-sensitive="1"] { color: transparent !important; text-shadow: 0 0 7px rgba(70, 75, 99, .6);
  padding-left: 34px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7388' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 16px 16px !important; }
[data-sensitive="1"]::placeholder { color: transparent; }

/* Design block of a control: requirements and statements as chips in one
   input box, with a select list under the box as soon as you type (link_pane.js).
   Grey counts, amber dotted with a dot is a document that has not been
   approved yet, red dotted is missing its source. */
.link-block { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.link-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); min-height: 24px; }
.link-heading h3 { margin: 0; font: 600 16px/1.3 var(--font-sans); color: var(--ink); }
.link-field { position: relative; }
.link-pane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; min-height: 56px;
  border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--card); cursor: text; }
.link-pane:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
.link-pane .chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 12px; height: 36px;
  font: 500 14px/1 var(--font-mono); border-radius: var(--r-badge); border: 1px solid transparent;
  background: var(--violet-tint); color: var(--violet-text); text-decoration: none; white-space: nowrap; flex: none; }
.link-pane .chip.fixed { padding-right: 12px; }
.link-pane .chip:not(.mono) { font: 500 14px/1 var(--font-sans); }
.link-items li.new .kl-title { color: var(--violet-text); }
.link-pane .chip.ok { background: var(--canvas); color: var(--ink); }
.link-pane .chip.draft { background: transparent; border: 1px dashed var(--amber); color: var(--amber-text); }
.link-pane .chip.draft::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.link-pane .chip.source-gone { background: var(--card); border: 1px solid var(--hairline); color: var(--ink); }
.link-pane .chip.source-gone > .icon { width: 16px; height: 16px; color: var(--amber-text); flex: none; }
.link-pane .chip form { display: inline; }
.link-pane .chip-x { min-width: 24px; min-height: 24px; padding: 0; font: 600 16px/1 var(--font-sans); color: inherit;
  border: 0; background: transparent; border-radius: var(--r-badge); cursor: pointer; opacity: .7; }
.link-pane .chip-x:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.link-pane-entry { flex: 1 1 180px; min-width: 140px; height: 36px; padding: 0 4px; border: 0; outline: 0;
  font: 400 15px/1.3 var(--font-sans); color: var(--ink); background: transparent; }
.link-pane-entry::placeholder { color: var(--secondary); }
.link-pane-entry:disabled { cursor: default; }
/* The box itself carries the focus ring; the field inside it does not. And
   the select list may run past the card edge. */
.link-pane .link-pane-entry:focus, .link-pane .link-pane-entry:focus-visible { box-shadow: none; outline: none; border: 0; }
.card.design { overflow: visible; }
.link-items { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30; margin: 0; padding: 0; list-style: none;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-control); box-shadow: 0 8px 24px rgba(47, 51, 73, .12);
  max-height: 320px; overflow: auto; }
.link-items li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  min-height: 56px; padding: 0 16px; border-top: 1px solid var(--hairline); cursor: pointer; }
.link-items li:first-child { border-top: 0; }
.link-items li:hover, .link-items li.active { background: var(--canvas); }
.link-items li.empty { grid-template-columns: 1fr; color: var(--secondary); cursor: default; }
/* The record picker (templates/_record_picker.html, core/pickers.py): the
   same pane at the height of a form control (brand book §23: 32px in a
   form, chips with the badge radius), the "create it first" link in the
   empty state, and a chip from before the picker -- a stored value the
   platform does not know -- drawn as a hairline chip until it is changed. */
.record-picker .link-pane.pick { min-height: 32px; padding: 2px 8px; gap: 6px; }
.record-picker .link-pane.pick .chip { height: 24px; padding: 0 2px 0 8px; font-size: 13px; border-radius: var(--r-badge); }
.record-picker .link-pane.pick .chip-x { min-width: 20px; min-height: 20px; font-size: 14px; }
.record-picker .link-pane.pick .link-pane-entry { height: 26px; min-width: 120px; flex: 1 1 120px; font-size: 14px; }
.record-picker.compact .link-pane.pick { min-height: 32px; }
.record-picker.compact .link-items li { min-height: 40px; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; padding: 0 10px; }
.record-picker .link-items li { min-height: 40px; }
.link-pane .chip.legacy { background: var(--card); border: 1px solid var(--hairline); color: var(--body); font-style: italic; }
.link-items .link-create { color: var(--violet-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-items .link-create:hover { text-decoration: underline; }
.kl-code { font: 600 15px/1 var(--font-mono); color: var(--ink); }
.kl-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--ink); }
.kl-status { font-size: 14px; white-space: nowrap; flex: none; }
.kl-status.ok { color: var(--green-text); }
.kl-status.draft { color: var(--amber-text); }
/* The Controls card of a risk page (templates/_risk_controls.html): a chip
   is a link to the control with its status pill beside it; a lock marks a
   link a group wrote; a control whose framework is gone is a source-gone chip. */
.rctl-chip a { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rctl-chip a:hover { text-decoration: underline; }
.rctl-chip .pill { height: 20px; line-height: 20px; padding: 0 6px; font-size: 11px; }
.rctl-lock { display: inline-flex; align-items: center; color: var(--secondary); padding: 0 4px; }
.rctl-lock .icon { width: 16px; height: 16px; }
[data-risk-controls] > .card-sub { display: block; margin-bottom: var(--s-2); }
/* The statements without a source, one row each: code, what is wrong, the step that mends it. */
.link-missing { border: 1px solid var(--hairline); border-radius: var(--r-control); overflow: hidden; }
.link-missing-head { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px;
  font: 600 15px/1.3 var(--font-sans); color: var(--amber-text); background: var(--amber-tint); border-bottom: 1px solid var(--hairline); }
.link-missing-head .icon { width: 18px; height: 18px; flex: none; }
.link-missing-row { display: flex; align-items: center; gap: 24px; min-height: 40px; padding: 8px 14px; font-size: 14px; color: var(--body);
  border-bottom: 1px solid var(--hairline); }
.link-missing-row:last-child { border-bottom: 0; }
.link-missing-code { flex: none; min-width: 72px; color: var(--ink); }
.link-missing-why { flex: 1 1 auto; min-width: 0; }
.link-missing-row .card-link { flex: none; font-weight: 600; white-space: nowrap; }
.link-footer { margin: 16px 0 0; font-size: 14px; color: var(--body); }
/* The Documents block of a control's Design card (templates/measure_detail.html):
   one 40px row per document that substantiates the control -- code, title,
   the reason, the state pill, × for one attached from the page -- inside a
   hairline box, the picker below it like the other two blocks. */
.link-heading h3 .cdoc-count { margin-left: 10px; font-weight: 500; color: var(--secondary); }
.cdoc-rows { border: 1px solid var(--hairline); border-radius: var(--r-control); overflow: hidden; }
.cdoc-row { display: flex; align-items: center; gap: 16px; min-height: 40px; padding: 6px 14px; font-size: 14px; color: var(--body);
  border-bottom: 1px solid var(--hairline); }
.cdoc-row:last-child { border-bottom: 0; }
.cdoc-row:nth-child(even) { background: var(--canvas); }
.cdoc-code { flex: none; min-width: 72px; color: var(--ink); white-space: nowrap; }
.cdoc-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdoc-title .card-link { font-weight: 600; }
.cdoc-title .icon.mini { width: 14px; height: 14px; vertical-align: -2px; }
.cdoc-origin { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdoc-row .pill { flex: none; white-space: nowrap; }
.cdoc-gone { display: inline; flex: none; }
.cdoc-gone .chip-x { min-width: 24px; min-height: 24px; padding: 0; font: 600 16px/1 var(--font-sans); color: var(--secondary); border-radius: var(--r-badge); }
.cdoc-gone .chip-x:hover { color: var(--ink); background: rgba(0, 0, 0, .06); }
@media (max-width: 720px) { .cdoc-row { flex-wrap: wrap; row-gap: 4px; } .cdoc-origin { max-width: 100%; flex-basis: 100%; } }
/* The other way round (templates/_document_controls.html): the controls a document substantiates, as chips in the aside. */
.cdoc-chips { gap: 6px; }
.cdoc-chips .chip { text-decoration: none; min-height: 28px; max-width: 100%; }
.cdoc-chips .chip .card-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdoc-chips .chip .pill { flex: none; }

/* Add risk (IT): the risk on the left, the assessment with a live score on
   the right. Fields 44px, labels 14px/600, "optional" in grey. */
.rn-form { margin: 16px -16px -16px; }
.rn-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--hairline); }
.rn-links { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.rn-right { padding: 24px 24px 28px; background: var(--canvas); border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 18px; }
.rn-right .eyebrow { margin-bottom: -6px; }
.rn-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.rn-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rn-label { font: 600 14px/1.3 var(--font-sans); color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.rn-optional { font-style: normal; font-weight: 400; color: var(--secondary); }
.rn-required { color: var(--red); font-weight: 600; }
.rn-standard { font-weight: 500; color: var(--body); letter-spacing: .04em; }
.rn .doc-entry { min-height: 44px; font-size: 15px; padding: 10px 14px; background: var(--card); }
.rn textarea.doc-entry { min-height: 84px; }
.rn select.doc-entry { height: 44px; padding-top: 0; padding-bottom: 0; padding-right: 40px; line-height: normal;
  appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464B63' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 18px 18px; }
.rn .link-pane { background: var(--card); }
.rn-line { border: 0; border-top: 1px solid var(--hairline); margin: 2px 0; }
.rn-score { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-control); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px; }
.rn-score-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rn-score-heading h3 { margin: 0; font: 600 16px/1.3 var(--font-sans); }
.rn-score-value { display: inline-flex; align-items: center; gap: 10px; }
.rn-score-value b, .rn-rest b { font: 600 22px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.rn-score .pill { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.rn-strook { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 6px; }
.rn-cell { height: 30px; border-radius: 4px; display: grid; place-items: center; font: 600 13px/1 var(--font-mono);
  color: var(--risk-text); border: 2px solid transparent; }
.rn-cell.active { border-color: var(--ink); }
.rn-rest { display: flex; align-items: center; gap: 12px; }
.rn-rest-label { color: var(--body); font-size: 15px; }
.rn-hint { margin: 0; font-size: 14px; color: var(--body); }
.rn-ticks { display: flex; flex-wrap: wrap; gap: 10px; }
.rn-tick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--card); font-size: 15px; color: var(--ink); }
.rn-tick input { width: 18px; height: 18px; margin: 0; }
.rn-tick:has(input:checked) { border-color: var(--violet); background: var(--violet-tint); color: var(--violet-text); }
.rn-cancel { min-height: 48px; padding: 0 24px; font-size: 15px; }
.rn-make { flex: 1; min-height: 48px; font-size: 15px; }
@media (max-width: 960px) { .rn-columns { grid-template-columns: 1fr; } .rn-right { border-left: 0; border-top: 1px solid var(--hairline); } }

/* Risk register: heading with count and buttons, a filter row with a search field
   and select lists that light up as chips as soon as they filter something, and a
   table with the title in bold, level as a coloured dot and status as the only field. */
.rr-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.rr-heading-links { display: flex; min-width: 0; }
.rr-heading-links h2 { margin: 0; }
.rr-heading-right { display: flex; align-items: center; }
.rr-search { position: relative; }
.rr-search .doc-entry { width: 100%; }
.rr-search .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--secondary); pointer-events: none; }
.rr-clear { border: 0; background: transparent; color: var(--violet-text); cursor: pointer; padding: 0 4px; }
.rr-clear:hover { text-decoration: underline; }
.table.register .rr-risk { min-width: 260px; }
.rr-title { display: block; text-decoration: none; }
.rr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rr-consequences { color: var(--secondary); }
.rr-level { display: inline-flex; align-items: center; }
.rr-point { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.table.register .rr-date { white-space: nowrap; }
.table.register .rr-status { min-width: 150px; }
.rr-id-link { text-decoration: none; }
/* One explanatory line under a card header, before the input grid. */
.card-explanation { margin: -4px 0 10px; }
/* Processing: the DPIA status as a link in the register. */
.pill-link { text-decoration: none; }
.pill-link:hover .pill { outline: 2px solid var(--violet); outline-offset: 1px; }
/* The domain number under (register) or beside (detail) the organisation-wide id. */
.rr-id-domain { font-size: 12px; color: var(--secondary); white-space: nowrap; }
h1 .rr-id-domain { font-size: 14px; font-weight: 500; }
.rr-id-link:hover, .rr-title:hover { color: var(--violet-text); text-decoration: underline; text-underline-offset: 2px; }
.rr-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.rr-footer .mono { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* Group header in a table: one row with an eyebrow, for example the domain the audits below were carried out in. */
.table tr.group-row td { background: var(--canvas); padding: 6px 12px; border-top: 1px solid var(--hairline); }

/* Audit list per level of the domain tree: header row with chevron, tree line,
   name and counter; audits indented below; progress bar; status as an
   outlined pill. */
.audit-list tr.group-row td { padding-top: 10px; padding-bottom: 10px; }
.audit-list tr.group-row strong { font-size: 14px; }
.audit-list tr.group-row strong.subtle { font-weight: 600; }
.audit-list .group-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; background: none; color: var(--secondary); cursor: pointer; vertical-align: middle; margin-right: 6px; }
.audit-list .group-button .icon { width: 16px; height: 16px; transition: transform .15s; }
.audit-list .group-button[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.audit-list .tree-line { font-family: var(--font-mono); color: var(--disabled); margin-right: 8px; }
.audit-list .eyebrow.inline { display: inline; margin-left: 10px; }
.audit-list td.audit-title strong { font-size: 14px; }
.audit-list td.audit-title { white-space: nowrap; }
.audit-list td:nth-child(2), .audit-list td:nth-child(4) { white-space: nowrap; }
.audit-list .progress { display: flex; align-items: center; gap: 12px; }
.audit-list .gauge { display: inline-block; width: 140px; max-width: 18vw; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.audit-list .gauge i { display: block; height: 100%; background: var(--violet); border-radius: 3px; }
.audit-list .findings { margin-top: 6px; font-size: 12px; color: var(--body); display: flex; gap: 10px; align-items: center; }
.audit-list .findings .dot { width: 8px; height: 8px; }
.pill.border { background: var(--card); border: 1px solid var(--hairline); color: var(--ink); padding: 6px 14px; font-weight: 500; font-size: 13px; text-transform: none; letter-spacing: 0; }
.page-sub .eyebrow.inline { display: inline; margin-left: 6px; }

/* Statement of applicability: reasons as compact checkboxes, coverage as
   chips, a not-applicable control dimmed. */
.table.soa .soa-reasons { white-space: nowrap; }
.table.soa .soa-reason { display: block; font-size: 12px; color: var(--body); line-height: 1.6; }
.table.soa .soa-reason input { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.table.soa .soa-coverage { max-width: 260px; }
.table.soa tr.out td:first-child { opacity: .55; }

/* Dashboard: the view choice (this domain / per domain / consolidated) on
   the right of the page header, and the table per domain: one growing name
   column, figures in mono on one line, rows of 40px, total row at the bottom. */
/* Scope of the dashboard: a label with below it one select field with an
   icon on the left and a chevron on the right (the pattern for every styled choice). */
.dash-scope { flex: none; display: grid; gap: 6px; justify-items: start; }
/* On the dashboard the scope sits on the right of the title row, top aligned. */
.dash-heading { align-items: flex-start; }
.dash-heading > .dash-scope { flex: none; margin-left: auto; }
.dash-scope-heading { font: 600 13px/1.2 var(--font-sans); color: var(--ink); }
.select-field { position: relative; display: inline-flex; align-items: center; }
.select-field-icon { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--violet-text); pointer-events: none; }
.select-field-select { appearance: none; height: 40px; min-width: 220px; padding: 0 40px 0 40px;
  font: 400 15px/1 var(--font-sans); color: var(--ink); background: var(--card);
  border: 1px solid var(--hairline); border-radius: var(--r-card); cursor: pointer; }
.select-field-select:hover { border-color: var(--rule); }
.selectfield-arrow { position: absolute; right: 15px; width: 8px; height: 8px; pointer-events: none;
  border-right: 1.75px solid var(--secondary); border-bottom: 1.75px solid var(--secondary);
  transform: translateY(-3px) rotate(45deg); }
.dash-domains th, .dash-domains td { white-space: nowrap; border-left: 1px solid var(--hairline); }
.dash-domains th:first-child, .dash-domains td:first-child { border-left: none; }
.dash-domains th.r, .dash-domains td.dash-number { text-align: right; }
.dash-domains tbody td, .dash-domains tfoot td { vertical-align: middle;
  font-family: var(--font-mono); font-size: 13px; color: var(--secondary); }
.dash-domains td b { font-weight: 500; color: var(--ink); }
.dash-domains td.dash-domain { font-family: var(--font-sans); min-width: 220px; white-space: nowrap; }
.dash-branch { font-family: var(--font-mono); color: var(--rule); margin-right: 10px; }
.dash-name { color: var(--violet-text); font-weight: 600; font-size: 14px; text-decoration: none; }
.dash-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.dash-code { font-family: var(--font-mono); font-size: 12px; color: var(--secondary); margin-left: 6px; }
.dash-current { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 2px; background: var(--violet-tint);
  color: var(--violet-text); font: 500 11px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.dash-gauge { min-width: 200px; }
.dash-fraction { display: inline-block; min-width: 56px; }
.dash-fraction.nul b { color: var(--secondary); font-weight: 400; }
.dash-meter { display: inline-block; vertical-align: middle; width: 56px; height: 6px; margin: 0 14px; border-radius: 3px;
  background: var(--hairline); overflow: hidden; }
.dash-meter i { display: block; height: 100%; background: var(--violet); border-radius: 3px; }
.dash-pct { display: inline-block; min-width: 32px; }
.dash-nul { color: var(--secondary); }
.dash-red { color: var(--red-text); font-weight: 600; }
.dash-point { color: var(--secondary); margin: 0 8px; }
.dash-domains tfoot td { background: var(--canvas); border-top: 1px solid var(--rule); font-weight: 600; }
.dash-domains tfoot td.dash-domain { color: var(--ink); }
.dash-domains tfoot td b, .dash-domains tfoot .dash-pct { color: var(--ink); }

/* Welcome screen after signing in (templates/welcome.html): one card in the
   middle of the screen, the brand above it, below that the steps with their
   state on the right. This is the shell of that screen, so screen height is allowed here. */
.welcome { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--canvas); padding: var(--s-5); }
.welcome-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(20, 24, 40, .04); padding: 34px 32px 30px; width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 26px; }
.welcome-brand { display: flex; justify-content: center; }
.welcome-image { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
/* The brand mark (.cisoly-mark): the same loading icon as in every save button
   (.button.loading), larger; on the sign-in page and the welcome screen. One drawing
   for all three, so that they can never drift apart. */
.cisoly-mark, .welcome-mark { display: block; width: 84px; height: 84px; border-radius: 50%;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%237367F0'/><g transform='rotate(90 16 16) translate(32 0) scale(-1 1)'><circle cx='16' cy='16' r='8.857' fill='none' stroke='%23A098F5' stroke-width='5.143'/><circle cx='16' cy='16' r='8.857' fill='none' stroke='%23fff' stroke-width='5.143' pathLength='100' stroke-dasharray='100 100' stroke-dashoffset='100'><animate attributeName='stroke-dashoffset' values='100;25;100' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.4 0 0.6 1;0.4 0 0.6 1' dur='1.6s' repeatCount='indefinite'/></circle></g></svg>") center / contain no-repeat; }
/* Static brand mark (sign-in page): the same drawing in its full state, without motion. */
.cisoly-mark.subtle { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%237367F0'/><g transform='rotate(90 16 16) translate(32 0) scale(-1 1)'><circle cx='16' cy='16' r='8.857' fill='none' stroke='%23A098F5' stroke-width='5.143'/><circle cx='16' cy='16' r='8.857' fill='none' stroke='%23fff' stroke-width='5.143' pathLength='100' stroke-dasharray='100 100' stroke-dashoffset='25'></circle></g></svg>"); }
.welcome-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.welcome-steps li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 7px 0; font: 400 16px/1.35 var(--font-sans); color: var(--body); }
.welcome-steps li.ready { color: var(--secondary); }
.welcome-steps li.busy { color: var(--ink); font-weight: 600; }
.welcome-text { min-width: 0; }
.welcome-state { flex: none; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--secondary); }
.welcome-steps li.ready .welcome-state::after { content: attr(data-ready); }
.welcome-steps li.busy .welcome-state::after { content: "\00b7 \00b7 \00b7"; letter-spacing: .18em;
  font-size: 15px; color: var(--ink); animation: welcome-pols 1.2s ease-in-out infinite; }
.welcome-noscript { margin: 0; text-align: center; }
@keyframes welcome-run { to { transform: rotate(360deg); } }
@keyframes welcome-pols { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .welcome-steps li.busy .welcome-state::after { animation: none; }
}

/* Product overview (console): the status per requirement as a select list,
   coloured to match the state; below it who set it and when. */
.prod-status { white-space: nowrap; }
.prod-status .doc-entry.compact { min-width: 150px; font-weight: 500; }
.prod-status .vst-ok { color: var(--green-text, #1E7A52); }
.prod-status .vst-busy { color: var(--violet-text); }
.prod-status .vst-pending { color: var(--amber-text, #A66808); }
.prod-status .vst-excluded { color: var(--secondary); }
.prod-set { display: block; margin-top: 3px; font-size: 11px; color: var(--secondary); }

/* Review board (document_reviews.html): three columns with a coloured line
   under the heading, a card per document, buttons at the bottom right of the card. */
.rv-bord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.rv-column { display: grid; gap: 8px; min-width: 0; }
.rv-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 28px; }
.rv-heading h2 { font: 600 17px/1.3 var(--font-sans); color: var(--ink); margin: 0; display: flex; align-items: baseline; gap: 8px; }
.rv-count { font: 400 13px/1 var(--font-mono); color: var(--secondary); }
.rv-sub { font-size: 13px; color: var(--secondary); white-space: nowrap; }
.rv-line { height: 3px; border-radius: 2px; margin: -6px 0 2px; background: var(--hairline); }
.rv-line.grey { background: var(--rule, var(--hairline)); } .rv-line.amber { background: var(--amber); } .rv-line.green { background: var(--green); }
.rv-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 8px 12px;
  display: grid; gap: 2px; }
.rv-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; line-height: 1.25; }
.rv-code { color: var(--violet-text); font-size: 13px; text-decoration: none; }
.rv-name { font: 600 14px/1.25 var(--font-sans); color: var(--ink); text-decoration: none; min-width: 0; }
.rv-name:hover, .rv-code:hover { text-decoration: underline; text-underline-offset: 2px; }
.rv-version { font-size: 12px; color: var(--secondary); }
.rv-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.rv-meta { font-size: 12px; color: var(--secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-actions { display: flex; justify-content: flex-end; gap: 6px; flex: none; margin-left: auto; }
.rv-actions .button { height: 28px; padding: 0 10px; font-size: 12px; line-height: 26px; }
.rv-actions form { margin: 0; }
.rv-empty { margin: 0; font-size: 13px; color: var(--secondary); }
.rv-filters { margin-bottom: 16px; }
.rv-filters .rr-search { flex: 1 1 260px; }
.rv-filters .rr-clear { text-decoration: none; }
.rv-limit { margin-left: auto; }
.rv-more { font-size: 12px; color: var(--secondary); text-decoration: none; }
.rv-more:hover { color: var(--violet-text); text-decoration: underline; }
@media (max-width: 980px) { .rv-bord { grid-template-columns: 1fr; } }

/* Change history (_history.html): field, old -> new. */
.hist2 td { vertical-align: top; }
.hist2-field { font-weight: 600; color: var(--ink); margin-right: 6px; }
.hist2-old { color: var(--secondary); text-decoration: line-through; }
.hist2-arrow { color: var(--secondary); margin: 0 4px; }
.hist2-new { color: var(--ink); }

/* Import and export centre: tabs in the card, intro with an action, a table with a button per row. */
.ie { display: grid; gap: 16px; }
.ie-tabs { margin: 0; }
.ie-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; }
.ie-intro p { margin: 0; font-size: 14px; color: var(--secondary); min-width: 0; }
.ie-intro form { margin: 0; flex: none; }
.ie-table th:first-child, .ie-table td:first-child { width: 56%; }
.ie-table td { vertical-align: middle; }
.ie-code { color: var(--violet-text); margin-right: 8px; }
.ie-meta { font-size: 12px; color: var(--secondary); white-space: nowrap; }
.ie-action { text-align: right; white-space: nowrap; }
.ie-action .button.small { height: 28px; padding: 0 12px; font-size: 13px; line-height: 26px; }
.ie-empty { margin: 0; font-size: 13px; color: var(--secondary); }

/* TPRM: supplier footprint across IT and OT (templates/_tprm.html). */
.tprm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; align-items: start; }
.tprm-block { display: grid; gap: 8px; min-width: 0; }
.tprm-block .chip-row { gap: 6px; }
.tprm-reasons { margin: -4px 0 10px; }
.tprm-table td.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tprm-let { color: var(--red-text); font-weight: 600; }
.tprm-obligations { display: grid; gap: 8px; margin-top: 14px; }
.table.questionnaire tr.questions-heading td { background: var(--canvas); padding-top: 12px; }
@media (max-width: 900px) { .tprm-grid { grid-template-columns: 1fr; } }

.tprm-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.tprm-items li.ok { color: var(--secondary); }
.tprm-tick { display: inline-block; width: 18px; color: var(--green); font-weight: 600; }
.tprm-items li.open .tprm-tick { color: var(--amber); }
.tprm-stats { margin-bottom: 14px; }

/* The approach (templates/approach.html): rail on the left, the next step highlighted, collapsible phases and steps. */
.ap-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.ap-rail { position: sticky; top: 64px; display: grid; gap: 4px; }
.ap-rail-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 4px; text-decoration: none; color: var(--ink); }
.ap-rail-item:hover { background: var(--canvas); }
.ap-rail-item.current { background: var(--violet-tint); }
.ap-rail-item.current .ap-rail-title { color: var(--violet-text); }
.ap-now { font-size: 11px; color: var(--violet-text); background: var(--violet-tint); border-radius: 2px; padding: 0 4px; white-space: nowrap; flex: none; }
.ap-rail-item.current .ap-now { background: #fff; }
.ap-rail-text { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ap-rail-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-rail-sub { font-size: 12px; color: var(--secondary); }
.ap-rail-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); display: grid; gap: 8px; padding-left: 12px; padding-right: 12px;
  color: var(--secondary); }
.ap-rail-footer .ap-gauge { opacity: .7; }
.ap-rail-programme { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--secondary); }
.ap-gauge { display: block; height: 4px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.ap-gauge i { display: block; height: 100%; background: var(--violet); border-radius: 2px; }
.ap-ring { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font-mono); background: var(--card); color: var(--secondary); border: 1.5px solid var(--hairline); }
.done > .ap-ring, .ap-rail-item.done .ap-ring, .ap-phase.done > summary .ap-ring { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.ap-rail-item.current .ap-ring, .ap-phase.busy > summary .ap-ring { background: var(--violet); color: #fff; border-color: var(--violet); }
.ap-phases { display: grid; gap: 14px; min-width: 0; }
.ap-following { border-left: 4px solid var(--violet); display: grid; gap: 12px; }
/* The approach as a guide (templates/approach.html, core/approach.py): the strip of phases on top, the next step
   highlighted with the one violet button, and the steps of the chosen phase as a list (72px rows: title, the rule in
   words, the facts in mono; the state pill and one hairline action on the right; explanation and guidelines folded). */
.ap-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ap-cell { flex: 1 1 150px; min-width: 0; display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--card); text-decoration: none; color: var(--ink); }
.ap-cell:hover { border-color: var(--body); }
.ap-cell.chosen { border-color: var(--violet); background: var(--violet-tint); }
.ap-cell.chosen .ap-cell-title { color: var(--violet); }
.ap-cell-programme { border-style: dashed; }
.ap-cell-top { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ap-cell-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ap-cell-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-cell-sub { font-size: 12px; color: var(--secondary); }
.ap-now { font-size: 11px; color: var(--violet-text); background: var(--violet-tint); border-radius: 2px; padding: 0 4px; white-space: nowrap; flex: none; }
.ap-cell.chosen .ap-now, .ap-step.current .ap-now { background: var(--card); }
.ap-gauge { display: block; height: 4px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.ap-gauge i { display: block; height: 100%; background: var(--violet); border-radius: 2px; }
.ap-ring { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font-mono); background: var(--card); color: var(--secondary); border: 1.5px solid var(--hairline); }
.ap-cell.done .ap-ring, .ap-phase.done .ap-phase-heading .ap-ring { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.ap-cell.chosen .ap-ring, .ap-phase.busy .ap-phase-heading .ap-ring { background: var(--violet); color: #fff; border-color: var(--violet); }
.ap-following { border-left: 4px solid var(--violet); display: grid; gap: 12px; margin-bottom: 16px; }
.ap-following-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ap-eyebrow { color: var(--violet-text); }
.ap-following h2 { margin: 0; font: 600 20px/1.3 var(--font-sans); }
.ap-text { margin: 0; font-size: 15px; line-height: 1.55; }
.ap-facts { margin: 0; font-size: 12px; color: var(--secondary); }
.ap-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.ap-block { display: grid; gap: 6px; min-width: 0; }
.ap-block p { margin: 0; font-size: 14px; line-height: 1.55; }
.ap-lines { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; display: grid; gap: 4px; }
.ap-following-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hairline); }
.ap-parts { display: grid; gap: 8px; }
.ap-parts-label { font-size: 13px; color: var(--secondary); }
.chip.subtle { opacity: .55; }
.ap-phase { padding: 0; }
.ap-phase .ap-phase-heading { padding: 14px 16px 0; margin-bottom: 0; }
.ap-phase-sub { margin: 10px 16px 14px; }
.ap-caret { color: var(--secondary); font-size: 11px; transition: transform .15s; flex: none; }
details[open] > summary .ap-caret { transform: rotate(90deg); }
.ap-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.ap-step { border-bottom: 1px solid var(--hairline); }
.ap-step:last-child { border-bottom: 0; }
.ap-step:nth-child(even) { background: var(--canvas); }
.ap-step.current { background: var(--violet-tint); }
.ap-step.na { color: var(--secondary); }
.ap-step-details > summary { list-style: none; }
.ap-step-details > summary::-webkit-details-marker { display: none; }
.ap-step-row { display: grid; grid-template-columns: 26px 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; cursor: pointer; min-height: 72px; }
.ap-step-nr { font-size: 12px; color: var(--secondary); }
.ap-step-main { min-width: 0; display: grid; gap: 3px; }
.ap-step-title { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-step.done .ap-step-title { color: var(--secondary); }
.ap-step-rule { font-size: 12px; color: var(--body); line-height: 1.4; }
.ap-step-facts { font-size: 12px; color: var(--secondary); }
.ap-step-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; flex: none; }
.ap-off-hint { font-size: 12px; color: var(--secondary); }
.ap-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--card); }
.ap-dot.done { background: var(--green-deep); border-color: var(--green-deep); }
.ap-dot.busy { border-color: var(--violet); background: radial-gradient(circle, var(--violet) 0 5px, var(--card) 6px); }
.ap-dot.na { border-style: dashed; }
.ap-step-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; padding: 4px 16px 16px 100px; }
.ap-step-content.ap-explanation { grid-template-columns: 2fr 1fr; padding-top: 0; }
/* Setting a step aside sits under the guidance, quieter than it: it is a
   decision about the programme, not a part of the step. */
.ap-step-content.ap-na { grid-template-columns: 1fr; padding-top: 0; }
.ap-step-content.ap-na .rule-form { margin-top: 6px; }
.ap-step-content .chip-row { margin-top: 6px; }
@media (max-width: 980px) { .ap-two, .ap-step-content, .ap-step-content.ap-explanation { grid-template-columns: 1fr; } .ap-step-content { padding-left: 16px; } .ap-step-row { grid-template-columns: 26px minmax(0, 1fr); } .ap-step-nr { display: none; } .ap-step-right { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; white-space: normal; } .ap-cell { flex-basis: 120px; } }
/* The guide on the dashboard (templates/_dashboard_approach.html). */
.dash-approach-next { display: grid; gap: 10px; }
.dash-approach-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-approach-text { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.dash-approach-title { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.dash-approach-title:hover { color: var(--violet); }

/* Decision by the owner on the treatment of a risk (templates/_treatment_decision.html). */
.mgmt-rule { margin: 0 0 10px; font-size: 14px; }
.mgmt-form { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }

/* A history block folds shut (templates/_history.html and the control history
   on a measure). Closed it is one heading line; opened it is the card it has
   always been -- nothing inside changes, only whether it is shown. */
details.card-fold > summary.card-heading { cursor: pointer; list-style: none; }
details.card-fold > summary.card-heading::-webkit-details-marker { display: none; }
details.card-fold:not([open]) > summary.card-heading { margin-bottom: 0; }
details.card-fold > summary.card-heading .card-heading-links::before {
  content: "\203A"; color: var(--secondary); font-size: 16px; line-height: 1;
  transition: transform var(--t-fast) var(--ease); }
details.card-fold[open] > summary.card-heading .card-heading-links::before {
  transform: rotate(90deg); }

/* ---- Notifications (core/notifications.py) ---- */
.top-bell { position: relative; text-decoration: none; }
.top-bell-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-full); background: var(--violet); color: #fff; font: 600 10px/16px var(--font-mono);
  text-align: center; }
.ntf-table tr.unread td { font-weight: 600; }
.ntf-table tr.unread .card-sub { font-weight: 400; }
.ntf-what { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ntf-what > span:last-child { min-width: 0; }
.dot.sev-info { background: var(--hairline); }
.dot.sev-notice { background: var(--violet); }
.dot.sev-warning { background: var(--amber); }
.dot.sev-critical { background: var(--red-text); }
.ntf-inline { display: flex; gap: 6px; margin: 0; }
.ntf-prefs select { width: auto; }
.ntf-error { color: var(--red-text); }
.ntf-add { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ntf-groups { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ntf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.link-state { display: flex; flex-direction: column; gap: 8px; }
.link-state .ntf-inline { margin: 0; }
/* The text-mode choice stacks: label above, the select as wide as the card. */
.link-text-mode { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
.link-text-mode select { width: 100%; }
.ntf-address { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-width: 420px; font-size: 13px; font-weight: 600; }
.ntf-address .card-sub { font-weight: 400; }
.ntf-older > summary { list-style: none; cursor: pointer; }
.ntf-older > summary::-webkit-details-marker { display: none; }
.ntf-older > summary h2::before { content: "▸ "; color: var(--secondary); }
.ntf-older[open] > summary h2::before { content: "▾ "; }
.ntf-older .table-wrap { margin-top: 10px; }

/* Pull connectors (templates/connector_mapping.html): the cards stack with
   the form gap and never stretch; the settings row sits 10px under the
   mapping table; the mapping selects size to their content, like the
   notification preferences. Layout only, so the dark theme needs nothing. */
.conn-stack { display: grid; gap: var(--s-4); align-items: start; }
.conn-settings { margin-top: 10px; }
.conn-mapping select { width: auto; }

/* ---- Risk trend (dashboard tile risk_trend) ---- */
.risk-trend { margin: 0; }
.trend-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.trend-legend .legend-level { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--body); text-decoration: none; white-space: nowrap; }
.trend-legend .swatch { width: 10px; height: 10px; border-radius: var(--r-badge); display: inline-block; }
.swatch.trend-it, .trend-point.trend-it, .trend-stop.trend-it { background: var(--violet); fill: var(--violet); stop-color: var(--violet); }
.swatch.trend-ot, .trend-point.trend-ot, .trend-stop.trend-ot { background: var(--blue); fill: var(--blue); stop-color: var(--blue); }
.trend-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trend-line.trend-it { stroke: var(--violet); }
.trend-line.trend-ot { stroke: var(--blue); }
.trend-point { stroke: var(--card); stroke-width: 1; }
.trend-point:hover { r: 4; }
.trend-sub { display: block; margin-top: 4px; }
.trend-wrap { margin-top: 10px; overflow: hidden; }
.trend-wrap .trend { display: block; width: 100%; height: auto; }
.trend-grid { stroke: var(--hairline); stroke-width: 1; }
.trend-axis { font: 400 9px var(--font-mono); fill: var(--secondary); }
.trend-wrap.months, .trend-sub.months { display: none; }
@media (max-width: 640px) {
  .trend-wrap.weeks, .trend-sub.weeks { display: none; }
  .trend-wrap.months, .trend-sub.months { display: block; }
  /* On a phone the legend goes under the title, full width, one row. */
  .risk-trend .card-heading { flex-wrap: wrap; row-gap: 6px; }
  .risk-trend .card-heading-links { flex: 1 1 100%; min-width: 0; }
  .risk-trend .trend-legend { flex: 1 1 100%; gap: 12px; }
  .trend-wrap.months .trend { height: 140px; }
}

/* ---- Resources and roles (templates/iso_k_assets.html) ---- */
.isok-year-choice { display: flex; align-items: center; gap: 8px; margin: 0; }
.isok-year-choice select { width: auto; }
.isok-form { display: flex; flex-direction: column; gap: var(--s-4); margin-top: 10px; }
.isok-years { margin-top: 16px; }
.isok-gone { margin-top: 12px; }

/* ---- Leadership cards: a label/value list under the heading ---- */
.isok-kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 4px 0 0; flex: 1; align-content: start; }
.isok-kv dt { font: 400 13px/1.4 var(--font-sans); color: var(--secondary); align-self: baseline; white-space: nowrap; }
/* The state pill of a leadership card and the level pill of its table. */
.pill.isok-state { font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r-badge); }
.pill.isok-level { display: inline-block; min-width: 74px; text-align: center; color: var(--risk-text); font-weight: 600; font-size: 12px; padding: 5px 12px; border-radius: var(--r-badge); }
.isok-kv dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isok-kv dd .mono { font-weight: 600; }
.isok-lead-block { display: flex; flex-direction: column; gap: 12px; }
.isok-lead-block .isok-lead-actions { margin-top: auto; }

/* Workflows: the strip on a subject's page (templates/_workflow_strip.html) */
.wf-strip .wf-start { margin-top: 10px; }
.wf-strip .table-wrap + .wf-start { margin-top: 8px; }
/* A card heading's right side with meta and one small action (templates/register_detail.html) */
.card-heading-meta { display: flex; gap: 10px; align-items: center; flex: none; }
.card-heading-meta .rule-form { margin: 0; }

/* Groups: the explainer, the search line and the cards (templates/groups.html) */
.grp-explainer { margin-bottom: 14px; }
.grp-explainer[open] > summary { margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.grp-explainer > .grp-uses:last-child { padding-bottom: 0; }
.grp-kinds-row { display: grid; grid-template-columns: 1fr 1fr; }
.grp-kinds-row > article { padding: 16px 20px 16px 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.grp-kinds-row > article + article { border-left: 1px solid var(--hairline); padding-left: 20px; padding-right: 0; }
.grp-kinds-row h3, .grp-uses-row h3 { font: 600 15px/1.3 var(--font-sans); margin: 0; display: flex; align-items: center; gap: 8px; }
.grp-kinds-row p, .grp-uses-row p { margin: 0; color: var(--ink); line-height: 1.5; }
.grp-kinds-row .eyebrow { margin-top: 6px; }
.grp-uses { border-top: 1px solid var(--hairline); padding: 14px 0 16px; }
.grp-uses > .eyebrow { display: block; margin-bottom: 10px; }
.grp-uses-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.grp-uses-row article { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grp-filters { margin-bottom: 14px; align-items: center; }
.grp-filters .grp-count { margin-left: auto; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--secondary); }
.grp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 0 12px; border-bottom: 1px solid var(--hairline); }
.grp-stats > span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--secondary); min-width: 0; }
.grp-stats b { font: 600 18px/1.2 var(--font-sans); color: var(--secondary); font-variant-numeric: tabular-nums; }
.grp-stats b.on { color: var(--ink); }
.grp-kv { margin-top: 10px; }
.grp-kv .muted { font-weight: 400; color: var(--secondary); }
@media (max-width: 720px) { .grp-kinds-row { grid-template-columns: 1fr; } .grp-kinds-row > article + article { border-left: none; border-top: 1px solid var(--hairline); padding: 16px 0 0; } }

/* Trust centre: the public page (templates/trust_public.html, trust_access.html) and the portal page */
.trust-body { margin: 0; background: var(--ground, #F7F8FA); color: var(--ink); font-family: var(--font-sans); }
.trust-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.trust-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trust-logo { height: 28px; width: auto; max-width: 140px; }
.trust-name { font: 600 16px/1.2 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trust-nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.trust-nav a { color: var(--secondary); text-decoration: none; font-size: 13px; font-weight: 500; }
.trust-nav a:hover { color: var(--violet-text); }
.trust-nav .trust-lang { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; border: 1px solid var(--hairline); border-radius: 4px; padding: 2px 8px; }
.trust-main { max-width: 960px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.trust-main .card { margin: 0; }
.trust-intro { margin: 10px 0 0; line-height: 1.55; color: var(--ink); max-width: 72ch; }
.trust-intro.mono a { font-size: 13px; word-break: break-all; }
.trust-list { margin: 8px 0 0 20px; padding: 0; line-height: 1.55; color: var(--ink); max-width: 72ch; }
.trust-list li { margin: 2px 0; }
.trust-flash { padding: 10px 14px; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.trust-tile { border: 1px solid var(--hairline); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trust-tile-name { font-weight: 600; }
.trust-meter { display: block; height: 6px; border-radius: 2px; background: var(--violet-tint); overflow: hidden; }
.trust-meter i { display: block; height: 100%; background: var(--violet); }
.trust-faq { display: flex; flex-direction: column; gap: 6px; }
.trust-q { border: 1px solid var(--hairline); border-radius: 4px; padding: 8px 12px; }
.trust-q > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 8px; align-items: center; }
.trust-q > summary::-webkit-details-marker { display: none; }
.trust-q p { margin: 8px 0 0; line-height: 1.55; color: var(--ink); }
.trust-checks { display: flex; flex-direction: column; gap: 6px; }
.trust-checks label, .trust-accept { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.trust-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.trust-nda { border: 1px solid var(--hairline); border-radius: 4px; padding: 8px 12px; margin-bottom: 8px; }
.trust-nda > summary { cursor: pointer; font-weight: 600; }
.trust-nda p { margin: 8px 0 0; white-space: pre-wrap; line-height: 1.5; }
.trust-footer { text-align: center; padding: 20px; color: var(--secondary); font-size: 12px; }
.trust-kv { margin-top: 10px; }
.trust-kv dd { white-space: normal; text-align: right; }

/* The shareable report link (templates/_report_share_link.html, _report_sharing.html, report_public.html) */
.rep-share-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rep-share-row .doc-entry { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; }
.rep-share-row .button { flex: none; white-space: nowrap; }
.rep-share-row .button .icon { width: 16px; height: 16px; vertical-align: -3px; }
.rep-key-value { font-size: 16px; letter-spacing: .12em; }
/* The card on the setup page (templates/_report_sharing.html): the link with its two ticks, the two texts, the key, one under the other */
.rep-share-actions { margin-top: 10px; align-items: center; }
.rep-share-actions .icon { width: 16px; height: 16px; vertical-align: -3px; }
.rep-share-actions .card-link { margin-left: auto; font-size: 13px; white-space: nowrap; }
.rep-share-ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.rep-setup { display: flex; flex-direction: column; gap: 16px; }
.rep-setup-block { border-top: 1px solid var(--hairline); padding-top: 14px; }
.rep-setup-block .card-heading { margin-bottom: 8px; }
.rep-setup-block .card-heading .eyebrow { margin-left: 4px; }
.rep-setup-block .field { margin-top: 10px; }
.rep-texts { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.rep-text-head { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 4px; }
.rep-text-head .field-label { flex: none; white-space: nowrap; margin: 0; }
.rep-text-head .eyebrow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-share-text { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.5; }
.rep-public-main { max-width: 760px; }
.rep-public-main .card-heading > .button { white-space: nowrap; flex: none; }
.rep-public-main .page-heading { margin-bottom: 0; }
.trust-flash.error { border-color: #F6C6C2; background: var(--red-tint); color: var(--red-text); }
.grp-grid { align-items: stretch; }
.grp-card { display: flex; flex-direction: column; }
.grp-card .grp-kv { flex: 1; }

/* Own frameworks: the two ways in, side by side (templates/frameworks.html) */
.fw-own-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; align-items: start; }
.fw-own-grid .chip-row { margin-bottom: 8px; }
.pill.vst-built { color: #fff; background: var(--blue, #2F6FED); }
.prod-ai { min-width: 220px; }
.prod-ai .card-sub { display: block; max-width: 420px; }

/* ---- Document page: the text on the left, approval / people / properties on the right ---- */
.doc-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 32%); gap: 16px; align-items: start; }
/* .doc-main is the heading strip of the older workspace (above); the page's two columns carry their own names. */
.doc-view-main, .doc-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.doc-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.doc-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.doc-head-title .doc-title { margin: 0; font-size: 22px; line-height: 1.25; }
.doc-head-title .pill { flex: none; white-space: nowrap; }
.doc-head-links { display: flex; gap: 14px; align-items: center; white-space: nowrap; font-size: 14px; font-weight: 600; }
.doc-head-links .card-link { text-decoration: none; }
.doc-head-links .card-link.quiet { color: var(--ink); }
.doc-view .doc-meta { margin-top: 12px; gap: 10px; }
.doc-meta-text { font-size: 14px; color: var(--body); }
.doc-meta-text b { font-weight: 600; color: var(--ink); }
.doc-meta-dot { color: var(--secondary); }
.doc-head-sub { margin: 10px 0 0; font-size: 14px; }
/* The editor card: the toolbar as a band across the top, the text below it. */
.doc-view .doc-canvas { padding: 0; overflow: visible; }
.doc-view .doc-toolbar.sticky { margin: 0; padding: 10px 24px; gap: 8px; background: var(--canvas);
  border-bottom: 1px solid var(--hairline); border-radius: var(--r-card) var(--r-card) 0 0; }
.doc-view .doc-toolbar .button { margin-left: auto; }
.doc-body { padding: 8px 24px 20px; }
.doc-view .doc-new-statement { margin: var(--s-4) 24px 20px; }
.relation-list { display: flex; flex-direction: column; gap: var(--s-1); }
.relation-name { flex: 1; min-width: 0; }
.relation-choice { flex: 1; max-width: 320px; }
.doc-new-statement .stmt-code { max-width: 110px; }
.doc-new-statement .stmt-text { flex: 1; min-width: 200px; }
.button.hairline { background: var(--card); color: var(--ink); border: 1px solid var(--hairline); }
.button.hairline:hover { background: var(--canvas); border-color: var(--body); }
.doc-side-card { display: flex; flex-direction: column; gap: 10px; }
.doc-side-form { display: flex; flex-direction: column; gap: 10px; }
.doc-field { display: flex; flex-direction: column; gap: 4px; }
.doc-field-label { font-size: 13px; color: var(--body); }
.doc-side .doc-entry { width: 100%; min-width: 0; box-sizing: border-box; }
.doc-side .doc-entry.mono { max-width: 150px; }
.doc-side-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-side-actions .button { flex: none; }
.people-rows { display: flex; flex-direction: column; }
.people-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); min-height: 44px; }
.people-row:first-child { border-top: none; padding-top: 0; }
.people-label { flex: none; width: 88px; font-size: 14px; color: var(--body); }
/* The people start at one left edge right of the label and wrap from there, so a
   second row of reviewers lines up under the first instead of hugging the right. */
.people-who { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }
.people-one { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.people-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.doc-side .avatar-add[open] > form { left: auto; right: 0; min-width: 240px; }
.doc-prop { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.doc-prop:first-of-type { border-top: none; padding-top: 0; }
.doc-prop > .doc-field-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.doc-prop-form { display: flex; flex-direction: column; gap: 8px; }
.doc-prop-row { display: flex; gap: 8px; align-items: center; }
.doc-prop-row .doc-entry { flex: 1 1 auto; }
.doc-prop-row .button { flex: none; white-space: nowrap; }
.doc-prop .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-form { display: inline; margin: 0; }
@media (max-width: 1100px) { .doc-view { grid-template-columns: 1fr; } }

/* ---- Risk trend: the figures of a period on hover (open, new, closed per domain) ---- */
.risk-trend { position: relative; }
.trend-hit { fill: transparent; cursor: pointer; }
.trend-tip { position: absolute; z-index: 6; pointer-events: none; background: var(--card);
  border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-float);
  padding: 8px 10px; min-width: 200px; font-size: 12px; color: var(--ink); }
.trend-tip-head { font: 500 11px var(--font-mono); color: var(--secondary); margin-bottom: 6px; white-space: nowrap; }
.trend-tip table { border-collapse: collapse; width: 100%; }
.trend-tip th { font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--secondary);
  text-align: right; padding: 0 0 3px 10px; }
.trend-tip th:first-child { text-align: left; padding-left: 0; }
.trend-tip td { padding: 2px 0 2px 10px; text-align: right; font-family: var(--font-mono); }
.trend-tip td:first-child { text-align: left; padding-left: 0; font-family: var(--font-sans); white-space: nowrap; }
.trend-tip td:first-child .swatch { width: 8px; height: 8px; display: inline-block; margin-right: 5px; border-radius: var(--r-badge); vertical-align: middle; }
.trend-tip tr.is-hover td { font-weight: 600; }

/* The linked controls of a register item, under its form: chips that open the control pages. */
.rn-controls { margin-top: 10px; }
.rn-controls .chip { white-space: nowrap; flex: none; text-decoration: none; }

/* The customer-view banner of a console user: its actions are buttons, on the right. */
.cv-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; white-space: nowrap; }
.cv-actions .button, .cv-note .button { text-decoration: none; height: 28px; display: inline-flex; align-items: center; }
.cv-note { display: flex; align-items: center; gap: 12px; margin-top: .5rem; }
.cv-note-text { flex: 1; min-width: 0; }
.cv-note .button { flex: none; white-space: nowrap; }

/* The desk (templates/portal_base.html, templates/desk.html): the button
   beside the bell with what waits on me, the count on the menu entry, and
   the trail column of My reports. */
.side-nav-count { font-family: var(--font-mono); padding: 1px 6px; line-height: 16px; flex: none; }
.side-nav-count { margin-left: auto; }
.rail-tile .side-nav-count { margin-left: 8px; }
/* My reports: the register table; a row opens the report (data-href), the
   question column says whether one waits for me. */
.me-rep-heading { margin-bottom: 4px; }
.me-rep-sub { max-width: 70ch; margin-bottom: 14px; }
.me-rep-row { cursor: pointer; }
.me-rep-q { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--body); white-space: nowrap; }
.me-rep-q .icon { width: 16px; height: 16px; }
.me-rep-q.waiting { color: #7A5A12; }
.me-rep-code { font-weight: 600; }
.me-trail .eyebrow { display: inline; margin-right: 4px; }
.rep-triage .field-row { display: flex; gap: 8px; align-items: center; }

/* A heading line above a dashboard row (Risks, Compliance, Your work), like Leadership's. */
/* A row of the dashboard: a mono uppercase eyebrow, a hairline to the
   right edge, the row's one action after it (the leadership brief). */
.dash-row-heading { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-top: var(--s-4); }
.dash-row-heading h2 { flex: 1; display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0;
  font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); white-space: nowrap; }
.dash-row-heading h2::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.dash-row-heading .icon { display: none; }

/* The desk card on the account page: one row per part, the count in mono, a pill for what presses. */
.desk-card-rows { display: flex; flex-direction: column; }
.desk-card-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 0; border-top: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 14px; }
.desk-card-row:first-child { border-top: none; }
.desk-card-row > span:first-child { flex: 1; min-width: 0; }
.desk-card-row .mono { font-weight: 600; }
.desk-card-row .pill { flex: none; white-space: nowrap; }
.desk-card-row:hover > span:first-child { color: var(--violet-text); }

/* Linked documents (capability external_docs, templates/_linked_documents.html,
   register.html and register_detail.html for kind external_doc): the
   opens-elsewhere glyph beside a title, a chip that opens elsewhere, the
   empty state as one left-aligned row with a glyph, one sentence and one
   action (brand book §23), and the connect fold on a documentation
   platform's card (templates/links.html). */
.xdoc-open { display: inline-flex; align-items: center; margin-left: 4px; color: var(--secondary); vertical-align: -1px; }
.xdoc-open:hover { color: var(--violet-text); }
.chip.external { text-decoration: none; }
.chip.external .icon.mini { flex: none; }
.xdoc-empty { display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--secondary); font-size: 13px; text-align: left; }
.xdoc-empty .icon { width: 24px; height: 24px; flex: none; color: var(--violet-text); }
.xdoc-empty span { min-width: 0; }
.xdoc-empty .button { flex: none; margin-left: auto; }
.xdoc-resolve { display: block; margin-top: 4px; }
/* A row action of a linked document (acknowledge, check now): beside the pills, 28px, never wrapping the title. */
.xdoc-row-action { display: inline-flex; margin-left: 4px; vertical-align: middle; }
/* The Google Drive picker: the breadcrumb row with the search on the right; the table as every register. */
.drive-crumbs { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.drive-crumb-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.drive-crumb-row .chip { white-space: nowrap; flex: none; }
.drive-search { flex: none; }
.drive-table .rr-title .icon { vertical-align: -3px; color: var(--violet-text); }
.link-docs-connect { padding: 10px 12px; background: var(--canvas); border-radius: var(--r-control); }
.link-docs-form { display: flex; flex-direction: column; gap: 8px; }
.link-docs-form label { display: flex; flex-direction: column; gap: 4px; }
/* The steps a client walks at Notion (an internal integration, the pages
   shared with it) in the card's fold: a numbered list at the card-sub size. */
.link-docs-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
/* The console's Integrations page (templates/console/platform_integrations.html):
   the portal's groups in the portal's order, one card per row, every card
   the full width of the page (2026-09-19: the cards were three to a row,
   which made the ones with a form the odd ones out). */
.pint-group + .pint-group { margin-top: 28px; }
.pint-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.pint-card { margin: 0; min-width: 0; }
.pint-card.wide { grid-column: 1 / -1; }
.pint-card > .card-heading { margin-bottom: 10px; min-height: 32px; }
.pint-card > .card-heading .card-heading-links { min-width: 0; }
.pint-card > .card-heading h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pint-card > .card-heading .pill { white-space: nowrap; flex: none; }
/* The right of the heading line: the state pill(s) and the switch for every client. */
.pint-state { display: flex; align-items: center; gap: 8px; flex: none; }
.pint-switch { display: flex; align-items: center; margin: 0; }
.pint-line { margin: 0; line-height: 1.45; }
details.pint-card > summary.card-heading { margin-bottom: 10px; }
details.pint-card:not([open]) > summary.card-heading { margin-bottom: 0; }
/* The redirect URI: one mono line that truncates, the copy button beside it. */
.pint-redirect { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; }
.pint-redirect .eyebrow { flex: none; white-space: nowrap; }
.pint-redirect code { font: 13px/1.4 var(--font-mono); color: var(--ink); min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pint-redirect .button { flex: none; }
.pint-fold { margin-top: 10px; }
.pint-fold > summary { cursor: pointer; font-size: 13px; list-style: none; }
.pint-fold > summary::-webkit-details-marker { display: none; }
.pint-fold > summary::before { content: "▸"; color: var(--secondary); font-size: .8rem; margin-right: 6px;
  display: inline-block; transition: transform var(--t-fast) var(--ease); }
.pint-fold[open] > summary::before { transform: rotate(90deg); }
.pint-steps { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--body);
  display: grid; gap: 6px; }
.pint-env { margin: 10px 0 0; }
/* The empty form that Test and Forget submit through their form= attribute:
   no fields, nothing to see. */
.pint-act { display: none; }
.pint-form { margin-top: 14px; }
.pint-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; align-items: start; }
.pint-fields .field-help { line-height: 1.4; }
.pint-secret { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.pint-secret .field-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pint-secret .button { flex: none; }
.pint-clients-heading { margin: 16px 0 8px; }
.pint-clients td { font-size: 13px; }
/* Readiness (2026-09-21): the counts under the title, the filter pills in
   one 40px row, and per card the platform checklist -- one line per
   prerequisite, a glyph for a verified one, a checkbox for a manual tick
   -- and the one line with the switch and what the client enters. */
.pint-summary { display: block; margin-top: 2px; }
.pint-filter { margin-top: 12px; margin-bottom: 14px; }
.pint-filter-empty { margin: 0 0 14px; }
.pint-ready { display: grid; gap: 8px; margin-top: 10px; }
.pint-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pint-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--body); min-width: 0; }
.pint-check > .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pint-check[data-done="1"] > .icon { color: var(--green-text); }
.pint-check[data-done="0"] > .icon { color: var(--red-text); }
.pint-check .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.pint-check-done { color: var(--green-text); }
.pint-check-open { color: var(--red-text); }
.pint-tick { display: flex; align-items: flex-start; gap: 8px; margin: 0; min-width: 0; }
.pint-tick input[type="checkbox"] { flex: none; margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--violet); }
.pint-tick label { cursor: pointer; min-width: 0; }
.pint-client-line { margin: 0; line-height: 1.45; }
.pint-nothing { display: block; }
@media (max-width: 720px) {
  .pint-redirect { flex-wrap: wrap; }
}

/* ================================================================
   List style — the IT risk register as the product owner drew it is
   the reference for every list page, table, tab bar and filter bar in
   portal and console (2026-09-15). The page heading, the pill tabs,
   the card heading with its mono eyebrow, the filter row, the table,
   the pills and the inline status control. The last layer: it wins
   over everything above.
   ================================================================ */

/* Page heading: title 24px/600, below it one 14px line with the links in violet. */
.page-heading h1 { font: 600 24px/1.25 var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.page-heading .page-sub { font-size: 14px; line-height: 1.5; color: var(--secondary); }
.page-sub .card-link { color: var(--violet-text); font-weight: 500; font-size: 14px; }

/* Tabs: pills of 40px, the active one filled violet with white text, the
   count as a small badge inside it; inactive tabs plain ink on nothing,
   a violet tint on hover. No underline, no border around the bar. */
.tabbar, .ie-tabs, .isoj-tabbar { border-bottom: none; gap: 4px; padding: 0; align-items: center; }
.tabbar .tab, .ie-tabs .tab { height: 40px; min-height: 40px; padding: 0 14px; margin: 0; border: 0;
  border-radius: var(--r-control); font: 600 14px/1 var(--font-sans); color: var(--ink);
  background: transparent; gap: 8px; text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tabbar .tab:hover, .ie-tabs .tab:hover { background: var(--violet-tint); color: var(--ink); }
.tabbar .tab.active, .tabbar .tab.active:hover, .ie-tabs .tab.active, .ie-tabs .tab.active:hover {
  background: var(--violet); color: #fff; }
.tabbar .tab .pill, .ie-tabs .ie-count { font: 500 12px/1 var(--font-mono); padding: 3px 6px; border: 0;
  border-radius: var(--r-badge); background: var(--neutral-tint); color: var(--ink); margin: 0; }
.tabbar .tab .pill.open { background: var(--amber-tint); color: var(--amber-text); }
.tabbar .tab .pill.danger { background: var(--red-tint); color: var(--red-text); }
.tabbar .tab.active .pill, .tabbar .tab.active .pill.open, .tabbar .tab.active .pill.danger,
.tabbar .tab.active .pill.level-orange, .tabbar .tab.active .pill.planned, .ie-tabs .tab.active .ie-count {
  background: rgba(0, 0, 0, .2); color: #fff; }

/* Card: white, a 1px frame in the rule colour, 4px radius, 16px of padding. */
.card { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 16px; }

/* Card heading: one line of 32px, the title 18px/600 with the mono eyebrow
   beside it on the left, the actions on the right: hairline buttons and
   one violet primary, 40px in this line. */
.rr-heading, .card-heading { min-height: 32px; margin-bottom: 10px; gap: 16px; }
.rr-heading-links { align-items: baseline; gap: 12px; }
.rr-heading-links h2, .card-heading h2 { font: 600 18px/1.3 var(--font-sans); color: var(--ink); }
.rr-count, .card-heading .rr-count { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--secondary); white-space: nowrap; flex: none; }
.card-heading-links .rr-count { margin-left: 4px; }
/* No glyph before a card title: the heading is the title and its eyebrow. */
.card-heading-links > .icon { display: none; }
.rr-heading-right { gap: 10px; flex: none; }
.rr-heading-right .button, .rr-heading-right .button.small,
.card-heading > .button, .card-heading > .card-heading-meta .button, .card-heading > form .button,
.page-heading-row > .button { min-height: 40px; padding: 0 16px; font: 600 14px/1 var(--font-sans); }
.rr-heading-right .button.small, .card-heading > .button.small, .card-heading > .card-heading-meta .button.small,
.card-heading > form .button.small, .page-heading-row > .button.small {
  color: var(--ink); background: var(--card); border: 1px solid var(--hairline); }
.rr-heading-right .button.small:hover, .card-heading > .button.small:hover { background: var(--canvas); }
.card-heading .card-sub { font-size: 12px; color: var(--secondary); }

/* Filter bar: one row with a gap of 10px; the search field takes what is
   left, the filters are drawn as buttons of 40px with a hairline, the
   label in ink 14px/600 and a small caret. All the same height and radius. */
.filter-bar { gap: 10px; align-items: center; margin-bottom: 14px; }
.filter-bar.rr-filters { gap: 10px; }
.rr-search { flex: 1 1 240px; min-width: 200px; }
.rr-search .doc-entry, .filter-bar > input[type="search"].doc-entry, .filter-bar > .doc-entry[type="search"],
.filter-bar > label > input[type="search"].doc-entry {
  height: 40px; min-height: 40px; font: 400 14px/38px var(--font-sans); color: var(--ink);
  background: var(--card) !important; border: 1px solid var(--hairline) !important; border-radius: var(--r-control);
  padding: 0 14px; }
.rr-search .doc-entry { padding-right: 40px; }
.filter-bar > input[type="search"].doc-entry { flex: 1 1 240px; min-width: 200px; width: auto; }
.rr-search .doc-entry::placeholder, .filter-bar > input[type="search"].doc-entry::placeholder { color: var(--secondary); }
.filter-bar select.rr-filter, .filter-bar > select.doc-entry, .filter-bar > label > select.doc-entry {
  height: 40px; min-height: 40px; padding: 0 34px 0 14px; font: 600 14px/38px var(--font-sans) !important;
  color: var(--ink); background-color: var(--card) !important; border: 1px solid var(--hairline) !important;
  border-radius: var(--r-control); appearance: none; -webkit-appearance: none; cursor: pointer; flex: none; max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F3349' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px 16px !important; }
.filter-bar select.rr-filter:hover, .filter-bar > select.doc-entry:hover { border-color: var(--rule) !important; }
.filter-bar select.rr-filter.active { border-color: var(--violet) !important; color: var(--violet-text);
  background-color: var(--violet-tint) !important; }
.rr-clear { font: 600 14px/1 var(--font-sans); }
.filter-bar .doc-entry.compact, .filter-bar select.doc-entry.compact { height: 32px; min-height: 32px; line-height: 30px; font-size: 13px; }
:root[data-theme="dark"] .filter-bar select.rr-filter, :root[data-theme="dark"] .filter-bar > select.doc-entry {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F4F8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; }

/* Table: a violet header of 40px with white 14px/600 labels and the card
   radius on its top corners; rows of at least 72px (two lines fit), lines
   of 1px in the hairline, the frame in the rule colour, alternating white
   and canvas, a violet tint on hover. */
/* The header labels as the list mock-ups of 2026-09-19 draw them: mono,
   uppercase, letter-spaced, 12px/600, white on the violet. */
.table > thead > tr > th { height: 40px; padding: 0 12px; font: 600 12px/1.3 var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
  background: var(--table-head-bg); border-color: rgba(255, 255, 255, .24); vertical-align: middle; white-space: nowrap; }
.table > thead > tr > th:first-child { border-left-color: var(--table-head-bg); }
.table > thead > tr > th:last-child { border-right-color: var(--table-head-bg); }
.table > thead > tr:first-child > th { border-top-color: var(--table-head-bg); }
.table > tbody > tr > td { padding: 12px; font-size: 14px; color: var(--ink); border-color: var(--hairline); height: 72px;
  vertical-align: middle; }
.table > tbody > tr > td:first-child { border-left-color: var(--rule); }
.table > tbody > tr > td:last-child { border-right-color: var(--rule); }
.table > tbody > tr:last-child > td { border-bottom-color: var(--rule); }
.table > tbody > tr:nth-child(even) > td { background: #F7F8FA; }
.table > tbody > tr:hover > td, .table > tbody > tr:nth-child(even):hover > td { background: var(--violet-tint); }
:root[data-theme="dark"] .table > tbody > tr:nth-child(even) > td { background: #20232F; }
:root[data-theme="dark"] .table > tbody > tr:hover > td,
:root[data-theme="dark"] .table > tbody > tr:nth-child(even):hover > td { background: var(--violet-tint); }
/* The cells: the id in mono, the title 15px/600 as a link that looks like
   text, empty values and the second line in the mid grey, codes in mono. */
.table .rr-id, .table td.rr-id { font: 400 14px/1.4 var(--font-mono); color: var(--ink); white-space: nowrap; }
.rr-id-link { color: var(--ink); }
.rr-title { font: 600 15px/1.35 var(--font-sans); color: var(--ink); }
.rr-id-link:hover, .rr-title:hover { color: var(--violet-text); }
.table .card-sub, .table .rr-sub, .table .rr-id-domain, .rr-sub { color: var(--secondary); }
.table .rr-sub, .table .rr-id-domain { font: 400 12px/1.5 var(--font-mono); }
.table .card-sub { font-size: 12px; }
.table .rr-meta { font-size: 12px; margin-top: 4px; }
.table .rr-context, .table .rr-treatment { font-size: 14px; color: var(--ink); line-height: 1.45; }
.table td.mono, .table td .mono, .table td code { font-family: var(--font-mono); font-size: 13px; }
.table td code { background: none; border: 0; padding: 0; color: var(--ink); }
.table td.rr-id, .table td.rr-id code { font-size: 14px; }
.table .rr-date { font: 400 14px/1.4 var(--font-mono); color: var(--ink); }
/* Score: a 10px square with the level word, an arrow, the residual after it. */
.table .rr-score { white-space: normal; }
/* The score cell stacks: the inherent level, an arrow down, the residual. */
.rr-score-line { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rr-level { font: 600 14px/1.4 var(--font-sans); color: var(--ink); gap: 8px; white-space: nowrap; }
.rr-level.rest { font-weight: 400; }
.rr-arrow { display: block; font-size: 14px; line-height: 1; padding: 0 0 0 1px; color: var(--secondary); }
.table .rr-score .rr-sub { font: 400 13px/1.4 var(--font-sans); }
/* Pills: 2px radius, 12px/600, a tint for meaning (amber waits, green is
   done, red is wrong), neutral for the rest; violet is not a state. */
.pill { font-weight: 600; font-size: 12px; padding: 3px 8px; border-radius: var(--r-badge); white-space: nowrap; }
.table .pill, .table .pill.open, .table .pill.active-green, .table .pill.danger, .table .pill.neutral,
.table .pill.planned, .table .pill.level-orange { border: 0; }
.table .pill.open, .table .pill.level-orange { background: var(--amber-tint); color: var(--amber-text); }
/* The one table where level-orange is a risk level and not a waiting state:
   the levels beside the matrix keep the fill of the scale. */
.matrix-side-column .table .pill.level-orange { background: var(--risk-4); color: var(--risk-text); }
.table .pill.active-green { background: var(--green-tint); color: var(--green-text); }
.table .pill.danger { background: var(--red-tint); color: var(--red-text); }
.table .pill.neutral, .table .pill.planned { background: var(--neutral-tint); color: var(--ink); }
.table .pill.code { background: transparent; color: var(--secondary); border: 1px solid var(--hairline);
  font: 500 12px/1.4 var(--font-mono); padding: 1px 6px; }
.table .pill .icon { width: 12px; height: 12px; }
/* A status that changes from the row: a small dropdown button, 32px, hairline, caret. */
.table select, .table select.doc-entry, .table select.doc-entry.compact, .table .rule-form select,
.table.register .rr-status select {
  height: 32px; min-height: 32px; line-height: 30px; padding: 0 28px 0 10px; font: 600 13px/30px var(--font-sans);
  color: var(--ink); background-color: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-control);
  cursor: pointer; }
.table select:hover { border-color: var(--rule); }
.table .button, .table .button.small { min-height: 28px; padding: 0 10px; font-size: 12px; color: var(--ink);
  background: var(--card); border: 1px solid var(--hairline); white-space: nowrap; }
.table .button.danger, .table .button.small.danger { color: var(--red-text); border-color: var(--red-tint); }
/* The footer under a register: 13px, the count in mono. */
.rr-footer { font-size: 13px; color: var(--secondary); margin-top: 10px; }

/* Empty rows and the group rows keep their own height. */
.table > tbody > tr.group-row > td { height: auto; padding: 6px 12px; background: var(--canvas); }
.table > tbody > tr.group-row:hover > td { background: var(--canvas); }
.table > tbody > tr > td[colspan] { height: 48px; }

/* Print keeps the ink header and its point lines; the screen's violet and
   the row tint stay on the screen. */
@media print {
  .table > thead > tr > th { background: var(--ink); color: #fff; border-color: var(--table-rule); }
  .table > tbody > tr:hover > td, .table > tbody > tr:nth-child(even):hover > td { background: transparent; }
  .table > tbody > tr:nth-child(even) > td { background: #F3F4F6; }
  .tabbar .tab.active { background: none; color: var(--ink); text-decoration: underline; }
}

/* ---- Risks, 16 September: the calculated residual, the impact per aspect,
   the relations between risks and the cost-benefit view. */
.rcalc-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-size: 14px; color: var(--ink); }
.rcalc-line .rcalc-arrow { color: var(--secondary); }
.rr-aspects { font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--body); }
.rn-aspects { flex-wrap: wrap; }
.rrel-form { margin-top: var(--s-3); }
/* ---- Compliance over time (dashboard tile compliance_trend, templates/_dashboard_compliance_trend.html) ----
   The risk trend's card with one line per framework in the palette's series
   colours, two toggles in the heading (weeks/months, compliance/maturity)
   drawn as 28px hairline pills, the active one violet. */
.compliance-trend .ctrend-wrap[hidden], .compliance-trend .ctrend-sub[hidden], .compliance-trend .legend-level[hidden],
.compliance-trend .trend-tip th[hidden] { display: none; }
.swatch.series-1, .trend-point.series-1, .trend-stop.series-1 { background: var(--violet); fill: var(--violet); stop-color: var(--violet); }
.swatch.series-2, .trend-point.series-2, .trend-stop.series-2 { background: var(--blue); fill: var(--blue); stop-color: var(--blue); }
.swatch.series-3, .trend-point.series-3, .trend-stop.series-3 { background: var(--teal); fill: var(--teal); stop-color: var(--teal); }
.swatch.series-4, .trend-point.series-4, .trend-stop.series-4 { background: var(--amber); fill: var(--amber); stop-color: var(--amber); }
.swatch.series-rest, .trend-point.series-rest, .trend-stop.series-rest { background: var(--disabled); fill: var(--disabled); stop-color: var(--disabled); }
.trend-line.series-1 { stroke: var(--violet); } .trend-line.series-2 { stroke: var(--blue); }
.trend-line.series-3 { stroke: var(--teal); } .trend-line.series-4 { stroke: var(--amber); }
.trend-line.series-rest { stroke: var(--disabled); }
.ctrend-toggles { display: inline-flex; gap: 8px; align-items: center; flex: none; }
.ctrend-toggle { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-control); overflow: hidden; }
.ctrend-toggle .button.small { height: 28px; padding: 0 10px; border: 0; border-radius: 0; font: 600 13px/1 var(--font-sans); white-space: nowrap; }
.ctrend-toggle .button.small + .button.small { border-left: 1px solid var(--hairline); }
.ctrend-toggle .button.small.active { background: var(--violet); color: #fff; }
@media (max-width: 640px) {
  .compliance-trend .ctrend-toggles { flex: 1 1 100%; }
}

/* The "Stored values" switch of a console user in a customer view (top bar,
   docs/FLOWS.md 6.9): a 28px inline control beside the language select, the
   storage glyph, the label and the state. On, it fills violet like an active
   pill; at elevated level it is disabled, because there is nothing to switch. */
.raw-switch-form { display: inline-flex; margin: 0; }
.raw-switch { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px;
  border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--card);
  color: var(--secondary); font: 600 12px/1 var(--font-sans); cursor: pointer; white-space: nowrap; flex: none; }
.raw-switch .icon { width: 16px; height: 16px; }
.raw-switch:hover:not(:disabled) { color: var(--ink); background: var(--canvas); }
.raw-switch:disabled { cursor: not-allowed; opacity: .55; }
.raw-switch-state { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 5px; border-radius: var(--r-badge); background: var(--canvas); color: var(--secondary); }
.raw-switch.on { border-color: var(--violet); background: var(--violet); color: #fff; }
.raw-switch.on:hover:not(:disabled) { background: var(--violet-hover); color: #fff; }
.raw-switch.on .raw-switch-state { background: rgba(0,0,0,.2); color: #fff; }
@media (max-width: 640px) { .raw-switch-label { display: none; } }

/* A stored value on the page (core/sensitive.py stored, the {% g %} tag with
   the switch on): the text as it stands in the database in mono, escaped,
   wrapping anywhere because ciphertext has no spaces, and the pill "stored"
   beside it. Never a decrypted value: this reader has no key. */
.stored { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; min-width: 0; vertical-align: middle; }
.stored-value { font: 12px/1.5 var(--font-mono); color: var(--ink); min-width: 0; overflow-wrap: anywhere; word-break: break-all; }
.pill.stored-tag { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 5px; border-radius: var(--r-badge); color: var(--violet-text); background: var(--violet-tint);
  white-space: nowrap; flex: none; }

/* Requirements filter on the product overview (console) */
.prod-filters { margin: 0 0 12px; }
.prod-block[hidden] { display: none; }

/* Obligations library: the applicability fold on the form, the facts card
   and the demands page (console, core/views_library_obligations.py), and
   the preview on the portal's adopt page (core/views_registers.py
   obligations_library). */
.obld-fold { margin: 12px 0 0; }
.obld-fold > .setting-fields { max-height: none; padding-top: 0; }
.obld-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.obld-facts dt { font: 600 11px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--secondary); white-space: nowrap; }
.obld-facts dd { margin: 0; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.card-heading-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.obld-import { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.obld-import input[type="file"] { max-width: 220px; font-size: 12px; }
.obld-preview { margin: 6px 0 0; }
.obld-preview > summary { cursor: pointer; list-style: none; font: 600 12px/1.6 var(--font-sans); color: var(--violet-text); }
.obld-preview > summary::-webkit-details-marker { display: none; }
.obld-preview ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.obld-preview li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 8px; align-items: baseline; font-size: 12px; line-height: 1.5; }
.obld-preview li .pill { grid-row: span 2; }
.obld-preview li .card-sub { grid-column: 2; }
.obld-line { font-size: 12px; line-height: 1.5; color: var(--secondary); margin-top: 2px; }

/* Obligation demands (core/tenantdata_obligation_demands.py): the Demands
   card on an obligation's page, the summary strip, the context fold, the
   mark control in a row and the "Asked by" chips on the item pages. */
.obdm-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; min-height: 34px; }
.obdm-strip .card-sub { margin: 0; }
.obdm-sync { white-space: nowrap; }
.obdm-context { margin: 10px 0 0; }
.obdm-context > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.obdm-context > summary::-webkit-details-marker { display: none; }
.obdm-context[open] > summary { margin-bottom: 8px; }
.obdm .table-wrap { margin-top: 10px; }
.obdm-guidance { margin-top: 4px; }
.obdm-guidance > summary { cursor: pointer; list-style: none; font: 600 12px/1.6 var(--font-sans); color: var(--violet-text); }
.obdm-guidance > summary::-webkit-details-marker { display: none; }
.obdm-guidance p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.obdm-actions { white-space: nowrap; }
.obdm-actions .button { margin-right: 6px; }
.obdm-mark { display: inline-block; vertical-align: middle; }
.obdm-mark > summary { list-style: none; display: inline-flex; cursor: pointer; }
.obdm-mark > summary::-webkit-details-marker { display: none; }
.obdm-mark[open] > summary { margin-bottom: 6px; }
.obdm-mark .rule-form { flex-wrap: wrap; }
.obdm-mark .rule-form input.doc-entry { width: 200px; height: 32px; font-size: 13px; }
.obdm-empty { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 10px; color: var(--secondary); font-size: 14px; }
.obdm-empty .icon { width: 20px; height: 20px; color: var(--disabled); flex: none; }
.asked-by { align-items: center; gap: 6px; margin: 8px 0 0; }
.asked-by .eyebrow { margin-right: 4px; }
.asked-by .chip { text-decoration: none; font-size: 12px; }

/* Obligation instructions (core/tenantdata_obligation_demands.py phase 3):
   the Instructions card of an obligation, the procedure card of an item. */
.obin-group { margin-top: 12px; }
.obin-group-head { display: flex; align-items: center; gap: 10px; min-height: 28px; flex-wrap: wrap; }
.obin-group-head .rr-title { font: 600 15px/1.3 var(--font-sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obin-group-head .card-sub { margin: 0; }
.obin-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.obin-step { border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 12px 14px; background: var(--card); }
.obin-step-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 28px; }
.obin-step-line .rr-title { font: 600 15px/1.3 var(--font-sans); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.obin-step-line .pill, .obin-step-line .chip { white-space: nowrap; flex: none; }
.obin-instruction { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.obin-content { margin-top: 8px; }
.obin-content ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.obin-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.obin-meta .card-sub { margin: 0; }
.obin-meta .eyebrow { margin-right: 4px; }
.obin-done { margin-top: 10px; flex-wrap: wrap; }
.obin-done input.doc-entry { width: 280px; max-width: 100%; height: 32px; font-size: 13px; }
.obin-closed { display: block; margin-top: 8px; }
/* the gate (docs/FLOWS.md 7.17): one line above the instruction list until the obligation acts */
.obin-gate { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 10px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--table-head); font-size: 14px; color: var(--ink); }
.obin-gate .icon { width: 20px; height: 20px; color: var(--violet-text); flex: none; }
.obin-clock { margin: 8px 0 0; }
/* the duties card: one row per notification duty an acting obligation asks of a register */
.obdu .table-wrap { margin-top: 10px; }
.obdu-table .rr-id { white-space: nowrap; }
.obdu-table .obdm-guidance ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
/* a fold of fields on a register form (core/registers.py opt "fold"): closed unless an obligation asks */
.rn-fold { margin-top: 10px; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 0 12px; }
.rn-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 36px; }
.rn-fold > summary::-webkit-details-marker { display: none; }
.rn-fold[open] > summary { border-bottom: 1px solid var(--hairline); margin-bottom: 8px; }
.rn-fold .rn-row { padding-bottom: 10px; }
.obin-open-steps { margin-top: 8px; }
.chip.danger { background: var(--red-tint); color: var(--red-text); }
.chip.subtle { opacity: .7; }
.obin-log { margin-top: 12px; }
.obin-log > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.obin-log > summary::-webkit-details-marker { display: none; }
.obin-pill { margin-left: 4px; }


/* ---------------------------------------------------------------------
   Accessibility (WCAG 2.1 AA, 2026-09-17). The design is the same; these
   are the rules that make it hold for a keyboard, a screen reader, a
   zoomed page and a colour-blind reader. docs/FLOWS.md 9, CLAUDE.md 23.
   --------------------------------------------------------------------- */

/* A form field is identified by its border: 3:1 against the card and the
   canvas (--field-rule), where the hairline stood at 1.3:1. Cards, tables
   and buttons keep the hairline; they carry text and need no boundary. */
.doc-entry, .form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form select, .form textarea, .rule-form input:not([type="file"]), .rule-form select,
.field input, .field select, .field textarea, .language-picker, select.doc-entry,
.filter-bar .doc-entry, .filter-bar select.rr-filter, .tree-search, .link-pane, .search-field {
  border-color: var(--field-rule); }
.filter-bar .doc-entry { border: 1px solid var(--field-rule); }
input[type="checkbox"].toggle { border: 1px solid var(--field-rule); }
input[type="checkbox"].toggle:checked { border-color: var(--violet); }

/* A page whose title is the heading of its first card: an <h1> drawn as
   the card heading, so that every page has exactly one <h1>. */
.card-heading h1.card-title, .rr-heading-links h1.card-title, h1.card-title {
  font: 600 18px/1.3 var(--font-sans); color: var(--ink); letter-spacing: 0; margin: 0; }
.setting-heading h1.card-title { margin: 0 0 var(--s-2); }

/* Skip link: the first focusable element of every page, visible on focus
   only, and it lands on <main id="content">. */
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 100; padding: 0 var(--s-4);
  min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--r-control);
  background: var(--violet); color: #fff; font: 600 14px/1 var(--font-sans); text-decoration: none; }
.skip-link:focus, .skip-link:focus-visible { top: 8px; }
main:focus { outline: none; }

@media print { .skip-link { display: none; } }

/* Text for assistive technology only: the word beside a colour, the name
   of an icon-only control, the count behind a dot. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* A field in error says so in words (.field-error, or the message on top of
   the page); the red border alone is not enough. */
[aria-invalid="true"] { border-color: var(--red-text); }

/* Keyboard users on the tab bars: the ring stays inside the scrolling bar. */
.tabbar .tab:focus-visible { outline-offset: -2px; }
.side-nav-item:focus-visible, .side-group-heading:focus-visible, .top-menu-item:focus-visible { outline-offset: -2px; }

/* Reflow: at 320px nothing needs a horizontal scroll but a table in its
   own scroll container; the filter row wraps, buttons wrap, the page
   heading stacks. */
@media (max-width: 480px) {
  .filter-bar, .rr-filters, .card-actions, .rr-heading, .rr-heading-right, .page-heading { flex-wrap: wrap; }
  .rr-filters .doc-entry, .rr-search { width: 100%; min-width: 0; }
  .card-actions .button, .rr-heading-right .button { max-width: 100%; }
  .content, .main .content { padding: var(--s-3); }
}

/* Motion: nothing moves for a reader who asked for calm; the loading ring
   still turns because it is the only signal that something is under way. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Linked documents: the Browse row under the Lives-in select */
.xdoc-browse { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 8px; }

/* The Report button in the top bar (core/portal_nav.py report_button,
   templates/base.html): a 28px hairline button to the right of the domain
   picker, always in the same place; on a narrow screen it follows the
   picker into the menu block. */
/* The Report button in the top bar: violet, the picker's 40px (the rule outranks .button.small). */
.button.small.top-report { white-space: nowrap; flex: none; font-weight: 600; min-height: 40px; height: 40px; padding: 0 var(--s-4); font-size: 14px;
  background: var(--violet); color: #fff; border-color: var(--violet); }
.button.small.top-report:hover { background: var(--violet-hover, var(--violet)); color: #fff; }
.sidebar-domain .top-report { margin-top: 8px; }
/* A record picker inside a scrolling table: while its list is open the
   wrap lets it out instead of clipping it. */
.table-wrap:has(.record-picker .link-items:not([hidden])) { overflow: visible; }

/* How requirements work (templates/_requirements_explained.html, the
   Requirements tab of the frameworks page, docs/FLOWS.md 7.25): the six
   steps as 8px rows with a 24px number tile, two inline SVG diagrams that
   take their colours from the tokens (so the dark theme holds), the legend
   of the scope diagram and the reach of the set as stat cards. Nothing here
   is screen-height; the diagrams scale with their column and stop at 520px. */
.rqx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rqx-step { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.rqx-n { flex: none; width: 24px; height: 24px; border-radius: var(--r-control); background: var(--violet-tint);
  color: var(--violet-text); font: 600 12px/24px var(--font-mono); text-align: center; }
.rqx-step > div { min-width: 0; font: 400 13px/1.5 var(--font-sans); color: var(--body); }
.rqx-step strong { color: var(--ink); font-weight: 600; }
.rqx-where { color: var(--secondary); font-size: 12px; }
.rqx-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
.rqx-figure { margin: 0; min-width: 0; }
.rqx-figure figcaption { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--secondary); margin-bottom: 8px; }
.rqx-figure svg { display: block; width: 100%; max-width: 520px; height: auto; font-family: var(--font-sans); }
.rqx-box { fill: var(--card); stroke: var(--rule); stroke-width: 1; }
.rqx-box.tint { fill: var(--violet-tint); stroke: var(--violet); }
.rqx-box.violet { fill: var(--violet); stroke: var(--violet); }
.rqx-region { fill: var(--violet-tint); stroke: var(--violet); stroke-width: 1; stroke-dasharray: 4 3; }
.rqx-title { fill: var(--ink); font: 600 12px var(--font-sans); }
.rqx-sub { fill: var(--body); font: 400 11px var(--font-sans); }
.rqx-code { fill: var(--body); font: 500 11px var(--font-mono); }
.rqx-mono { font-family: var(--font-mono); font-weight: 500; }
.rqx-eyebrow { fill: var(--body); font: 500 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.rqx-title.on-violet, .rqx-sub.on-violet { fill: #fff; }
.rqx-glyph { color: var(--body); }
.rqx-glyph.violet { color: var(--violet-text); }
.rqx-glyph.on-violet { color: #fff; }
.rqx-line { fill: none; stroke: var(--rule); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rqx-line.violet { stroke: var(--violet); }
.rqx-line.dashed { stroke: var(--violet); stroke-dasharray: 4 3; }
.rqx-arrow { fill: var(--violet); }
.rqx-out .rqx-box { fill: var(--canvas); stroke: var(--disabled); stroke-dasharray: 4 3; }
.rqx-out .rqx-title, .rqx-out .rqx-sub, .rqx-out .rqx-code { fill: var(--secondary); }
.rqx-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
  font: 400 12px/1.5 var(--font-sans); color: var(--body); }
.rqx-legend li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.rqx-swatch { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: var(--r-badge); border: 1px solid var(--violet); background: var(--violet-tint); }
.rqx-swatch.out { border: 1px dashed var(--disabled); background: var(--canvas); }
.rqx-h3 { font: 600 14px/1.4 var(--font-sans); color: var(--ink); margin: 16px 0 8px; }
.rqx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: start; }
.rqx-stats > .card.stat { height: auto; min-height: 72px; }
/* No meter and no icon tile in these four: the space kept for one goes to the words. */
.rqx-stats .card.stat .stat-rule, .rqx-stats .card.stat .stat-heading { padding-right: 0; }
/* On a phone the eyebrow drops under the title instead of running out of the card. */
.rqx .rr-heading-links { flex-wrap: wrap; row-gap: 2px; }
.rqx-note { margin: 8px 0 0; }
:root[data-theme="dark"] .rqx-box.violet { fill: var(--violet); }
:root[data-theme="dark"] .rqx-out .rqx-box { stroke: var(--secondary); }

/* The mark of a framework (core/templatetags/framework_marks.py): the short
   name in its colour, in line with the name, never stretched. */
.fw-mark { display: inline-block; vertical-align: middle; flex: none; }

/* The console's proposals (templates/console/library_proposals.html): one
   condensed row per proposal, a hairline between rows, 16px apart. */
.prop-list { display: flex; flex-direction: column; }
.prop-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--hairline, #DDE0E8); }
.prop-row:first-child { border-top: 0; padding-top: 0; }
.prop-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.prop-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.prop-head .pill, .prop-head .mono { white-space: nowrap; flex: none; }
.prop-text { margin: 0; color: var(--secondary); font-size: 13px; line-height: 1.45; }
.prop-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prop-form { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0; }
.prop-form input[name="answer"] { flex: 1 1 220px; min-width: 0; }
.prop-remove { margin: 0; flex: none; }

/* The library list on the Available tab (templates/frameworks.html): group
   headings as eyebrows on a tinted row, one 72px row per framework with a
   hairline between them, the mark 150px wide, the description truncating. */
.fw-library { padding: 0; overflow: hidden; }
.fw-lib-group { background: #F7F8FA; padding: 12px 16px; border-top: 1px solid #DDE0E8; }
.fw-lib-group:first-child { border-top: 0; }
.fw-lib-row { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 16px; border-top: 1px solid #DDE0E8; }
.fw-lib-row.imported { background: #F7F8FA; }
.fw-lib-name { font: 600 16px/1.3 var(--font-sans); color: var(--ink); white-space: nowrap; flex: none; min-width: 200px; }
.fw-lib-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary); font-size: 15px; }
.fw-lib-version { flex: none; color: var(--secondary); font-size: 13px; }
.fw-lib-import { flex: none; min-width: 96px; justify-content: center; color: var(--violet-text); border-color: var(--violet); }
.fw-lib-imported { flex: none; min-width: 96px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--green-text); }
.fw-mark.wide { width: 150px; }
/* A framework's logo (its badge) at 56px, its own proportions, also where the wordmark is wide. */
.fw-mark.fw-logo, .fw-mark.fw-logo.wide, .fw-mark.fw-square { width: 56px; height: 56px; object-fit: contain; }
.fw-lib-actions { display: flex; align-items: center; gap: 8px; flex: none; margin: 0; }
.fw-lib-row .stat-meter { flex: none; width: 48px; height: 48px; }
@media (max-width: 720px) {
  .fw-lib-row { flex-wrap: wrap; gap: 8px 12px; }
  .fw-lib-name { min-width: 0; white-space: normal; }
  .fw-lib-text { flex-basis: 100%; white-space: normal; }
}

/* The risk follow-up on the dashboard (templates/_dashboard_risk_followup.html):
   one 40px row per question, the word left, the counts per domain right. */
.followup-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.followup-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-top: 1px solid #DDE0E8; }
.followup-line:first-child { border-top: 0; }
.followup-word { font: 400 14px/1.4 var(--font-sans); color: var(--ink); min-width: 0; }
.followup-counts { display: inline-flex; gap: 6px; flex: none; }
.followup-counts .pill { min-width: 32px; text-align: center; text-decoration: none; }
.followup-clear { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--green-text); }

/* The pager under a long table (templates/base.html): one line, the count
   as an eyebrow on the left, the two hairline buttons on the right. */
tr.paged-out { display: none; }
.table tbody tr.pager-odd { background: #fff; }
.table tbody tr.pager-even { background: var(--canvas); }
.table-pager { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.table-pager .eyebrow { flex: 1 1 auto; min-width: 0; }
.table-pager .button { flex: none; }

/* ---- Tables as the list mock-ups of 2026-09-19 draw them, everywhere ----
   No vertical rules and no zebra: white rows parted by one hairline, the
   violet header without cell separators, the row a hover tint. The first
   column carries the title 15px/600 with a mono 12px line under it; chips
   are hairline outlines; a pill may carry a 12px line under it. */
.table > thead > tr > th { border-left: 0; border-right: 0; border-top: 0; border-bottom: 0; }
.table > tbody > tr > td, .table > tbody > tr:last-child > td { border-left: 0; border-right: 0; border-top: 0;
  border-bottom: 1px solid #DDE0E8; background: transparent; }
.table > tbody > tr:nth-child(even) > td, .table tbody tr:nth-child(even) > td,
.table tbody tr.pager-even, .table tbody tr.pager-even > td { background: transparent; }
.table > tbody > tr:hover > td, .table > tbody > tr:nth-child(even):hover > td { background: var(--violet-tint); }
:root[data-theme="dark"] .table > tbody > tr > td { border-bottom-color: var(--hairline); }
:root[data-theme="dark"] .table > tbody > tr:nth-child(even) > td, :root[data-theme="dark"] .table tbody tr:nth-child(even) > td { background: transparent; }
.table.register th, .table.register td, .table.register th:last-child, .table.register td:last-child { border-right: 0; }
.table-wrap { border: 0; }
.table > tbody > tr > td { padding: 14px 12px; }
/* A chip: a hairline outline, 12px mono, 2px radius (the categories, the codes, "n related"). */
.chip-outline, .table .pill.code, .table .pill.chip { display: inline-block; background: transparent; color: var(--ink);
  border: 1px solid #DDE0E8; border-radius: var(--r-badge); font: 500 12px/1.4 var(--font-mono); padding: 2px 8px; white-space: nowrap; }
.table .pill.chip.violet, .chip-outline.violet { color: var(--violet-text); border-color: var(--violet); }
.rr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rr-none { display: block; margin-top: 6px; font: 400 13px/1.4 var(--font-sans); color: var(--secondary); }
/* The line under a pill or a value: 13px sans in the mid grey (a date, a name, "not sent"). */
.rr-line { display: block; margin-top: 6px; font: 400 13px/1.4 var(--font-sans); color: var(--secondary); }
.rr-line.mono { font-family: var(--font-mono); font-size: 12px; }
/* Score: the inherent pill, an arrow, the residual pill or the grey words. */
.rr-inline { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rr-inline .rr-arrow { display: inline; padding: 0; }
.table .pill.level { font-weight: 600; }
.table .pill.level.lvl-red, .table .pill.level.lvl-darkred { background: var(--red-tint); color: var(--red-text); }
.table .pill.level.lvl-orange, .table .pill.level.lvl-yellow { background: var(--amber-tint); color: var(--amber-text); }
.table .pill.level.lvl-green, .table .pill.level.lvl-lightgreen { background: var(--green-tint); color: var(--green-text); }
.table .pill.level.lvl-grey { background: var(--neutral-tint); color: var(--ink); }

/* A table fills its card from edge to edge (2026-09-19): the wrap cancels
   the card's 16px padding on the sides and, when the table is the last
   thing in the card, at the bottom; the header then meets the card's border.
   Only tables: nothing else in a card moves. */
.card > .table-wrap { margin-left: -16px; margin-right: -16px; }
.card > .table-wrap:last-child { margin-bottom: -16px; }
.card > .table-wrap > .table { border-radius: 0; }
.card > .table-wrap:last-child > .table > tbody > tr:last-child > td { border-bottom: 0; }
.card.fw-library { padding: 0; }
/* No rounded corners on the table itself (2026-09-20): the header row and
   the last row meet the card square, the card keeps its own radius. */
.table > thead > tr:first-child > th:first-child, .table > thead > tr:first-child > th:last-child,
.table > tbody:first-child > tr:first-child > th:first-child, .table > tbody:first-child > tr:first-child > td:first-child,
.table > tbody:first-child > tr:first-child > th:last-child, .table > tbody:first-child > tr:first-child > td:last-child,
.table > tbody:last-of-type > tr:last-child > th:first-child, .table > tbody:last-of-type > tr:last-child > td:first-child,
.table > tbody:last-of-type > tr:last-child > th:last-child, .table > tbody:last-of-type > tr:last-child > td:last-child { border-radius: 0; }

/* ---- The risk page (IT and OT) as the product owner's mock-up of 2026-09-20 ----
   The heading is one line: the mono id, the title, Back to register on the
   right. Two columns: the three form cards on the left (a six-column grid
   inside: a field takes three, a third takes two, a wide one all six), the
   sticky Risk state card on the right with a violet header bar like a
   table's and its parts parted by hairlines, and the page's one Save. The
   form is display: contents, so the columns are the grid's own children and
   the cards below the form stay in the left column. Under 960px the columns
   stack, the state card first. Labels 14px/600 in ink, fields 40px. */
.risk-page-heading { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.risk-page-heading h1 { min-width: 0; }
.risk-page-heading .rp-id { font: 500 22px/1.25 var(--font-mono); color: var(--ink); margin-right: 6px; letter-spacing: 0; }
.risk-page-heading .rp-back { flex: none; font: 500 14px/1.4 var(--font-sans); color: var(--violet-text); text-decoration: none; white-space: nowrap; }
.risk-page-heading .rp-back:hover { text-decoration: underline; }
.risk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto auto; gap: 16px 24px; align-items: start; }
.risk-layout > .risk-form { display: contents; }
.risk-main, .risk-rest { grid-column: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.risk-main { grid-row: 1; }
.risk-rest { grid-row: 2; }
.risk-rest:empty { display: none; }
.risk-state { grid-column: 2; grid-row: 1 / -1; position: sticky; top: 20px; min-width: 0; }
.risk-page .card { padding: 16px; }
.risk-page .card-heading { margin-bottom: 14px; }
.risk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 20px; }
.risk-grid > .field { grid-column: span 3; gap: 8px; }
.risk-grid > .field-third { grid-column: span 2; }
.risk-grid > .field-wide { grid-column: 1 / -1; }
.risk-page .field-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font: 600 14px/1.3 var(--font-sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
.risk-page .field-label .eyebrow { margin: 0; }
.risk-page .field-label .rp-label-link { font: 500 12px/1.4 var(--font-sans); margin-left: auto; }
.rp-required { color: var(--red-text); font-weight: 600; }
.risk-page .doc-entry { border-color: var(--field-rule); border-radius: var(--r-control); }
.risk-page textarea.doc-entry.short { min-height: 40px; height: 40px; line-height: 22px; padding: 8px 12px; resize: vertical; }
.risk-page .link-pane { min-height: 40px; padding: 3px 8px; gap: 6px; border-color: var(--field-rule); }
.risk-page .link-pane .chip { height: 30px; }
.risk-page .link-pane .link-pane-entry { flex: 1 1 100px; min-width: 100px; height: 32px; }
/* The cards under the form keep their heading on one line in the narrower column. */
.risk-rest .card-heading-links h2 { white-space: nowrap; }
.risk-page .field-help { font: 400 12px/1.4 var(--font-sans); color: var(--secondary); }
.rs-muted { font: 400 14px/1.4 var(--font-sans); color: var(--secondary); }
/* The consequence toggles: one row of pills, the chosen ones violet with white text, the rest a hairline outline. */
.risk-ticks { display: flex; flex-wrap: wrap; gap: 8px; }
.risk-tick { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--field-rule); border-radius: var(--r-full); background: var(--card); font: 500 14px/1 var(--font-sans); color: var(--ink);
  white-space: nowrap; flex: none; }
.risk-tick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.risk-tick > span { display: inline-block; }
.risk-tick > span::first-letter { text-transform: uppercase; }
.risk-tick:hover { border-color: var(--violet); }
.risk-tick:has(input:checked) { background: var(--violet); border-color: var(--violet); color: #fff; font-weight: 600; }
.risk-tick:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* A field with a unit inside it, on the right: the currency of a cost. */
.field-suffix { position: relative; display: block; min-width: 0; }
.field-suffix .doc-entry { padding-right: 56px; -moz-appearance: textfield; appearance: textfield; }
.field-suffix .doc-entry::-webkit-outer-spin-button, .field-suffix .doc-entry::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field-suffix .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 500 13px/1 var(--font-mono); color: var(--secondary); }
/* The legacy control text with its Convert beside it. */
.rp-legacy { flex-wrap: nowrap; gap: 8px; }
.rp-legacy .doc-entry { flex: 1 1 auto; min-width: 0; }
.rp-legacy .button { flex: none; min-height: 40px; }
/* The Risk state card. */
.risk-page .risk-state-card { padding: 0; overflow: hidden; }
.risk-state-head { margin: 0; min-height: 40px; display: flex; align-items: center; padding: 0 16px;
  background: var(--table-head-bg); color: #fff; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.risk-state-body { padding: 0 16px 16px; display: flex; flex-direction: column; }
.rs-part { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--hairline); min-width: 0; }
.rs-part:has(+ .rs-actions) { border-bottom: 0; }
.rs-label { font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.rs-line { font: 400 13px/1.4 var(--font-sans); color: var(--secondary); }
.rs-line.mono { font-family: var(--font-mono); font-size: 12px; }
.rs-line:empty { display: none; }
.rs-origins { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rs-origins:not(:has(*)) { display: none; }
.rs-pills { flex-wrap: wrap; white-space: normal; row-gap: 6px; }
.rs-pills .pill { white-space: nowrap; }
.rs-pills .rr-arrow { display: inline; padding: 0; }
.risk-state .pill.level { font: 600 13px/1.4 var(--font-sans); padding: 4px 10px; }
.risk-state .pill.level .mono { font-size: 12px; }
.risk-state .pill.level.lvl-red, .risk-state .pill.level.lvl-darkred { background: var(--red-tint); color: var(--red-text); }
.risk-state .pill.level.lvl-orange, .risk-state .pill.level.lvl-yellow { background: var(--amber-tint); color: var(--amber-text); }
.risk-state .pill.level.lvl-green, .risk-state .pill.level.lvl-lightgreen { background: var(--green-tint); color: var(--green-text); }
.risk-state .pill.level.lvl-grey { background: var(--neutral-tint); color: var(--ink); }
.rs-decision { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-decision .pill { white-space: nowrap; }
.rs-dates { flex-direction: row; gap: 16px; }
.rs-dates > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rs-dates .mono { font: 500 14px/1.4 var(--font-mono); color: var(--ink); }
.risk-state .rs-actions { margin-top: 16px; gap: 12px; }
.risk-state .rs-actions .button[type="submit"] { flex: 1 1 auto; min-height: 40px; }
.risk-state .rs-actions .button.small { min-height: 40px; text-decoration: none; }
@media (max-width: 960px) {
  .risk-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .risk-main, .risk-rest, .risk-state { grid-column: 1; grid-row: auto; }
  .risk-state { order: -1; position: static; }
}
@media (max-width: 640px) {
  .risk-grid > .field, .risk-grid > .field-third { grid-column: 1 / -1; }
  .rs-dates { flex-direction: column; }
}

/* A chip's title as a link to the record it names (2026-09-20): ink, underlined on hover. */
.chip .chip-link { color: inherit; text-decoration: none; }
.chip .chip-link:hover { color: var(--violet-text); text-decoration: underline; text-underline-offset: 2px; }
/* The toggle carries its box (2026-09-20): a 22px rounded square before the
   word -- hairline and white when off; white with a violet tick on the
   violet pill when on. The box is drawn, the real checkbox stays hidden. */
.risk-tick { gap: 10px; padding: 0 18px 0 12px; min-height: 40px; font-size: 15px; }
.risk-tick::before { content: ""; display: inline-block; width: 22px; height: 22px; flex: none; box-sizing: border-box;
  border: 2px solid #C9CCD8; border-radius: 6px; background: #fff; }
.risk-tick:has(input:checked)::before { border-color: #fff; background: #fff center / 14px 14px no-repeat
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236456EE' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12.5 10 17.5 19 7'/></svg>"); }
:root[data-theme="dark"] .risk-tick::before { background: var(--card); border-color: var(--field-rule); }
/* Compact and square (2026-09-20): the buttons' 4px radius, 32px tall, 14px. */
.risk-tick { border-radius: var(--r-control); min-height: 32px; padding: 0 12px 0 8px; gap: 8px; font-size: 14px; }
.risk-tick::before { width: 18px; height: 18px; border-radius: 4px; }
.risk-tick:has(input:checked)::before { background-size: 12px 12px; }

/* A picture in a document section (2026-09-20: a diagram from a Word import): never wider than its column. */
.doc-section img, .doc-editor img, .doc-body img, .document-content img { max-width: 100%; height: auto; display: block; margin: 8px 0; }

/* Process flows (core/flow_svg.py, 2026-09-20): the drawing fills its card
   edge to edge like a table, scaled by its viewBox; it reads the tokens of
   both themes through var() inside the SVG. */
/* The drawing of a flow (core/flow_svg.py): 16px around it, no taller than
   --flow-max-height (420px; 360px inside a document), centred; the SVG's own
   min-width keeps its text legible and the figure scrolls sideways instead. */
.flow-figure { --flow-max-height: 420px; margin: 0; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.flow-figure .flow-svg-box { padding: 16px; overflow-x: auto; overflow-y: hidden; }
.flow-figure svg { display: block; }
.flow-figure figcaption { padding: 8px 12px; border-top: 1px solid var(--hairline); }
.flow-figure.full { --flow-max-height: 100000px; }
.doc-flow-figure { margin: 0 0 16px; --flow-max-height: 360px; }
/* Inside a document the drawing's own min-width (the SVG keeps its text
   legible, core/flow_svg.py) must not widen the sheet: the read page is a
   flex item sized to its content, and without containment the SVG's
   576px pushed the whole page past a phone's width (2026-09-21). With it
   the box takes the column and the SVG scrolls inside, as designed. */
.doc-flow-figure .flow-svg-box { contain: inline-size; }
.flow-open-full { white-space: nowrap; flex: none; font-size: 12px; }
.flow-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.flow-legend-amber { display: inline-block; width: 2px; height: 14px; background: var(--amber-text); flex: none; }
/* A flow placed in a document (docs/FLOWS.md 7.28): the card the editor
   draws inside the marker, the block the read page draws in its place. */
.cisoly-flow { display: block; }
.flow-card { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 40px; padding: 8px 12px;
             border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--canvas); color: var(--body);
             font-size: 13px; line-height: 1.3; user-select: none; }
.flow-card > .icon { width: 20px; height: 20px; flex: none; color: var(--violet-text); }
.flow-card-text { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.flow-card-text b { font-weight: 600; }
.flow-card .toggle-row-small { min-height: 28px; font-size: 12px; gap: 6px; white-space: nowrap; flex: none; }
.flow-card .toggle-row-small .toggle { width: 32px; height: 18px; flex: 0 0 32px; }
.flow-card .toggle-row-small .toggle::after { width: 14px; height: 14px; top: 2px; left: 2px; }
.flow-card .toggle-row-small .toggle:checked::after { transform: translateX(14px); }
.flow-card-open { white-space: nowrap; flex: none; }
.flow-card .chip-x { flex: none; font-size: 18px; color: var(--secondary); padding: 0 2px; }
.flow-card .chip-x:hover { color: var(--red-text); }
.flow-card.retired { opacity: .7; }
/* The library template's two switches (console, the details form): stacked, one per line. */
.flow-defaults { gap: 0; }
.flow-defaults .toggle-row { min-height: 36px; }
.flow-defaults .card-sub { margin: 2px 0 0; }
.doc-flow-block { margin: 12px 0; }
.doc-flow-block.retired .flow-figure, .doc-flow-block.retired .flow-table-wrap,
.flow-retired .flow-figure { opacity: .55; filter: grayscale(1); }
.doc-flow-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 40px; padding: 8px 12px; margin: 0 0 8px;
                   border: 1px solid var(--hairline); border-left: 3px solid var(--amber-text); border-radius: var(--r-card); background: var(--canvas);
                   font-size: 13px; color: var(--body); }
.doc-flow-notice > .icon { width: 18px; height: 18px; flex: none; color: var(--amber-text); }
.doc-flow-notice-text { flex: 1 1 240px; min-width: 0; }
.doc-flow-notice-text .rr-sub { display: block; }
.doc-flow-notice-card { padding: 0; border: none; background: none; }
.doc-flow-notice-card .doc-flow-notice { margin: 0; }
.inline-form { display: inline; }
.flow-table-wrap { margin: 0 0 8px; }
/* the step table inside a document: denser than a register, the text wraps.
   The selector outweighs the register's `.table > tbody > tr > td` (14px 12px),
   which used to win and gave the cells a register's padding (2026-09-21). */
.flow-table th, .flow-table td, .table.flow-table > tbody > tr > td { padding: 8px 10px; font-size: 13px; line-height: 1.4; vertical-align: top; white-space: normal; }
/* On the document's read page the table fills the sheet edge to edge, the
   way a register table fills its card (the wrap cancels the sheet's padding
   on the sides; no corner radius on the table then). The product owner's
   "very small table" of 2026-09-21: the sheet is a 760px column and the
   table sat 40px inside it on each side. */
.read-page .flow-table-wrap { margin-left: -40px; margin-right: -40px; }
.read-page .flow-table-wrap > .table { border-radius: 0; }
.read-page .flow-table-wrap > .table > tbody:last-of-type > tr:last-child > td:first-child,
.read-page .flow-table-wrap > .table > tbody:last-of-type > tr:last-child > td:last-child { border-radius: 0; }
@media (max-width: 760px) { .read-page .flow-table-wrap { margin-left: -1.2rem; margin-right: -1.2rem; } }
/* the header of the step table is the document's, not a register's: white,
   bold 14px labels in the text colour, a 2px rule above and a hairline under
   (the selector outweighs the register head's `.table > thead > tr > th`) */
.table.flow-table > thead > tr > th, .table.flow-table > thead > tr > th:first-child, .table.flow-table > thead > tr > th:last-child {
  background: var(--card); color: var(--ink); font: 600 14px/20px var(--font-sans); text-transform: none; letter-spacing: 0;
  border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hairline); border-radius: 0; height: 40px; padding: 8px 10px; }
.table.flow-table > tbody > tr:hover > td { background: var(--card); }
.table.flow-table { table-layout: fixed; }   /* Activity takes what the fixed columns leave */
.flow-table .flow-th-n { width: 40px; }
.flow-table .flow-th-actor { width: 16%; }
.flow-table .flow-th-io { width: 15%; }
.flow-table .flow-th-next { width: 18%; }
.flow-next-list { display: flex; flex-direction: column; gap: 2px; }
.flow-next-step { white-space: normal; }
.flow-next-step > .mono { margin-right: 4px; }
.flow-table tr { min-height: 0; }
.flow-table .rr-title { font-size: 13px; }
.flow-table .rr-meta { margin-top: 2px; }
/* On a phone the table is one column: every row a block, each cell on its
   own line with the column's name before it (data-label), the header row
   kept for a screen reader; nothing scrolls sideways. */
@media (max-width: 640px) {
  .table.flow-table, .table.flow-table > tbody, .table.flow-table > tbody > tr, .table.flow-table > tbody > tr > td { display: block; width: auto; height: auto; }
  .table.flow-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table.flow-table > tbody > tr { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
  .table.flow-table > tbody > tr > td, .flow-table td { padding: 2px 16px; border: 0; }
  .table.flow-table > tbody > tr > td[data-label]::before { content: attr(data-label) ": "; font: 600 12px/1.4 var(--font-sans); color: var(--secondary); }
  .table.flow-table > tbody > tr > td.flow-td-n::before { content: "#"; margin-right: 6px; font: 500 12px/1.4 var(--font-mono); color: var(--secondary); }
  .table.flow-table > tbody > tr > td.flow-td-n { font-weight: 600; }
  .flow-next-list { display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
}
.doc-flow-caption { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px; border-top: 1px solid var(--hairline);
                    font-size: 12px; color: var(--body); }
.doc-flow-caption-text { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 0; }
.doc-flow-caption-text .icon { width: 16px; height: 16px; flex: none; color: var(--violet-text); }
.doc-flow-caption-toggles { display: inline-flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; }
.doc-flow-caption-toggles .toggle-row-small { min-height: 28px; font-size: 12px; gap: 6px; }
.doc-flow-caption-toggles .toggle-row-small .toggle { width: 32px; height: 18px; flex: 0 0 32px; }
.doc-flow-caption-toggles .toggle-row-small .toggle::after { width: 14px; height: 14px; top: 2px; left: 2px; }
.doc-flow-caption-toggles .toggle-row-small .toggle:checked::after { transform: translateX(14px); }
.read-content .doc-flow-block { margin: 16px 0; }
.read-content .flow-figure { border-radius: var(--r-card); }
.flow-insert { position: relative; display: inline-flex; }
.flow-picker { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 320px; max-width: 480px; padding: 10px 12px;
               border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--card); box-shadow: 0 8px 24px rgba(47, 51, 73, .12); }
.flow-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin-bottom: 4px; }
.flow-picker-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.flow-picker-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px;
                    border: none; border-bottom: 1px solid var(--hairline); border-radius: 0; background: none; color: var(--ink); font: inherit;
                    font-size: 13px; text-align: left; cursor: pointer; }
.flow-picker-item:hover { background: var(--violet-tint); }
.flow-picker-item .flow-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.flow-picker-list li:last-child .flow-picker-item { border-bottom: none; }
.flow-adopt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flow-adopt-list .tick-mark { align-items: flex-start; }
@media print { .doc-flow-caption-toggles, .doc-flow-notice form { display: none; } }
.chip-row label.chip { cursor: pointer; }
.chip-row label.chip input { margin: 0; }

/* The follow-up's column heads: IT · OT in mono above the counts. */
.followup-head { min-height: 24px; border-top: 0 !important; }
.followup-head + .followup-line { border-top: 1px solid #DDE0E8; }
.followup-col { display: inline-block; min-width: 32px; text-align: center; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--secondary); }

/* The score pills carry the risk scale's own colours (2026-09-20), the
   same fills as the matrix cells and the level pills of the settings. */
.table .pill.level.lvl-green, .risk-state .pill.level.lvl-green { background: var(--risk-1); color: var(--risk-text); }
.table .pill.level.lvl-lightgreen, .risk-state .pill.level.lvl-lightgreen { background: var(--risk-2); color: var(--risk-text); }
.table .pill.level.lvl-yellow, .risk-state .pill.level.lvl-yellow { background: var(--risk-3); color: var(--risk-text); }
.table .pill.level.lvl-orange, .risk-state .pill.level.lvl-orange { background: var(--risk-4); color: var(--risk-text); }
.table .pill.level.lvl-red, .risk-state .pill.level.lvl-red { background: var(--risk-5); color: var(--risk-text); }
.table .pill.level.lvl-darkred, .risk-state .pill.level.lvl-darkred { background: var(--risk-6); color: var(--risk-text-dark); }

/* ---- Users and access → Members (2026-09-20, the product owner's mock-up):
   the members table on the left, the member panel on the right, sticky on a
   desktop and stacked under the table on a phone. ---- */
.members-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px 24px; align-items: start; }
.members-card { min-width: 0; }
.members-card .rr-search { flex: 1 1 160px; min-width: 140px; }
.members-side { position: sticky; top: 20px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.members-side .mfa-policy { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 0; }
.members-side .mfa-policy .toggle-row { min-height: 24px; font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
/* The table: 72px rows, no zebra, the selected row a violet tint with a
   4px violet left edge; a row is a target (the link on the name is the
   no-script way in). */
.table.members > tbody > tr[data-member] { cursor: pointer; }
.table.members > tbody > tr > td { height: 72px; padding: 12px 10px; vertical-align: middle; }
.table.members > thead > tr > th { padding-left: 10px; padding-right: 10px; }
.table.members > tbody > tr.pager-odd, .table.members > tbody > tr.pager-even,
.table.members > tbody > tr.pager-even > td { background: transparent; }
.table.members .member-avatar { width: 40px; height: 40px; font-size: 13px; font-weight: 600; }
.table.members .member-link { text-decoration: none; }
.table.members .member-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.table.members .member-text .mono { font-size: 12px; }
.table.members > tbody > tr.is-selected > td, .table.members > tbody > tr.is-selected:hover > td { background: var(--violet-tint); }
.table.members > tbody > tr.is-selected > td:first-child { box-shadow: inset 4px 0 0 var(--violet); }
.table.members > tbody > tr[data-member]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.member-roles { font: 500 13px/1.4 var(--font-sans); color: var(--ink); white-space: nowrap; }
.member-roles .rr-none { margin-top: 0; }
.members-empty { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.members-empty .icon { width: 20px; height: 20px; color: var(--secondary); flex: none; }
/* The panel: the person's head line, then sections parted by hairlines,
   each with a mono eyebrow, and the action row last. */
.member-panel { display: flex; flex-direction: column; min-width: 0; }
.member-panel-head { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.member-panel-head .member-avatar { width: 40px; height: 40px; font-size: 13px; font-weight: 600; }
.member-panel-head .member-avatar .icon { width: 20px; height: 20px; }
.member-panel-head .member-text { flex: 1 1 auto; min-width: 0; }
.member-panel-head .member-text .mono { font-size: 12px; }
.member-panel-name { font: 600 18px/1.3 var(--font-sans); color: var(--ink); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-panel-name:focus { outline: none; }
.member-panel-name .pill { font-size: 12px; vertical-align: middle; }
.member-panel-close { flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.member-panel-close .icon { width: 18px; height: 18px; }
.member-form { display: flex; flex-direction: column; }
.member-section { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--hairline); min-width: 0; }
.member-panel-head + .member-form, .member-panel-head + .member-section { margin-top: 14px; }
.member-section > .eyebrow { margin: 0; }
.member-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.member-field .doc-entry { width: 100%; height: 40px; min-height: 40px; box-sizing: border-box; font-size: 14px; }
.member-label { font: 600 13px/1.3 var(--font-sans); color: var(--ink); }
.invite-roles { display: flex; flex-direction: column; gap: 8px; }
.invite-roles .tick-mark { display: flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--font-sans); color: var(--ink); }
.member-panel .role-chips { gap: 8px; }
.member-panel .role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; font: 500 13px/1.3 var(--font-sans); color: var(--ink);
  background: var(--neutral-tint); border: 1px solid var(--hairline); border-radius: var(--r-badge); white-space: nowrap; flex: none; }
.member-panel .chip-gone { width: 20px; height: 20px; padding: 0; border-radius: var(--r-badge); opacity: .8; }
.member-panel .rr-none { margin-top: 0; }
.member-switch { display: flex; flex-direction: column; gap: 8px; }
.member-switch .toggle-row { min-height: 24px; font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.member-switch .rs-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.member-switch .rs-line .button { min-height: 28px; padding: 0 10px; font-size: 12px; }
.member-facts { gap: 6px; }
.member-facts .mono { color: var(--ink); }
.member-actions { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--hairline); justify-content: flex-start; flex-wrap: wrap; }
.member-actions .button { min-height: 32px; }
.member-actions .button.small { text-decoration: none; }
.member-remove { margin-left: auto; }
.member-panel-empty { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--secondary); font-size: 14px; }
.member-panel-empty .icon { width: 20px; height: 20px; flex: none; }
:root[data-theme="dark"] .member-panel .role-chip { background: var(--table-head); }
@media (max-width: 1024px) {
  .members-layout { grid-template-columns: minmax(0, 1fr); }
  .members-side { position: static; }
}

/* The stat card's glyph box sits where the ring sits and is as large:
   48px, centred on the right at 16px (2026-09-20). */
.card.stat .stat-heading .icon { top: 50%; right: 16px; transform: translateY(-50%); width: 48px; height: 48px; padding: 12px; }

/* ---- The risk overview (2026-09-20, the product owner's mock-up): the
   worklist and Recently changed on the left (1.3fr), the distribution and
   the workflow steps on the right (1fr), the matrix full width under both;
   every card as tall as its content, stacked on a phone. ---- */
.ro-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.ro-main, .ro-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ro-card { min-width: 0; }
.ro-card > .rr-heading { margin-bottom: 0; }
/* The worklist: one block per gap kind, parted by hairlines; the head line
   with the count pill, the title 15px/600, the grey note and the hairline
   action on the right; under it the first three risks and Show n more. */
.ro-gap { padding: 14px 0 12px; border-top: 1px solid var(--hairline); }
.ro-card > .rr-heading + .ro-gap { margin-top: 12px; }
.ro-gap:last-child { padding-bottom: 0; }
.ro-gap-head { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.ro-gap-count { flex: none; }
.ro-gap-title { font: 600 15px/1.35 var(--font-sans); color: var(--ink); white-space: nowrap; }
.ro-gap-note { font: 400 14px/1.4 var(--font-sans); color: var(--secondary); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-gap-action { margin-left: auto; flex: none; min-height: 40px; padding: 0 16px; font: 600 14px/1 var(--font-sans); display: inline-flex; align-items: center;
  text-decoration: none; background: var(--card); color: var(--violet-text); border: 1px solid var(--hairline); border-radius: var(--r-control); }
.ro-gap-action:hover { background: var(--canvas); border-color: var(--body); }
.ro-gap-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ro-gap-list li { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.ro-gap-id { font: 400 14px/1.4 var(--font-mono); color: var(--ink); flex: none; min-width: 72px; }
.ro-gap-link { font: 500 14px/1.4 var(--font-sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-gap-toggle { padding-left: 88px; }
.ro-show-more { background: none; border: 0; padding: 0; cursor: pointer; font: 600 14px/1.4 var(--font-sans); color: var(--violet-text); }
.ro-show-more:hover { text-decoration: underline; }
.ro-empty { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 10px; font-size: 14px; color: var(--ink); }
.ro-empty .icon { width: 20px; height: 20px; color: var(--green-text); flex: none; }
/* Recently changed: the list-style table edge to edge in its card; six
   rows (72px each) and the header in view, the rest on the card's own
   vertical scroll with the header row staying put (2026-09-20). */
.ro-card > .ro-table-wrap { margin-top: 10px; }
.ro-recent-wrap { max-height: calc(6 * 72px + 40px); overflow-y: auto; }
.ro-recent-wrap .table.ro-recent > thead > tr > th { position: sticky; top: 0; z-index: 1; }
.table.ro-recent > tbody > tr > td { vertical-align: middle; }
.table.ro-recent .rr-title { display: block; }
.table.ro-recent .rr-sub { display: block; margin-top: 2px; }
.table.ro-recent .rr-sub { white-space: normal; }
.table.register.ro-recent .rr-risk { min-width: 0; width: 100%; }
.table.ro-recent > thead > tr > th, .table.ro-recent > tbody > tr > td { padding-left: 10px; padding-right: 10px; }
.table.ro-recent .ro-owner, .table.ro-recent .ro-status { font-size: 14px; color: var(--ink); }
.table.ro-recent .ro-status { white-space: nowrap; }
/* Distribution across levels: rows of 34px, name, mono range, one violet
   bar proportional to the count, the count in mono on the right. */
.ro-levels { display: flex; flex-direction: column; margin-top: 10px; }
.ro-level { display: grid; grid-template-columns: minmax(96px, auto) 56px minmax(0, 1fr) 32px; align-items: center; gap: 12px; min-height: 34px; }
.ro-level-name { font: 600 14px/1.3 var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-level-range { font: 400 13px/1.3 var(--font-mono); color: var(--secondary); white-space: nowrap; }
.ro-bar { display: block; height: 8px; background: var(--neutral-tint); border-radius: var(--r-badge); overflow: hidden; }
.ro-bar i { display: block; height: 100%; background: var(--violet); border-radius: var(--r-badge); min-width: 0; }
.ro-level-n { font: 400 14px/1.3 var(--font-mono); color: var(--secondary); text-align: right; }
.ro-level-n.has { font-weight: 600; color: var(--ink); }
.ro-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--secondary); }
/* The workflow steps: a seven-segment strip, then a small Step n pill and
   the sentence, the Fix link in violet on a step a gap blocks. */
.ro-strip { display: flex; gap: 4px; margin-top: 10px; }
.ro-strip i { flex: 1 1 0; height: 6px; border-radius: var(--r-badge); background: var(--neutral-tint); }
.ro-strip i.met { background: var(--violet); }
.ro-steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ro-step { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ro-step-pill { flex: none; font: 600 12px/1.4 var(--font-sans); padding: 3px 8px; margin-top: 1px; }
.ro-step-text { font: 400 14px/1.5 var(--font-sans); color: var(--ink); min-width: 0; }
.ro-fix { font-size: 14px; white-space: nowrap; margin-left: 4px; }
/* The matrix: the likelihood labels along the top, the impact labels down
   the left (highest at the top), cells 72px high with the score centred and
   a dark chip with the count where risks sit; the legend under it. */
/* The table's border-spacing bleeds 6px past its edges; the wrap's padding
   takes that in, so the card grows by it instead of showing a scrollbar. */
.ro-matrix-wrap { margin: 4px -6px 0; padding: 6px; overflow-x: auto; overflow-y: hidden; }
.ro-matrix { width: 100%; border-collapse: separate; border-spacing: 6px 6px; margin: -6px; }
.ro-matrix th.ro-matrix-axis { font: 400 13px/1.3 var(--font-sans); color: var(--secondary); text-align: center; padding: 0 0 2px; white-space: nowrap; }
.ro-matrix th.ro-matrix-impact { text-align: right; padding: 0 8px 0 0; width: 1%; }
.ro-matrix td.ro-matrix-cell { padding: 0; min-width: 72px; }
.ro-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 72px; border-radius: var(--r-control); }
.ro-cell-score { font: 600 15px/1 var(--font-mono); color: var(--risk-text); }
.ro-cell.cell-darkred .ro-cell-score { color: var(--risk-text-dark); }
/* the "n risks" chip on a matrix cell: white on the cell's colour, dark
   text, a faint rule — readable on every level (a dark chip vanished on the
   red and the amber cells, 2026-09-20); violet on hover and focus */
.ro-cell-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-badge); background: #fff; color: #1F2233;
                border: 1px solid rgba(31, 34, 51, .18); font: 600 12px/1 var(--font-sans); white-space: nowrap; text-decoration: none; }
.ro-cell-chip:hover, .ro-cell-chip:focus-visible { background: var(--violet); color: #fff; border-color: var(--violet); }
.ro-legend { margin-top: 14px; font: 400 13px/1.4 var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.ro-legend .mono { color: var(--secondary); font-size: 12px; }
/* The four figures above the two columns; on the OT overview the risk
   part sits after the OT cards under its own heading line (#risks). */
.ro-stats { margin-bottom: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ro-section-heading { margin-top: 20px; scroll-margin-top: 64px; }
@media (max-width: 1100px) { .ro-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ro-stats { grid-template-columns: minmax(0, 1fr); } }
/* The register's Matrix cell filter shows while it is on (the overview
   links to it); risk_new.js marks an active select. */
.filter-bar select.rr-filter.rr-filter-cell:not(.active) { display: none; }
:root[data-theme="dark"] .ro-gap-action { background: var(--card); }
@media (max-width: 1024px) {
  .ro-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ro-gap-head { flex-wrap: wrap; }
  .ro-gap-action { margin-left: 0; }
  .ro-gap-toggle { padding-left: 0; }
  .ro-level { grid-template-columns: minmax(72px, auto) 48px minmax(0, 1fr) 28px; gap: 8px; }
}

/* The imported frameworks as a table (templates/frameworks.html, 2026-09-20). */
.fw-name-cell { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.fw-name-cell .rr-title { white-space: nowrap; }
.fw-td-controls { color: var(--body); font: 400 13px/1.4 var(--font-sans); }
.fw-td-controls .fw-not-met { color: var(--red-text); font-weight: 600; }
.fw-table td.mono { font: 400 12px/1.4 var(--font-mono); color: var(--body); white-space: nowrap; }
.fw-not-met { color: var(--red-text); font-weight: 600; }
.fw-td-coverage { white-space: nowrap; }
.fw-td-coverage .stat-meter { width: 48px; height: 48px; display: block; overflow: visible; }
.fw-td-coverage .stat-meter svg { display: block; width: 48px; height: 48px; }
/* the 48px ring plus the cell's 14px above and below: a one-line row is
   76px, the ring centred, never on the border (2026-09-21) */
.table.fw-table > tbody > tr > td { height: 76px; vertical-align: middle; }
.fw-td-actions { text-align: right; white-space: nowrap; }
.fw-td-actions .fw-lib-actions { justify-content: flex-end; }
.fw-library .table-wrap { margin: 0; }

/* the running version under the user card at the foot of the sidebar
   (docs/RELEASES.md): one line of 10px mono in the lightest text, never
   louder than the menu */
.brand-version { font: 400 12px/1.4 var(--font-mono); color: var(--secondary); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
html.rail .user-card-foot, html.rail .user-more { display: none; }   /* the 64px rail shows the avatar only */


/* Fleet -> Releases: the restore form in the heading line, the state line */
.release-restore-form { display: flex; align-items: center; gap: 8px; flex: none; }
.release-restore-form .doc-entry { width: 220px; height: 40px; }
.release-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 12px; }
.release-change { font-size: 12px; line-height: 1.35; }
.release-more summary { cursor: pointer; font-size: 12px; }
.release-notes-form { display: flex; gap: 6px; align-items: center; min-width: 220px; }
.release-notes-form .doc-entry { height: 28px; font-size: 12px; }
.release-policy-form { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; font-size: 12px; }
.release-policy-now { font-size: 12px; font-weight: 600; }
.release-policy-now.is-held { color: var(--green-text); }
.release-policy-now.is-auto { color: var(--amber-text); }


/* The guide of a capability page (core/guides.py): a 40px square "?" on the
   right of the page heading line (beside the actions that stand there, or
   alone at the top right), and the dialog it opens: title 20px/600 with the
   hint and a close cross, two columns of 15px text under mono eyebrows, a
   footer with the link to the method and one violet Got it. Radius 4px. */
/* The ? is placed at the top right only inside the heading it joined (any
   heading: the title line of a restyled page is not always .page-heading);
   anywhere else it stays in the flow, never floating over the top bar. */
.has-guide { position: relative; padding-right: 52px; }
.page-heading-row.has-guide { padding-right: 0; }
.has-guide > .guide-button:not(.guide-button-inline) { position: absolute; right: 0; top: 0; }
.guide-button { position: static; width: 40px; height: 40px; padding: 0; flex: none; display: inline-grid; place-items: center;
                font: 600 16px/1 var(--font-sans); color: var(--violet-text); border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--card); cursor: pointer; }
.guide-button.guide-button-inline { position: static; margin: 0; }
/* inside a row heading the generic `.page-heading-row > .button` rule (wide,
   violet) must not reach the ?: it stays a 40px hairline square at the far
   right of the line */
.page-heading > .button.guide-button, .page-heading-row > .button.guide-button {
  width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; margin-left: auto; align-self: flex-start;
  background: var(--card); color: var(--violet-text); border: 1px solid var(--hairline); border-radius: var(--r-control); font: 600 16px/1 var(--font-sans); }
.page-heading > .button.guide-button:hover, .page-heading-row > .button.guide-button:hover,
.page-heading > .button.guide-button:focus-visible, .page-heading-row > .button.guide-button:focus-visible { background: var(--violet-hover); border-color: var(--violet-hover); color: #fff; }
/* The title line of a guided page (the guide script builds it): the title,
   a hairline, the page's links in violet, and at the right a status with a
   dot and its words - one line of the heading, nothing under it. */
.page-title-row { display: flex; align-items: center; gap: 16px; min-width: 0; flex-wrap: wrap; }
.page-title-row h1 { margin: 0; }
.page-title-links { display: inline-flex; align-items: center; gap: 12px; padding-left: 16px; border-left: 1px solid var(--hairline); min-height: 28px; flex-wrap: wrap; }
.page-title-sep { color: var(--secondary); font: 400 15px/1 var(--font-sans); }
.page-title-links a { display: inline-block; font: 500 15px/1.3 var(--font-sans); color: var(--violet-text); text-decoration: none; white-space: nowrap; }
.page-title-links a::first-letter { text-transform: uppercase; }   /* the words came from a sentence ("… · methodology") */
.page-title-links a:hover { text-decoration: underline; }
.page-title-links .pill { background: none; border: 0; padding: 0; border-radius: 0; font: 400 15px/1.3 var(--font-sans); color: var(--body); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.page-title-links .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); flex: none; }
.page-title-links .pill.active-green::before, .page-title-links .pill.ok::before { background: var(--green-text); }
.page-title-links .pill.level-orange::before, .page-title-links .pill.planned::before, .page-title-links .pill.due::before { background: var(--amber-text); }
.page-title-links .pill.danger::before, .page-title-links .pill.overdue::before { background: var(--red-text); }
.page-title-links .pill.open::before { background: var(--violet); }
.page-title-links .pill strong, .page-title-links .pill b { font-weight: 600; color: var(--ink); }
.page-heading-row .page-title-row { flex: 1 1 320px; }
.guide-button:hover, .guide-button:focus-visible { background: var(--violet-hover); border-color: var(--violet-hover); color: #fff; }   /* the ? stays visible: white on the violet the other buttons take on hover */
.guide-dialog { width: min(1100px, calc(100vw - 40px)); max-width: none; padding: 0; border: 0; border-radius: var(--r-control); background: var(--card); color: var(--body);
                box-shadow: 0 24px 64px rgba(15, 18, 34, .28); }
.guide-dialog::backdrop { background: rgba(31, 34, 51, .38); }
.guide-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--hairline); }
.guide-title { margin: 0; font: 600 20px/1.3 var(--font-sans); color: var(--ink); min-width: 0; flex: 1 1 auto; }
.guide-hint { font: 400 14px/1.3 var(--font-sans); color: var(--secondary); white-space: nowrap; flex: none; }
.guide-close { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--secondary); cursor: pointer; display: inline-grid; place-items: center; border-radius: var(--r-control); flex: none; }
.guide-close .icon { width: 20px; height: 20px; }
.guide-close:hover { color: var(--ink); background: var(--tint, #F3F0FF); }
.guide-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; padding: 8px 24px 24px; align-items: start; }
.guide-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.guide-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.guide-block p { margin: 0; font: 400 15px/1.55 var(--font-sans); color: var(--body); }
.guide-eyebrow { font: 500 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); padding-top: 16px; }
.guide-steps { margin: 0; padding-left: 22px; font: 400 15px/1.55 var(--font-sans); color: var(--body); display: flex; flex-direction: column; gap: 6px; }
.guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--hairline); }
.guide-unclear-form { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.guide-unclear-form .button { min-height: 40px; padding: 0 16px; font: 600 14px/1 var(--font-sans); background: var(--card); color: var(--ink); border: 1px solid var(--hairline); }
.guide-unclear-form .button:hover { background: var(--violet-hover); color: #fff; border-color: var(--violet-hover); }
.guide-unclear-thanks { font: 400 14px/1.4 var(--font-sans); color: var(--green-text); }
.guide-foot .button.primary { min-height: 40px; padding: 0 20px; font: 600 14px/1 var(--font-sans); }
@media (max-width: 720px) { .guide-body { grid-template-columns: 1fr; } }
/* the switches on the console's flow card inside a document (the same
   caption toggles as the portal): a mono eyebrow, then the two switches */
.flow-card-toggles { display: inline-flex; align-items: center; gap: 4px 14px; margin-left: 12px; }
.flow-card-toggles .eyebrow { font-size: 10px; }
.flow-card-toggles .flow-toggle-form { display: inline-flex; }
/* the imported-frameworks table sits flush with the card's bottom: the wrap
   pulls itself 16px down, so the card must hold those 16px (it had 0 and
   the card's overflow cut the last row, 2026-09-21) */
.card.fw-library { padding-bottom: 16px; }

/* Fleet -> Infrastructure (templates/console/fleet_infrastructure.html):
   four figures on top with a coloured left bar, cards whose heading carries
   the state pill and the facts, meters (label, value, bar, sub), key/value
   rows, a note box, a database list with bars. */
.infra-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; margin-bottom: 4px; }
.card.infra-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 20px; position: relative; min-height: 72px; }
.card.infra-stat::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--hairline); }
.card.infra-stat.tone-green::before { background: var(--green); }
.card.infra-stat.tone-violet::before { background: var(--violet); }
.card.infra-stat.tone-amber::before { background: var(--amber); }
.card.infra-stat.tone-red::before { background: var(--red); }
.card.infra-stat.tone-grey::before { background: var(--hairline); }
.infra-stat-value { font: 500 13px/1.4 var(--font-sans); color: var(--ink); }
.infra-stat-value strong { font: 600 18px/1.2 var(--font-sans); margin-right: 2px; }
.infra-stat-sub { font-size: 12px; color: var(--secondary); }
.card.infra-card { margin-top: 14px; }
.card.infra-card > .card-heading { padding-bottom: 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; flex-wrap: wrap; }
.card.infra-card > .card-heading .card-heading-links { gap: 10px; flex-wrap: wrap; min-width: 0; }
.card.infra-card > .card-heading h2 { font: 600 15px/1.3 var(--font-sans); margin: 0; }
.infra-meta { font-size: 13px; color: var(--secondary); white-space: nowrap; }
.infra-meta strong, .infra-meta code { color: var(--ink); }
.pill.infra-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.pill.infra-pill .dot { width: 6px; height: 6px; background: currentColor; }
.infra-meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.infra-meter { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.infra-meter-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--secondary); }
.infra-meter-line strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.infra-bar { height: 4px; border-radius: 2px; background: var(--skeleton); overflow: hidden; }
.infra-bar > span { display: block; height: 100%; background: var(--violet); border-radius: 2px; }
.infra-bar.bar-green > span { background: var(--green); }
.infra-meter-sub { font-size: 12px; color: var(--secondary); }
.infra-text { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--body); max-width: 72ch; }
.infra-note { border: 1px solid var(--hairline); border-radius: 4px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: #F7F8FA; }
.infra-note strong { font-size: 13px; }
.infra-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.infra-chips .chip { font-size: 12px; padding: 3px 8px; border-radius: 2px; background: var(--skeleton); color: var(--ink); }
.infra-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.infra-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 8px 0 0; align-items: baseline; }
.infra-kv dt { font-size: 13px; color: var(--secondary); white-space: nowrap; }
.infra-kv dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-kv.rules { gap: 0 16px; margin: 0 0 10px; }
.infra-kv.rules dt, .infra-kv.rules dd { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.infra-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.infra-checks .pill { font-weight: 500; font-size: 12.5px; padding: 5px 10px; }
.infra-host { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 4px; background: #F7F8FA; margin-bottom: 14px; min-width: 0; }
.infra-host code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.infra-copy { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.infra-dbs-heading { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; }
.infra-dbs { display: flex; flex-direction: column; }
.infra-db { display: grid; grid-template-columns: minmax(0, 2fr) 72px minmax(0, 4fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.infra-db:last-child { border-bottom: 0; }
.infra-db code { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-db strong { text-align: right; font-size: 13px; white-space: nowrap; }
.infra-more { background: none; border: 0; padding: 0; margin-top: 8px; cursor: pointer; font: inherit; font-size: 13px; }
.infra-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
.infra-grid-2 .card.infra-card { margin-top: 0; }
.infra-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.infra-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--secondary); min-width: 0; }
.infra-fact strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.infra-facts + .infra-host { margin-top: 14px; margin-bottom: 0; }
.card.infra-card > .table-wrap:last-child { margin-bottom: -16px; }
@media (max-width: 1024px) { .infra-stats, .infra-meters, .infra-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .infra-stats, .infra-meters, .infra-facts, .infra-grid-2, .infra-cols { grid-template-columns: minmax(0, 1fr); } .infra-db { grid-template-columns: minmax(0, 1fr) 72px; } .infra-db .infra-bar { grid-column: 1 / -1; } }

/* Fleet -> Database backup: four figures (title, value line, bar, sub)
   with a coloured left bar; the last run and the restore points side by side. */
.card.bk-stat { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 14px 20px; position: relative; min-height: 88px; }
.card.bk-stat::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--hairline); }
.card.bk-stat.tone-green::before { background: var(--green); }
.card.bk-stat.tone-red::before { background: var(--red); }
/* Not known yet (the source copy before its first run): never green, never red. */
.card.bk-stat.tone-amber::before { background: var(--amber); }
/* The restore steps on Fleet -> Source code: a numbered list with the commands
   in a scrolling block each. */
.srcb-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.srcb-steps pre { margin: 6px 0 0; padding: 10px 12px; overflow-x: auto; background: var(--canvas);
                  border: 1px solid var(--hairline); border-radius: var(--r-control); font-size: 12px; }
.card.bk-stat.tone-amber::before { background: var(--amber); }
.bk-points code.bk-key-other { color: var(--amber-text); }
.bk-stat-title { font-size: 13px; color: var(--secondary); }
.bk-stat-value { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--secondary); min-height: 24px; }
.bk-stat-value strong { font: 600 22px/1.1 var(--font-sans); color: var(--ink); }
.bk-stat-value .pill { font-weight: 600; font-size: 13px; padding: 4px 10px; }
.bk-stat-after { color: var(--secondary); }
.bk-stat-sub { font-size: 12px; color: var(--secondary); }
.infra-bar.bar-red > span { background: var(--red); }
.bk-points { list-style: none; margin: 0; padding: 0; }
.bk-points li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.bk-points li:last-child { border-bottom: 0; }
.bk-points code { font-size: 13px; }
.bk-point-right { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.bk-free { margin-bottom: 0; }

/* Fleet -> Schema versions: the storage column is a figure and a bar
   against the largest database; the table fits a desktop width. */
.sch-table { table-layout: fixed; }
.sch-table th:nth-child(1) { width: 22%; }
.sch-table th.sch-storage-th { width: 30%; }
.sch-table th:nth-child(3) { width: 14%; }
.sch-table th:nth-child(4) { width: 9%; }
.sch-storage-line { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
.sch-storage-line strong { text-align: right; font-size: 13px; white-space: nowrap; }
.sch-table td { overflow: hidden; text-overflow: ellipsis; }

/* Security levels measured per requirement (templates/ot_b_zone.html):
   the FR's own line of fields, the requirement rows, the fold beyond target. */
.otb-fr-line { display: grid; grid-template-columns: 160px 200px minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; margin-bottom: 12px; }
.otb-fr-line .field-help { font-size: 12px; color: var(--secondary); }
.table.otb-sr-table > tbody > tr > td { vertical-align: top; }
.otb-sr-table .otb-sr-cell { min-width: 220px; }
.otb-sr-table .otb-controls-cell { min-width: 220px; }
.otb-sr-row.state-met .otb-sr-cell .mono { color: var(--green-text); }
.otb-sr-row.state-na .otb-sr-cell .mono, .otb-sr-row.state-compensated .otb-sr-cell .mono { color: var(--secondary); }
.otb-beyond { margin-top: 10px; }
.otb-beyond > summary { cursor: pointer; font-size: 13px; }
@media (max-width: 1024px) { .otb-fr-line { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Soly, the assistant (templates/_assistant.html, _assistant_panel.html,
   assistant.html): the button beside the bell, the modal panel it opens and
   the page that shows the same conversation full width. The thread scrolls
   inside itself and is never screen-height; one violet button (Send) in the
   action row with Clear beside it as a hairline. */
/* The button wears the language select's shape and height, so the two sit on
   one line in the top bar (the product owner's mock-up of 2026-09-22): the
   same hairline, the same 8px radius, the same type, the glyph and the word
   in violet. */
/* Soly's launcher: the domain picker's twin on the other side of the top bar
   -- 40px, the hairline border and the control radius, so the three controls
   in the bar read as one set. The glyph and the mono word carry the violet.
   Hover and the open panel both tint it and draw the border in the violet,
   the two states the account button has; the ring is the platform's on
   :focus-visible only. */
.top-assistant { box-sizing: border-box; height: 40px; min-height: 40px; display: inline-flex;
                 align-items: center; gap: 6px; white-space: nowrap; flex: none; padding: 0 var(--s-3);
                 border: 1px solid var(--field-rule); border-radius: var(--r-control);
                 background: var(--card); color: var(--violet-text); cursor: pointer;
                 transition: border-color .15s ease, background-color .15s ease; }
.top-assistant-word { font-family: var(--font-mono); font-size: 13px; font-weight: 600;
                      letter-spacing: .04em; line-height: 1; color: currentColor; }
.top-assistant .icon { width: 16px; height: 16px; flex: none; color: currentColor; }
.top-assistant:hover { border-color: var(--violet); background: var(--violet-tint); }
.top-assistant[aria-expanded="true"] { border-color: var(--violet); background: var(--violet-tint); }
.top-assistant:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Soly AI's drawer: the last child of the shell, so opening it narrows the
   top bar and the content and never the menu. It stands against the right
   edge over the full screen height and scrolls with nothing: the thread and
   the panels scroll inside it. Closed it is 0 wide and inert. Under 1100px it
   lies over the content instead of pushing it, and on a phone it is the whole
   width; that keeps the pushed content usable on a small screen. */
.soly-drawer { flex: none; width: 0; overflow: hidden; align-self: flex-start;
               position: sticky; top: 0; height: 100vh; background: var(--card);
               border-left: 1px solid var(--hairline); transition: width .18s ease; }
.shell.soly-open .soly-drawer { width: 360px; }
.soly-drawer-inner { width: 360px; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.soly-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
             border-bottom: 1px solid var(--hairline); flex: none; }
.soly-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
             flex: none; border-radius: 50%; background: var(--violet); color: #fff; }
.soly-title { margin: 0; font: 600 16px/1.3 var(--font-sans); color: var(--ink); flex: 1 1 auto; min-width: 0; }
.soly-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
              flex: none; border: 1px solid var(--hairline); border-radius: var(--r-control);
              background: var(--card); color: var(--body); cursor: pointer; }
.soly-close:hover { background: var(--canvas); }
.soly-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* The tab bar sits between two lines of the same weight: the head's above and
   this one below, 10px of room on either side of the buttons. */
.soly-drawer .soly-tabs { flex: none; padding: 10px 16px; border-bottom: 1px solid var(--hairline); }
.soly-drawer .soly-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px;
              display: flex; flex-direction: column; gap: 10px; }
.soly-drawer .soly-panel[hidden] { display: none; }
/* The Chat tab is the list of chats or one conversation
   (templates/_assistant_chat.html) and nothing else. The list scrolls inside
   itself under its eyebrow; the thread fills the whole height between the
   "All chats" line and the composer's rule and scrolls inside itself. It
   reads bottom up, as a chat does: the first message takes the free space
   above it (margin-top:auto), so one or two messages sit right above the
   composer and older ones stack upward; the DOM, the reading order and the
   keyboard stay oldest first, and the script opens it scrolled to the
   newest. */
.soly-drawer .soly-panel[data-panel="chat"] { padding: 0; overflow: hidden; gap: 0; }
.soly-drawer .soly-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.soly-drawer .soly-chat > .assistant-thread {
  flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
  border: 0; border-radius: 0; padding: 14px 16px; }
.soly-drawer .soly-chat > .assistant-thread > :first-child { margin-top: auto; }
.soly-drawer .soly-chat > .assistant-thread:focus-visible { outline-offset: -2px; }
.soly-drawer .soly-history { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; }
/* The list: a row per conversation, a button named by the first question
   (15px/600, one line with an ellipsis) over its 12px mono line (the moment
   of the last message and the count), and the row's small x beside it. The
   page draws the same list inside its card. */
.soly-chat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.soly-history { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.assistant-card .soly-history { max-height: 460px; overflow-y: auto; }
.soly-convs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.soly-conv { display: flex; align-items: center; gap: 8px; min-width: 0; }
.soly-conv-open { flex: 1 1 auto; min-width: 0; margin: 0; }
.soly-conv-button { box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
                    width: 100%; min-width: 0; min-height: 52px; padding: 8px 12px; text-align: left;
                    border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--card);
                    color: var(--ink); font: inherit; cursor: pointer;
                    transition: border-color .15s ease, background-color .15s ease; }
.soly-conv-button:hover { border-color: var(--violet); background: var(--violet-tint); }
.soly-conv-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.soly-conv-title { display: block; min-width: 0; font: 600 15px/1.35 var(--font-sans); color: var(--ink);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soly-conv-meta { display: block; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--secondary);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soly-conv-delete { flex: none; margin: 0; }
.soly-conv-x, .soly-back { display: inline-flex; align-items: center; justify-content: center; gap: 4px;
                           min-height: 28px; white-space: nowrap; flex: none; }
.soly-conv-x { width: 28px; padding: 0; }
.soly-conv-x .icon, .soly-back .icon { width: 16px; height: 16px; flex: none; }
/* One conversation: the small "All chats" control above the thread. */
.soly-conv-head { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.soly-drawer .soly-conv-head { padding: 10px 16px 0; }
.soly-conv-head form { margin: 0; }
/* No chats yet: one row with the glyph, one sentence and one action. */
.soly-empty { display: flex; align-items: center; gap: 10px; min-height: 34px; min-width: 0; }
.soly-empty .icon { width: 20px; height: 20px; flex: none; color: var(--violet-text); }
.soly-empty p { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--body); }
.soly-empty .button { flex: none; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .soly-conv-button { transition: none; } }
.soly-eyebrow { margin: 0; font: 600 11px/1 var(--font-mono); letter-spacing: .06em;
                text-transform: uppercase; color: var(--secondary); }
.soly-scope { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; align-items: start; }
.soly-scope dt { font-size: 13px; color: var(--body); min-width: 0; }
.soly-scope dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); text-align: right; min-width: 0; }
.soly-foot .assistant-budget { margin-right: auto; font-size: 11px; flex: 1 1 auto; min-width: 0;
                               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soly-foot .assistant-actions { flex-wrap: nowrap; gap: 8px; }
.soly-foot .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden;
                          clip-path: inset(50%); white-space: nowrap; }
.soly-foot .assistant-actions .button { min-height: 32px; }
.soly-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.soly-sources li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.soly-sources .mono { font-size: 11px; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; }
.soly-foot { flex: none; border-top: 1px solid var(--hairline); padding: 12px 16px;
             display: flex; flex-direction: column; gap: 8px; }
.soly-foot .assistant-ask { display: flex; flex-direction: column; gap: 8px; }
.soly-foot .assistant-thread { display: none; }
@media (max-width: 1100px) {
  .soly-drawer { position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; z-index: 60;
                 box-shadow: -8px 0 24px rgba(15, 18, 34, .16); }
  .shell.soly-open .soly-drawer { width: min(360px, 100vw); }
}
@media (max-width: 600px) {
  .shell.soly-open .soly-drawer, .soly-drawer-inner { width: 100vw; }
}
.assistant-dialog { width: min(560px, calc(100vw - 40px)); max-width: none; padding: 0; border: 0;
                    border-radius: var(--r-control); background: var(--card); color: var(--body);
                    box-shadow: 0 24px 64px rgba(15, 18, 34, .28); }
.assistant-dialog::backdrop { background: rgba(31, 34, 51, .38); }
.assistant-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
.assistant-title { margin: 0; font: 600 18px/1.3 var(--font-sans); color: var(--ink); min-width: 0; flex: 1 1 auto; }
.assistant-full { font: 400 13px/1.3 var(--font-sans); color: var(--violet-text); white-space: nowrap; flex: none; }
.assistant-body { padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.assistant-note { margin: 0; font: 400 12px/1.5 var(--font-sans); color: var(--secondary); }
.assistant-thread { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 380px;
                    overflow-y: auto; border: 1px solid var(--hairline); border-radius: var(--r-control); padding: 12px; }
.assistant-thread:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* A line added in place (the answer posted in the background, templates/
   _assistant_ask.html) keeps its line breaks the way |linebreaksbr keeps them
   for a line from the server; the waiting line is quieter. */
.assistant-text-live { white-space: pre-line; }
/* A Soly AI draft under its answer: a hairline card with what it is, the
   drafted title and two per-row actions (open the form, set it aside). */
.assistant-draft { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; min-width: 0; max-width: 100%;
                   border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--card); }
.assistant-draft-head { font: 600 11px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
                        color: var(--violet-text); }
.assistant-draft-title { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.assistant-draft-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.assistant-draft-actions form { margin: 0; }
.assistant-waiting .assistant-text { color: var(--secondary); font-style: italic; }
.assistant-error { margin: 0; color: var(--red-text); }
.assistant-line { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.assistant-line.assistant-from-me { align-items: flex-end; }
.assistant-who { font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); flex: none; }
.assistant-text { margin: 0; font: 400 14px/1.55 var(--font-sans); color: var(--body); min-width: 0; max-width: 88%;
                  padding: 8px 12px; border-radius: var(--r-control); background: var(--table-head); }
.assistant-from-me .assistant-text { background: var(--violet-tint); color: var(--ink); }
.assistant-link { margin-top: 2px; flex: none; }
.assistant-ask { display: flex; flex-direction: column; gap: 10px; }
.assistant-ask .field { gap: 6px; }
.assistant-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.assistant-budget { margin-right: auto; font-size: 12px; color: var(--secondary); min-width: 0; }
/* In the dialog the actions are 40px, as the guide's footer is; on the page
   the form keeps the 32px every other form has. */
.assistant-dialog .assistant-actions .button { min-height: 40px; padding: 0 18px; font: 600 14px/1 var(--font-sans); }
.assistant-card .assistant-thread { max-height: 460px; }
/* Soly AI usage (templates/assistant_usage.html): two cards side by side
   that never stretch to each other, numbers right aligned in mono, a name
   with its 12px mono second line, and the month as bars over a hairline with
   its legend in words and its table below. */
.asu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .asu-grid { grid-template-columns: minmax(0, 1fr); } }
.asu-table th.r, .asu-table td.r { text-align: right; }
.asu-table td.mono { white-space: nowrap; }
.asu-name { min-width: 0; }
.asu-title { display: block; font: 600 15px/1.35 var(--font-sans); color: var(--ink);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asu-second { display: block; font-size: 12px; color: var(--secondary); white-space: nowrap; }
.asu-unrecorded td { color: var(--secondary); }
.asu-unrecorded .asu-title { font-weight: 400; color: var(--body); }
.asu-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--body);
              white-space: nowrap; flex: none; }
.asu-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--violet); flex: none; }
.asu-chart { padding: 4px 0 0; }
.asu-chart svg { display: block; width: 100%; height: 88px; }
.asu-bar { fill: var(--violet); }
.asu-base { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (max-width: 720px) { .assistant-text { max-width: 100%; } }

/* ---- Costs (console Fleet -> Costs and Clients -> Costs, core/views_cloud_costs.py) ----
   The period filter in one row of 40px controls; the stacked bars in the
   series tokens, one colour per resource type in a fixed order (never by
   rank), a 2px gap of the card's colour between segments, every bar
   focusable with its figures as its title, and the same figures as a table
   in the fold under it; the amounts right-aligned in mono. */
.cc-filters, .content > form.cc-filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.cc-legend { margin-top: 2px; }
.cc-filters [hidden] { display: none !important; }
.cc-filters .cc-date { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.cc-filters .cc-date .doc-entry { height: 40px; min-height: 40px; width: auto; padding: 0 10px; font-size: 14px;
  color: var(--ink); background: var(--card); border: 1px solid var(--field-rule); border-radius: var(--r-control); }
.cc-filters .cc-show { height: 40px; min-height: 40px; padding: 0 16px; font: 600 14px/1 var(--font-sans); flex: none; }
.cc-filters .cc-range { margin-left: auto; white-space: nowrap; color: var(--secondary); flex: none; }
.cc-fetch { flex: none; }
.cc-fetch .button { min-height: 40px; padding: 0 16px; font: 600 14px/1 var(--font-sans); white-space: nowrap; }
.cc-stats { margin-bottom: 14px; }
.swatch.cc-s-instance, .cc-seg.cc-s-instance { background: var(--violet); fill: var(--violet); }
.swatch.cc-s-database, .cc-seg.cc-s-database { background: var(--teal); fill: var(--teal); }
.swatch.cc-s-storage, .cc-seg.cc-s-storage { background: var(--blue); fill: var(--blue); }
.swatch.cc-s-disk, .cc-seg.cc-s-disk { background: var(--amber); fill: var(--amber); }
.swatch.cc-s-other, .cc-seg.cc-s-other { background: var(--disabled); fill: var(--disabled); }
.cc-legend .swatch, .cc-type .swatch { width: 10px; height: 10px; border-radius: var(--r-badge); display: inline-block; flex: none; }
.cc-chart { margin-top: 10px; }
.cc-chart svg { display: block; width: 100%; height: auto; max-height: 280px; }
.cc-chart .trend-axis { font-size: 10px; }
.cc-seg { stroke: var(--card); stroke-width: 2px; }
.cc-hit { fill: transparent; }
.cc-bar { cursor: default; }
.cc-bar:hover .cc-hit, .cc-bar:focus-visible .cc-hit { fill: var(--violet-tint); }
.cc-bar:focus-visible .cc-hit { stroke: var(--focus-ring); stroke-width: 2px; }
.cc-base { stroke: var(--rule); stroke-width: 1; }
.cc-fold { margin-top: 10px; }
.cc-fold > summary { cursor: pointer; font-size: 13px; }
.cc-table .r { text-align: right; white-space: nowrap; }
.cc-name { min-width: 0; max-width: 460px; }
.cc-title { display: block; font: 600 15px/1.35 var(--font-sans); color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cc-title:hover { text-decoration: underline; }
.cc-second { display: block; font-size: 12px; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-name > .cc-title, .cc-name > .cc-second { max-width: 420px; }
.cc-clients .cc-name > .cc-title, .cc-clients .cc-name > .cc-second { max-width: 240px; }
.cc-type { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cc-table tfoot th, .cc-table tfoot td { font-weight: 600; border-top: 1px solid var(--rule); background: var(--canvas); color: var(--ink); text-align: left; }
.cc-table tfoot td.r { text-align: right; }
.cc-table tbody tr.cc-shared > td { background: var(--canvas); }
.cc-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.cc-sort:hover { text-decoration: underline; }
.cc-problems > summary { cursor: pointer; list-style: none; }
.cc-problems > summary::-webkit-details-marker { display: none; }
.cc-problem-list { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--body); }
.cc-rights { margin: 6px 0 0; padding-left: 18px; }
.cc-sum { margin: 10px 0 0; }
@media (max-width: 640px) { .cc-filters .cc-range { margin-left: 0; } }

/* Setup restyle: settings tabs (2026-09-23) */
/* The tabs of Setup -> Settings (templates/settings.html with
   _settings_environment, iso_k_assets, _settings_branding,
   _settings_encryption, _report_sharing and _settings_custom_domain), all
   scoped to .setup-tab, the class of each tab panel. Brand book §23: a tab
   opens with one section heading line (title 18px/600, a mono eyebrow with
   the counts, the tab's own control on the right, 32px) and at most one
   12px line under it; then cards of one anatomy, 16px apart and 16px
   inside: a heading of glyph and h2 with the state pill on the right, at
   most one 12px line, a two-column grid of 13px/600 labels above 40px
   fields (read-only facts in three columns), closed folds for what is not
   needed every day, and the one action row at the bottom right. */
div.tab-panel.setup-tab, .setup-tab .setup-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.setup-tab .setup-section { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup-tab .setup-head { display: flex; align-items: center; gap: 12px; min-height: 32px; min-width: 0; flex-wrap: wrap; }
.setup-tab .setup-head > h2 { margin: 0; font: 600 18px/1.3 var(--font-sans); color: var(--ink); white-space: nowrap; }
.setup-tab .setup-head > .eyebrow { margin: 0; white-space: nowrap; flex: none; }
.setup-tab .setup-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.setup-tab .setup-head-actions select.doc-entry { width: auto; min-width: 104px; }
.setup-tab .setup-head-sub { margin: 0; font: 400 12px/1.5 var(--font-sans); color: var(--secondary); }

/* the card: heading, one 12px line, content, action row */
.setup-tab .card { padding: 16px; min-width: 0; }
.setup-tab .card-heading { margin-bottom: 10px; min-height: 28px; gap: 12px; }
.setup-tab .card-heading-links { min-width: 0; gap: 8px; }
.setup-tab .card-heading-links > h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-tab .card-heading-links > .icon { width: 20px; height: 20px; flex: none; }
.setup-tab .card-heading-links > .eyebrow, .setup-tab .card-heading-links > .chip-outline,
.setup-tab .card-heading > .eyebrow { flex: none; white-space: nowrap; margin: 0; }
.setup-tab .setup-pills { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.setup-tab .setup-count { font: 500 14px/1 var(--font-mono); color: var(--secondary); }
.setup-tab .setup-card-sub { margin: -4px 0 12px; font: 400 12px/1.5 var(--font-sans); color: var(--secondary); }

/* fields: labels above, two columns (one on a phone), same widths on every tab */
.setup-tab .form.setup-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; margin: 0; }
.setup-tab fieldset.form.setup-form { border: 0; padding: 0; margin: 0; min-width: 0; }
.setup-tab .setup-form > label, .setup-tab .setup-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.setup-tab .setup-label { font: 600 13px/1.3 var(--font-sans); color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-tab .setup-value { font: 400 14px/1.4 var(--font-sans); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.setup-tab .setup-value.mono { font-family: var(--font-mono); font-size: 13px; }
.setup-tab .setup-form .doc-entry { width: 100%; }
.setup-tab .setup-help { margin: 0; font: 400 12px/1.5 var(--font-sans); color: var(--secondary); }
.setup-tab .setup-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.setup-tab .setup-form label.toggle-row, .setup-tab .setup-form label.tick-mark, .setup-tab .setup-ticks label.tick-mark {
  flex-direction: row; align-items: center; gap: 8px; font: 400 14px/1.4 var(--font-sans); color: var(--ink); }
.setup-tab .setup-form label.toggle-row { min-height: 40px; }
.setup-tab .isok-form { margin-top: 0; gap: 0; }
.setup-tab .setup-form .isok-amount .isok-valuta { width: 72px; flex: none; }
.setup-tab .setup-form .isok-amount .doc-entry:last-child { flex: 1 1 auto; width: auto; min-width: 0; }
@media (max-width: 720px) {
  .setup-tab .form.setup-form, .setup-tab .setup-facts { grid-template-columns: minmax(0, 1fr); }
  .setup-tab .setup-head-actions { margin-left: 0; }
}

/* the logo: the box, then the upload button (the file input stays
   focusable; the button carries its ring), the chosen name and the hint */
.setup-tab .setup-logo { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.setup-tab .setup-logo .logo-box { width: 96px; height: 96px; }
.setup-tab .setup-logo-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.setup-tab .setup-logo-side [data-chosen]:empty { display: none; }
.setup-tab .setup-form label.setup-upload { flex-direction: row; align-items: center; gap: 6px; width: fit-content; min-height: 32px;
  padding: 0 12px; font: 600 13px/1 var(--font-sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.setup-tab .setup-upload:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* folds inside a card: a hairline, then a violet summary with a chevron */
.setup-tab details.setup-fold { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline); min-width: 0; }
.setup-tab details.setup-fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 28px;
  font: 600 13px/1.3 var(--font-sans); color: var(--violet-text); white-space: nowrap; }
.setup-tab details.setup-fold > summary::-webkit-details-marker { display: none; }
.setup-tab details.setup-fold > summary::before { content: "\203A"; color: var(--secondary); font-size: 16px; line-height: 1;
  transition: transform var(--t-fast) var(--ease); }
.setup-tab details.setup-fold[open] > summary::before { transform: rotate(90deg); }
.setup-tab details.setup-fold[open] > summary { margin-bottom: 10px; }
.setup-tab details.card-fold > summary .setup-count { margin-left: 2px; }
.setup-tab .setup-fold-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.setup-tab .setup-fold-body > .report { margin: 0; }
.setup-tab .setup-fold-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup-tab .setup-fold-row .doc-entry { flex: 1 1 240px; max-width: 360px; }
.setup-tab .setup-fold-row .button { flex: none; }
@media (prefers-reduced-motion: reduce) { .setup-tab details.setup-fold > summary::before { transition: none; } }

/* encryption: the vaults' steps, the table of earlier keys, the way back */
.setup-tab fieldset.setup-vault { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.setup-tab fieldset.setup-vault[hidden] { display: none; }
.setup-tab .setup-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font: 400 13px/1.5 var(--font-sans); color: var(--body); }
.setup-tab .setup-cell-wrap { overflow-wrap: anywhere; }
.setup-tab .setup-key-name { min-width: 0; }
.setup-tab .setup-key-title { display: block; font: 600 15px/1.35 var(--font-sans); color: var(--ink); }
.setup-tab .setup-row-actions { text-align: right; white-space: nowrap; width: 1%; }
.setup-tab .setup-row-actions .button { white-space: nowrap; }
.setup-tab .setup-inline-form { display: block; margin: 6px 0 0; }
.setup-tab .setup-access-row > td { padding: 16px; }
.setup-tab .setup-back { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.setup-tab .setup-back-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.setup-tab .setup-back-text h3 { margin: 0; font: 600 14px/1.4 var(--font-sans); color: var(--ink); }
.setup-tab .setup-back .button { flex: none; white-space: nowrap; }

/* reporting: the link, the two texts side by side, the key */
.setup-tab .setup-ticks { margin-top: 12px; }
.setup-tab .setup-texts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 20px; align-items: start; margin: 0; }
.setup-tab .setup-label-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.setup-tab .setup-label-row .setup-label { flex: none; }
.setup-tab .setup-label-row .eyebrow { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .setup-tab .setup-texts { grid-template-columns: minmax(0, 1fr); } }

/* custom domain: the record values in 12px mono, the address to open */
.setup-tab .setup-records td.mono { font-size: 12px; }
.setup-tab .setup-open { margin-top: 12px; }
/* custom domain, the set-up fold: numbered steps, a table of records per
   hostname (its caption the kind and the name), notes, the lookups */
.setup-tab .setup-howto { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 16px;
  font: 400 13px/1.5 var(--font-sans); color: var(--body); }
.setup-tab .setup-howto > li { min-width: 0; padding-left: 4px; }
.setup-tab .setup-howto-step { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.setup-tab .setup-howto > li::marker { font: 600 14px/1.4 var(--font-sans); color: var(--ink); }
.setup-tab .setup-howto h3 { margin: 0; font: 600 14px/1.4 var(--font-sans); color: var(--ink); }
.setup-tab .setup-howto p { margin: 0; }
.setup-tab .setup-howto-records caption { caption-side: top; text-align: left; padding: 0 0 6px;
  font: 600 13px/1.4 var(--font-sans); color: var(--ink); }
.setup-tab .setup-howto-records caption .mono { font-weight: 500; }
.setup-tab .setup-howto-example { font: 400 12px/1.4 var(--font-sans); color: var(--secondary); }
.setup-tab .setup-howto-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.setup-tab .setup-howto-records .rr-line { margin-top: 2px; font-size: 12px; }
.setup-tab .setup-howto-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.setup-tab .setup-howto-notes .pill { margin-right: 4px; }
.setup-tab .setup-howto-commands { margin: 0; padding: 10px 12px; overflow-x: auto; background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--r-control); font: 400 12px/1.6 var(--font-mono); color: var(--ink); }

/* Setup restyle: organisation, integrations, import, export (2026-09-23) */
/* The cards of Domains (templates/domains.html, domain_edit.html), the
   import centre, the export centre and the CSV wizard (import_page.html,
   export.html, import_csv.html): the heading line, at most one 12px line,
   the content, the action row, spaced by gap and not by margins. */
.dom-card, .ie-card, .icsv-card { display: flex; flex-direction: column; gap: 10px; }
.dom-card > .card-heading, .ie-card > .card-heading, .icsv-card > .card-heading { margin: 0; }
.dom-line, .ie-line, .icsv-line { margin: 0; font-size: 12px; line-height: 1.5; color: var(--secondary); }
/* 4px of gap and the action row's own 12px above it: 16px between the fields and the row. */
.dom-form { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dom-card .field-help { margin-top: 4px; }
/* A table cell of two lines: the title 15px/600, below it the 12px line. */
.ie-table .rr-title, .dom-table .rr-title, .icsv-card .table .rr-title { display: block; }
.ie-table .rr-sub, .dom-table .rr-sub, .icsv-card .table .rr-sub, .dom-table .dom-note { display: block; margin-top: 2px; }
.ie-table .rr-meta { display: block; margin-top: 4px; }
.dom-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dom-name .rr-title { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dom-name .pill { flex: none; }
.ie-table td.ie-action, .dom-table td.ie-action, .icsv-card .table td.ie-action { width: 1%; text-align: right; white-space: nowrap; }
.ie-table td.ie-action form { display: inline-flex; margin: 0; }
/* The empty state: one row, the glyph, one sentence, one action, left aligned. */
.dom-card .is-empty, .ie-card .is-empty { min-height: 40px; padding: 0; gap: 8px; font-size: 14px; color: var(--body); }
.dom-table td .is-empty { min-height: 0; }
.dom-card .is-empty .icon, .ie-card .is-empty .icon { width: 16px; height: 16px; color: var(--secondary); flex: none; }
.dom-card .is-empty .card-link, .ie-card .is-empty .card-link { font-size: 14px; white-space: nowrap; flex: none; }
/* The CSV wizard's file field: the browser's own button drawn as a hairline button. */
.icsv-card input[type="file"].doc-entry { padding: 3px 4px; }
.icsv-card input[type="file"]::file-selector-button { height: 30px; margin-right: 10px; padding: 0 12px; cursor: pointer;
  font: 600 13px/1 var(--font-sans); color: var(--ink); background: var(--card);
  border: 1px solid var(--hairline); border-radius: var(--r-control); }
.icsv-card input[type="file"]::file-selector-button:hover { background: var(--canvas); }

/* Integrations (templates/links.html): per group a section heading line
   (the title, the mono count, "Only this group" at the right) and a grid of
   cards of one anatomy: the monogram and the name, one sentence, the fold
   with how it works, the state lines, and per connection one row with its
   pill at the left and its hairline actions at the right. Cards keep their
   own height (align-items: start). The .link-heading and .link-footer rules
   of the linked-documents block above are undone here for these cards. */
.link-group + .link-group { margin-top: 10px; }
.link-group-heading { min-height: 32px; margin-bottom: 10px; gap: 12px; align-items: baseline; }
.link-group-heading .eyebrow { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--secondary); white-space: nowrap; }
.link-group-heading .group-show { align-self: center; white-space: nowrap; font-size: 13px; }
.link-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; grid-auto-rows: auto; }
.link-card { height: auto; padding: 16px; gap: 10px; border: 1px solid var(--rule); border-radius: var(--r-card); }
.link-card .link-heading { display: flex; justify-content: flex-start; align-items: center; gap: 12px;
  min-height: 40px; padding-right: 0; }
.link-card .link-name { margin: 0; min-width: 0; font: 600 15px/1.3 var(--font-sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card .link-target { flex: none; font-size: 14px; line-height: 1.45; color: var(--body); }
.link-card .link-more > summary { position: static; width: auto; height: auto; border: 0; background: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 0; font: 600 13px/1.4 var(--font-sans);
  color: var(--violet-text); list-style: none; cursor: pointer; }
.link-card .link-more > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.link-card .link-more > summary .icon { transform: none; transition: transform var(--t-fast) var(--ease); }
.link-card .link-more[open] > summary .icon { transform: rotate(90deg); }
.link-card .link-explanation { margin: 8px 0 0; }
.link-card .link-state { gap: 4px; }
.link-card .link-state .card-sub { font-size: 12px; line-height: 1.5; }
.link-card .link-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0; min-height: 32px; font-size: 13px; }
.link-card .link-footer .pill { flex: none; font-size: 12px; padding: 3px 8px; }
.link-card .link-actions { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 6px; margin-left: auto; min-width: 0; }
.link-card .link-actions .ntf-inline { gap: 6px; }
.link-card .link-footer .button, .link-card .link-footer .button.small, .link-card .link-docs-form .button {
  min-height: 32px; padding: 0 12px; font: 600 13px/1 var(--font-sans); white-space: nowrap; flex: none;
  color: var(--ink); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-control);
  display: inline-flex; align-items: center; gap: 6px; }
.link-card .link-footer .button:hover, .link-card .link-docs-form .button:hover { background: var(--canvas); }
@media (prefers-reduced-motion: reduce) { .link-card .link-more > summary .icon { transition: none; } }
/* Setup restyle: logs, trust, notifications, account (2026-09-23) */
/* The pages Logs, Log export, Trust centre, Notification settings,
   Notifications, My account and Security as the brand book draws them
   (§23): the heading line of a card with its eyebrow, at most one 12px line
   under it, the content, the primary at the foot; cards 16px apart. */
.card .sp-line { display: block; margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--secondary); max-width: 100%; }
.card > .table-wrap + .sp-line, .card > form > .table-wrap + .sp-line { margin: 10px 0 0; }
.card .sp-line:empty { display: none; }
.sp-stack, div.tab-panel.sp-stack { display: flex; flex-direction: column; gap: 16px; }
/* A card that is itself the form keeps the card's own rhythm, not the
   page's gap between cards (.content > form). */
.content > form.card.sp-form { display: block; }
div.tab-panel.sp-stack[hidden] { display: none; }
.sp-strong { font-weight: 600; color: var(--ink); }
/* A closed fold for the long explanation a card keeps (the push of the log export). */
.sp-fold { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 10px; }
.sp-fold > summary { cursor: pointer; font: 600 13px/1.4 var(--font-sans); color: var(--violet-text); width: max-content; max-width: 100%; }
.sp-fold[open] > summary { margin-bottom: 8px; }
.sp-fold > p { margin: 0 0 8px; font-size: 12px; line-height: 1.55; color: var(--body); max-width: 860px; }
.sp-fold > p:last-child { margin-bottom: 0; }
/* Logs: the filter row -- the search takes the room, the action select, the
   two dates each with its mono label in the same line, Filter; all 40px. */
.logs-card .log-filter { align-items: center; }
.logs-card .log-filter .doc-entry { min-width: 0; }
.logs-card .log-filter .rr-search { flex: 1 1 160px; min-width: 150px; }
.logs-card .log-filter .rr-search .doc-entry { height: 40px; min-height: 40px; padding: 0 40px 0 14px; font-size: 14px;
  border: 1px solid var(--field-rule); border-radius: var(--r-control); background: var(--card); }
.logs-card .log-filter select.rr-filter { max-width: 180px; }
.logs-card .log-date { flex-direction: row; align-items: center; gap: 8px; flex: none; }
.logs-card .log-date .eyebrow { margin: 0; white-space: nowrap; }
.logs-card .log-date .doc-entry { height: 40px; min-height: 40px; width: 136px; padding: 0 8px; font-size: 14px;
  border: 1px solid var(--field-rule); border-radius: var(--r-control); background: var(--card); color: var(--ink); }
.logs-card .log-filter > .button { min-height: 40px; padding: 0 16px; font: 600 14px/1 var(--font-sans); flex: none; }
.logs-card .log-filter .rr-clear { white-space: nowrap; flex: none; }
.logs-card .log-detail { font-size: 13px; line-height: 1.45; color: var(--body); min-width: 220px; }
.logs-card .pagination { margin-top: 10px; }
.card .table td .empty-row { min-height: 40px; }
/* Trust centre: the decision beside a pending request, one line. */
.sp-decide { display: flex; align-items: center; gap: 6px; margin: 0; }
.sp-decide .sp-days { width: 72px; flex: none; }
/* Notifications: the group and its explanation stacked in the first column,
   wide enough that the explanation reads as a line and not a word per line;
   the organisation column's second line in the violet header. */
.ntf-prefs td.ntf-group { min-width: 240px; max-width: 360px; white-space: normal; }
.ntf-prefs td.ntf-group .rr-title, .ntf-prefs td.ntf-group .card-sub { display: block; }
.ntf-prefs td.ntf-group .card-sub { font-size: 12px; color: var(--secondary); margin-top: 2px; }
.ntf-prefs .ntf-th-sub { display: block; margin-top: 2px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .04em;
  text-transform: none; color: #fff; }
.ntf-table .rr-sub { display: block; margin-top: 2px; }
.card .input-grid.sp-fields { margin-top: 12px; }
/* My account and Security: the label column wide enough for the longest
   label in either language ("Tweefactorauthenticatie"). */
@media (min-width: 761px) {
  [data-account-card] .acc-field, [data-security-card] .acc-field { grid-template-columns: minmax(200px, 16rem) minmax(0, 1fr) auto; }
}
@media (max-width: 720px) {
  .logs-card .log-date { flex: 1 1 100%; }
  .logs-card .log-date .doc-entry { flex: 1 1 auto; width: auto; }
}

/* A desk row of another domain (core/domains.elsewhere): the title plain, the way there under it. */
.rr-id-link.is-away { color: var(--secondary); }
.rr-away { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--secondary); }
.rr-away .button.small { flex: none; }

/* Custom domain steps: what to copy stands in a mono box with its Copy button;
   the preview shows the two records as a provider's DNS list would. */
.setup-copy-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.setup-copy-value { font: 500 13px/1.4 var(--font-mono); color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-badge); padding: 3px 8px; word-break: break-all; min-width: 0; }
.setup-copy { flex: none; }
.setup-howto-map { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--violet); background: var(--violet-tint); font-size: 13px; color: var(--ink); }
.setup-preview { margin: 12px 0; padding: 12px; border: 1px dashed var(--rule); border-radius: var(--r-control); background: var(--canvas); }
.setup-preview figcaption { font-size: 13px; margin-bottom: 8px; }
.setup-preview-table { width: 100%; border-collapse: collapse; font: 500 12.5px/1.4 var(--font-mono); background: var(--card); }
.setup-preview-table th { text-align: left; font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--secondary); padding: 6px 10px; border-bottom: 1px solid var(--hairline); }
.setup-preview-table td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); color: var(--ink); word-break: break-all; }
.setup-preview-table tr:last-child td { border-bottom: 0; }

/* ---- People → Domains: the table in the shape of the tree (templates/domains.html,
   Rinat's design of 2026-09-23). Column one draws the tree: per level 30px, the
   chevron of level L centred at 28 + 30L, the name 18px to its right; guide lines
   1px in --rule join a row to its parent's chevron. Numbers right aligned in mono,
   the state a dot with its word, the footer the counts per level. ---- */
.dom-table { --dom-step: 30px; --dom-x0: 28px; }
.dom-table thead th { font: 600 13px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.dom-table tbody tr > td, .dom-table tbody tr:nth-child(even) > td { background: var(--card); }
.dom-table tbody tr:hover > td { background: var(--violet-tint); }
.dom-table tbody tr[hidden] { display: none; }
.dom-table th.dom-num, .dom-table td.dom-num { text-align: right; }
.dom-table td.dom-num { font-size: 14px; color: var(--ink); }
.dom-table td.dom-code { font-size: 14px; color: var(--ink); }
.dom-tree-cell { position: relative; min-width: 260px; max-width: 420px;
  padding-left: calc(var(--dom-x0) + var(--lv) * var(--dom-step) + 18px) !important; }
.dom-tree-cell .dom-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dom-tree-cell .rr-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.dom-badge { flex: none; white-space: nowrap; padding: 2px 6px; border-radius: 2px; background: var(--violet-tint);
  color: var(--violet-text); font: 600 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.dom-tree-cell .dom-note { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dom-tree-cell .dom-note.none { color: var(--secondary); }
.dom-guide { position: absolute; pointer-events: none; background: var(--rule); }
/* a parent's line running on past this row */
.dom-guide.dom-through { top: 0; bottom: 0; width: 1px; left: calc(var(--dom-x0) + var(--at) * var(--dom-step)); }
/* from the parent's chevron down to this row: to its middle when it is the last child */
.dom-guide.dom-up { top: 0; bottom: 0; width: 1px; left: calc(var(--dom-x0) + (var(--lv) - 1) * var(--dom-step)); }
.dom-guide.dom-up.last { bottom: 50%; }
/* across to the chevron, or to just before the name */
.dom-guide.dom-elbow { top: 50%; height: 1px; left: calc(var(--dom-x0) + (var(--lv) - 1) * var(--dom-step));
  width: calc(var(--dom-step) + 10px); }
.dom-guide.dom-elbow.to-toggle { width: calc(var(--dom-step) - 12px); }
/* from this row's chevron down to its first child */
.dom-guide.dom-down { top: calc(50% + 10px); bottom: 0; width: 1px; left: calc(var(--dom-x0) + var(--lv) * var(--dom-step)); }
.is-folded .dom-guide.dom-down { display: none; }
.dom-toggle { position: absolute; top: 50%; left: calc(var(--dom-x0) + var(--lv) * var(--dom-step) - 10px);
  transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: var(--secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dom-toggle:hover { color: var(--ink); background: var(--violet-tint); }
.dom-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round;
  stroke-linejoin: round; transition: transform var(--t-fast) var(--ease); }
.dom-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.dom-state { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--secondary); }
.dom-state .dom-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--disabled); flex: none; }
.dom-state.on { color: var(--green-text); }
.dom-state.on .dom-dot { background: var(--green); }
.dom-table tfoot td { background: var(--canvas); border-top: 1px solid var(--hairline); padding: 12px 16px; }
.dom-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--body); }
@media (prefers-reduced-motion: reduce) { .dom-toggle svg { transition: none; } }