/* 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, .workstrip-label { color: var(--secondary); font-size: .72rem; font-weight: 600; letter-spacing: .06em; }
.brand-sub { margin-left: auto; }
/* 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, .acc-label .icon, .sot-notice .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, .file-drop-title, .call-advisor-name { font-weight: 600; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.user-mail, .otb-fr-tile .otb-fr-name, .cc-second, .call-advisor-sub { font-size: 12px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-mail { line-height: 1.3; }
.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, .attn4-more { 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); }
/* The breadcrumb bar above the title of every portal page (core/crumbs.py,
docs/FLOWS.md 7.174): Back, a divider, the path on one line that never
wraps (a crumb gives way with an ellipsis). Below 768px: Back, the
divider, ••• with the crumbs in between, and the parent crumb. */
.crumb-bar { display: flex; align-items: center; gap: 12px; min-height: 32px; min-width: 0; }
.crumb-bar > .button.crumb-back { flex: none; height: 32px; min-height: 32px; padding: 0 14px 0 10px; gap: 6px; border-radius: 4px;
font: 600 14px/1 var(--font-sans); white-space: nowrap; text-decoration: none; }
.crumb-divider { flex: none; width: 1px; align-self: stretch; margin: 6px 0; background: var(--hairline); }
.crumbs { flex: 1 1 auto; min-width: 0; }
.crumbs ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; }
.crumb { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; color: var(--secondary); font: 400 14px/1.3 var(--font-sans); }
.crumb-middle { flex-shrink: 3; }
.crumb + .crumb::before { content: "\203A"; flex: none; margin: 0 8px; color: var(--secondary); }
.crumb > a, .crumb > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.crumb > a:hover { color: var(--ink); text-decoration: underline; }
.crumb-current { color: var(--ink); font-weight: 600; }
.crumb-more { display: none; position: relative; flex: none; }
.crumb-more-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px;
background: var(--neutral-tint); color: var(--body); font: 600 13px/1 var(--font-sans); letter-spacing: 1px; cursor: pointer; }
.crumb-more-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 200px; max-width: 280px; margin: 0; padding: 4px;
list-style: none; background: var(--card); border: 1px solid var(--hairline); border-radius: 4px; box-shadow: var(--shadow-float); }
.crumb-more-menu[hidden] { display: none; }
.crumb-more-menu a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-more-menu a:hover { background: var(--canvas); }
@media (max-width: 767px) {
.crumb-more { display: block; }
.crumb-middle, .crumb-current { display: none; }
.crumb-parent::before { display: none; }
}
@media print { .crumb-bar { display: none; } }
/* ----------------------------------------------------------------- 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, .otd-figure .otd-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-value { letter-spacing: -.02em; }
.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; }
.card-links { display: flex; gap: 16px; flex: none; white-space: nowrap; }
.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; }
/* ...but a card with a choice field or a record picker keeps its list of options whole (an absolute list
inside a scrolling card was cut off, 2026-10-20). */
.card:has(.link-pane) { overflow: visible; }
.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); }
/* ------------------------------------------------ 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, .trust-flash.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"]:not(.link-pane-entry), .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: 8px; }
.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; }
/* A statement in the editor (stcard, Rinat's design of 2026-10-31; templates/_statement_block.html): a card with the
violet edge; its heading line (code, folder, links, and on the right its order, comment mark and Edit), the panel
Edit opens, the change chip and the text, 10px apart. The version and changes views draw the same card. */
.statement-block, .srun-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-width: 0;
border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--card); }
.statement-block { margin: 8px 0; border-left: 3px solid var(--violet); scroll-margin-top: 72px; } /* a link to it lands under the sticky toolbar */
.statement-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; min-height: 32px; }
.statement-heading > .doc-flow-actions { margin-left: auto; flex: none; }
.statement-block > .dm-line { margin: 0; }
.doc-editor.statement { border: none; padding: 0; min-height: 24px; font-size: 15px; line-height: 1.6; }
.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 whole heading folds the group open or shut (it never opens a page);
the arrow shows the state. */
.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); }
/* An open group hangs its items on a guide line: 1px hairline under the
heading's icon (.55rem padding + half the 18px icon), drawn beside the
items only: a category eyebrow stands flush with the line's x and without
it, so every run of items has its own segment. The active item is a 2px
violet segment with its label violet 600 (no pill), a hovered item a
faint segment and a darker label. The rail's flyout copies sit outside
.side-group and keep their own look. */
.side-group > .side-nav-item, .side-group > .side-nav-heading { margin-left: calc(.55rem + 8px); }
.side-group > .side-nav-item { padding-left: 16px; font-size: .84rem; background: none;
border-radius: 0 var(--r-control) var(--r-control) 0; box-shadow: inset 1px 0 0 var(--hairline);
transition: box-shadow .12s, color .12s; }
.side-group > .side-nav-heading { padding-left: 0; }
.side-group > .side-nav-item:hover { background: none; color: var(--ink);
box-shadow: inset 2px 0 0 color-mix(in srgb, var(--violet-text) 35%, var(--hairline)); }
.side-group > .side-nav-item.active { background: none; color: var(--violet-text); font-weight: 600;
box-shadow: inset 2px 0 0 var(--violet-text); }
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; }
/* a form row that may wrap onto a second line, and the one field in it that takes the room left */
.rule-form.wraps { flex-wrap: wrap; }
.rule-form .grows { flex: 1; min-width: 220px; }
/* a card whose parts stand 10px apart by its gap (heading, table, form, note), never by their margins */
.card.card-stack { display: flex; flex-direction: column; gap: 10px; }
.card.card-stack > .card-heading { margin-bottom: 0; }
/* a table row opened for editing in place (its form under the row it edits) */
.data-table > tbody > tr.row-editing > td, .data-table > tbody > tr.row-editing:hover > td { background: var(--canvas); }
.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); }
/* 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); }
/* A statement's panel (stcard): folder, linked requirements, linked controls -- three labelled groups side by side on
the violet tint, stacked on a narrow screen -- and the action row across them, Delete on the left and Done. */
.statement-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 24px; align-items: start; padding: 16px; background: var(--violet-tint); border-radius: var(--r-control); }
.statement-panel[hidden] { display: none; }
.statement-panel > .card-actions { grid-column: 1 / -1; margin: 0; }
.stmt-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.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; }
@media (max-width: 980px) { .statement-panel { grid-template-columns: 1fr; } }
.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.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; }
/* 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; }
/* 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; }
.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-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. */
/* 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, .read-content th { border: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.doc-editor th, .doc-editor td { padding: .45rem .65rem; }
.doc-editor th, .read-content 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: 18px; }
/* 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, .read-cover .read-name { 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, .ote-step.ready, .call-button.booked { 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 ol { margin: 0; padding-left: 1.3rem; column-count: 2; column-gap: 2rem; }
/* chapters numbered in their own titles: no second number from the list (FLOWS 7.544) */
.read-table_of_contents ol.read-toc-own { list-style: none; padding-left: 0; }
.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 td { border: 1px solid var(--hairline);
padding: .5rem .7rem; text-align: left; vertical-align: top; }
.read-content th { padding: .5rem .7rem; }
.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; }
}
/* Matrix colours. */
.cell-layer { background: #e3f4e6 !important; }
.cell-middle { background: #fdf1dc !important; }
.cell-high { background: #fde5e5 !important; }
.cell-score { font-weight: 700; text-align: center; }
/* Form sections (2026-09-26): the one set of building blocks every form is
drawn with, so a change of look is one edit here. The look is that of the
newest designs: the register and the risk create forms, the risk
settings, the control page.
.form-section a block of a padless form card; a hairline between blocks
.form-section-head its heading line: an h2/h3 of 15px/600 and a
.form-section-sub (13px, soft); a .form-fold-all on its right
.form-grid fields in columns of at least 210px, or .cols-2/3/4;
.form-wide takes the whole row; one column on a phone
.form-field a label over its control, 8px apart; .form-field-head a
label with an action on its right; .form-fieldset a group
.form-label the label, 14px/500 ink (--text-label); with .eyebrow the
mono uppercase label; .form-required its red mark,
.form-soft a soft note in it ("· optional")
.form-hint one line of 12px under a field or at the top of a fold
.form-error the message of a field in error, in words
.form-fold a fold (details) of a long form: its summary, the
.form-fold-digest of what is filled in, .form-fold-fields
a stack; .form-fold-all opens every fold, .form-fold-bar holds it
.form-more "More sections": a .form-more-title over a .form-more-list
of .form-more-row (.form-more-toggle with .form-more-chevron,
.form-more-name and .form-more-state; .form-more-region)
and the action row, .card-actions, below. */
.form-section { display: flex; flex-direction: column; gap: 16px; padding: 16px; min-width: 0; }
.form-section + .form-section { border-top: 1px solid var(--hairline); }
.form-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 24px; margin: 0; }
.form-section-head > h2, .form-section-head > h3, .form-section-head > .cp-legend-title, .rrc-score-head h2 { margin: 0; font: 600 15px/1.3 var(--font-sans); color: var(--ink);
white-space: nowrap; flex: none; }
.form-section-head > .form-fold-all { margin-left: auto; }
.form-section-sub, .rs-line, .rcr-soft, .attn4-group-name, .spotlight-sub, .dash-fw-counts, .dash-sub, .dash-foot, .form-more-title, .tree-empty, .fstep-nav-dir, .data-table .rr-score .rr-sub, .isok-kv dt, .member-text .mono, .acct-meta-label, .ro-score-n, .ro-gap-id, .ro-level-range, .fwl-table td.fwl-version, .rpbd-status-count, .sck-group-tally, .sck-group-sub { font: 400 13px/1.4 var(--font-sans); }
.form-section-sub, .rs-line, .rcr-soft, .dash-fw-counts, .dash-sub, .dash-foot, .form-more-title, .tree-empty, .fstep-nav-dir, .isok-kv dt, .member-text .mono, .acct-meta-label, .ro-score-n, .ro-gap-id, .ro-level-range, .fwl-table td.fwl-version, .rpbd-status-count, .sck-tally, .sck-group-tally, .sck-group-sub { color: var(--secondary); }
.form-section-sub { min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; align-items: start; }
.form-grid > * { min-width: 0; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.form-wide { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; }
.form-field[hidden], .form-fieldset[hidden] { display: none; }
.form-field .doc-entry { width: 100%; }
.form-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-fieldset, .setup-tab fieldset.form.setup-form, .setup-tab fieldset.slx-many, .rn-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-fieldset > legend { padding: 0; margin-bottom: 8px; }
.form-label, .form-label.eyebrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; }
.form-label:not(.eyebrow) { font: var(--text-label); color: var(--ink); }
.form-required { color: var(--red-text); font-weight: 600; }
.form-soft { font-style: normal; font-weight: 400; color: var(--secondary); text-transform: none; letter-spacing: 0; min-width: 0; }
.form-hint, .list-note, .share-ring-text small, .cmap-heat-sub, .soly-conv-link .soly-conv-meta, .setup-tab .setup-howto-example, .form-error, .assistant-note, .setup-tab .setup-help, .setup-tab .setup-card-sub, .facts dt, .step-meter-line { font: 400 12px/1.4 var(--font-sans); }
.form-hint, .list-note, .cmap-heat-sub, .soly-conv-link .soly-conv-meta, .setup-tab .setup-howto-example, .assistant-note, .setup-tab .setup-help, .setup-tab .setup-card-sub, .facts dt, .step-meter-line { color: var(--secondary); }
.form-hint, .list-note, .cmap-heat-sub, .form-error, .assistant-note, .setup-tab .setup-help { margin: 0; }
.form-error { color: var(--red-text); }
/* recommended, never asked (FLOWS 7.151): the word after a label and its hint in amber */
.form-soft.form-recommended, .form-hint.form-recommended { color: var(--amber-text); }
.form-fold { margin-top: 10px; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 0 12px; }
.form-fold.form-field { gap: 0; }
.form-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
gap: 12px; min-height: 36px; }
.form-fold > summary::-webkit-details-marker { display: none; }
.form-fold[open] > summary { border-bottom: 1px solid var(--hairline); margin-bottom: 8px; }
.form-fold > .form-grid { padding-bottom: 12px; }
.form-fold > .form-hint { margin-bottom: 10px; }
.form-fold-digest { flex: 1; min-width: 0; text-align: right; font: 400 12px/1.4 var(--font-mono); color: var(--secondary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-fold[open] > summary .form-fold-digest { display: none; }
.form-fold-fields { display: flex; flex-direction: column; gap: 16px; padding-bottom: 12px; }
.form-fold-bar { display: flex; justify-content: flex-end; padding: 0 0 8px; }
.form-fold-all, .cp-link, .list-toggle, .intg-how { font: 600 13px/1 var(--font-sans); color: var(--violet-text); background: none; border: 0; cursor: pointer; white-space: nowrap; flex: none; }
.form-fold-all { padding: 8px 0; }
.form-fold-all:hover { text-decoration: underline; }
.form-section.form-more { gap: 10px; }
.form-more-list, .control-history .hist-items, .rdmp-links, .mr-checklist, .review-list, .inbox-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-card); }
.form-more-row + .form-more-row { border-top: 1px solid var(--hairline); }
.form-more-heading { margin: 0; font: inherit; }
.form-more-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; margin: 0;
background: none; border: 0; border-radius: var(--r-card); cursor: pointer; text-align: left; color: var(--ink);
font: 600 14px/1.3 var(--font-sans); }
.form-more-toggle:hover { background: var(--violet-tint); }
.form-more-chevron, .attn4-chevron, .scp-chevron { width: 16px; height: 16px; flex: none; color: var(--secondary); fill: none; stroke: currentColor;
stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast) var(--ease); }
.form-more-toggle[aria-expanded="true"] .form-more-chevron { transform: rotate(90deg); }
.form-more-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-more-state, .assistant-full, .page-title-timing { flex: none; white-space: nowrap; font: 400 13px/1.3 var(--font-sans); }
.form-more-state, .page-title-timing { color: var(--secondary); }
.form-more-region { padding: 4px 16px 16px 44px; }
@media (max-width: 1180px) { .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
.form-grid.cols-2, .form-grid.cols-3, .form-grid.cols-4, .form-grid.cols-5 { grid-template-columns: minmax(0, 1fr); }
.form-more-region { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) { .form-more-chevron { transition: none; } }
.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; }
.cell-lightgreen { background: #F1F9E3 !important; }
/* 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, .flow-figure { border: 1px solid var(--hairline); border-radius: 10px; background: var(--card); padding: .85rem 1rem; }
.control-block { 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, .otd-figure .otd-value { 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, .workstrip-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, .acc-label .icon, .sot-notice .icon, .evv-title .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, .otd-figure .otd-value { font: var(--text-stat); }
.stat-value { 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. */
.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; }
.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; }
/* 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.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, .trust-flash.error { background: var(--red-tint); color: var(--red-text); }
.report.customer_view { background: var(--violet-tint); color: var(--violet-text); }
.report.warning { background: var(--amber-tint); color: var(--amber-text); } /* saved, something still to know (FLOWS 7.151) */
.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. */
.control-block, .auto-section, .doc-paper, .read-page, .doc-editor, .relation-section, .relation-row, .relation-block, .statement-block, .doc-comment, .flow-figure {
border-radius: var(--r-card); }
.control-block, .flow-figure { 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); }
.relation-section { background: var(--amber-tint); border-color: var(--amber); }
.cisoly-managed { background: var(--violet-tint); color: var(--violet-text); border-radius: var(--r-badge); }
/* 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, .button[aria-disabled="true"] {
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, .doc-changes-toggle.loading, .chg-switch.loading { position: relative; pointer-events: none; display: inline-flex;
align-items: center; justify-content: center; gap: 8px; }
.button.loading::before, .doc-changes-toggle.loading::before, .chg-switch.loading::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
background: url("data:image/svg+xml,") 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); }
.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