ran
134px past the card's edge. Same defect as the pane itself, one element in —
content that cannot fit its container and was never told it may break. This
one predates the pass (the pane was already stacked at phone widths), but it
is inside the block being fixed and it is one declaration. */
.tk-dlwrap .alert code {overflow-wrap:anywhere}
/* The bare-count pill exists in every rendering and shows only in the strip
below; the column keeps the sentence it always had. */
.tk-dl-n {display:none}
/* ---- narrow: the picker becomes a strip of pills above the pane ---------- */
@container tkdl (max-width: 619.9px) {
.tk-dlwrap .tk-split {grid-template-columns:minmax(0,1fr);gap:.9rem}
.tk-dlwrap .tk-dllist {display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
/* Same pill as .tk-dt-chip (6048) — the vocabulary this module already uses
for "pick one of these". It wraps rather than scrolling sideways, which is
where it parts company with .tk-dt-chips at 6202: those chips FILTER a
table you came to read, so hiding one costs you a filter. These ARE the
things this section manages, and a distribution list you cannot see is a
distribution list you cannot edit or delete. */
/* No `white-space:nowrap` here, and max-width is why: measured at a 375px
viewport the block's container is 237px, and "Μεγάλα καταστήματα (Α΄
κατηγορία)" is a 271px pill. Nowrap sent it 34px past the card's content
box — the same class of overflow this pass exists to remove, reintroduced
one element down. Flex only shrinks an item that cannot fit a line ALONE,
so the other six still break to the next line at full width and only the
oversized one wraps its own label. break-word is the floor for a name
with no space in it; nothing in the estate is close, and a pill outside
the card is worse than a split word. */
.tk-dlwrap .tk-dllist .tk-dlitem {
display:inline-flex;align-items:baseline;gap:.45rem;width:auto;
max-width:100%;min-width:0;overflow-wrap:break-word;
border:1px solid var(--border);border-radius:999px;background:var(--surface);
padding:.3rem .65rem;font-size:var(--text-sm);line-height:1.35;color:var(--text-dim)}
.tk-dlwrap .tk-dllist .tk-dl-n {flex:0 0 auto}
/* The count switches rendering here, and this is the whole reason the strip
fits. "104 καταστήματα" ×7 is 600px of the 1596px the pills needed — 38%
of the strip spent writing the word "καταστήματα" seven times — and it
packed to SIX rows, which is a vertical list wearing pills. The bare
number in a pill is 175px and packs to three. It is also what this module
already does: see .tk-dt-chip-n at 6058, "the count rides in its own pill
and never inside the sentence". The sentence is still on the button's
aria-label, so display:none here loses nothing. */
.tk-dlwrap .tk-dllist .tk-dlitem span {display:none}
.tk-dlwrap .tk-dllist .tk-dl-n {
display:inline-block;font-weight:700;font-size:var(--text-xs);color:var(--text);
background:var(--surface-3);border-radius:999px;padding:.02rem .4rem;
font-feature-settings:'tnum'}
.tk-dlwrap .tk-dllist .tk-dlitem.is-on .tk-dl-n {background:var(--bg);color:var(--text)}
/* The base :hover and .is-on are (0,2,0) and would lose to the (0,3,0)
above, so they are restated at the pill's own weight. */
.tk-dlwrap .tk-dllist .tk-dlitem:hover {
background:var(--surface-2);border-color:var(--border-hover);color:var(--text)}
.tk-dlwrap .tk-dllist .tk-dlitem:focus-visible {outline:2px solid var(--accent);outline-offset:1px}
.tk-dlwrap .tk-dllist .tk-dlitem.is-on {
background:var(--text);border-color:var(--text);color:var(--bg);font-weight:600}
.tk-dlwrap .tk-dllist .tk-dlitem.is-on:hover {
background:var(--text);border-color:var(--text);color:var(--bg)}
}
/* If a browser has no container queries it also has no container-type, so the
block would silently keep the 114px pane. Stack it instead: 762px is tall,
but every store name reads. Nothing shipped in the last four years takes
this branch. */
@supports not (container-type: inline-size) {
.tk-dlwrap .tk-split {grid-template-columns:minmax(0,1fr);gap:.9rem}
}
/* ============================================================================
TASKS — Settings: the page pays its width to the data (.tk-set-doc)
============================================================================
MEASURED, harness `settings`, admin, light, 1158px viewport, BEFORE:
.tk-doc grid 444px 320px
reading column 444px → 386px of content inside .tk-col's padding
the rail 320px wide, 340px tall: five counts, two buttons
.tk-listrow (managers) +158 to +195px past their card — EVERY row
.tk-col +167px, as a consequence
at 375px 10 elements over, #page-content itself among them
A store-manager row is `019 · Πειραιάς · a.stergiou@kotsovolos.gr ·
Διευθυντής · [Remove]`: a store code, a town, an address, a job title and a
button — 544-581px of content, measured. It was given 386px because 320px
of a 788px page went to a rail holding five counts and two navigation
buttons. **That is the cause. The overflowing row is what it looks like.**
This is the third defect in a day downstream of the same allocation. The
other two — a distribution-list pane resolved to 114px (6303) and, at phone
widths, a reading column resolved to 0px (6177) — were each fixed where
they showed, which is why a third arrived. Fixing the split is the fix.
WHAT CHANGED: the rail is gone from this page, and only this page.
- Its five counts are not lost. Three name the size of a register and ride
on that register's own index entry as a pill; two describe a section and
ride in that section's head. Every one of them is now beside the thing it
counts instead of 400px away from it.
- Its two buttons are not lost. They are the masthead's actions, in
.page-header — the product's own "title left, actions right" row.
- The index stays where it already was, at the top of the reading column,
and is what the page is navigated by. It costs ~40px of height and hands
~320px back to every register below it.
WHY NOT FIX `.tk-doc` FOR ALL SIX PAGES: the other five rails carry facts
and actions with no other home — the detail page's Needs-attention list,
its six task actions. This page's rail carried counts that have a better
home and two links. So the rule is on .tk-set-doc: one page's layout, not
six pages' primitive.
WHY NO max-width ON THE COLUMN: .tk-col caps at 820px because a paragraph
needs a measure. This page is four registers and a danger zone; its rows
are cells pinned left and right, not prose. So the cap comes off the column
and goes on the prose instead — the paragraphs keep a measure, the rows
take the room. At 1440px that is a 1062px column with 72ch help text in it.
2 new class names, checked against the 353 .tk-* already in this file:
.tk-set-fact and the container name `tkset`. Both free; .tk-set-doc,
.tk-set-idxb and .tk-listrow below are the ones already defined above.
Not one literal colour — every value is a var(--token) or a length.
============================================================================ */
/* --- one column, full width ------------------------------------------- */
.tk-set-doc {grid-template-columns:minmax(0,1fr)}
/* container-type so the rows can ask THIS column how much room they have
rather than asking the viewport, which is the mistake the .tk-dlwrap block
(6303) was written to undo one element deeper in the same page. */
.tk-set-doc > .tk-col {max-width:none;container-type:inline-size;container-name:tkset}
/* The measure moves from the column to the prose: every help line under a
section head is a , and no
on this page is data. */
.tk-set-doc p {max-width:72ch}
/* .page-header is a full-bleed page masthead by default and sits on the page
ground; here it sits inside a card that already provides 1.6rem of air. */
.tk-set-doc .page-header {margin:0 0 1.15rem;padding-bottom:.95rem}
/* --- the index entries carry their register's size --------------------- */
/* .tk-set-idxb was a button with a text node in it; it is now [label][count],
so it needs the gap it never had. The pill is .tk-dt-chip-n — the count in
its own pill and never inside the sentence (6058), which is how this module
has stated a count since the detail page, and it keeps plural agreement out
of the strings in both languages. */
.tk-set-idxb {gap:.4rem}
.tk-set-idxb > span {min-width:0}
.tk-set-idxb > .tk-dt-chip-n {flex:0 0 auto}
/* --- a number that belongs to one section rides in its head ------------- */
/* "Shown in the editor 6" and "Stores without email 12" are not the size of a
register, so they are not index entries; they sit in the head of the
section they are about, beside its buttons. .tk-seclabel is uppercase with
letter-spacing — that is right for the heading and wrong for a sentence, so
the fact turns both off for itself. */
.tk-set-fact {display:inline-flex;align-items:center;gap:.4rem;
text-transform:none;letter-spacing:0;font-weight:500;color:var(--text-faint)}
/* A head is now a heading plus a fact plus up to two buttons. It had no
flex-wrap, so at 375px that would have been the next thing over the edge. */
.tk-set-doc .tk-seclabel {flex-wrap:wrap;row-gap:.5rem}
/* --- the rows may wrap ------------------------------------------------- */
/* Width alone fixes 1158px and 1440px. It cannot fix 375px: five cells and a
button do not fit 237px at any allocation, so the row has to be allowed to
become two or three lines instead of one long one. This is the same
statement .tk-dlwrap already makes for the pane's rows (6376), promoted
from the one register that needed it to the page whose registers all do.
An address is one unbreakable token, so it is also told it may break —
without that, flex refuses to shrink the cell below the token's own width
and the row leaves the card again at the narrowest widths. */
.tk-set-doc .tk-listrow {flex-wrap:wrap;row-gap:.3rem}
.tk-set-doc .tk-listrow > span {min-width:0;overflow-wrap:anywhere}
/* The pane's rows keep the tighter row-gap they were measured with: this
block's rule is later in the file and would otherwise silently retune it. */
.tk-set-doc .tk-dlwrap .tk-listrow {row-gap:.1rem}
/* .tk-spacer pushes a row's meta to the right edge, which is what makes a
register read as a table — while the row is one line. Once it wraps, the
auto margin strands the address alone and right-aligned on a line of its
own. So it holds above the width where a full row fits on one line and lets
go below it. 620px is that width, and it is the same number, derived the
same way, as the distribution-list threshold at 6357: a data row that fits
on one line. Measured: the widest manager row needs 581px.
This one needs no @supports twin, unlike the dl block's: the wrapping
above is unconditional, so a browser with no container queries still
keeps every row inside the card and only misses the alignment.
Cosmetic, not overflow. */
@container tkset (max-width: 619.9px) {
.tk-set-doc .tk-listrow > .tk-spacer {margin-left:0}
}
/* =========================================================================
Daily Info — the template-driven announcement composer
-------------------------------------------------------------------------
Appended, never edited above this line. Not one literal colour: every
value is a token, so both themes follow without a second rule. The email
HTML the composer produces DOES carry literal hex, inline — mail clients
have no custom properties — but that lives in the module, not here.
========================================================================= */
/* --- picking a template ------------------------------------------------- */
/* auto-fill + minmax, so the gallery reflows against whatever width its card
actually has. No breakpoint to key to the wrong element. */
.di-tpl-grid {
display: grid; gap: .75rem; margin-top: .75rem;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.di-tpl-card {
display: flex; flex-direction: column; gap: .5rem;
padding: 1rem; cursor: pointer;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: border-color .15s var(--ease), background .15s var(--ease);
}
.di-tpl-card:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.di-tpl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.di-tpl-card .btn { align-self: flex-start; margin-top: auto; }
.di-tpl-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.di-tpl-name { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); }
.di-tpl-desc { margin: 0; font-size: var(--text-md); line-height: 1.5; color: var(--text-dim); }
.di-tpl-meta { font-size: var(--text-sm); color: var(--text-faint); }
.di-tpl-blank { border-style: dashed; }
.di-tpl-kind {
display: inline-block; padding: .1rem .5rem; border-radius: 999px;
font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em;
text-transform: uppercase;
background: var(--surface-3); color: var(--text-dim);
}
.di-tpl-kind-newsletter { background: var(--accent-soft); color: var(--accent); }
.di-tpl-kind-form { background: var(--info-soft); color: var(--info); }
.di-tpl-kind-list { background: var(--success-soft); color: var(--success); }
.di-tpl-kind-blank { background: var(--surface-3); color: var(--text-faint); }
/* The template this announcement is written with, named on the editor. */
.di-tpl-line {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
margin-bottom: 1rem;
}
/* --- what stops a publish, in words ------------------------------------- */
/* Never a disabled button with no reason. The button stays live and this
note names the blocker; the jump goes to it. */
.di-blocker {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
margin: 0 0 1rem; padding: .6rem .85rem;
background: var(--warn-soft);
border: 1px solid var(--warn);
border-radius: var(--radius-sm);
color: var(--text);
font-size: var(--text-md); line-height: 1.5;
}
.di-blocker[hidden] { display: none; }
.di-blocker-icon {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 1.25rem; height: 1.25rem; border-radius: 50%;
background: var(--warn); color: var(--text-inverse);
font-weight: 700; font-size: var(--text-sm);
}
.di-blocker-text { flex: 1 1 24ch; min-width: 0; }
.di-blocker-more { color: var(--text-faint); margin-left: .35rem; }
.di-blocker-jump { flex: 0 0 auto; }
/* The control the note is about, once the author has been sent to it. */
.di-is-bad,
.di-is-bad.input,
.di-is-bad.textarea { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); }
/* --- the composer body -------------------------------------------------- */
/* The composer sits in a grid column that is often far narrower than the
viewport, so anything responsive in here asks THIS element how much room
there is. A viewport query would measure the wrong box — that mistake has
cost this project three bugs. */
.di-compose { container-type: inline-size; container-name: dicomp; min-width: 0; }
.di-compose-hint { margin: 0 0 .75rem; font-size: var(--text-md); color: var(--text-dim); }
.di-compose-fields {
margin-bottom: 1rem; padding: .85rem;
background: var(--surface-2);
border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.di-compose-fields-head {
font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--text-dim); margin-bottom: .25rem;
}
.di-canvas-host { min-width: 0; }
/* --- fields ------------------------------------------------------------- */
.di-fieldset,
.di-field-grid { display: grid; gap: .75rem; min-width: 0; }
.di-fieldset { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.di-field-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.di-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; min-width: 0; }
.di-field-wide { grid-column: 1 / -1; }
.di-field-label {
display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
font-size: var(--text-md); font-weight: 500; color: var(--text);
}
.di-field-help { font-size: var(--text-sm); line-height: 1.5; color: var(--text-faint); }
.di-req {
font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em;
text-transform: uppercase; color: var(--danger);
}
.di-opt { font-size: var(--text-xs); color: var(--text-faint); }
.di-check-group { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.di-check {
display: inline-flex; align-items: center; gap: .4rem;
font-size: var(--text-md); color: var(--text-dim); cursor: pointer;
}
.di-file-row { display: flex; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.di-file-row > .input { flex: 1 1 12ch; min-width: 0; }
.di-file-pick { flex: 0 1 15ch; min-width: 0; font-size: var(--text-sm); }
/* Labels beside their controls once the composer column is wide enough to
read that way, and stacked when it is not. A browser without container
queries simply keeps the stacked layout, which is the safe one — nothing
overflows either way, so this needs no @supports twin. */
@container dicomp (min-width: 520px) {
.di-fieldset > .di-field {
grid-template-columns: 11rem minmax(0, 1fr);
align-items: start; column-gap: 1rem;
}
.di-fieldset > .di-field > .di-field-label { padding-top: .45rem; }
.di-fieldset > .di-field > .di-field-help { grid-column: 2; }
}
/* --- the repeating rows of a list announcement -------------------------- */
.di-rows { display: flex; flex-direction: column; gap: .75rem; }
.di-row {
padding: .75rem; min-width: 0;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.di-row-head {
display: flex; align-items: center; justify-content: space-between;
gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.di-row-num {
font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--text-dim);
}
.di-row-tools { display: flex; gap: .3rem; }
.di-rows-foot { margin-top: .75rem; }
/* --- publish preview ---------------------------------------------------- */
.di-sample-list {
font-family: 'JetBrains Mono', ui-monospace, monospace;
max-height: 120px; overflow-y: auto;
padding: .25rem .5rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-xs);
}
.di-sample-more { font-style: italic; margin-top: .25rem; color: var(--text-faint); }
/* --- Daily Info: how an announcement goes out --------------------------- */
/* Email and Teams are switches; the app is a fact, because the announcement
IS the feed entry. The block is drawn as three cards rather than three bare
ticks so that the locked one can carry its own sentence and not read as a
control somebody broke. Every colour is a token — nothing here is literal,
so both themes come out of the same rules. */
.di-ch {
min-width: 0;
padding: .75rem .85rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.di-ch-head {
display: flex; align-items: center; justify-content: space-between;
gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem;
}
.di-ch-head .form-label, .di-ch-head .tk-gs-lab { margin: 0; }
/* The container is this wrapper, not the block: containment is then scoped to
the three labels and cannot reach the job-title picker underneath. A browser
without container queries keeps the stacked column, which is the safe one. */
.di-ch-cols { container-type: inline-size; container-name: dich; min-width: 0; }
.di-ch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
@container dich (min-width: 30rem) {
.di-ch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.di-ch-opt {
display: flex; align-items: flex-start; gap: .55rem; min-width: 0;
padding: .55rem .65rem; cursor: pointer;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
transition: background .12s ease, border-color .12s ease;
}
.di-ch-opt:hover { border-color: var(--accent); }
.di-ch-opt > input { margin: .15rem 0 0; flex: 0 0 auto; }
.di-ch-opt-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.di-ch-opt-name { font-size: var(--text-md); font-weight: 600; color: var(--text); }
.di-ch-opt-help { font-size: var(--text-sm); line-height: 1.4; color: var(--text-dim); }
.di-ch-opt.is-on { background: var(--accent-soft); border-color: var(--accent); }
/* Locked, not disabled-looking-broken: it is on, it stays on, and the help
line under the name is the reason. */
.di-ch-opt.is-locked { cursor: default; }
.di-ch-opt.is-locked:hover { border-color: var(--accent); }
.di-ch-opt.is-locked > input { cursor: default; }
/* "App only", named. Pressed it is the current choice and it was meant. */
.di-ch-only[aria-pressed="true"], .di-ch-only.is-on {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--text);
}
/* The outcome, in the blocker's voice but never in its colour: email off is a
normal choice that happens to be quiet, not a warning. */
.di-ch-outcome {
margin: .6rem 0 0; padding: .5rem .65rem;
font-size: var(--text-md); line-height: 1.5; color: var(--text-dim);
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius-xs);
}
.di-ch-outcome-name { color: var(--text); }
.di-ch-subject { margin: .7rem 0 0; }
.di-ch-subject[hidden] { display: none; }
.di-ch-subject .form-label { display: block; margin-bottom: .25rem; }
/* The subject as it will arrive, in the publish dialog. */
.di-ch-subject-line {
margin: .25rem 0 .5rem; padding: .35rem .5rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
overflow-wrap: anywhere;
}
/* The publish dialog's "nobody is emailed" note — stated, not warned. */
.di-ch-quiet {
margin: 0 0 .5rem; padding: .5rem .65rem;
font-size: var(--text-md); line-height: 1.5; color: var(--text-dim);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
}
.di-ch-quiet > strong { color: var(--text); }
/* The marker on a template that does not email by default. */
.di-ch-tag {
display: inline-block; padding: .1rem .45rem; margin-left: .4rem;
font-size: var(--text-sm); font-weight: 600; line-height: 1.6;
color: var(--text); background: var(--accent-soft);
border: 1px solid var(--accent); border-radius: 999px;
white-space: nowrap;
}
/* =========================================================================
Daily Info — files
A `file` field holds a file now, so both ends of it need a shape: the chip
the author sees once they have chosen one, and the card a reader meets in
the feed. Every colour is a token, so both themes come out of one set of
rules. Both breakpoints measure the box the thing is actually in, never the
viewport — a file card can sit inside one cell of a list announcement's
table, which is narrow long before the window is.
========================================================================= */
/* --- the author's control ------------------------------------------------ */
.di-filefield { min-width: 0; }
.di-filefield:focus { outline: none; }
/* The field is what gets marked when it is the reason a publish is blocked,
and it has no border of its own for the shared .di-is-bad rule to colour —
so the ring that rule casts is given something to follow. */
.di-filefield.di-is-bad { border-radius: var(--radius-xs); }
.di-filechip {
display: flex; align-items: center; gap: .55rem; min-width: 0;
padding: .45rem .55rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
}
.di-filechip-busy { opacity: .7; }
.di-filechip-ico { flex: 0 0 auto; font-size: 1.1em; line-height: 1; }
.di-filechip-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.di-filechip-name {
font-size: var(--text-md); font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.di-filechip-meta { font-size: var(--text-sm); color: var(--text-dim); }
.di-filechip-tools {
display: flex; gap: .3rem; flex: 0 0 auto; margin-left: auto; flex-wrap: wrap;
}
/* --- the reader's card --------------------------------------------------- */
.di-filecards { display: flex; flex-direction: column; gap: .6rem; }
/* The wrapper is the container and the card is what changes, because an
element cannot answer a query about its own width. */
.di-filecard-wrap {
container-type: inline-size; container-name: difile;
min-width: 0; margin: .35rem 0;
}
.di-filecard {
display: flex; flex-direction: column; gap: .5rem; min-width: 0;
padding: .6rem .7rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.di-filecard-main { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.di-filecard-ico { flex: 0 0 auto; font-size: 1.35em; line-height: 1; }
.di-filecard-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.di-filecard-name {
font-size: var(--text-md); font-weight: 600; color: var(--text);
overflow-wrap: anywhere;
}
.di-filecard-meta { font-size: var(--text-sm); color: var(--text-dim); }
.di-filecard-actions { display: flex; gap: .35rem; flex-wrap: wrap; min-width: 0; }
.di-filecard-actions > .btn { white-space: nowrap; }
.di-filecard-note {
font-size: var(--text-sm); line-height: 1.45; color: var(--text-faint);
}
/* The actions move up beside the name once the box the card is in has room
for both. A browser without container queries keeps the stacked layout,
which is the one that always fits. */
@container difile (min-width: 26rem) {
.di-filecard { flex-direction: row; align-items: center; flex-wrap: wrap; }
.di-filecard-main { flex: 1 1 12rem; }
.di-filecard-actions { flex: 0 0 auto; }
.di-filecard-note { flex: 1 1 100%; }
}
/* The frame Print loads the file into. Off-screen rather than hidden: a frame
with display:none has no layout and a browser will not print it. It is the
frame that gets printed, which is how Print produces the file and not a
picture of the page around it. */
.di-print-frame {
position: fixed; left: -10000px; top: 0;
width: 794px; height: 1123px; /* A4 at 96dpi — a page-shaped page */
border: 0;
}
@media print {
/* If somebody prints the app itself, the off-screen copy is not part of it. */
.di-print-frame { display: none; }
}
/* A list announcement puts each field in one cell of a grid whose columns are
minmax(180px, 1fr) — so the chip has to survive about 190px, where a name
and two buttons do not fit on one line. It measures the field, which is the
box that is actually that narrow; the viewport is four times wider. */
.di-filefield { container-type: inline-size; container-name: difield; }
.di-filechip { flex-wrap: wrap; }
.di-filechip-body { flex: 1 1 6rem; }
@container difield (max-width: 17rem) {
.di-filechip-body { flex: 1 1 100%; }
.di-filechip-tools { margin-left: 0; width: 100%; }
}
/* A list announcement's body is a three-column table, and one of those columns
now holds a card. Two things were making that column collapse to the width
of one letter. `overflow-wrap: anywhere` told the auto table layout that the
card's minimum width was a single character; break-word still breaks a long
name when it must, but reports the longest word as the minimum. And every
box between the cell and the name is a flex item with min-width: 0 — which
is what lets a card sit in a narrow column without forcing it open, and also
what let the column be given almost nothing. Hence a floor: wide enough for
a filename on one line and two buttons beside each other, narrow enough that
three such columns still fit across a phone. */
.di-filecard-name { overflow-wrap: break-word; }
/* The floor goes on the WRAPPER, not the card. The wrapper is the query
container, and `container-type: inline-size` means its width is settled
without looking at what is inside it — so a minimum on the card would make
the card stick out of its own container and across the next column. On the
wrapper it is the cell that has to open up, and the card then fills it. */
.di-filecard-wrap { min-width: 11rem; }
/* ── GateKeeper · Fix web accounts ─────────────────────────────────────────
Four of the five verdicts on that page cannot be acted on, and a row that
cannot be acted on has to carry its reason instead of a dead button. So the
two right-hand columns hold prose, not a control — these rules are about
making prose survive a table cell at phone width. No literal colours: every
value is a token, so both themes come out of the same rules. */
.gkw-table td { vertical-align: top; }
/* What GateKeeper actually holds for the site. One line per credential: the
username is the thing a person needs to read to decide anything, so it is
set in the mono face at full contrast and the domain sits under it. */
.gkw-holds { min-width: 11rem; }
.gkw-cred {
display: flex; flex-direction: column; gap: .05rem;
padding: .12rem 0; min-width: 0;
}
.gkw-cred .text-mono { font-size: var(--text-sm); overflow-wrap: anywhere; }
.gkw-cred-d { font-size: var(--text-xs); color: var(--text-faint); overflow-wrap: anywhere; }
/* The action cell. A row that can be fixed holds one button; a row that
cannot holds the reason and a way to read the rest of it. */
.gkw-act { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.gkw-why {
font-size: var(--text-sm); color: var(--text-dim); line-height: 1.4;
max-width: 26rem; overflow-wrap: anywhere;
}
.gkw-result { min-width: 9rem; }
/* The bulk row under the table: the button, then what it will and will not
touch. The sentence wraps under the button on a narrow column rather than
pushing the button off the card. */
.gkw-bulk {
margin-top: .9rem; display: flex; gap: .6rem;
align-items: center; flex-wrap: wrap;
}
.gkw-bulk > .text-dim { flex: 1 1 18rem; line-height: 1.45; }
/* What a bulk run did, kept on the page. A toast disappears, and "31 added,
4 skipped" is exactly the part that must still be readable afterwards. */
.gkw-sum { display: flex; flex-direction: column; gap: .15rem; }
.gkw-sum-head {
font-size: var(--text-lg); font-weight: 600; color: var(--text);
font-feature-settings: 'tnum';
}
.gkw-sum-list {
display: flex; flex-direction: column; gap: .35rem;
margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border);
}
.gkw-sum-row {
display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap;
font-size: var(--text-base); min-width: 0;
}
.gkw-sum-row > .badge { flex: 0 0 auto; }
.gkw-sum-row > .gkw-why { flex: 1 1 14rem; max-width: none; }
/* On a phone the table is already in a horizontal scroller, so the job here
is to stop the two prose columns from making that scroll longer than it
needs to be. */
@media (max-width: 700px) {
.gkw-why { max-width: 16rem; }
.gkw-holds { min-width: 9rem; }
}
/* ── GateKeeper · Fix web accounts, the two added remediations ─────────────
`conflict` and `multiple` stopped being dead ends, so two of the columns
that used to hold only prose now hold a decision. What these rules exist
for is the difference between a username that is a typo and one that is a
colleague's address: in a table of usernames those two look identical, and
only one of them should give an operator pause. Everything below is a
token — no literal colours — so both themes come out of the same rules. */
/* The kind of wrong, beside the username it describes. A badge rather than
more prose: the row already carries a sentence, and this is the part that
has to survive being skimmed. */
.gkw-kind { margin-top: .25rem; align-self: flex-start; }
/* Whose address is actually on the credential. Deliberately the only warn
colour inside that column — it is the one fact that changes what the
button means. */
.gkw-whose {
display: flex; align-items: flex-start; gap: .3rem;
margin-top: .3rem; font-size: var(--text-xs); line-height: 1.35;
color: var(--warn); overflow-wrap: anywhere;
}
.gkw-whose svg { flex: 0 0 auto; margin-top: 1px; }
/* How many of several credentials a dedupe would actually touch. */
.gkw-dupnote { margin-top: .25rem; }
/* The diagnostic's own strip at the foot of the page. Unobtrusive by
construction: no card, no fill, one line of explanation and a ghost
button — it is not part of anybody's daily job, and it reads somebody's
vault. Reachable from every state of the page, including before a scan,
because the question it settles decides how a dedupe result is worded. */
.gkw-diag-strip {
display: flex; align-items: flex-start; gap: .55rem; flex-wrap: wrap;
margin: 1.4rem 0 .4rem; padding-top: 1rem;
border-top: 1px solid var(--border);
}
.gkw-diag-strip > svg { color: var(--text-faint); flex: 0 0 auto; margin-top: 2px; }
.gkw-diag-strip > .btn { flex: 0 0 auto; }
.gkw-diag-text {
flex: 1 1 22rem; min-width: 0;
font-size: var(--text-sm); color: var(--text-dim); line-height: 1.5;
}
/* Inside the diagnostic dialog. */
.gkw-diag-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.gkw-diag-bar .input { flex: 1 1 18rem; min-width: 0; }
.gkw-diag-out { margin-top: 1rem; }
/* The three answers, first and together: which field is the id, whether
there is a date, and which routes would be tried. The whole reason the
diagnostic exists is that those three are unknown, so they are stated
rather than left to be inferred from the rows underneath. */
.gkw-diag-answers {
display: grid; gap: .7rem; margin-bottom: 1rem;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.gkw-diag-a {
padding: .7rem .8rem; border: 1px solid var(--border);
border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0;
}
.gkw-diag-q {
font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
color: var(--text-faint); font-weight: 600;
}
/* The mono face comes from .text-mono on the element — there is no font
token to reach for here, and a second copy of the stack would be one more
place for it to drift. */
.gkw-diag-v {
font-size: var(--text-base); font-weight: 600; margin-top: .2rem;
overflow-wrap: anywhere;
}
.gkw-diag-s {
font-size: var(--text-xs); color: var(--text-dim); line-height: 1.45;
margin-top: .3rem; overflow-wrap: anywhere;
}
.gkw-diag-note { margin: 0 0 1rem; line-height: 1.5; }
.gkw-diag-who { margin-top: 1rem; }
.gkw-diag-fields { margin-top: 1rem; overflow-wrap: anywhere; }
.gkw-diag-rowshead { margin-top: 1.2rem; }
/* The rows themselves. A credential row's field names are the answer, so
they are set in the mono face at the same weight as their values and
allowed to wrap rather than to widen the dialog. */
.gkw-diag-rows { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.gkw-diag-rows .card { padding: .7rem .8rem; }
.gkw-diag-val { overflow-wrap: anywhere; }
/* Three bulk buttons where there used to be one. They stay on one row while
there is room and wrap as a group, with the sentence about what they will
not touch below them rather than squeezed between. */
@media (max-width: 700px) {
.gkw-bulk > .btn { width: 100%; justify-content: center; }
.gkw-diag-answers { grid-template-columns: 1fr; }
}
/* A value in one of this page's dialogs is a website, a username or a
credential id — long, unbroken, and the thing the operator is being asked
to read before approving something. The shared .gk-kv grid clips those at
phone width; scoped here rather than changed globally, because every other
screen's key/value grid holds short values and was laid out around that. */
.gkw-modal .gk-kv-v { overflow-wrap: anywhere; min-width: 0; }
/* ---------------------------------------------------------------------------
Announcement email HTML rendered inside the app (.kb-body)
A Daily Info form/list announcement and an Internal Comms campaign are
stored as the email body itself, and renderFeedPost() drops that body
straight into .kb-body. So the app is a second surface for the same HTML,
and it inherited the same fault: the email card was a table with a hard
pixel width, which made the post scroll sideways by 280px on a 320px screen
and 225px on a 375px one.
The generators now emit a fluid card (fe/src/core/email-designer.js and
fe/src/modules/daily-info/index.js — a max-width div around a width:100%
table), which fixes that at the source for everything published from here
on. These rules are for the posts already in the database, whose stored
HTML nobody can go back and rewrite, plus the two places where the app's
own article styling fights an email that is styled inline.
--------------------------------------------------------------------------- */
/* Every shell this app has ever generated wrote width="600" on the card. An
author-!important declaration is the one thing that outranks the inline
width:600px sitting next to it, so this is what unsticks the old posts. */
.kb-body table[width="600"] { width: 100% !important; max-width: 100% !important; }
/* .kb-body th/td carry a 1px box border, which is right for a KB article's
data table and wrong for a layout table — and role="presentation" is
precisely the author saying "this is layout, not data". The email's own
rules and separators are inline, so they survive this. */
.kb-body table[role="presentation"] th,
.kb-body table[role="presentation"] td { border: 0; }
/* Same reasoning for images: an email banner already carries its own sizing
inline and does not want the article border and radius. */
.kb-body table[role="presentation"] img,
.kb-body .ro-mail img { border: 0; border-radius: 0; max-width: 100%; height: auto; }
/* Belt and braces for stored HTML that predates the break rules the
generators now emit: one long file name or URL is enough to hold a table
wider than the screen, and `anywhere` is the value that lowers min-content
width (plain break-word only breaks what is already overflowing). */
.kb-body table[role="presentation"] td,
.kb-body table[role="presentation"] th {
word-break: break-word; overflow-wrap: anywhere;
}
/* ---------------------------------------------------------------------------
GateKeeper — temporary access (fe/src/modules/gatekeeper/index.js)
Two jobs, both of them about not being misread.
The create form's period block has to make the END DATE the loudest thing
on a form that also asks about platforms, serials, PINs and websites —
because it is the only field on it that deletes somebody's access without
asking again.
The grants list has to keep an executed grant and a pending one visually
unconfusable. English gives you one letter between "removed on 12 March"
and "removes on 12 March", so the styling carries four more signals: a
separate section band, a stamp, a struck-through name, and a leading chip
that is a countdown for pending and an elapsed time for executed. When the
automation is switched off, the same chip becomes "held" and every left
bar goes dashed — a solid bar means something is actually going to happen.
--------------------------------------------------------------------------- */
/* ── the question, on both create paths ──────────────────────────────── */
.gkt-choices { display: flex; gap: .6rem; flex-wrap: wrap; }
.gkt-choice {
flex: 1 1 220px; display: flex; gap: .55rem; align-items: flex-start;
padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 8px;
background: var(--surface); cursor: pointer;
}
.gkt-choice:hover { border-color: var(--border-hover); }
.gkt-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.gkt-choice input { margin-top: .25rem; flex: 0 0 auto; }
.gkt-choice b { display: block; }
.gkt-choice-d { display: block; margin-top: .1rem; line-height: 1.4; }
.gkt-period { margin-top: .5rem; }
.gkt-dates { display: flex; gap: 1rem; flex-wrap: wrap; }
.gkt-dates .form-group { flex: 1 1 200px; }
/* The consequence of the end date, stated under the end date. Given the
blast treatment rather than the .text-dim treatment every other hint on
these forms gets, because it is the one that cannot be undone. */
.gkt-conseq { margin: .1rem 0 .9rem; align-items: flex-start; }
.gkt-conseq-t { line-height: 1.55; }
/* ── the grants screen ───────────────────────────────────────────────── */
.gkt-sec-h {
margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.gkt-sec-n {
font-size: var(--text-sm); font-weight: 600; font-feature-settings: 'tnum';
padding: .05rem .45rem; border-radius: 999px;
background: var(--surface-3); color: var(--text-dim);
}
.gkt-sec-l {
margin: .35rem 0 .9rem; font-size: var(--text-sm); color: var(--text-dim);
line-height: 1.55; max-width: 82ch;
}
.gkt-list { display: flex; flex-direction: column; gap: .6rem; }
/* What is imminent should draw the eye without being hunted for, so the
section that holds it is the only one whose heading takes a colour. */
.gkt-sec-due .gkt-sec-h { color: var(--danger); }
.gkt-sec-due .gkt-sec-n { background: var(--danger-soft); color: var(--danger); }
.gkt-sec-held .gkt-sec-h { color: var(--warn); }
.gkt-sec-held .gkt-sec-n { background: var(--warn-soft); color: var(--warn); }
.gkt-sec-done .gkt-sec-h, .gkt-sec-quiet .gkt-sec-h { color: var(--text-dim); }
.gkt-grant {
display: grid; grid-template-columns: 116px minmax(0, 1fr) auto;
gap: .9rem; align-items: start;
padding: .75rem .9rem; border-radius: 8px;
border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
background: var(--surface-2);
}
.gkt-when { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.gkt-when b {
font-size: 19px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
font-feature-settings: 'tnum';
}
.gkt-when span {
font-size: 11px; font-weight: 500; color: var(--text-faint);
text-transform: uppercase; letter-spacing: .06em;
}
.gkt-who { min-width: 0; }
.gkt-hd { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gkt-name { font-weight: 600; font-size: var(--text-md); }
a.gkt-name { color: var(--accent); text-decoration: none; }
a.gkt-name:hover { text-decoration: underline; }
.gkt-meta { font-size: var(--text-sm); color: var(--text-faint); line-height: 1.45; }
.gkt-line { font-size: var(--text-base); line-height: 1.5; margin: .15rem 0; }
.gkt-acts { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
/* Still to happen. Red for "the next run takes this", amber for "this week". */
.gkt-grant.is-failed, .gkt-grant.is-overdue {
border-left-color: var(--danger); background: var(--danger-soft);
}
.gkt-grant.is-failed .gkt-when b, .gkt-grant.is-overdue .gkt-when b { color: var(--danger); }
.gkt-grant.is-soon { border-left-color: var(--warn); background: var(--warn-soft); }
.gkt-grant.is-soon .gkt-when b { color: var(--warn); }
.gkt-grant.is-later { border-left-color: var(--border-strong); }
/* Held: the dates are real, the job is not running. A dashed bar is the
difference between "this is scheduled" and "this is only written down". */
.gkt-grant.is-held {
border-left-style: dashed; border-left-color: var(--warn);
background: var(--surface-2);
}
.gkt-grant.is-held .gkt-when b { color: var(--warn); }
/* Already done. Muted band, struck name, stamp — never the same shape as a
row that still has a future. */
.gkt-grant.is-done, .gkt-grant.is-cancelled, .gkt-grant.is-permanent {
background: var(--surface); border-left-color: var(--text-faint);
}
.gkt-grant.is-done .gkt-when b, .gkt-grant.is-cancelled .gkt-when b,
.gkt-grant.is-permanent .gkt-when b { color: var(--text-faint); font-size: 17px; }
.gkt-grant.is-done .gkt-name {
text-decoration: line-through; text-decoration-thickness: 2px;
color: var(--text-faint);
}
.gkt-grant.is-done .gkt-line b { color: var(--text-dim); }
.gkt-stamp {
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
padding: .1rem .4rem; border-radius: 3px;
border: 1px solid var(--border-strong); background: var(--surface-3);
color: var(--text-dim); flex: 0 0 auto;
}
@media (max-width: 760px) {
.gkt-grant { grid-template-columns: 1fr; gap: .5rem; }
.gkt-when { flex-direction: row; align-items: baseline; gap: .45rem; }
.gkt-when b { font-size: 17px; }
.gkt-acts { justify-content: flex-start; }
.gkt-acts .btn { flex: 1 1 auto; justify-content: center; }
.gkt-dates { gap: .2rem; }
}
/* The calendar the dates on the temporary-access screen are read on. Quiet
when this device agrees about what day it is, and a warning when it does
not — that disagreement is the whole reason the zone is stated at all. */
.gkt-zone {
display: flex; align-items: flex-start; gap: .5rem;
margin: 0 0 1rem; padding: .5rem .7rem; border-radius: 6px;
font-size: var(--text-sm); color: var(--text-dim);
background: var(--surface-2); border: 1px solid var(--border);
}
.gkt-zone svg { color: var(--text-faint); margin-top: 1px; flex: 0 0 auto; }
.gkt-zone b { color: var(--text); font-weight: 600; }
.gkt-zone.is-off {
background: var(--warn-soft); border-color: transparent; color: var(--warn);
}
.gkt-zone.is-off svg, .gkt-zone.is-off b { color: var(--warn); }
/* ─── GateKeeper: put an unpooled job title in a licence pool ─────────────
Two choices with materially different blast radii — which pool, and
whether it is this store or the estate default — followed by a panel
that says what the chosen pair does, in numbers, before the button. The
options are big tap targets because on a phone this dialog is the whole
screen, and the consequence panel is colour-coded by its worst line: a
title that lands in a pool with no allowance is not a success. */
.gk-asg-h {
padding: .7rem .85rem; margin-bottom: 1rem;
border: 1px solid var(--border); border-left: 3px solid var(--danger);
border-radius: 8px; background: var(--surface-2);
}
.gk-asg-h-t { font-weight: 600; font-size: var(--text-base); margin-bottom: .25rem; }
.gk-asg-step { margin-bottom: 1rem; }
.gk-asg-step h4 { margin: 0 0 .5rem; font-size: var(--text-sm); color: var(--text-dim); font-weight: 600; }
.gk-asg-opts { display: flex; flex-direction: column; gap: .45rem; }
.gk-asg-opt {
display: flex; gap: .6rem; align-items: flex-start;
padding: .6rem .75rem; border: 1px solid var(--border);
border-radius: 8px; cursor: pointer; background: var(--surface);
transition: border-color 100ms, background 100ms;
}
.gk-asg-opt:hover { border-color: var(--accent); }
.gk-asg-opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.gk-asg-opt input[type="radio"] { margin: .2rem 0 0; flex: 0 0 auto; }
.gk-asg-opt-b { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gk-asg-opt-t {
display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
font-weight: 600; font-size: var(--text-base);
}
.gk-asg-opt-s { font-size: var(--text-sm); color: var(--text-dim); }
.gk-asg-out { margin-top: 1rem; }
.gk-asg-c {
display: flex; flex-direction: column; gap: .5rem;
padding: .75rem .85rem; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface-2);
}
.gk-asg-c.is-good { border-color: transparent; background: var(--success-soft); }
.gk-asg-c.is-warn { border-color: transparent; background: var(--warn-soft); }
.gk-asg-c.is-bad { border-color: transparent; background: var(--danger-soft); }
.gk-asg-line {
display: flex; gap: .5rem; align-items: flex-start;
font-size: var(--text-sm); line-height: 1.45; color: var(--text);
}
.gk-asg-line svg { flex: 0 0 auto; margin-top: .15rem; color: var(--text-faint); }
.gk-asg-line.is-good svg { color: var(--success); }
.gk-asg-line.is-warn svg { color: var(--warn); }
.gk-asg-line.is-bad svg { color: var(--danger); }
.gk-asg-line.is-bad { font-weight: 500; }
.gk-asg-line.is-dim { color: var(--text-dim); }
@media (max-width: 560px) {
.gk-asg-opt { padding: .7rem .65rem; }
.gk-asg-opt-t { font-size: var(--text-sm); }
.gk-asg-h { padding: .6rem .7rem; }
}
/* ---- out-of-scope search hits (head office, franchise, K Corner) -------- */
/* A row the search reached past GateKeeper's own locations to find. It has
to read as "correct, but from somewhere else" — not as an error, and not
as an ordinary shop row either, because it is deliberately absent from the
coverage figures directly above the table. */
.gk-oos {
display: inline-flex; align-items: center; gap: .3rem;
margin-top: .25rem; font-size: var(--text-xs, var(--text-sm));
background: var(--warn-soft); color: var(--warn);
border-radius: 999px; padding: .1rem .5rem;
white-space: nowrap; font-family: inherit;
}
.gk-oos svg { color: var(--warn); flex: 0 0 auto; }
.gk-oos-where {
font-size: var(--text-xs, var(--text-sm)); margin-top: .15rem;
max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gk-row-oos > td:first-child { box-shadow: inset 2px 0 0 var(--warn); }
.gk-oos-note {
display: flex; gap: .5rem; align-items: flex-start;
margin-bottom: .75rem; padding: .6rem .75rem; border-radius: 8px;
background: var(--warn-soft); color: var(--text);
font-size: var(--text-sm); line-height: 1.45;
}
.gk-oos-note svg { flex: 0 0 auto; margin-top: .15rem; color: var(--warn); }
@media (max-width: 560px) {
.gk-oos-where { max-width: 14ch; }
}
/* ── directory-users: fast-sync (Graph delta) health tile ─────────────────
All colour comes from the semantic tokens, so light and dark follow the
theme without a second ruleset. Scoped to .du-fs-* to stay out of the way
of everything else on the page. */
.du-fs .du-fs-wrap { display: flex; flex-direction: column; gap: .75rem; }
.du-fs-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: .75rem; flex-wrap: wrap;
}
.du-fs-titles { min-width: 0; }
.du-fs-sub {
font-size: var(--text-sm); color: var(--text-dim); margin-top: .15rem;
}
.du-fs-pill {
flex: 0 0 auto; align-self: center;
border-radius: 999px; padding: .15rem .6rem;
font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
}
.du-fs-pill-ok { background: var(--success-soft); color: var(--success); }
.du-fs-pill-info { background: var(--info-soft); color: var(--info); }
.du-fs-pill-warn { background: var(--warn-soft); color: var(--warn); }
.du-fs-note {
font-size: var(--text-sm); line-height: 1.5; color: var(--text-dim);
margin-top: .35rem;
}
/* The alert boxes recolour their own text, so a note inside one inherits
that colour rather than fighting it; only free-standing notes get dimmed. */
.du-fs .alert .du-fs-note { color: inherit; opacity: .85; }
.du-fs-note-warn { color: var(--warn); opacity: 1; }
.du-fs .alert .du-fs-note-warn { opacity: 1; font-weight: 500; }
.du-fs-stamps {
display: flex; flex-direction: column; gap: .1rem;
}
.du-fs-stamps .du-fs-note { margin-top: 0; }
.du-fs-retire {
border-top: 1px solid var(--border);
padding-top: .6rem;
font-size: var(--text-sm); line-height: 1.5; color: var(--text-dim);
}
.du-fs-retire strong { color: var(--text); }
@media (max-width: 560px) {
.du-fs-head { flex-wrap: nowrap; }
.du-fs-pill { align-self: flex-start; }
}
/* ==========================================================================
comms (News) module - CONTRACT 11/13. Appended by the integration slice from
design/comms/css/*.css (order: foundation, ui-kit, render, feed, composer, analytics, admin, frontline, people). All classes cm-*.
========================================================================== */
/* ---- comms: foundation (design/comms/css/foundation.css) ---- */
/* ==========================================================================
comms — foundation (cm- base classes). Tokens only: every colour, radius,
shadow and type size comes from main.css custom properties, so both themes
work without a single theme-specific rule. Used by shared.js components.
========================================================================== */
/* ---- Tones: components read --cm-fg / --cm-bg ------------------------- */
.cm-tone-neutral { --cm-fg: var(--text-dim); --cm-bg: var(--surface-3); }
.cm-tone-accent { --cm-fg: var(--accent); --cm-bg: var(--accent-soft); }
.cm-tone-info { --cm-fg: var(--info); --cm-bg: var(--info-soft); }
.cm-tone-success { --cm-fg: var(--success); --cm-bg: var(--success-soft); }
.cm-tone-warn { --cm-fg: var(--warn); --cm-bg: var(--warn-soft); }
.cm-tone-danger { --cm-fg: var(--danger); --cm-bg: var(--danger-soft); }
.cm-tone-muted { --cm-fg: var(--text-faint); --cm-bg: var(--surface-2); }
/* ---- Page layout -------------------------------------------------------- */
.cm-page-root { min-width: 0; }
.cm-page {
max-width: 1100px;
margin: 0 auto;
padding: 1.5rem 1.5rem 3rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
color: var(--text);
}
.cm-page-narrow { max-width: 760px; }
.cm-page-wide { max-width: 1320px; }
.cm-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.cm-head-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.cm-eyebrow {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-faint);
}
.cm-title {
margin: 0;
font-size: var(--text-2xl);
font-weight: 700;
line-height: 1.2;
color: var(--text);
}
.cm-sub { margin: 0; font-size: var(--text-md); color: var(--text-dim); line-height: 1.5; }
.cm-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.cm-toolbar {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
.cm-toolbar-spacer { flex: 1 1 auto; }
.cm-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 1.5rem;
align-items: start;
}
.cm-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.cm-rail { min-width: 0; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.cm-stack { display: flex; flex-direction: column; gap: .75rem; }
.cm-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cm-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.cm-section { display: flex; flex-direction: column; gap: .75rem; }
.cm-section-title {
margin: 0;
font-size: var(--text-lg);
font-weight: 600;
color: var(--text);
}
.cm-divider { height: 1px; background: var(--border); border: 0; margin: .5rem 0; }
.cm-muted { color: var(--text-dim); }
.cm-faint { color: var(--text-faint); font-size: var(--text-sm); }
/* ---- Cards -------------------------------------------------------------- */
.cm-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
min-width: 0;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.cm-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.cm-card:focus-within { border-color: var(--accent); }
.cm-card-media {
aspect-ratio: 16 / 9;
width: 100%;
background: var(--surface-3);
object-fit: cover;
display: block;
}
.cm-card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.cm-card-kicker { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-faint); }
.cm-card-title {
margin: 0;
font-size: var(--text-lg);
font-weight: 650;
line-height: 1.3;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cm-card-summary {
margin: 0;
font-size: var(--text-md);
line-height: 1.5;
color: var(--text-dim);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cm-card-meta { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-faint); margin-top: auto; }
.cm-card-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .75rem 1.1rem; border-top: 1px solid var(--border); }
/* Whole-card link: the title link stretches over the card. */
.cm-card-link { color: inherit; text-decoration: none; }
.cm-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cm-card-link:focus-visible { outline: none; }
.cm-card-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.cm-card-actions button, .cm-card-actions a { position: relative; z-index: 1; }
.cm-card.is-must-read { border-left: 4px solid var(--warn); }
.cm-card.is-urgent { border-left: 4px solid var(--danger); }
.cm-card.is-featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.cm-card.is-read .cm-card-title { color: var(--text-dim); }
.cm-card-flat { box-shadow: none; }
.cm-card-pad { padding: 1rem 1.1rem; }
/* Horizontal strip (must-read, featured) */
.cm-strip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 1fr);
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: .25rem;
scrollbar-width: thin;
}
.cm-strip > * { scroll-snap-align: start; }
/* ---- Banner ------------------------------------------------------------- */
.cm-banner {
display: flex;
gap: .75rem;
align-items: flex-start;
padding: .85rem 1rem;
border-radius: var(--radius-md);
background: var(--cm-bg, var(--info-soft));
color: var(--text);
border: 1px solid var(--border);
border-left: 4px solid var(--cm-fg, var(--info));
}
.cm-banner .cm-icon { color: var(--cm-fg, var(--info)); }
/* ---- Chips -------------------------------------------------------------- */
.cm-chip {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .3rem .75rem;
border-radius: 999px;
border: 1px solid var(--border-strong);
background: var(--surface-2);
color: var(--text-dim);
font: inherit;
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
}
button.cm-chip { cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
button.cm-chip:hover { color: var(--text); border-color: var(--border-hover); }
.cm-chip.is-active {
background: var(--cm-bg, var(--accent-soft));
color: var(--cm-fg, var(--accent));
border-color: var(--cm-fg, var(--accent));
}
.cm-chip.cm-tone-neutral.is-active { --cm-fg: var(--accent); --cm-bg: var(--accent-soft); }
.cm-chip-count {
font-size: var(--text-xs);
font-weight: 600;
padding: 0 .4rem;
border-radius: 999px;
background: var(--surface-3);
color: var(--text-faint);
}
.cm-chip.is-active .cm-chip-count { background: var(--surface); color: var(--cm-fg, var(--accent)); }
/* ---- Pills & badges ----------------------------------------------------- */
.cm-pill {
display: inline-flex;
align-items: center;
gap: .25rem;
padding: .1rem .5rem;
border-radius: var(--radius-xs);
background: var(--cm-bg, var(--surface-3));
color: var(--cm-fg, var(--text-dim));
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: .02em;
white-space: nowrap;
}
.cm-badge { vertical-align: middle; }
/* ---- Stepper ------------------------------------------------------------ */
.cm-stepper { overflow-x: auto; scrollbar-width: thin; }
.cm-stepper-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: .25rem;
counter-reset: none;
}
.cm-stepper-list > li { flex: 1 1 0; min-width: 120px; }
.cm-step {
appearance: none;
-webkit-appearance: none;
width: 100%;
display: flex;
align-items: center;
gap: .55rem;
padding: .6rem .75rem;
border: 0;
border-bottom: 3px solid var(--border);
background: none;
color: var(--text-dim);
font: inherit;
font-size: var(--text-sm);
font-weight: 500;
text-align: left;
}
button.cm-step { cursor: pointer; }
button.cm-step:hover { color: var(--text); border-bottom-color: var(--border-hover); }
.cm-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.cm-step-dot {
flex: 0 0 auto;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
font-weight: 700;
background: var(--surface-3);
color: var(--text-dim);
}
.cm-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-step.is-current { color: var(--text); border-bottom-color: var(--accent); }
.cm-step.is-current .cm-step-dot { background: var(--accent); color: var(--text-inverse); }
.cm-step.is-done .cm-step-dot { background: var(--success-soft); color: var(--success); }
.cm-step.is-done { border-bottom-color: var(--success); }
.cm-step.is-blocked .cm-step-dot { background: var(--danger-soft); color: var(--danger); }
.cm-step.is-blocked { border-bottom-color: var(--danger); }
.cm-step.is-locked { color: var(--text-faint); cursor: not-allowed; }
.cm-step.is-locked .cm-step-dot { background: var(--surface-2); color: var(--text-faint); }
/* ---- Empty state -------------------------------------------------------- */
.cm-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .5rem;
padding: 3rem 1.5rem;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-lg);
background: var(--surface);
color: var(--text-dim);
}
.cm-empty-compact { padding: 1.5rem 1rem; }
.cm-empty-icon {
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--cm-bg, var(--accent-soft));
color: var(--cm-fg, var(--accent));
margin-bottom: .25rem;
}
.cm-empty-title { font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.cm-empty-body { margin: 0; max-width: 46ch; font-size: var(--text-md); line-height: 1.5; }
.cm-empty-action { margin-top: .5rem; }
/* ---- Skeleton loaders --------------------------------------------------- */
.cm-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cm-skel-block, .cm-skel-card {
display: flex;
flex-direction: column;
gap: .6rem;
padding: 1rem;
border-radius: var(--radius-lg);
background: var(--surface);
border: 1px solid var(--border);
}
.cm-skel-card { padding: 0 0 1rem; overflow: hidden; }
.cm-skel-card .cm-skel-line { margin: 0 1rem; }
.cm-skel-media, .cm-skel-line {
display: block;
background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
background-size: 200% 100%;
animation: cm-shimmer 1.4s var(--ease) infinite;
}
.cm-skel-media { aspect-ratio: 16 / 9; width: 100%; }
.cm-skel-line { height: .8rem; border-radius: var(--radius-xs); }
.cm-skel-line.is-short { width: 60%; }
@keyframes cm-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ---- Avatar ------------------------------------------------------------- */
.cm-avatar {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 700;
color: var(--text-inverse);
background: var(--c-1);
user-select: none;
line-height: 1;
}
.cm-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
.cm-avatar-md { width: 2.25rem; height: 2.25rem; font-size: var(--text-sm); }
.cm-avatar-lg { width: 3rem; height: 3rem; font-size: var(--text-lg); }
.cm-avatar-c1 { background: var(--c-1); }
.cm-avatar-c2 { background: var(--c-2); }
.cm-avatar-c3 { background: var(--c-3); }
.cm-avatar-c4 { background: var(--c-4); }
.cm-avatar-c5 { background: var(--c-5); }
.cm-avatar-c6 { background: var(--c-6); }
.cm-avatar-c7 { background: var(--c-7); }
.cm-avatar-c8 { background: var(--c-8); }
/* ---- Language toggle ---------------------------------------------------- */
.cm-lang {
display: inline-flex;
width: max-content;
max-width: 100%;
padding: 3px;
gap: 2px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--border);
}
.cm-lang-btn {
appearance: none;
-webkit-appearance: none;
border: 0;
background: none;
color: var(--text-dim);
font: inherit;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .04em;
padding: .3rem .7rem;
border-radius: 999px;
cursor: pointer;
}
.cm-lang-btn:hover { color: var(--text); }
.cm-lang-btn.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); cursor: default; }
.cm-lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ---- Icons & accessibility --------------------------------------------- */
.cm-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.cm-sr {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.cm-page a:focus-visible, .cm-page button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- Kiosk mode (html[data-kiosk="1"]): bigger type, bigger targets ----- */
[data-kiosk="1"] .cm-page { max-width: 960px; }
[data-kiosk="1"] .cm-title { font-size: var(--text-3xl); }
[data-kiosk="1"] .cm-card-title { font-size: var(--text-xl); }
[data-kiosk="1"] .cm-card-summary { font-size: var(--text-lg); }
[data-kiosk="1"] .cm-page .btn,
[data-kiosk="1"] .cm-chip,
[data-kiosk="1"] .cm-lang-btn { min-height: 48px; padding-left: 1.1rem; padding-right: 1.1rem; }
/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
.cm-layout { grid-template-columns: minmax(0, 1fr); }
.cm-rail { position: static; }
}
@media (max-width: 720px) {
.cm-page { padding: 1rem 1rem 2.5rem; gap: 1rem; }
.cm-title { font-size: var(--text-xl); }
.cm-head { align-items: flex-start; }
.cm-grid, .cm-skel { grid-template-columns: minmax(0, 1fr); }
.cm-strip { grid-auto-columns: 85%; }
.cm-stepper-list > li { min-width: 44px; }
.cm-stepper-list > li.is-current { flex: 3 1 auto; }
.cm-step-label { display: none; }
.cm-step.is-current .cm-step-label { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
.cm-skel-media, .cm-skel-line { animation: none; }
.cm-card, button.cm-chip { transition: none; }
}
/* ---- comms: ui-kit (design/comms/css/ui-kit.css) ---- */
/* ==========================================================================
comms — UI kit (fe/src/modules/comms/ui.js; spec: design/comms/UI-SYSTEM.md).
Every class is cm-ui-*. Tokens only: colours come from the RetailOps tokens,
tone text is mixed toward --text so small text keeps 4.5:1 in both themes.
The --cm-* properties below are comms-level aliases of those tokens.
========================================================================== */
:root {
--cm-s-1: 4px; --cm-s-2: 8px; --cm-s-3: 12px; --cm-s-4: 16px;
--cm-s-5: 24px; --cm-s-6: 32px; --cm-s-7: 48px; --cm-s-8: 64px;
--cm-fs-title: var(--text-2xl);
--cm-fs-h2: var(--text-xl);
--cm-fs-h3: var(--text-lg);
--cm-fs-body: var(--text-md);
--cm-fs-meta: var(--text-base);
--cm-fs-small: var(--text-sm);
--cm-fs-micro: var(--text-xs);
--cm-fs-read: 17px;
--cm-c-text: var(--text);
--cm-c-muted: var(--text-dim);
--cm-c-faint: var(--text-faint);
--cm-c-surface: var(--surface);
--cm-c-sunken: var(--surface-2);
--cm-c-hover: var(--surface-hover);
--cm-c-line: var(--border);
--cm-c-line-strong: var(--border-strong);
--cm-c-focus: var(--accent);
--cm-accent-text: var(--accent-strong);
--cm-accent-text: color-mix(in srgb, var(--accent) 72%, var(--text));
--cm-r-sm: var(--radius-sm);
--cm-r-md: var(--radius-md);
--cm-r-lg: var(--radius-lg);
--cm-r-xl: var(--radius-xl);
--cm-r-pill: 999px;
--cm-e-1: var(--shadow-sm);
--cm-e-2: var(--shadow-md);
--cm-e-3: var(--shadow-lg);
--cm-t-fast: 120ms;
--cm-t-mid: 150ms;
--cm-target: 40px;
}
/* Anything of the kit that is [hidden] stays hidden, whatever display it normally has. */
[class^="cm-ui-"][hidden], [class*=" cm-ui-"][hidden] { display: none !important; }
/* ---- tones: --cm-tone (strong) and --cm-tone-soft (background) ---------- */
.cm-ui-tone-neutral { --cm-tone: var(--text-dim); --cm-tone-soft: var(--surface-3); }
.cm-ui-tone-accent { --cm-tone: var(--accent); --cm-tone-soft: var(--accent-soft); }
.cm-ui-tone-info { --cm-tone: var(--info); --cm-tone-soft: var(--info-soft); }
.cm-ui-tone-success { --cm-tone: var(--success); --cm-tone-soft: var(--success-soft); }
.cm-ui-tone-warn { --cm-tone: var(--warn); --cm-tone-soft: var(--warn-soft); }
.cm-ui-tone-danger { --cm-tone: var(--danger); --cm-tone-soft: var(--danger-soft); }
/* ---- page frame & layout -------------------------------------------------- */
.cm-ui-page {
--cm-page-max: 1200px;
width: 100%;
max-width: var(--cm-page-max);
margin: 0 auto;
padding: var(--cm-s-2) 0 var(--cm-s-8);
display: flex;
flex-direction: column;
gap: var(--cm-s-5);
min-width: 0;
color: var(--text);
}
.cm-ui-page--reader { --cm-page-max: 760px; }
.cm-ui-page--feed { --cm-page-max: 1120px; }
.cm-ui-page--workspace { --cm-page-max: 1200px; }
.cm-ui-page--dashboard { --cm-page-max: 1280px; }
.cm-ui-page--settings { --cm-page-max: 1080px; }
.cm-ui-page--wizard { --cm-page-max: 1320px; }
.cm-ui-page-body { display: flex; flex-direction: column; gap: var(--cm-s-5); min-width: 0; }
.cm-ui-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--cm-s-5); align-items: start; }
.cm-ui-split-main { min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-ui-split-rail { min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-4); position: sticky; top: var(--cm-s-4); }
.cm-ui-stack { display: flex; flex-direction: column; min-width: 0; }
.cm-ui-row { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.cm-ui-row.is-nowrap { flex-wrap: nowrap; }
.cm-ui-row.is-between { justify-content: space-between; }
.cm-ui-row.is-end { justify-content: flex-end; }
.cm-ui-row.is-align-start { align-items: flex-start; }
.cm-ui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cm-ui-grid-min, 260px)), 1fr)); align-items: start; }
.cm-ui-grid.is-stretch { align-items: stretch; }
.cm-ui-gap-0 { gap: 0; }
.cm-ui-gap-1 { gap: var(--cm-s-1); }
.cm-ui-gap-2 { gap: var(--cm-s-2); }
.cm-ui-gap-3 { gap: var(--cm-s-3); }
.cm-ui-gap-4 { gap: var(--cm-s-4); }
.cm-ui-gap-5 { gap: var(--cm-s-5); }
.cm-ui-gap-6 { gap: var(--cm-s-6); }
.cm-ui-divider { border: 0; height: 1px; background: var(--border); margin: var(--cm-s-2) 0; width: 100%; }
/* ---- icons ---------------------------------------------------------------- */
.cm-ui-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; vertical-align: middle; }
.cm-ui-svg { display: block; overflow: visible; }
.cm-ui-icontile {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 40px; height: 40px; border-radius: var(--cm-r-md);
background: var(--cm-tone-soft);
color: var(--cm-tone);
color: color-mix(in srgb, var(--cm-tone) 80%, var(--text));
}
.cm-ui-icontile--sm { width: 32px; height: 32px; border-radius: var(--cm-r-sm); }
.cm-ui-icontile--lg { width: 48px; height: 48px; border-radius: var(--cm-r-lg); }
/* ---- focus ------------------------------------------------------------------ */
.cm-ui-page :focus-visible,
.cm-ui-modal :focus-visible,
.cm-ui-menu :focus-visible { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; }
/* ---- page header ------------------------------------------------------------ */
.cm-ui-ph { display: flex; flex-direction: column; gap: var(--cm-s-3); padding-top: var(--cm-s-2); min-width: 0; }
.cm-ui-ph.has-tabs { gap: var(--cm-s-4); }
.cm-ui-ph-back {
display: inline-flex; align-items: center; gap: var(--cm-s-1); align-self: flex-start;
min-height: 32px; padding: 0 var(--cm-s-2) 0 var(--cm-s-1); margin-left: calc(-1 * var(--cm-s-1));
border-radius: var(--cm-r-pill); color: var(--text-dim); text-decoration: none;
font-size: var(--cm-fs-meta); font-weight: 500;
transition: background var(--cm-t-fast) var(--ease), color var(--cm-t-fast) var(--ease);
}
.cm-ui-ph-back:hover { background: var(--surface-hover); color: var(--text); }
.cm-ui-ph-row { display: flex; align-items: flex-start; gap: var(--cm-s-4); flex-wrap: wrap; min-width: 0; }
.cm-ui-ph-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-ui-ph-eyebrow {
margin: 0; font-size: var(--cm-fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--text-dim);
}
.cm-ui-ph-title {
margin: 0; font-size: var(--cm-fs-title); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em;
color: var(--text); overflow-wrap: anywhere; hyphens: auto;
}
.cm-ui-ph-sub { margin: 0; max-width: 72ch; font-size: var(--text-lg); line-height: 1.5; color: var(--text-dim); }
.cm-ui-ph-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-2); margin-top: var(--cm-s-1); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ui-ph-actions { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; flex: 0 0 auto; margin-left: auto; padding-top: var(--cm-s-1); }
.cm-ui-ph-tabs { min-width: 0; }
/* ---- sections & cards --------------------------------------------------------- */
.cm-ui-section { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-ui-section--card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--cm-r-lg);
padding: var(--cm-s-5);
}
[data-theme="light"] .cm-ui-section--card { box-shadow: var(--shadow-sm); }
.cm-ui-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; min-width: 0; }
.cm-ui-section-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.cm-ui-section-title { margin: 0; font-size: var(--cm-fs-h2); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.cm-ui-section-sub { margin: 0; font-size: var(--cm-fs-body); line-height: 1.5; color: var(--text-dim); max-width: 72ch; }
.cm-ui-section-actions { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-ui-section-body { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-ui-card {
position: relative; display: flex; flex-direction: column; min-width: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--cm-r-lg);
color: var(--text);
transition: border-color var(--cm-t-fast) var(--ease), box-shadow var(--cm-t-fast) var(--ease), background var(--cm-t-fast) var(--ease);
}
[data-theme="light"] .cm-ui-card--default { box-shadow: var(--shadow-sm); }
.cm-ui-card--flat { box-shadow: none; }
.cm-ui-card--inset { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.cm-ui-card--outline { background: transparent; border-color: var(--border-strong); box-shadow: none; }
.cm-ui-card--tone { background: var(--cm-tone-soft); border-color: transparent; box-shadow: none; }
.cm-ui-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cm-ui-pad-none > .cm-ui-card-head, .cm-ui-pad-none > .cm-ui-card-body, .cm-ui-pad-none > .cm-ui-card-foot { padding: 0; }
.cm-ui-card-head { display: flex; align-items: flex-start; gap: var(--cm-s-3); padding: var(--cm-s-4) var(--cm-s-5) 0; min-width: 0; }
.cm-ui-card-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-ui-card-eyebrow { margin: 0; font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); }
.cm-ui-card-title { margin: 0; font-size: var(--cm-fs-h3); font-weight: 650; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.cm-ui-card-sub { margin: 0; font-size: var(--cm-fs-meta); line-height: 1.45; color: var(--text-dim); }
.cm-ui-card-actions { display: flex; align-items: center; gap: var(--cm-s-1); flex: 0 0 auto; margin-left: auto; }
.cm-ui-card-body { flex: 1 1 auto; padding: var(--cm-s-4) var(--cm-s-5) var(--cm-s-5); display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-ui-card-head + .cm-ui-card-body { padding-top: var(--cm-s-3); }
.cm-ui-card-foot {
display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap;
padding: var(--cm-s-3) var(--cm-s-5); border-top: 1px solid var(--border); min-width: 0;
}
.cm-ui-pad-sm > .cm-ui-card-head { padding: var(--cm-s-3) var(--cm-s-4) 0; }
.cm-ui-pad-sm > .cm-ui-card-body { padding: var(--cm-s-3) var(--cm-s-4) var(--cm-s-4); }
.cm-ui-pad-sm > .cm-ui-card-foot { padding: var(--cm-s-2) var(--cm-s-4); }
.cm-ui-pad-lg > .cm-ui-card-head { padding: var(--cm-s-5) var(--cm-s-6) 0; }
.cm-ui-pad-lg > .cm-ui-card-body { padding: var(--cm-s-4) var(--cm-s-6) var(--cm-s-6); }
.cm-ui-pad-lg > .cm-ui-card-foot { padding: var(--cm-s-3) var(--cm-s-6); }
.cm-ui-card.is-interactive { cursor: pointer; }
.cm-ui-card.is-interactive:hover { border-color: var(--border-hover); }
[data-theme="light"] .cm-ui-card.is-interactive:hover { box-shadow: var(--shadow-md); }
.cm-ui-card-link {
color: inherit; text-decoration: none; font: inherit; background: none; border: 0; padding: 0; margin: 0;
text-align: inherit; cursor: pointer;
}
.cm-ui-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cm-ui-card-link:focus-visible { outline: none; }
.cm-ui-card-link:focus-visible::after { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; }
.cm-ui-card.is-interactive a:not(.cm-ui-card-link),
.cm-ui-card.is-interactive button:not(.cm-ui-card-link),
.cm-ui-card.is-interactive .cm-ui-menuwrap { position: relative; z-index: 1; }
/* ---- section nav (settings) ----------------------------------------------------- */
.cm-ui-secnav { position: sticky; top: var(--cm-s-4); display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-ui-secnav-title { margin: 0 0 var(--cm-s-1); padding: 0 var(--cm-s-3); font-size: var(--cm-fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.cm-ui-secnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); }
.cm-ui-secnav-link {
display: block; width: 100%; text-align: left; font: inherit; font-size: var(--cm-fs-meta); line-height: 1.35;
padding: var(--cm-s-2) var(--cm-s-3); margin-left: -1px; border: 0; border-left: 2px solid transparent;
background: none; color: var(--text-dim); cursor: pointer; border-radius: 0 var(--cm-r-sm) var(--cm-r-sm) 0;
}
.cm-ui-secnav-link:hover { color: var(--text); background: var(--surface-hover); }
.cm-ui-secnav-link.is-active { color: var(--text); border-left-color: var(--accent); font-weight: 600; }
/* ---- tags, pills, counts ----------------------------------------------------------- */
.cm-ui-tag {
display: inline-flex; align-items: center; gap: var(--cm-s-1); max-width: 100%;
padding: 2px var(--cm-s-2); border-radius: var(--cm-r-pill);
background: var(--cm-tone-soft); color: var(--text-dim);
font-size: var(--cm-fs-small); font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.cm-ui-tag > span { overflow: hidden; text-overflow: ellipsis; }
.cm-ui-tag:not(.cm-ui-tone-neutral) { color: var(--cm-tone); color: color-mix(in srgb, var(--cm-tone) 72%, var(--text)); }
.cm-ui-tag--md { padding: var(--cm-s-1) var(--cm-s-3); font-size: var(--cm-fs-meta); }
.cm-ui-pill {
display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
padding: 2px var(--cm-s-2) 2px 6px; border-radius: var(--cm-r-pill);
background: var(--cm-tone-soft);
color: var(--cm-tone);
color: color-mix(in srgb, var(--cm-tone) 72%, var(--text));
font-size: var(--cm-fs-small); font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle;
}
.cm-ui-pill.cm-ui-tone-neutral { color: var(--text-dim); }
.cm-ui-pill-label { overflow: hidden; text-overflow: ellipsis; }
.cm-ui-pill--md { padding: var(--cm-s-1) var(--cm-s-3) var(--cm-s-1) var(--cm-s-2); font-size: var(--cm-fs-meta); }
.cm-ui-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cm-tone); flex: 0 0 auto; }
.cm-ui-count {
display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
border-radius: var(--cm-r-pill); background: var(--cm-tone-soft);
color: var(--cm-tone); color: color-mix(in srgb, var(--cm-tone) 72%, var(--text));
font-size: var(--cm-fs-micro); font-weight: 700; font-feature-settings: 'tnum';
}
/* ---- buttons (on the RetailOps .btn base) ------------------------------------------------ */
.cm-ui-btn { justify-content: center; min-height: 36px; line-height: 1.25; white-space: nowrap; }
.cm-ui-btn .cm-ui-icon { margin: 0 -2px; }
.cm-ui-btn--sm { min-height: 30px; }
.cm-ui-btn--lg { min-height: 44px; padding: .65rem 1.4rem; font-size: var(--text-md); }
.cm-ui-btn--block { display: flex; width: 100%; }
.cm-ui-btn--icon { padding-left: .6rem; padding-right: .6rem; }
.cm-ui-btn-label { overflow: hidden; text-overflow: ellipsis; }
/* Dark theme: the base primary (white on --accent-strong) is 4.47:1 — deepen it a little for 4.5:1+. */
:root:not([data-theme="light"]) .cm-ui-btn--primary,
:root:not([data-theme="light"]) .cm-ui-btn--primary:hover {
background-image: none;
background-color: var(--accent-strong);
background-color: color-mix(in srgb, var(--accent-strong) 86%, var(--bg));
}
.cm-ui-btn--ghost { border-color: transparent; background: transparent; color: var(--text-dim); }
.cm-ui-btn--ghost:hover { background: var(--surface-hover); border-color: transparent; color: var(--text); box-shadow: none; }
.cm-ui-btn--link {
border-color: transparent; background: transparent; box-shadow: none; padding-left: var(--cm-s-1); padding-right: var(--cm-s-1);
color: var(--cm-accent-text); min-height: 28px;
}
.cm-ui-btn--link:hover { background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; color: var(--cm-accent-text); }
.cm-ui-btn.is-busy { cursor: progress; }
.cm-ui-btn.is-busy > .cm-ui-icon { display: none; }
.cm-ui-spinner {
display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
border: 2px solid currentColor; border-right-color: transparent; opacity: .85;
animation: cm-ui-spin .7s linear infinite;
}
@keyframes cm-ui-spin { to { transform: rotate(360deg); } }
.cm-ui-iconbtn {
position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 36px; height: 36px; padding: 0; border-radius: var(--cm-r-pill);
border: 1px solid transparent; background: transparent; color: var(--text-dim);
cursor: pointer; text-decoration: none; font: inherit;
transition: background var(--cm-t-fast) var(--ease), color var(--cm-t-fast) var(--ease), border-color var(--cm-t-fast) var(--ease);
}
.cm-ui-iconbtn:hover { background: var(--surface-hover); color: var(--text); }
.cm-ui-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.cm-ui-iconbtn--sm { width: 30px; height: 30px; }
.cm-ui-iconbtn--lg { width: 44px; height: 44px; }
.cm-ui-iconbtn--outline { border-color: var(--border-strong); background: var(--surface); }
.cm-ui-iconbtn--outline:hover { border-color: var(--border-hover); }
.cm-ui-iconbtn--solid { background: var(--surface-2); }
.cm-ui-iconbtn[aria-pressed="true"] { background: var(--accent-soft); color: var(--cm-accent-text); }
.cm-ui-iconbtn[class*="cm-ui-tone-"]:not(.cm-ui-tone-neutral) { color: var(--cm-tone); }
.cm-ui-iconbtn:focus-visible { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; }
.cm-ui-iconbtn-badge {
position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--cm-r-pill);
background: var(--danger); color: var(--text-inverse); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
box-shadow: 0 0 0 2px var(--surface);
}
.cm-ui-iconbtn-badge:empty { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 6px; right: 6px; }
/* ---- overflow menu (layer on
) ------------------------------------------------------- */
.cm-ui-menuwrap { display: inline-flex; }
.cm-ui-menu {
position: fixed; z-index: 1500; min-width: 200px; max-width: min(320px, calc(100vw - 16px));
max-height: min(420px, calc(100vh - 16px)); overflow-y: auto;
padding: var(--cm-s-1); border-radius: var(--cm-r-md);
background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
color: var(--text); font-size: var(--cm-fs-body);
animation: cm-ui-pop var(--cm-t-mid) var(--ease);
}
@keyframes cm-ui-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cm-ui-menu-item {
display: flex; align-items: center; gap: var(--cm-s-3); width: 100%; min-height: 38px;
padding: var(--cm-s-2) var(--cm-s-3); border: 0; border-radius: var(--cm-r-sm);
background: none; color: var(--text); font: inherit; font-size: var(--cm-fs-body); text-align: left; text-decoration: none; cursor: pointer;
}
.cm-ui-menu-item .cm-ui-icon { color: var(--text-dim); }
.cm-ui-menu-item:hover, .cm-ui-menu-item:focus { background: var(--surface-hover); outline: none; }
.cm-ui-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--cm-c-focus); }
.cm-ui-menu-item.is-danger, .cm-ui-menu-item.is-danger .cm-ui-icon { color: var(--danger); }
.cm-ui-menu-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cm-ui-menu-noicon { width: 18px; flex: 0 0 auto; }
.cm-ui-menu-text { display: flex; flex-direction: column; min-width: 0; }
.cm-ui-menu-label { overflow: hidden; text-overflow: ellipsis; }
.cm-ui-menu-hint { font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-ui-menu-sep { height: 1px; margin: var(--cm-s-1) var(--cm-s-2); background: var(--border); }
/* ---- empty / error / skeleton ------------------------------------------------------------------ */
.cm-ui-empty {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cm-s-2);
padding: var(--cm-s-6) var(--cm-s-5); border-radius: var(--cm-r-lg);
background: var(--surface); border: 1px dashed var(--border-strong); color: var(--text-dim);
}
.cm-ui-empty--page { padding: var(--cm-s-8) var(--cm-s-5); border-style: solid; border-color: var(--border); }
[data-theme="light"] .cm-ui-empty--page { box-shadow: var(--shadow-sm); }
.cm-ui-empty--inline {
flex-direction: row; justify-content: flex-start; text-align: left; gap: var(--cm-s-2); flex-wrap: wrap;
padding: var(--cm-s-2) 0; border: 0; border-radius: 0; background: none; color: var(--text-dim);
}
.cm-ui-empty--inline > .cm-ui-icon { color: var(--text-dim); }
.cm-ui-empty-art {
display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--cm-s-1);
border-radius: 50%; background: var(--cm-tone-soft);
color: var(--cm-tone); color: color-mix(in srgb, var(--cm-tone) 80%, var(--text));
}
.cm-ui-empty--page .cm-ui-empty-art { width: 72px; height: 72px; }
.cm-ui-empty-title { margin: 0; font-size: var(--cm-fs-h3); font-weight: 650; line-height: 1.35; color: var(--text); }
.cm-ui-empty--page .cm-ui-empty-title { font-size: var(--cm-fs-h2); }
.cm-ui-empty--inline .cm-ui-empty-title { font-size: var(--cm-fs-body); font-weight: 500; color: var(--text-dim); }
.cm-ui-empty-body { margin: 0; max-width: 52ch; font-size: var(--cm-fs-body); line-height: 1.55; color: var(--text-dim); }
.cm-ui-empty-actions { display: flex; gap: var(--cm-s-2); flex-wrap: wrap; justify-content: center; margin-top: var(--cm-s-3); }
.cm-ui-error {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cm-s-2);
padding: var(--cm-s-6) var(--cm-s-5); border-radius: var(--cm-r-lg);
background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
}
.cm-ui-error-art {
display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--cm-s-1);
border-radius: 50%; background: var(--danger-soft);
color: var(--danger); color: color-mix(in srgb, var(--danger) 80%, var(--text));
}
.cm-ui-error--page { padding: var(--cm-s-8) var(--cm-s-5); }
.cm-ui-error--page .cm-ui-error-art { width: 72px; height: 72px; }
.cm-ui-error-title { margin: 0; font-size: var(--cm-fs-h3); font-weight: 650; color: var(--text); }
.cm-ui-error--page .cm-ui-error-title { font-size: var(--cm-fs-h2); }
.cm-ui-error-body { margin: 0; max-width: 52ch; font-size: var(--cm-fs-body); line-height: 1.55; }
.cm-ui-error-actions { display: flex; gap: var(--cm-s-2); flex-wrap: wrap; justify-content: center; margin-top: var(--cm-s-3); }
.cm-ui-error--inline {
flex-direction: row; align-items: center; text-align: left; flex-wrap: wrap; gap: var(--cm-s-2);
padding: var(--cm-s-3) var(--cm-s-4); border-radius: var(--cm-r-md);
background: var(--danger-soft); border-color: transparent; color: var(--text);
}
.cm-ui-error--inline > .cm-ui-icon { color: var(--danger); }
.cm-ui-error-text { flex: 1 1 200px; font-size: var(--cm-fs-body); line-height: 1.45; }
.cm-ui-skel { display: block; }
.cm-ui-skel-inner { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-ui-skel--cards .cm-ui-skel-inner,
.cm-ui-skel--tiles .cm-ui-skel-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--cm-s-4); }
.cm-ui-skel--list > .cm-ui-skel-inner, .cm-ui-skel--table > .cm-ui-skel-inner,
.cm-ui-skel--form > .cm-ui-skel-inner, .cm-ui-skel--article > .cm-ui-skel-inner {
padding: var(--cm-s-4); border-radius: var(--cm-r-lg); background: var(--surface); border: 1px solid var(--border);
}
.cm-ui-skel--list > .cm-ui-skel-inner, .cm-ui-skel--table > .cm-ui-skel-inner { padding: var(--cm-s-2) var(--cm-s-4); }
.cm-ui-card .cm-ui-skel > .cm-ui-skel-inner, .cm-ui-list .cm-ui-skel > .cm-ui-skel-inner { padding: 0; border: 0; background: none; }
.cm-ui-skel-bar, .cm-ui-skel-circle, .cm-ui-skel-media, .cm-ui-skel-input {
display: block; flex: 0 0 auto;
background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
background-size: 200% 100%;
animation: cm-ui-shimmer 1.4s ease-in-out infinite;
}
.cm-ui-skel-bar { height: 12px; border-radius: var(--cm-r-pill); }
.cm-ui-skel-bar.is-thin { height: 9px; }
.cm-ui-skel-bar.is-strong { height: 14px; }
.cm-ui-skel-bar.is-title { height: 24px; border-radius: var(--cm-r-sm); }
.cm-ui-skel-bar.is-big { height: 28px; border-radius: var(--cm-r-sm); }
.cm-ui-skel-circle { border-radius: 50%; width: 36px; height: 36px; }
.cm-ui-skel-circle--sm { width: 28px; height: 28px; }
.cm-ui-skel-media { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--cm-r-md); }
.cm-ui-skel-input { height: 40px; border-radius: 11px; }
.cm-ui-skel-row { display: flex; align-items: center; gap: var(--cm-s-3); padding: var(--cm-s-2) 0; }
.cm-ui-skel-col { display: flex; flex-direction: column; gap: var(--cm-s-2); flex: 1 1 auto; min-width: 0; }
.cm-ui-skel-card, .cm-ui-skel-tile {
display: flex; flex-direction: column; gap: var(--cm-s-3); padding: var(--cm-s-4);
border-radius: var(--cm-r-lg); background: var(--surface); border: 1px solid var(--border);
}
.cm-ui-skel-trow { display: grid; grid-template-columns: 3fr 1.2fr 1fr 1fr; gap: var(--cm-s-4); padding: var(--cm-s-3) var(--cm-s-4); border-bottom: 1px solid var(--border); }
.cm-ui-skel--list .cm-ui-skel-inner { gap: 0; }
@keyframes cm-ui-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.cm-ui-async { min-width: 0; }
/* ---- stat tiles --------------------------------------------------------------------------------- */
.cm-ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cm-ui-stat-min, 180px)), 1fr)); gap: var(--cm-s-3); }
.cm-ui-stats-cell { min-width: 0; display: flex; }
.cm-ui-stat {
position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0;
padding: var(--cm-s-4) var(--cm-s-5); border-radius: var(--cm-r-lg);
background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
transition: border-color var(--cm-t-fast) var(--ease), box-shadow var(--cm-t-fast) var(--ease);
}
[data-theme="light"] .cm-ui-stat { box-shadow: var(--shadow-sm); }
.cm-ui-stat.is-interactive { cursor: pointer; }
.cm-ui-stat.is-interactive:hover { border-color: var(--border-hover); }
.cm-ui-stat-head { display: flex; align-items: center; gap: var(--cm-s-2); min-width: 0; }
.cm-ui-stat-icon { display: inline-flex; color: var(--text-dim); }
.cm-ui-stat[class*="cm-ui-tone-"]:not(.cm-ui-tone-neutral) .cm-ui-stat-icon { color: var(--cm-tone); }
.cm-ui-stat-label { flex: 1 1 auto; min-width: 0; font-size: var(--cm-fs-meta); font-weight: 500; color: var(--text-dim); line-height: 1.35; }
.cm-ui-stat-value {
display: flex; align-items: baseline; gap: var(--cm-s-1); flex-wrap: wrap;
font-size: 30px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; font-feature-settings: 'tnum'; color: var(--text);
}
.cm-ui-stat-value.is-suppressed { align-items: center; font-size: var(--cm-fs-body); font-weight: 500; letter-spacing: 0; color: var(--text-dim); min-height: 33px; }
.cm-ui-stat-unit { font-size: var(--text-lg); font-weight: 500; color: var(--text-dim); letter-spacing: 0; }
.cm-ui-stat-delta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px var(--cm-s-1); font-size: var(--cm-fs-meta); font-weight: 600; font-feature-settings: 'tnum'; }
.cm-ui-stat-delta.is-good { color: var(--success); color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-ui-stat-delta.is-bad { color: var(--danger); color: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.cm-ui-stat-delta.is-neutral { color: var(--text-dim); }
.cm-ui-stat-delta-label { font-weight: 400; color: var(--text-dim); }
.cm-ui-stat-hint { margin: 0; font-size: var(--cm-fs-small); line-height: 1.45; color: var(--text-dim); }
/* ---- progress & stacked bar ---------------------------------------------------------------------- */
.cm-ui-progress { display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0; }
.cm-ui-progress-track { position: relative; flex: 1 1 auto; height: 8px; border-radius: var(--cm-r-pill); background: var(--chart-track); overflow: hidden; }
.cm-ui-progress--sm .cm-ui-progress-track { height: 6px; }
.cm-ui-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--cm-tone); transition: width var(--dur-mid) var(--ease); }
.cm-ui-progress.cm-ui-tone-neutral .cm-ui-progress-fill { background: var(--text-faint); }
.cm-ui-progress-value { flex: 0 0 auto; min-width: 3ch; text-align: right; font-size: var(--cm-fs-meta); font-weight: 600; font-feature-settings: 'tnum'; color: var(--text); }
.cm-ui-sbar { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-ui-sbar-track { display: flex; height: 10px; border-radius: var(--cm-r-pill); overflow: hidden; background: var(--chart-track); gap: 2px; }
.cm-ui-sbar-seg { display: block; height: 100%; background: var(--cm-tone); min-width: 3px; }
.cm-ui-sbar-seg.cm-ui-tone-neutral { background: var(--text-faint); }
.cm-ui-sbar-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cm-s-1) var(--cm-s-4); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ui-sbar-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cm-ui-sbar-key { width: 10px; height: 10px; border-radius: 3px; background: var(--cm-tone); flex: 0 0 auto; }
.cm-ui-sbar-legend .cm-ui-tone-neutral .cm-ui-sbar-key { background: var(--text-faint); }
.cm-ui-sbar-num { font-weight: 600; color: var(--text); font-feature-settings: 'tnum'; }
/* ---- key–value ------------------------------------------------------------------------------------ */
.cm-ui-kv { display: grid; grid-template-columns: 1fr; gap: var(--cm-s-3) var(--cm-s-5); margin: 0; align-content: start; }
.cm-ui-kv--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-ui-kv--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-ui-kv-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-ui-kv dt { display: flex; align-items: center; gap: 6px; font-size: var(--cm-fs-small); font-weight: 500; color: var(--text-dim); }
.cm-ui-kv dd { margin: 0; font-size: var(--cm-fs-body); line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.cm-ui-kv-hint { display: block; font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-ui-kv.is-dense { gap: var(--cm-s-2) var(--cm-s-4); }
/* ---- meta line & time ------------------------------------------------------------------------------ */
.cm-ui-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px var(--cm-s-2); min-width: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.45; }
.cm-ui-meta-item { display: inline-flex; align-items: center; gap: var(--cm-s-2); min-width: 0; }
.cm-ui-meta-sep { color: var(--text-faint); }
.cm-ui-time { white-space: nowrap; }
/* ---- lists ---------------------------------------------------------------------------------------- */
.cm-ui-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.cm-ui-list--card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--cm-r-lg); overflow: hidden; }
[data-theme="light"] .cm-ui-list--card { box-shadow: var(--shadow-sm); }
.cm-ui-list.is-divided > .cm-ui-lrow + .cm-ui-lrow { border-top: 1px solid var(--border); }
.cm-ui-lrow {
position: relative; display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0;
padding: var(--cm-s-3) var(--cm-s-4); min-height: 56px;
transition: background var(--cm-t-fast) var(--ease);
}
.cm-ui-list--plain > .cm-ui-lrow { padding-left: 0; padding-right: 0; }
.cm-ui-lrow.is-interactive:hover { background: var(--surface-hover); }
.cm-ui-lrow.is-selected { background: var(--accent-soft); }
.cm-ui-lrow.has-tone::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cm-tone); }
.cm-ui-lrow-lead { flex: 0 0 auto; display: flex; }
.cm-ui-lrow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-ui-lrow-title {
display: block; min-width: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left;
font-size: var(--text-md); font-weight: 600; line-height: 1.4; color: var(--text); text-decoration: none;
overflow-wrap: anywhere; cursor: inherit;
}
a.cm-ui-lrow-title, button.cm-ui-lrow-title { cursor: pointer; }
a.cm-ui-lrow-title::after, button.cm-ui-lrow-title::after { content: ""; position: absolute; inset: 0; }
a.cm-ui-lrow-title:focus-visible, button.cm-ui-lrow-title:focus-visible { outline: none; }
a.cm-ui-lrow-title:focus-visible::after, button.cm-ui-lrow-title:focus-visible::after { outline: 2px solid var(--cm-c-focus); outline-offset: -2px; border-radius: var(--cm-r-sm); }
.cm-ui-lrow-meta { min-width: 0; }
.cm-ui-lrow-body { font-size: var(--cm-fs-body); color: var(--text-dim); line-height: 1.5; }
.cm-ui-lrow-trail { flex: 0 0 auto; display: flex; align-items: center; gap: var(--cm-s-2); position: relative; z-index: 1; }
.cm-ui-lrow.is-unread .cm-ui-lrow-title { font-weight: 700; }
.cm-ui-lrow-dot { position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); }
/* ---- files ------------------------------------------------------------------------------------------ */
.cm-ui-file { position: relative; display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0; padding: var(--cm-s-2) 0; }
.cm-ui-file--tile { flex-direction: column; align-items: flex-start; padding: var(--cm-s-4); border: 1px solid var(--border); border-radius: var(--cm-r-lg); background: var(--surface); }
.cm-ui-file-icon {
position: relative; flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
width: 44px; height: 48px; border-radius: var(--cm-r-sm);
--cm-tone: var(--text-dim); --cm-tone-soft: var(--surface-3);
background: var(--cm-tone-soft); color: var(--cm-tone); color: color-mix(in srgb, var(--cm-tone) 78%, var(--text));
}
.cm-ui-file-k-pdf { --cm-tone: var(--danger); --cm-tone-soft: var(--danger-soft); }
.cm-ui-file-k-doc { --cm-tone: var(--info); --cm-tone-soft: var(--info-soft); }
.cm-ui-file-k-sheet { --cm-tone: var(--success); --cm-tone-soft: var(--success-soft); }
.cm-ui-file-k-slides { --cm-tone: var(--warn); --cm-tone-soft: var(--warn-soft); }
.cm-ui-file-k-image, .cm-ui-file-k-video, .cm-ui-file-k-audio { --cm-tone: var(--accent); --cm-tone-soft: var(--accent-soft); }
.cm-ui-file-ext { font-size: 9px; font-weight: 800; letter-spacing: .04em; line-height: 1; }
.cm-ui-file-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-ui-file-name {
display: block; padding: 0; border: 0; background: none; font: inherit; text-align: left;
font-size: var(--text-md); font-weight: 600; color: var(--text); text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
a.cm-ui-file-name, button.cm-ui-file-name { cursor: pointer; }
a.cm-ui-file-name:hover, button.cm-ui-file-name:hover { color: var(--cm-accent-text); text-decoration: underline; }
.cm-ui-file-actions { flex: 0 0 auto; display: flex; gap: var(--cm-s-1); }
/* ---- data table (cards when the container is narrow) ------------------------------------------------ */
.cm-ui-table-wrap { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-ui-table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--cm-r-lg); background: var(--surface); }
[data-theme="light"] .cm-ui-table-scroll { box-shadow: var(--shadow-sm); }
.cm-ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cm-fs-body); color: var(--text); }
.cm-ui-th {
position: sticky; top: 0; z-index: 1; padding: var(--cm-s-3) var(--cm-s-4);
background: var(--surface-2); border-bottom: 1px solid var(--border);
font-size: var(--cm-fs-small); font-weight: 600; letter-spacing: .02em; color: var(--text-dim); text-align: left; white-space: nowrap;
}
.cm-ui-th:first-child { border-top-left-radius: var(--cm-r-lg); }
.cm-ui-th:last-child { border-top-right-radius: var(--cm-r-lg); }
.cm-ui-th-sort {
display: inline-flex; align-items: center; gap: var(--cm-s-1); padding: 2px 4px; margin: -2px -4px;
border: 0; border-radius: var(--cm-r-sm); background: none; font: inherit; color: inherit; cursor: pointer;
}
.cm-ui-th-sort:hover { color: var(--text); background: var(--surface-hover); }
.cm-ui-th[aria-sort="ascending"], .cm-ui-th[aria-sort="descending"] { color: var(--text); }
.cm-ui-td { padding: var(--cm-s-3) var(--cm-s-4); border-bottom: 1px solid var(--border); vertical-align: middle; line-height: 1.45; }
.cm-ui-tr:last-child > .cm-ui-td { border-bottom: 0; }
.cm-ui-tr.is-clickable { cursor: pointer; }
.cm-ui-tr.is-clickable:hover > .cm-ui-td { background: var(--surface-hover); }
.cm-ui-th.is-end, .cm-ui-td.is-end { text-align: right; font-feature-settings: 'tnum'; }
.cm-ui-th.is-center, .cm-ui-td.is-center { text-align: center; }
.cm-ui-td.is-nowrap { white-space: nowrap; }
.cm-ui-table-wrap.is-dense .cm-ui-td { padding: var(--cm-s-2) var(--cm-s-3); }
.cm-ui-table-wrap.is-dense .cm-ui-th { padding: var(--cm-s-2) var(--cm-s-3); }
.cm-ui-td[data-role="title"] { font-weight: 600; min-width: 200px; }
.cm-ui-td[data-role="actions"] { width: 1%; white-space: nowrap; text-align: right; }
@container (min-width: 641px) and (max-width: 900px) {
.cm-ui-th[data-priority="low"], .cm-ui-td[data-priority="low"] { display: none; }
}
.cm-ui-table-link { color: var(--text); text-decoration: none; font-weight: 600; }
.cm-ui-table-link:hover { color: var(--cm-accent-text); text-decoration: underline; }
.cm-ui-table-foot { display: flex; justify-content: center; }
@container (max-width: 640px) {
.cm-ui-table-scroll { border: 0; background: none; box-shadow: none; overflow: visible; }
.cm-ui-table, .cm-ui-table tbody { display: block; }
.cm-ui-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-ui-tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--cm-s-1) var(--cm-s-2); align-items: start;
padding: var(--cm-s-3) var(--cm-s-4); margin-bottom: var(--cm-s-2);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--cm-r-lg); position: relative;
}
.cm-ui-td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
.cm-ui-td.is-end { text-align: left; }
.cm-ui-td[data-role="title"] { min-width: 0; font-size: var(--text-md); }
.cm-ui-td[data-role="end"] { grid-column: 2; grid-row: 1; text-align: right; width: auto; }
.cm-ui-td[data-role="actions"] { grid-column: 3; grid-row: 1; text-align: right; width: auto; margin: -4px -8px 0 0; }
.cm-ui-td[data-role="title"] { grid-column: 1; grid-row: 1; }
.cm-ui-td[data-role="meta"] { grid-column: 1 / -1; display: flex; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text); }
.cm-ui-td[data-role="meta"]::before { content: attr(data-label); flex: 0 0 auto; min-width: 38%; color: var(--text-dim); }
.cm-ui-td[data-role="badge"], .cm-ui-td[data-role="block"] { grid-column: 1 / -1; }
.cm-ui-td[data-role="hide"] { display: none; }
.cm-ui-tr.is-clickable:hover > .cm-ui-td { background: none; }
.cm-ui-tr.is-clickable:hover { border-color: var(--border-hover); }
.cm-ui-table-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cm-ui-td[data-role="actions"], .cm-ui-td a:not(.cm-ui-table-link), .cm-ui-td button { position: relative; z-index: 1; }
}
/* ---- people ------------------------------------------------------------------------------------------- */
.cm-ui-avatar {
--cm-av: var(--c-1);
position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
width: 36px; height: 36px; border-radius: 50%;
background: var(--surface-3);
background: color-mix(in srgb, var(--cm-av) 22%, var(--surface));
color: var(--cm-av);
color: color-mix(in srgb, var(--cm-av) 70%, var(--text));
font-size: var(--cm-fs-small); font-weight: 700; letter-spacing: .02em; line-height: 1; user-select: none;
}
.cm-ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cm-ui-avatar--xs { width: 20px; height: 20px; font-size: 9px; }
.cm-ui-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.cm-ui-avatar--lg { width: 48px; height: 48px; font-size: var(--text-lg); }
.cm-ui-avatar--xl { width: 64px; height: 64px; font-size: var(--text-xl); }
.cm-ui-av-c1 { --cm-av: var(--c-1); } .cm-ui-av-c2 { --cm-av: var(--c-2); } .cm-ui-av-c3 { --cm-av: var(--c-3); } .cm-ui-av-c4 { --cm-av: var(--c-4); }
.cm-ui-av-c5 { --cm-av: var(--c-5); } .cm-ui-av-c6 { --cm-av: var(--c-6); } .cm-ui-av-c7 { --cm-av: var(--c-7); } .cm-ui-av-c8 { --cm-av: var(--c-8); }
.cm-ui-avstack { display: inline-flex; align-items: center; }
.cm-ui-avstack > .cm-ui-avatar, .cm-ui-avstack-more { box-shadow: 0 0 0 2px var(--surface); }
.cm-ui-avstack > * + * { margin-left: -8px; }
.cm-ui-avstack--xs > * + * { margin-left: -6px; }
.cm-ui-avstack-more {
display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--cm-r-pill);
background: var(--surface-3); color: var(--text-dim); font-size: 11px; font-weight: 700; font-feature-settings: 'tnum';
}
.cm-ui-avstack--xs .cm-ui-avstack-more { min-width: 20px; height: 20px; font-size: 9px; }
.cm-ui-avstack--md .cm-ui-avstack-more { min-width: 36px; height: 36px; }
.cm-ui-person { display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0; }
.cm-ui-person-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cm-ui-person-name { font-size: var(--text-md); font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cm-ui-person-name:hover { text-decoration: underline; }
.cm-ui-person-meta { font-size: var(--cm-fs-meta); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ui-person-trail { flex: 0 0 auto; display: flex; align-items: center; gap: var(--cm-s-2); }
/* ---- callouts ------------------------------------------------------------------------------------------- */
.cm-ui-callout {
position: relative; display: flex; align-items: flex-start; gap: var(--cm-s-3); min-width: 0;
padding: var(--cm-s-3) var(--cm-s-4); border-radius: var(--cm-r-md);
background: var(--cm-tone-soft); color: var(--text);
}
.cm-ui-callout-icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: var(--cm-tone); color: color-mix(in srgb, var(--cm-tone) 80%, var(--text)); }
.cm-ui-callout-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-ui-callout-title { margin: 0; font-size: var(--cm-fs-body); font-weight: 650; line-height: 1.45; }
.cm-ui-callout-body { font-size: var(--cm-fs-body); line-height: 1.5; color: var(--text); }
.cm-ui-callout-title + .cm-ui-callout-body { color: var(--text-dim); }
.cm-ui-callout-body p { margin: 0 0 var(--cm-s-1); }
.cm-ui-callout-actions { flex: 0 0 auto; display: flex; gap: var(--cm-s-2); align-items: center; flex-wrap: wrap; align-self: center; }
.cm-ui-callout-close { margin: -4px -8px -4px 0; }
.cm-ui-callout--banner { border-radius: var(--cm-r-lg); padding: var(--cm-s-4) var(--cm-s-5); border: 1px solid var(--cm-tone-soft); }
.cm-ui-callout--subtle { background: none; padding: var(--cm-s-1) 0; }
.cm-ui-callout--subtle .cm-ui-callout-body { color: var(--text-dim); }
.cm-ui-callout.cm-ui-tone-neutral { background: var(--surface-2); }
/* ---- forms ------------------------------------------------------------------------------------------------ */
.cm-ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cm-ui-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cm-s-2); }
.cm-ui-label { font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text); line-height: 1.4; }
.cm-ui-label-req { color: var(--danger); }
.cm-ui-label-opt { margin-left: var(--cm-s-2); font-weight: 400; color: var(--text-dim); }
.cm-ui-hint { margin: 0; font-size: var(--cm-fs-small); line-height: 1.45; color: var(--text-dim); }
.cm-ui-field-error { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--cm-fs-small); font-weight: 500; color: var(--danger); }
.cm-ui-field.is-invalid .input, .cm-ui-field.is-invalid .cm-ui-select-input { border-color: var(--danger); }
.cm-ui-counter { font-size: var(--cm-fs-small); color: var(--text-dim); font-feature-settings: 'tnum'; white-space: nowrap; }
.cm-ui-counter.is-over { color: var(--danger); font-weight: 600; }
.cm-ui-input, .cm-ui-textarea { min-height: 40px; font-size: var(--cm-fs-body); }
.cm-ui-textarea { resize: vertical; line-height: 1.5; }
.cm-ui-select { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.cm-ui-select-input {
appearance: none; -webkit-appearance: none; width: 100%; min-height: 40px; max-width: 100%;
padding: 0 36px 0 var(--cm-s-3); border: 1px solid var(--border-strong); border-radius: 11px;
background: var(--surface); color: var(--text); font: inherit; font-size: var(--cm-fs-body); cursor: pointer;
text-overflow: ellipsis;
}
.cm-ui-select.has-icon .cm-ui-select-input { padding-left: 36px; }
.cm-ui-select--sm .cm-ui-select-input { min-height: 32px; font-size: var(--cm-fs-meta); }
.cm-ui-select-input:hover { border-color: var(--border-hover); }
.cm-ui-select-input:focus-visible { outline: 2px solid var(--cm-c-focus); outline-offset: 1px; }
.cm-ui-select-chev, .cm-ui-select-icon { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-dim); display: inline-flex; }
.cm-ui-select-chev { right: 12px; }
.cm-ui-select-icon { left: 12px; }
.cm-ui-search { position: relative; display: flex; align-items: center; min-width: 0; width: 100%; }
.cm-ui-search-icon { position: absolute; left: 12px; color: var(--text-dim); display: inline-flex; pointer-events: none; }
.cm-ui-search-input {
width: 100%; min-height: 40px; padding: 0 64px 0 40px; border: 1px solid var(--border-strong); border-radius: var(--cm-r-pill);
background: var(--surface); color: var(--text); font: inherit; font-size: var(--cm-fs-body);
transition: border-color var(--cm-t-fast) var(--ease), box-shadow var(--cm-t-fast) var(--ease);
}
.cm-ui-search-input::placeholder { color: var(--text-dim); opacity: .85; }
.cm-ui-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cm-ui-search-input:hover { border-color: var(--border-hover); }
.cm-ui-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cm-ui-search-input:focus-visible, .cm-ui-chipinput-input:focus-visible { outline: none; }
.cm-ui-search--lg .cm-ui-search-input { min-height: 48px; font-size: var(--text-lg); padding-left: 44px; }
.cm-ui-search--lg .cm-ui-search-icon { left: 14px; }
.cm-ui-search-clear {
position: absolute; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
border: 0; border-radius: 50%; background: none; color: var(--text-dim); cursor: pointer;
}
.cm-ui-search-clear:hover { background: var(--surface-hover); color: var(--text); }
.cm-ui-search-busy { position: absolute; right: 40px; display: inline-flex; color: var(--text-dim); }
.cm-ui-search-clear[hidden], .cm-ui-search-busy[hidden] { display: none; }
.cm-ui-filterbar { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-ui-filterbar-main { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; min-width: 0; }
.cm-ui-filterbar-search { flex: 1 1 280px; min-width: 0; max-width: 480px; }
.cm-ui-filterbar-filters { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; min-width: 0; }
.cm-ui-filterbar-actions { display: flex; align-items: center; gap: var(--cm-s-2); margin-left: auto; }
.cm-ui-filterbar-active { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; min-width: 0; }
.cm-ui-filterbar-summary { margin-left: auto; font-size: var(--cm-fs-meta); color: var(--text-dim); }
/* ---- tabs & segmented ------------------------------------------------------------------------------------------ */
.cm-ui-tabs { position: relative; min-width: 0; }
.cm-ui-tabs-strip { display: flex; align-items: stretch; gap: var(--cm-s-1); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.cm-ui-tabs-strip::-webkit-scrollbar { display: none; }
.cm-ui-tabs-strip.fade-end { -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 40px), transparent); mask-image: linear-gradient(to right, currentColor calc(100% - 40px), transparent); }
.cm-ui-tabs-strip.fade-start { -webkit-mask-image: linear-gradient(to left, currentColor calc(100% - 40px), transparent); mask-image: linear-gradient(to left, currentColor calc(100% - 40px), transparent); }
.cm-ui-tabs-strip.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, currentColor 40px, currentColor calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, currentColor 40px, currentColor calc(100% - 40px), transparent); }
.cm-ui-tabs--line .cm-ui-tabs-strip { gap: var(--cm-s-5); box-shadow: inset 0 -1px 0 var(--border); }
.cm-ui-tab {
position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--cm-s-2);
min-height: 40px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--cm-fs-body); font-weight: 500;
color: var(--text-dim); text-decoration: none; white-space: nowrap; cursor: pointer;
transition: color var(--cm-t-fast) var(--ease), background var(--cm-t-fast) var(--ease);
}
.cm-ui-tab:hover { color: var(--text); }
.cm-ui-tab[aria-disabled="true"], .cm-ui-tab:disabled { opacity: .45; cursor: not-allowed; }
.cm-ui-tabs--line .cm-ui-tab { padding: var(--cm-s-2) 0 10px; }
.cm-ui-tabs--line .cm-ui-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.cm-ui-tabs--line .cm-ui-tab.is-active { color: var(--text); font-weight: 600; }
.cm-ui-tabs--line .cm-ui-tab.is-active::after { background: var(--accent); }
.cm-ui-tabs--pill .cm-ui-tabs-strip { display: inline-flex; max-width: 100%; padding: 3px; gap: 2px; border-radius: var(--cm-r-pill); background: var(--surface-2); border: 1px solid var(--border); }
.cm-ui-tabs--pill .cm-ui-tab { min-height: 34px; padding: 0 var(--cm-s-4); border-radius: var(--cm-r-pill); }
.cm-ui-tabs--pill .cm-ui-tab.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.cm-ui-tab:focus-visible { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; border-radius: var(--cm-r-sm); }
.cm-ui-tab-count {
display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
border-radius: var(--cm-r-pill); background: var(--surface-3); color: var(--text-dim);
font-size: var(--cm-fs-micro); font-weight: 700; font-feature-settings: 'tnum';
}
.cm-ui-tab.is-active .cm-ui-tab-count { background: var(--accent-soft); color: var(--cm-accent-text); }
.cm-ui-seg { display: inline-flex; max-width: 100%; padding: 3px; gap: 2px; border-radius: var(--cm-r-pill); background: var(--surface-2); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.cm-ui-seg::-webkit-scrollbar { display: none; }
.cm-ui-seg--block { display: flex; width: 100%; }
.cm-ui-seg--block .cm-ui-seg-opt { flex: 1 1 0; }
.cm-ui-seg-opt {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 var(--cm-s-4);
border: 0; border-radius: var(--cm-r-pill); background: none; color: var(--text-dim);
font: inherit; font-size: var(--cm-fs-body); font-weight: 500; white-space: nowrap; cursor: pointer;
transition: background var(--cm-t-fast) var(--ease), color var(--cm-t-fast) var(--ease);
}
.cm-ui-seg-opt:hover { color: var(--text); }
.cm-ui-seg-opt.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.cm-ui-seg-opt:disabled { opacity: .45; cursor: not-allowed; }
.cm-ui-seg-opt:focus-visible { outline: 2px solid var(--cm-c-focus); outline-offset: 1px; }
.cm-ui-seg--sm .cm-ui-seg-opt { min-height: 28px; padding: 0 var(--cm-s-3); font-size: var(--cm-fs-meta); }
/* ---- switch, checkbox, choice cards --------------------------------------------------------------------- */
.cm-ui-switch { position: relative; display: inline-flex; align-items: flex-start; gap: var(--cm-s-3); cursor: pointer; min-width: 0; }
.cm-ui-switch.is-disabled { cursor: not-allowed; opacity: .55; }
.cm-ui-switch-input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: inherit; }
.cm-ui-switch-track {
position: relative; flex: 0 0 auto; width: 44px; height: 24px; margin-top: 1px; border-radius: var(--cm-r-pill);
background: var(--surface-3); border: 1px solid var(--border-strong);
transition: background var(--cm-t-fast) var(--ease), border-color var(--cm-t-fast) var(--ease);
}
.cm-ui-switch-thumb {
position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
background: var(--surface-solid); box-shadow: var(--shadow-sm);
transition: transform var(--cm-t-mid) var(--ease);
}
:root:not([data-theme="light"]) .cm-ui-switch-thumb { background: var(--text-dim); }
.cm-ui-switch-input:checked + .cm-ui-switch-track { background: var(--accent); border-color: var(--accent); }
.cm-ui-switch-input:checked + .cm-ui-switch-track .cm-ui-switch-thumb { transform: translateX(20px); background: var(--text-inverse); }
:root:not([data-theme="light"]) .cm-ui-switch-input:checked + .cm-ui-switch-track .cm-ui-switch-thumb { background: var(--text); }
.cm-ui-switch-input:focus-visible + .cm-ui-switch-track { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; }
.cm-ui-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-ui-switch-label { font-size: var(--cm-fs-body); font-weight: 600; color: var(--text); line-height: 1.45; }
.cm-ui-switch-desc { font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.5; }
.cm-ui-check { display: inline-flex; align-items: flex-start; gap: var(--cm-s-3); cursor: pointer; min-width: 0; }
.cm-ui-check-input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: inherit; }
.cm-ui-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-ui-check-label { font-size: var(--cm-fs-body); font-weight: 500; color: var(--text); line-height: 1.45; }
.cm-ui-check-desc { font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.5; }
.cm-ui-choices { display: grid; grid-template-columns: repeat(var(--cm-ui-choice-cols, auto-fill), minmax(min(100%, 220px), 1fr)); gap: var(--cm-s-3); }
.cm-ui-choice {
position: relative; display: flex; align-items: flex-start; gap: var(--cm-s-3); min-width: 0;
padding: var(--cm-s-4); border-radius: var(--cm-r-lg); border: 1px solid var(--border-strong); background: var(--surface);
cursor: pointer; transition: border-color var(--cm-t-fast) var(--ease), background var(--cm-t-fast) var(--ease), box-shadow var(--cm-t-fast) var(--ease);
}
.cm-ui-choice:hover { border-color: var(--border-hover); }
.cm-ui-choice.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.cm-ui-choice.is-disabled { opacity: .5; cursor: not-allowed; }
.cm-ui-choice-input { position: absolute; opacity: 0; pointer-events: none; }
.cm-ui-choice-input:focus-visible ~ .cm-ui-choice-check { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; }
.cm-ui-choice:has(.cm-ui-choice-input:focus-visible) { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; }
.cm-ui-choice-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: var(--cm-s-5); }
.cm-ui-choice-label { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; font-size: var(--text-md); font-weight: 650; color: var(--text); line-height: 1.35; }
.cm-ui-choice-desc { font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.5; }
.cm-ui-choice-check {
position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: transparent; background: var(--surface);
}
.cm-ui-choice.is-selected .cm-ui-choice-check { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
:root:not([data-theme="light"]) .cm-ui-choice.is-selected .cm-ui-choice-check { color: var(--bg); }
.cm-ui-choices.is-compact .cm-ui-choice { padding: var(--cm-s-3); align-items: center; }
.cm-ui-disclosure { border-top: 1px solid var(--border); padding-top: var(--cm-s-2); }
.cm-ui-disclosure-sum {
display: inline-flex; align-items: center; gap: var(--cm-s-2); min-height: 36px; list-style: none; cursor: pointer;
font-size: var(--cm-fs-body); font-weight: 600; color: var(--text); border-radius: var(--cm-r-sm);
}
.cm-ui-disclosure-sum::-webkit-details-marker { display: none; }
.cm-ui-disclosure-sum .cm-ui-icon { color: var(--text-dim); transition: transform var(--cm-t-mid) var(--ease); }
.cm-ui-disclosure[open] > .cm-ui-disclosure-sum .cm-ui-icon { transform: rotate(90deg); }
.cm-ui-disclosure-sum:focus-visible { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; }
.cm-ui-disclosure-body { padding: var(--cm-s-2) 0 var(--cm-s-2) var(--cm-s-5); display: flex; flex-direction: column; gap: var(--cm-s-3); }
/* ---- chips & chip input ------------------------------------------------------------------------------ */
.cm-ui-chip {
display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px;
padding: 0 var(--cm-s-3); border-radius: var(--cm-r-pill); border: 1px solid var(--border-strong);
background: var(--surface); color: var(--text); font: inherit; font-size: var(--cm-fs-meta); font-weight: 500; line-height: 1.3;
text-decoration: none; white-space: nowrap; vertical-align: middle;
}
.cm-ui-chip--sm { min-height: 26px; padding: 0 var(--cm-s-2); font-size: var(--cm-fs-small); }
.cm-ui-chip-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cm-ui-chip .cm-ui-icon { color: var(--text-dim); }
.cm-ui-chip:not(.cm-ui-tone-neutral) { border-color: transparent; background: var(--cm-tone-soft); color: var(--cm-tone); color: color-mix(in srgb, var(--cm-tone) 72%, var(--text)); }
.cm-ui-chip:not(.cm-ui-tone-neutral) .cm-ui-icon { color: inherit; }
button.cm-ui-chip, a.cm-ui-chip { cursor: pointer; transition: background var(--cm-t-fast) var(--ease), border-color var(--cm-t-fast) var(--ease), color var(--cm-t-fast) var(--ease); }
button.cm-ui-chip:hover, a.cm-ui-chip:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.cm-ui-chip.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--cm-accent-text); font-weight: 600; }
.cm-ui-chip.is-selected .cm-ui-icon { color: inherit; }
.cm-ui-chip:focus-visible { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; }
.cm-ui-chip.is-removable { padding-right: 3px; }
.cm-ui-chip-count { font-size: var(--cm-fs-micro); font-weight: 700; color: var(--text-dim); font-feature-settings: 'tnum'; }
.cm-ui-chip-remove {
display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 2px;
border: 0; border-radius: 50%; background: none; color: inherit; opacity: .75; cursor: pointer;
}
.cm-ui-chip-remove:hover { opacity: 1; background: var(--surface-hover); }
.cm-ui-chip-remove:focus-visible { outline: 2px solid var(--cm-c-focus); outline-offset: 1px; opacity: 1; }
.cm-ui-chipinput { position: relative; min-width: 0; }
.cm-ui-chipinput-box {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 6px var(--cm-s-3) 6px 40px;
border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); cursor: text; position: relative;
transition: border-color var(--cm-t-fast) var(--ease), box-shadow var(--cm-t-fast) var(--ease);
}
.cm-ui-chipinput-box:hover { border-color: var(--border-hover); }
.cm-ui-chipinput-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cm-ui-chipinput-icon { position: absolute; left: 12px; top: 12px; color: var(--text-dim); display: inline-flex; }
.cm-ui-chipinput-chips { display: contents; }
.cm-ui-chipinput-input { flex: 1 1 140px; min-width: 120px; min-height: 30px; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: var(--cm-fs-body); }
.cm-ui-chipinput-input::placeholder { color: var(--text-dim); opacity: .85; }
.cm-ui-listbox {
position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 320px; overflow-y: auto;
padding: var(--cm-s-1); border-radius: var(--cm-r-md); background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
}
.cm-ui-listbox[hidden] { display: none; }
.cm-ui-listbox-group { padding: var(--cm-s-2) var(--cm-s-3) var(--cm-s-1); font-size: var(--cm-fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.cm-ui-option { display: flex; align-items: center; gap: var(--cm-s-3); min-height: 44px; padding: 6px var(--cm-s-3); border-radius: var(--cm-r-sm); cursor: pointer; }
.cm-ui-option.is-active, .cm-ui-option:hover { background: var(--surface-hover); }
.cm-ui-option.is-active { box-shadow: inset 2px 0 0 var(--accent); }
.cm-ui-option-icon { display: inline-flex; width: 28px; justify-content: center; color: var(--text-dim); }
.cm-ui-option.is-create .cm-ui-option-icon { color: var(--cm-accent-text); }
.cm-ui-option-text { display: flex; flex-direction: column; min-width: 0; }
.cm-ui-option-label { font-size: var(--cm-fs-body); font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ui-option-label mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; font-weight: 700; }
.cm-ui-option-meta { font-size: var(--cm-fs-small); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ui-listbox-state { display: flex; align-items: flex-start; gap: var(--cm-s-3); padding: var(--cm-s-3); font-size: var(--cm-fs-body); color: var(--text); }
.cm-ui-listbox-state > .cm-ui-icon { color: var(--text-dim); margin-top: 1px; }
.cm-ui-listbox-state > span { display: flex; flex-direction: column; gap: 2px; }
.cm-ui-listbox-hint { font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-ui-listbox-loading { padding: 0 var(--cm-s-3); }
.cm-ui-listbox .cm-ui-error--inline { margin: var(--cm-s-1); }
/* ---- modal & sheet (on the RetailOps .modal) --------------------------------------------------------------- */
.cm-ui-modal { color: var(--text); }
.cm-ui-modal--sm { max-width: 440px; }
.cm-ui-modal--md { max-width: 640px; }
.cm-ui-modal--lg { max-width: 880px; }
.cm-ui-modal--xl { max-width: 1120px; }
.cm-ui-modal-header { gap: var(--cm-s-3); padding: var(--cm-s-4) var(--cm-s-5); }
.cm-ui-modal-title { font-size: var(--text-lg); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.cm-ui-modal-close { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }
.cm-ui-modal-body { padding: var(--cm-s-5); display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-ui-modal-footer { padding: var(--cm-s-3) var(--cm-s-5); flex-wrap: wrap; }
.cm-ui-modal-footer[hidden] { display: none; }
.cm-ui-confirm-text { margin: 0; font-size: var(--cm-fs-body); line-height: 1.55; color: var(--text); }
/* ---- load more & pager ------------------------------------------------------------------------------------ */
.cm-ui-more { display: flex; flex-direction: column; align-items: center; gap: var(--cm-s-2); padding: var(--cm-s-3) 0; }
.cm-ui-more-count { font-size: var(--cm-fs-meta); color: var(--text-dim); font-feature-settings: 'tnum'; }
.cm-ui-more-end { margin: 0; display: inline-flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ui-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; width: 100%; padding: var(--cm-s-1) 0; }
.cm-ui-pager-range { font-size: var(--cm-fs-meta); color: var(--text-dim); font-feature-settings: 'tnum'; }
.cm-ui-pager-btns { display: inline-flex; align-items: center; gap: var(--cm-s-2); }
.cm-ui-pager-page { font-size: var(--cm-fs-meta); color: var(--text); font-feature-settings: 'tnum'; white-space: nowrap; }
/* ---- stepper ------------------------------------------------------------------------------------------------ */
.cm-ui-stepper { min-width: 0; }
.cm-ui-stepper-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 0; overflow-x: auto; scrollbar-width: none; }
.cm-ui-stepper-list::-webkit-scrollbar { display: none; }
.cm-ui-step { position: relative; flex: 1 1 0; min-width: 120px; display: flex; }
.cm-ui-step + .cm-ui-step::before {
content: ""; position: absolute; top: 15px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; border-radius: 2px; background: var(--border-strong);
}
.cm-ui-step.is-done + .cm-ui-step::before, .cm-ui-step.is-done + .cm-ui-step.is-current::before { background: var(--success); }
.cm-ui-step-btn {
display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 var(--cm-s-2) var(--cm-s-1);
border: 0; background: none; font: inherit; color: var(--text-dim); text-align: center; border-radius: var(--cm-r-md);
}
button.cm-ui-step-btn { cursor: pointer; }
button.cm-ui-step-btn:hover { color: var(--text); }
button.cm-ui-step-btn:hover .cm-ui-step-mark { border-color: var(--border-hover); }
.cm-ui-step-btn:focus-visible { outline: 2px solid var(--cm-c-focus); outline-offset: 2px; }
.cm-ui-step-mark {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
border: 2px solid var(--border-strong); background: var(--surface); color: var(--text-dim);
font-size: var(--cm-fs-meta); font-weight: 700; font-feature-settings: 'tnum'; position: relative; z-index: 1;
}
.cm-ui-step-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
.cm-ui-step-label { font-size: var(--cm-fs-meta); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cm-ui-step-hint { font-size: var(--cm-fs-small); color: var(--text-dim); line-height: 1.3; }
.cm-ui-step.is-current .cm-ui-step-mark { border-color: var(--accent); background: var(--accent); color: var(--text-inverse); box-shadow: 0 0 0 4px var(--accent-soft); }
:root:not([data-theme="light"]) .cm-ui-step.is-current .cm-ui-step-mark { color: var(--bg); }
.cm-ui-step.is-current .cm-ui-step-label { color: var(--text); }
.cm-ui-step.is-done .cm-ui-step-mark { border-color: var(--success); background: var(--success-soft); color: var(--success); color: color-mix(in srgb, var(--success) 72%, var(--text)); }
/* A step that is both current and done reads as current (the done rule above would otherwise put --bg text on --success-soft). */
.cm-ui-step.is-current.is-done .cm-ui-step-mark { border-color: var(--accent); background: var(--accent); color: var(--text-inverse); }
:root:not([data-theme="light"]) .cm-ui-step.is-current.is-done .cm-ui-step-mark { color: var(--bg); }
.cm-ui-step.is-error .cm-ui-step-mark { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.cm-ui-step.is-error .cm-ui-step-label { color: var(--danger); color: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.cm-ui-step.is-locked .cm-ui-step-btn { opacity: .6; cursor: not-allowed; }
.cm-ui-stepper-compact { display: none; }
/* ---- responsive --------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
.cm-ui-split { grid-template-columns: minmax(0, 1fr); }
.cm-ui-split-rail { position: static; }
.cm-ui-split.is-rail-first .cm-ui-split-rail { order: -1; }
.cm-ui-kv--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.cm-ui-page { gap: var(--cm-s-4); padding-bottom: var(--cm-s-7); }
.cm-ui-page-body { gap: var(--cm-s-4); }
.cm-ui-ph-title { font-size: 22px; }
.cm-ui-ph-sub { font-size: var(--text-md); }
.cm-ui-ph-actions { margin-left: 0; width: 100%; padding-top: 0; }
.cm-ui-ph-actions > .btn-primary { flex: 1 1 auto; }
.cm-ui-section--card { padding: var(--cm-s-4); }
.cm-ui-card-head { padding: var(--cm-s-4) var(--cm-s-4) 0; }
.cm-ui-card-body { padding: var(--cm-s-3) var(--cm-s-4) var(--cm-s-4); }
.cm-ui-card-foot { padding: var(--cm-s-3) var(--cm-s-4); }
.cm-ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-s-2); }
.cm-ui-stat { padding: var(--cm-s-3) var(--cm-s-4); }
.cm-ui-stat-value { font-size: 24px; }
.cm-ui-kv--cols-2, .cm-ui-kv--cols-3 { grid-template-columns: minmax(0, 1fr); }
.cm-ui-btn, .cm-ui-select-input, .cm-ui-search-input, .cm-ui-input, .cm-ui-tab, .cm-ui-seg-opt, .cm-ui-chip { min-height: var(--cm-target); }
.cm-ui-btn--sm { min-height: 36px; }
.cm-ui-iconbtn { width: var(--cm-target); height: var(--cm-target); }
.cm-ui-ph-back { min-height: var(--cm-target); }
.cm-ui-tabs--line .cm-ui-tabs-strip { gap: var(--cm-s-4); }
.cm-ui-filterbar-search { flex-basis: 100%; max-width: none; }
.cm-ui-filterbar-actions { margin-left: 0; }
.cm-ui-empty, .cm-ui-error { padding: var(--cm-s-5) var(--cm-s-4); }
.cm-ui-empty--page, .cm-ui-error--page { padding: var(--cm-s-7) var(--cm-s-4); }
.cm-ui-callout { padding: var(--cm-s-3); flex-wrap: wrap; }
.cm-ui-callout-text { flex: 1 1 0; }
.cm-ui-callout-actions { order: 1; flex: 1 1 100%; margin-left: 32px; align-self: flex-start; }
.cm-ui-pager .cm-ui-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-ui-pager .cm-ui-btn { padding-left: .7rem; padding-right: .7rem; }
.cm-ui-seg { display: flex; width: 100%; }
.cm-ui-seg-opt { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; text-align: center; padding: 4px var(--cm-s-2); }
.cm-ui-lrow:has(.cm-ui-lrow-trail .btn) { flex-wrap: wrap; }
.cm-ui-lrow:has(.cm-ui-lrow-lead) .cm-ui-lrow-trail:has(.btn) { flex: 1 1 100%; padding-left: 52px; }
.cm-ui-lrow-trail:has(.btn) { flex: 1 1 100%; }
.cm-ui-lrow { padding: var(--cm-s-3); }
.cm-ui-stepper-list { display: none; }
.cm-ui-stepper-compact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--cm-s-1) var(--cm-s-2); align-items: baseline; }
.cm-ui-stepper-count { font-size: var(--cm-fs-meta); color: var(--text-dim); font-feature-settings: 'tnum'; }
.cm-ui-stepper-name { font-size: var(--text-md); font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ui-stepper-compact .cm-ui-progress { grid-column: 1 / -1; }
.cm-ui-modal.is-sheet .cm-ui-modal-footer .btn { flex: 1 1 auto; }
.cm-ui-modal-body { padding: var(--cm-s-4); }
.cm-ui-menu { min-width: min(260px, calc(100vw - 16px)); }
.cm-ui-menu-item { min-height: 44px; }
}
/* Bottom sheet up to 900 px. The RetailOps base makes every .modal full screen there (with !important);
kit dialogs keep their content height as a sheet, and fullHeight:true opts back into full screen. */
@media (max-width: 900px) {
.cm-ui-backdrop.has-sheet { align-items: flex-end !important; padding: 0 !important; }
.cm-ui-modal.is-sheet {
height: auto; max-height: 92vh; max-height: 92dvh;
border-radius: var(--cm-r-xl) var(--cm-r-xl) 0 0 !important; border-bottom: 0;
animation: cm-ui-sheet-in 200ms var(--ease);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.cm-ui-modal.is-sheet.is-full { height: 100%; max-height: 100dvh; border-radius: 0 !important; }
.cm-ui-modal.is-sheet .cm-ui-modal-footer { border-radius: 0; }
}
@keyframes cm-ui-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* ---- kiosk (shared device): bigger targets ------------------------------------------------------------------ */
[data-kiosk="1"] .cm-ui-btn, [data-kiosk="1"] .cm-ui-tab, [data-kiosk="1"] .cm-ui-seg-opt, [data-kiosk="1"] .cm-ui-chip { min-height: 48px; }
[data-kiosk="1"] .cm-ui-iconbtn { width: 48px; height: 48px; }
[data-kiosk="1"] .cm-ui-lrow-title { font-size: var(--text-lg); }
/* ---- reduced motion ----------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.cm-ui-skel-bar, .cm-ui-skel-circle, .cm-ui-skel-media, .cm-ui-skel-input, .cm-ui-spinner { animation: none; }
.cm-ui-menu, .cm-ui-modal.is-sheet { animation: none; }
.cm-ui-card, .cm-ui-stat, .cm-ui-lrow, .cm-ui-tab, .cm-ui-seg-opt, .cm-ui-chip, .cm-ui-choice, .cm-ui-switch-thumb,
.cm-ui-switch-track, .cm-ui-progress-fill, .cm-ui-iconbtn, .cm-ui-disclosure-sum .cm-ui-icon { transition: none; }
}
/* ---- the kit gallery (#/comms/admin/ui-kit, ui-kit.js) ------------------------------------------------------- */
.cm-ui-gal { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--cm-s-6); align-items: start; }
.cm-ui-gal-nav { position: sticky; top: var(--cm-s-4); max-height: calc(100vh - 32px); overflow-y: auto; }
.cm-ui-gal-body { min-width: 0; }
.cm-ui-gal-anchor { scroll-margin-top: var(--cm-s-4); outline: none; }
.cm-ui-gal-example { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-ui-gal-caption { margin: 0; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-ui-gal-stage { min-width: 0; padding: var(--cm-s-5); border-radius: var(--cm-r-lg); border: 1px dashed var(--border-strong); background: var(--bg); }
.cm-ui-gal-stage.is-plain { background: transparent; }
.cm-ui-gal-p { margin: 0; font-size: var(--cm-fs-body); line-height: 1.55; color: var(--text); }
.cm-ui-gal-note { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ui-gal-code { font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-ui-gal-type { margin: 0; color: var(--text); }
.cm-ui-gal-t-title { font-size: var(--cm-fs-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.cm-ui-gal-t-h2 { font-size: var(--cm-fs-h2); font-weight: 650; line-height: 1.3; }
.cm-ui-gal-t-h3 { font-size: var(--cm-fs-h3); font-weight: 650; line-height: 1.35; }
.cm-ui-gal-t-read { font-size: var(--cm-fs-read); line-height: 1.7; max-width: 68ch; }
.cm-ui-gal-t-body { font-size: var(--cm-fs-body); }
.cm-ui-gal-t-meta { font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ui-gal-t-small { font-size: var(--cm-fs-small); font-weight: 600; }
.cm-ui-gal-t-micro { font-size: var(--cm-fs-micro); font-weight: 600; letter-spacing: .08em; color: var(--text-dim); }
.cm-ui-gal-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--cm-s-3); }
.cm-ui-gal-swatch { display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0; }
.cm-ui-gal-swatch-chip { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--cm-r-md); border: 1px solid var(--border-strong); }
.cm-ui-gal-swatch-text { display: flex; flex-direction: column; min-width: 0; font-size: var(--cm-fs-meta); }
.cm-ui-gal-swatch-text code { font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-ui-gal-spaces { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-ui-gal-space { display: flex; align-items: center; gap: var(--cm-s-3); font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-ui-gal-space-bar { display: block; height: 12px; border-radius: 3px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cm-ui-gal-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--cm-s-1); }
.cm-ui-gal-ic {
margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--cm-s-3) var(--cm-s-1) var(--cm-s-2);
border-radius: var(--cm-r-md); color: var(--text); min-width: 0;
}
.cm-ui-gal-ic:hover { background: var(--surface-hover); }
.cm-ui-gal-ic figcaption { max-width: 100%; font-size: 10px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ui-gal-map { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--cm-s-3); align-items: start; }
.cm-ui-gal-map-label { font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text); padding-top: 2px; }
.cm-ui-gal-map-items { display: flex; flex-wrap: wrap; gap: var(--cm-s-2) var(--cm-s-4); }
.cm-ui-gal-map-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.cm-ui-gal-map-item code { font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-ui-gal-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: var(--cm-r-lg) var(--cm-r-lg) 0 0; background: var(--surface-3); color: var(--text-dim); }
.cm-ui-gal-narrow { max-width: 420px; }
.cm-ui-gal-results { min-height: 56px; }
@media (max-width: 900px) {
.cm-ui-gal { grid-template-columns: minmax(0, 1fr); gap: var(--cm-s-4); }
.cm-ui-gal-nav { display: none; }
}
@media (max-width: 600px) {
.cm-ui-gal-icons { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.cm-ui-gal-stage { padding: var(--cm-s-3); }
.cm-ui-gal-map { grid-template-columns: minmax(0, 1fr); gap: var(--cm-s-2); }
}
/* ---- comms: render (design/comms/css/render.css) ---- */
/* ==========================================================================
comms — render (reader content). Styles the HTML that render/web.js returns
for GET /api/comms/posts/:id/read: everything lives under .cm-doc, so none
of these rules can leak into page chrome. Tokens only (main.css), both themes.
Block vocabulary: .cm-b + .cm-h2/.cm-h3/.cm-p/.cm-list/.cm-figure/.cm-gallery/
.cm-video/.cm-btn-row/.cm-columns/.cm-callout/.cm-quote/.cm-hr/.cm-spacer/
.cm-facts/.cm-table-wrap/.cm-file/.cm-widget/.cm-kpi/.cm-people/.cm-product
========================================================================== */
.cm-doc {
color: var(--text);
font-size: var(--text-lg);
line-height: 1.65;
overflow-wrap: anywhere;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.cm-doc > .cm-b, .cm-doc .cm-col > .cm-b { margin: 0; }
.cm-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cm-doc a:hover { color: var(--accent-strong); }
.cm-doc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
/* ---- text ---------------------------------------------------------------- */
.cm-doc .cm-h { color: var(--text); line-height: 1.3; font-weight: 700; scroll-margin-top: 5rem; }
.cm-doc .cm-h2 { font-size: var(--text-xl); margin-top: .75rem; }
.cm-doc .cm-h3 { font-size: var(--text-lg); margin-top: .25rem; }
.cm-doc .cm-list { padding-left: 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.cm-doc s { color: var(--text-faint); }
/* ---- media ----------------------------------------------------------------- */
.cm-doc img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); background: var(--surface-3); }
.cm-doc .cm-figure-half { max-width: 50%; }
.cm-doc .cm-caption { margin-top: .4rem; font-size: var(--text-sm); color: var(--text-dim); }
.cm-doc .cm-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.cm-doc .cm-gallery-3, .cm-doc .cm-gallery-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-doc .cm-gallery-1 { grid-template-columns: minmax(0, 1fr); }
.cm-doc .cm-gallery-item { margin: 0; }
.cm-doc .cm-gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cm-doc .cm-video-link {
position: relative;
display: block;
color: var(--text);
text-decoration: none;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--surface-3);
}
.cm-doc .cm-video-poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.cm-doc .cm-video-placeholder { display: block; aspect-ratio: 16 / 9; background: var(--surface-3); }
.cm-doc .cm-video-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -60%);
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--overlay);
color: var(--text-inverse);
font-size: var(--text-xl);
}
.cm-doc .cm-video-title { display: block; padding: .6rem .8rem; font-weight: 600; background: var(--surface-2); }
/* ---- actions --------------------------------------------------------------- */
.cm-doc .cm-btn {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: .55rem 1.25rem;
border-radius: var(--radius-sm);
font-weight: 600;
text-decoration: none;
border: 1px solid var(--accent);
transition: background var(--dur-fast) var(--ease);
}
.cm-doc .cm-btn-primary { background: var(--accent); color: var(--text-inverse); }
.cm-doc .cm-btn-primary:hover { background: var(--accent-strong); color: var(--text-inverse); }
.cm-doc .cm-btn-secondary { background: transparent; color: var(--accent); }
.cm-doc .cm-btn-secondary:hover { background: var(--accent-soft); }
.cm-doc .cm-btn.is-disabled { opacity: .6; cursor: default; }
.cm-doc .cm-file-link {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem .8rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--text);
background: var(--surface-2);
}
.cm-doc .cm-file-link:hover { background: var(--surface-hover); color: var(--text); }
.cm-doc .cm-file-size { color: var(--text-faint); font-size: var(--text-sm); }
/* ---- layout blocks ----------------------------------------------------------- */
.cm-doc .cm-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.cm-doc .cm-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cm-doc .cm-hr { border: 0; border-top: 1px solid var(--border-strong); width: 100%; }
.cm-doc .cm-spacer-s { height: .25rem; }
.cm-doc .cm-spacer-m { height: .75rem; }
.cm-doc .cm-spacer-l { height: 2rem; }
/* ---- callouts and quotes ------------------------------------------------------ */
.cm-doc .cm-callout {
--cm-fg: var(--info);
--cm-bg: var(--info-soft);
padding: .85rem 1rem;
border-left: 4px solid var(--cm-fg);
border-radius: var(--radius-sm);
background: var(--cm-bg);
}
.cm-doc .cm-callout p { margin: 0; }
.cm-doc .cm-callout-warning { --cm-fg: var(--warn); --cm-bg: var(--warn-soft); }
.cm-doc .cm-callout-success { --cm-fg: var(--success); --cm-bg: var(--success-soft); }
.cm-doc .cm-quote {
padding: .25rem 0 .25rem 1rem;
border-left: 4px solid var(--accent-2);
font-size: var(--text-xl);
font-style: italic;
color: var(--text);
}
.cm-doc .cm-quote p { margin: 0; }
.cm-doc .cm-quote-cite { margin-top: .4rem; font-size: var(--text-sm); font-style: normal; color: var(--text-dim); }
/* ---- data --------------------------------------------------------------------- */
.cm-doc .cm-facts { display: grid; gap: 0; border-top: 1px solid var(--border); }
.cm-doc .cm-fact {
display: grid;
grid-template-columns: minmax(8rem, 35%) 1fr;
gap: 1rem;
padding: .5rem 0;
border-bottom: 1px solid var(--border);
}
.cm-doc .cm-fact dt { font-weight: 600; color: var(--text-dim); }
.cm-doc .cm-fact dd { margin: 0; }
.cm-doc .cm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cm-doc .cm-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-doc .cm-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.cm-doc .cm-table th, .cm-doc .cm-table td { padding: .5rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.cm-doc .cm-table th { background: var(--surface-2); font-weight: 600; color: var(--text); }
.cm-doc .cm-table tr:last-child td { border-bottom: 0; }
.cm-doc .cm-kpi {
display: flex;
flex-direction: column;
gap: .15rem;
padding: 1rem 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-2);
}
.cm-doc .cm-kpi-value { font-size: var(--text-3xl); line-height: 1.1; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.cm-doc .cm-kpi-unit { font-size: var(--text-lg); margin-left: .2rem; }
.cm-doc .cm-kpi-label { color: var(--text-dim); font-size: var(--text-md); }
.cm-doc .cm-kpi-delta { font-weight: 700; font-size: var(--text-sm); }
.cm-doc .cm-kpi-up { color: var(--success); }
.cm-doc .cm-kpi-down { color: var(--danger); }
.cm-doc .cm-kpi-flat { color: var(--text-faint); }
/* ---- people and products ------------------------------------------------------- */
.cm-doc .cm-people { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.cm-doc .cm-person {
display: flex;
flex-direction: column;
padding: .6rem .8rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.cm-doc .cm-person-name { font-weight: 600; }
.cm-doc .cm-person-role { font-size: var(--text-sm); color: var(--text-dim); }
.cm-doc .cm-product {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: .8rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.cm-doc .cm-product-media { flex: 0 0 7rem; }
.cm-doc .cm-product-media img { width: 7rem; aspect-ratio: 1; object-fit: contain; background: var(--surface); }
.cm-doc .cm-product-body p { margin: 0; }
.cm-doc .cm-product-name { font-weight: 700; }
.cm-doc .cm-product-sku { font-size: var(--text-sm); color: var(--text-faint); }
.cm-doc .cm-product-link { margin-top: .35rem !important; }
/* ---- widget slots (article.js mounts poll / quiz / event / ack here) ----------- */
.cm-doc .cm-widget {
padding: 1rem;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-md);
background: var(--surface-2);
}
.cm-doc .cm-widget.is-mounted { border-style: solid; }
.cm-doc .cm-widget-fallback { color: var(--text-dim); font-size: var(--text-md); }
.cm-doc .cm-widget-fallback p { margin: 0; }
/* ---- small screens / kiosk / print -------------------------------------------- */
@media (max-width: 720px) {
.cm-doc { font-size: var(--text-md); }
.cm-doc .cm-columns { grid-template-columns: minmax(0, 1fr); }
.cm-doc .cm-figure-half { max-width: 100%; }
.cm-doc .cm-gallery-3, .cm-doc .cm-gallery-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-doc .cm-fact { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}
[data-kiosk="1"] .cm-doc { font-size: var(--text-xl); }
[data-kiosk="1"] .cm-doc .cm-btn { min-height: 3.25rem; }
@media (prefers-reduced-motion: reduce) { .cm-doc .cm-btn { transition: none; } }
@media print {
.cm-doc .cm-widget, .cm-doc .cm-btn-row { display: none; }
.cm-doc a { color: inherit; }
}
/* ---- comms: feed (design/comms/css/feed.css) ---- */
/* ==========================================================================
comms — reader pages (News home, conversation cards, article, communities,
required reading, search, opt-in link page) + the frontline pages' legacy
rules kept below (kiosk chrome, huddle, my data, TV loop).
Built on the UI kit (ui-kit.css, cm-ui-*). Tokens only: no literal colours,
both themes. Community accents map to the chart palette (--c-*).
========================================================================== */
/* ---- Shared bits ----------------------------------------------------------- */
[class^="cm-cv-"][hidden], [class*=" cm-cv-"][hidden], [class^="cm-cp-"][hidden], [class*=" cm-cp-"][hidden],
[class^="cm-cc-"][hidden], [class*=" cm-cc-"][hidden], [class^="cm-cf-"][hidden], [class*=" cm-cf-"][hidden],
[class^="cm-sr-"][hidden], [class*=" cm-sr-"][hidden], [class^="cm-art-"][hidden], [class*=" cm-art-"][hidden],
[class^="cm-cmt-"][hidden], [class*=" cm-cmt-"][hidden], [class^="cm-mr-"][hidden], [class*=" cm-mr-"][hidden] { display: none !important; }
.cm-center { text-align: center; }
.cm-form-error { margin: 0; min-height: 0; color: var(--danger); color: color-mix(in srgb, var(--danger) 80%, var(--text)); font-size: var(--cm-fs-meta); }
.cm-form-error:empty { display: none; }
.cm-banner-text { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 auto; min-width: 0; }
.cm-mark { background: var(--warn-soft); color: inherit; border-radius: 2px; padding: 0 1px; }
.cm-back { color: var(--text-dim); text-decoration: none; font-size: var(--cm-fs-meta); font-weight: 500; }
.cm-back:hover { color: var(--text); }
.cm-loading { color: var(--text-dim); font-size: var(--cm-fs-meta); }
/* community accents (cover wash, monogram tiles, swatches) */
.cm-acc-indigo { --cm-acc: var(--c-1); }
.cm-acc-violet { --cm-acc: var(--c-2); }
.cm-acc-sky { --cm-acc: var(--c-3); }
.cm-acc-green { --cm-acc: var(--c-4); }
.cm-acc-amber { --cm-acc: var(--c-5); }
.cm-acc-rose { --cm-acc: var(--c-6); }
.cm-acc-teal { --cm-acc: var(--c-7); }
.cm-acc-slate { --cm-acc: var(--text-dim); }
/* ---- Community visuals (logo / cover / chip) ------------------------------ */
.cm-cm-logo {
--cm-logo: 48px;
position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: var(--cm-logo); height: var(--cm-logo); border-radius: calc(var(--cm-logo) * .26); overflow: hidden;
background: var(--cm-acc, var(--accent)); color: var(--surface-solid);
font-weight: 700; letter-spacing: .01em; line-height: 1; user-select: none;
}
.cm-cm-logo--xs { --cm-logo: 18px; font-size: 8px; border-radius: 5px; }
.cm-cm-logo--sm { --cm-logo: 32px; font-size: 12px; }
.cm-cm-logo--md { --cm-logo: 48px; font-size: var(--text-lg); }
.cm-cm-logo--lg { --cm-logo: 56px; font-size: var(--text-xl); }
.cm-cm-logo--xl { --cm-logo: 88px; font-size: 30px; }
.cm-cm-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--cm-t-mid) var(--ease); }
.cm-cm-logo-img.is-loaded { opacity: 1; }
.cm-cm-cover {
position: relative; overflow: hidden; background-color: var(--surface-3);
background-image:
radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--cm-acc, var(--accent)) 46%, transparent) 0%, transparent 55%),
radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--cm-acc, var(--accent)) 30%, transparent) 0%, transparent 60%),
linear-gradient(135deg, color-mix(in srgb, var(--cm-acc, var(--accent)) 30%, var(--surface)) 0%, color-mix(in srgb, var(--cm-acc, var(--accent)) 12%, var(--surface)) 100%);
}
.cm-cm-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--cm-t-mid) var(--ease); }
.cm-cm-cover-img.is-loaded { opacity: 1; }
.cm-cm-chip {
position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
color: var(--text); text-decoration: none; font-weight: 600;
}
.cm-cm-chip:hover .cm-cm-chip-name { text-decoration: underline; }
.cm-cm-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-cm-lowbw="1"] .cm-cm-cover-img { display: none; }
/* ---- Home ------------------------------------------------------------------ */
.cm-home-head .cm-ui-ph-actions { flex: 0 1 400px; flex-wrap: nowrap; }
.cm-home-search { flex: 1 1 auto; min-width: 0; }
.cm-home-search .cm-ui-search { width: 100%; }
.cm-home-tabs { margin-bottom: calc(var(--cm-s-1) * -1); }
.cm-home-split > .cm-ui-split-main { gap: var(--cm-s-4); }
.cm-home-section-title { margin: 0 0 var(--cm-s-2); display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta);
font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.cm-featured-host:empty, .cm-pinned-host:empty, .cm-mr-host:empty { display: none; }
.cm-lowbw-toggle.is-on { color: var(--cm-accent-text); }
/* Must-read strip ("To read"): one quiet card, rows, leaves by itself */
.cm-mr { overflow: hidden; }
.cm-mr-head { display: flex; align-items: center; gap: var(--cm-s-3); padding: var(--cm-s-4) var(--cm-s-5) var(--cm-s-2); }
.cm-mr-titles { flex: 1 1 auto; min-width: 0; }
.cm-mr-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--cm-s-2); font-size: var(--cm-fs-h3); font-weight: 650; color: var(--text); }
.cm-mr-count { font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-mr-hint { margin: 2px 0 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-mr > .cm-ui-callout { margin: 0 var(--cm-s-5) var(--cm-s-2); }
.cm-mr-list { padding: 0 var(--cm-s-2) var(--cm-s-2); }
.cm-mr-list > .cm-ui-lrow { padding-left: var(--cm-s-3); padding-right: var(--cm-s-3); border-radius: var(--radius-md); }
.cm-mr-list .cm-ui-lrow-meta .cm-ui-meta { flex-wrap: wrap; }
.cm-mr-more { display: block; padding: 0 var(--cm-s-5) var(--cm-s-4); font-size: var(--cm-fs-meta); font-weight: 600; color: var(--cm-accent-text); text-decoration: none; }
.cm-mr-more:hover { text-decoration: underline; }
/* Featured (hero) carousel */
.cm-carousel { position: relative; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-carousel-slide { display: none; }
.cm-carousel-slide.is-active { display: block; animation: cm-fade var(--dur-mid) var(--ease); }
.cm-carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--cm-s-2); }
.cm-carousel-dots { display: inline-flex; gap: 6px; }
.cm-carousel-dot {
appearance: none; -webkit-appearance: none; width: 8px; height: 8px; padding: 0; border-radius: 999px;
border: 0; background: var(--border-strong); cursor: pointer; transition: width var(--cm-t-fast) var(--ease), background var(--cm-t-fast) var(--ease);
}
.cm-carousel-dot.is-active { width: 22px; background: var(--accent); }
.cm-carousel-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
/* Rail */
.cm-rail-card .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-rail-req { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-2); }
.cm-rail-req-line { margin: 0; display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-body); color: var(--text); }
.cm-rail-req-line.is-done { color: var(--text-dim); }
.cm-rail-req-line.is-done .cm-ui-icon { color: var(--success); }
.cm-rail-empty { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.5; }
.cm-rail-comm-list, .cm-rail-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-rail-comm, .cm-rail-link-row {
display: flex; align-items: center; gap: var(--cm-s-3); padding: 6px var(--cm-s-2); margin: 0 calc(var(--cm-s-2) * -1);
border-radius: var(--radius-md); color: var(--text); text-decoration: none; min-height: 40px;
}
.cm-rail-comm:hover, .cm-rail-link-row:hover { background: var(--surface-hover); }
.cm-rail-link-row .cm-ui-icon { color: var(--text-dim); }
.cm-rail-comm-text { display: flex; flex-direction: column; min-width: 0; }
.cm-rail-comm-name { font-weight: 600; font-size: var(--cm-fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rail-comm-meta { font-size: var(--cm-fs-small); color: var(--text-dim); }
/* Infinite list */
.cm-feed { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-feed-list { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-feed-status { display: flex; justify-content: center; }
.cm-feed-status:empty { display: none; }
.cm-feed-status > .cm-ui-skel, .cm-feed-status > .cm-ui-empty, .cm-feed-status > .cm-ui-error { width: 100%; }
.cm-feed-end, .cm-feed-loading { display: inline-flex; align-items: center; gap: var(--cm-s-2); margin: var(--cm-s-2) 0; color: var(--text-dim); font-size: var(--cm-fs-meta); }
.cm-feed-end .cm-ui-icon { color: var(--success); }
.cm-feed-sentinel { height: 1px; }
/* ---- Conversation card ------------------------------------------------------ */
.cm-cv { display: flex; flex-direction: column; overflow: hidden; }
.cm-cv.is-new { animation: cm-fade var(--dur-mid) var(--ease); }
.cm-cv-head { display: flex; align-items: flex-start; gap: var(--cm-s-3); padding: var(--cm-s-4) var(--cm-s-4) 0 var(--cm-s-5); }
.cm-cv-org { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft); color: var(--cm-accent-text); }
.cm-cv-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-cv-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; }
.cm-cv-name { font-weight: 650; font-size: var(--cm-fs-body); color: var(--text); }
.cm-cv-in { display: inline-flex; color: var(--text-faint); }
.cm-cv-sub { font-size: var(--cm-fs-meta); color: var(--text-dim); flex-wrap: wrap; }
.cm-cv-time { color: inherit; text-decoration: none; }
.cm-cv-time:hover { text-decoration: underline; }
.cm-cv-kind { display: inline-flex; align-items: center; gap: 4px; }
.cm-cv-menu { margin-top: -2px; }
.cm-cv-content { display: flex; flex-direction: column; gap: var(--cm-s-2); padding: var(--cm-s-3) var(--cm-s-5) 0; min-width: 0; }
.cm-cv-flags { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-cv-title { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 650; letter-spacing: -.005em; overflow-wrap: anywhere; }
.cm-cv-title-link { color: var(--text); text-decoration: none; }
.cm-cv-title-link:hover { color: var(--cm-accent-text); }
.cm-cv.is-read .cm-cv-title-link { color: var(--text-dim); }
.cm-cv-text {
margin: 0; color: var(--text-dim); font-size: var(--cm-fs-body); line-height: 1.55; overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-cv-text.is-member { color: var(--text); font-size: 15px; white-space: pre-line; -webkit-line-clamp: 6; }
.cm-cv-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: var(--cm-fs-meta); font-weight: 600;
color: var(--cm-accent-text); text-decoration: none; border-radius: var(--radius-xs); }
.cm-cv-more:hover { text-decoration: underline; }
.cm-cv-media { margin-top: var(--cm-s-3); background: var(--surface-3); aspect-ratio: 16 / 9; overflow: hidden; }
.cm-cv-media-link { display: block; width: 100%; height: 100%; }
.cm-cv-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-mid) var(--ease); }
.cm-cv-img.is-loaded { opacity: 1; }
[data-cm-lowbw="1"] .cm-cv-media { aspect-ratio: auto; background: none; padding: 0 var(--cm-s-5); }
.cm-cv-stats { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-1) var(--cm-s-3); padding: var(--cm-s-3) var(--cm-s-5) var(--cm-s-2);
font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cv-stats-gap { flex: 1 1 auto; }
.cm-cv-rsum-host:empty { display: none; }
.cm-cv-count { appearance: none; -webkit-appearance: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cm-cv-count:hover { color: var(--text); text-decoration: underline; }
.cm-cv-read { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--success); color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-cv-actions { display: flex; align-items: stretch; gap: var(--cm-s-1); margin: 0 var(--cm-s-3); padding: var(--cm-s-1) 0; border-top: 1px solid var(--border); }
.cm-cv-act {
flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--cm-s-2);
min-height: 40px; padding: 0 var(--cm-s-2); border: 0; border-radius: var(--radius-md); background: none;
color: var(--text-dim); font: inherit; font-size: var(--cm-fs-meta); font-weight: 600; cursor: pointer; white-space: nowrap;
transition: background var(--cm-t-fast) var(--ease), color var(--cm-t-fast) var(--ease);
}
.cm-cv-act-label { overflow: hidden; text-overflow: ellipsis; }
.cm-cv-act:hover { background: var(--surface-hover); color: var(--text); }
.cm-cv-act.is-on { color: var(--cm-accent-text); }
.cm-cv-act[aria-busy="true"] { opacity: .6; pointer-events: none; }
.cm-cv-act:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-kiosk="1"] .cm-cv-act, [data-kiosk="1"] .cm-rxp-opt, [data-kiosk="1"] .cm-cp-compose-prompt, [data-kiosk="1"] .cm-cf-swatch { min-height: 48px; }
.cm-cv-cmts { display: flex; flex-direction: column; gap: var(--cm-s-3); padding: var(--cm-s-3) var(--cm-s-5) var(--cm-s-4); background: var(--surface-2); border-top: 1px solid var(--border); }
.cm-cv-cmts.is-empty { display: none; }
.cm-cv-cmt-all { align-self: flex-start; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); text-decoration: none; }
.cm-cv-cmt-all:hover { color: var(--text); text-decoration: underline; }
.cm-cv-cmt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cv-cmt-list:empty, .cm-cv-cmt-status:empty { display: none; }
/* inline replies under a card comment ("N replies" expands them) */
.cm-cv-rep { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-2); padding-left: var(--cm-s-3); }
.cm-cv-rep[hidden] { display: none; }
.cm-cv-rep-toggle { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none;
font: inherit; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); cursor: pointer; }
.cm-cv-rep-toggle:hover { color: var(--text); text-decoration: underline; }
.cm-cv-rep-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.cm-cv-rep-list { list-style: none; margin: 0; padding: 0 0 0 var(--cm-s-2); display: flex; flex-direction: column; gap: var(--cm-s-2); border-left: 2px solid var(--border); align-self: stretch; }
.cm-cv-rep-list[hidden], .cm-cv-rep-all[hidden] { display: none; }
.cm-cv-rep-all { font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); text-decoration: none; }
.cm-cv-rep-all:hover { color: var(--text); text-decoration: underline; }
[data-kiosk="1"] .cm-cv-rep-toggle { min-height: 48px; }
/* live updates: the "N new posts" pill floats at the top of the list while it scrolls (no layout shift) */
.cm-live-pill-host { position: sticky; top: var(--cm-s-3); z-index: 6; height: 0; display: flex; justify-content: center; overflow: visible; pointer-events: none; }
.cm-live-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: var(--cm-s-2); height: 36px; padding: 0 var(--cm-s-4); margin-top: var(--cm-s-2);
border: 0; border-radius: 999px; background: var(--accent); color: var(--text-inverse); font: inherit; font-size: var(--cm-fs-meta); font-weight: 600;
box-shadow: var(--shadow-md); cursor: pointer; animation: cm-fade var(--dur-mid) var(--ease); }
.cm-live-pill:hover { filter: brightness(1.08); }
.cm-live-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cm-cmt.is-new > .cm-cmt-main { animation: cm-fade var(--dur-mid) var(--ease); }
.cm-cv-compose { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--cm-s-2); }
.cm-cv-compose > .cm-ui-avatar { margin-top: 6px; }
.cm-cv-compose-box { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; gap: var(--cm-s-2); }
.cm-cv-compose-box .cm-mention { flex: 1 1 auto; min-width: 0; }
.cm-cv-compose-input.textarea { min-height: 40px; padding: 9px 14px; border-radius: 20px; resize: none; line-height: 1.45; background: var(--surface); overflow-y: auto; }
.cm-cv-compose-send { flex: 0 0 auto; }
.cm-cv-compose-err { flex: 1 1 100%; margin: 0 0 0 36px; font-size: var(--cm-fs-meta); color: var(--danger); color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
/* reactions: a reaction in its own colour (filled disc + icon) */
.cm-rx {
--cm-rx: var(--accent);
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
background: var(--cm-rx); color: var(--surface-solid); box-shadow: 0 0 0 2px var(--surface);
}
.cm-rx--love { --cm-rx: var(--danger); }
.cm-rx--celebrate { --cm-rx: var(--c-2); }
.cm-rx--support { --cm-rx: var(--success); }
.cm-rx--insightful { --cm-rx: var(--c-5); }
.cm-rx--funny { --cm-rx: var(--c-7); }
.cm-rx--none { --cm-rx: var(--text-dim); background: var(--surface-3); color: var(--text-dim); }
.cm-rsum { display: inline-flex; align-items: center; gap: var(--cm-s-2); }
.cm-rsum-icons { display: inline-flex; }
.cm-rsum-icons > .cm-rx + .cm-rx { margin-left: -5px; }
.cm-cv-act--react .cm-rx { width: 18px; height: 18px; box-shadow: none; }
.cm-rxp {
position: fixed; z-index: 1300; display: flex; gap: 2px; padding: 6px; border-radius: 999px;
background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
animation: cm-pop var(--cm-t-mid) var(--ease);
}
.cm-rxp-opt {
appearance: none; -webkit-appearance: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
min-width: 48px; padding: 6px 4px 4px; border: 0; border-radius: 16px; background: none; color: var(--text-dim);
font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; transition: transform var(--cm-t-fast) var(--ease), background var(--cm-t-fast) var(--ease);
}
.cm-rxp-opt .cm-rx { width: 34px; height: 34px; box-shadow: none; }
.cm-rxp-opt:hover, .cm-rxp-opt:focus-visible { background: var(--surface-hover); color: var(--text); transform: translateY(-2px); outline: none; }
.cm-rxp-opt:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.cm-rxp-opt.is-on { background: var(--accent-soft); color: var(--cm-accent-text); }
@keyframes cm-pop { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
/* comment bubbles (feed inline + article) */
.cm-cmt { display: flex; align-items: flex-start; gap: var(--cm-s-2); min-width: 0; }
.cm-cmt-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-cmt-bubble { align-self: flex-start; max-width: 100%; padding: var(--cm-s-2) var(--cm-s-3); border-radius: 4px 16px 16px 16px;
background: var(--surface); border: 1px solid var(--border); }
.cm-cmt.is-held .cm-cmt-bubble { border-style: dashed; }
.cm-cmt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--cm-s-2); }
.cm-cmt-name { font-size: var(--cm-fs-meta); font-weight: 650; color: var(--text); }
.cm-cmt-role { font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-cmt-text { font-size: var(--cm-fs-body); line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-cmt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--cm-s-3); padding-left: var(--cm-s-3); font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-cmt-held, .cm-cmt-held-note { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); color: color-mix(in srgb, var(--warn) 72%, var(--text)); }
.cm-cmt-held-note { margin: 0 0 4px; font-size: var(--cm-fs-small); font-weight: 600; }
.cm-cmt-edited { font-style: italic; }
.cm-cmt-gone { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-fs-meta); color: var(--text-dim); font-style: italic; }
.cm-mention-chip { color: var(--cm-accent-text); font-weight: 600; background: var(--accent-soft); border-radius: var(--radius-xs); padding: 0 .2rem; }
/* compact / featured / strip post cards (search, related, pinned, kiosk) */
.cm-post { display: flex; flex-direction: column; overflow: hidden; }
.cm-post-body { display: flex; flex-direction: column; gap: var(--cm-s-2); padding: var(--cm-s-4) var(--cm-s-5); min-width: 0; }
.cm-post-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-s-2); }
.cm-post-eyebrow { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cm-fs-micro); font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--cm-accent-text); }
.cm-post-title { margin: 0; font-size: var(--cm-fs-h3); line-height: 1.35; font-weight: 650; overflow-wrap: anywhere; }
.cm-post-title .cm-card-link { color: var(--text); text-decoration: none; }
.cm-post-title .cm-card-link::after { content: ""; position: absolute; inset: 0; }
.cm-post { position: relative; }
.cm-post .cm-cm-chip, .cm-post .cm-card-actions { position: relative; z-index: 1; }
.cm-post:hover .cm-post-title .cm-card-link { color: var(--cm-accent-text); }
.cm-post.is-read .cm-post-title .cm-card-link { color: var(--text-dim); }
.cm-post-summary { margin: 0; font-size: var(--cm-fs-body); line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-post-meta { font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-post-meta .cm-ui-meta { flex-wrap: wrap; }
.cm-post-stat { display: inline-flex; align-items: center; gap: 4px; }
.cm-post-read { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--success); color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-post-due { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-fs-meta); font-weight: 600; }
.cm-post-due.is-soon, .cm-post-due.is-open { color: var(--warn); color: color-mix(in srgb, var(--warn) 72%, var(--text)); }
.cm-post-due.is-overdue { color: var(--danger); color: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.cm-post.cm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
[data-theme="light"] .cm-post.cm-card { box-shadow: var(--shadow-sm); }
.cm-post.cm-card:hover { border-color: var(--border-hover); }
.cm-post-media { position: relative; background: var(--surface-3); aspect-ratio: 16 / 9; overflow: hidden; }
.cm-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--dur-mid) var(--ease); }
.cm-post-media img.is-loaded { opacity: 1; }
.cm-post-featured .cm-post-body { padding: var(--cm-s-5) var(--cm-s-6); gap: var(--cm-s-3); }
.cm-post-featured .cm-post-title { font-size: var(--text-xl); line-height: 1.25; letter-spacing: -.01em; }
.cm-post-featured .cm-post-summary { -webkit-line-clamp: 3; font-size: 15px; }
.cm-post-featured:not(:has(.cm-post-media)) { background-image: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%); }
.cm-post-strip { height: 100%; }
.cm-post-strip .cm-card-actions { padding: 0 var(--cm-s-5) var(--cm-s-4); }
.cm-img-ondemand { display: block; margin: .5rem 0; }
.cm-img-show { display: inline-flex; align-items: center; gap: .35rem; }
[data-cm-lowbw="1"] .cm-post-media { display: none; }
/* Mentions + person picker */
.cm-mention { position: relative; display: flex; flex-direction: column; gap: .25rem; }
.cm-mention-input { width: 100%; resize: vertical; }
.cm-mention-count { align-self: flex-end; font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-mention-count:empty { display: none; }
.cm-mention-list {
position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
list-style: none; margin: .25rem 0 0; padding: .25rem;
background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto;
}
.cm-mention-list[hidden] { display: none; }
.cm-mention-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border-radius: var(--radius-sm); cursor: pointer; min-height: 40px; }
.cm-mention-item.is-active, .cm-mention-item:hover { background: var(--surface-hover); }
.cm-mention-name { font-weight: 600; color: var(--text); }
.cm-mention-meta { font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-person-picker { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cm-person-chosen { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.cm-person-chosen[hidden] { display: none; }
/* ---- Reader view ------------------------------------------------------------ */
.cm-article .cm-ui-page-body { gap: var(--cm-s-5); }
.cm-art-head { display: flex; flex-direction: column; gap: var(--cm-s-3); padding-top: var(--cm-s-2); }
.cm-art-back { align-self: flex-start; }
.cm-art-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-s-2); }
.cm-art-title { margin: 0; font-size: var(--cm-fs-title); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--text); overflow-wrap: anywhere; }
.cm-art-lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-dim); overflow-wrap: anywhere; }
.cm-art-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cm-s-3); padding-top: var(--cm-s-1); }
.cm-art-meta .cm-ui-person-meta { flex-wrap: wrap; }
.cm-art-meta-line { font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-art-banners { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-art-banners:empty { display: none; }
.cm-art-content { display: flex; flex-direction: column; gap: var(--cm-s-5); }
.cm-article-body { font-size: var(--cm-fs-read); line-height: 1.7; color: var(--text); overflow-wrap: anywhere; max-width: 68ch; }
.cm-article-body img[data-file-id] { background: var(--surface-3); min-height: 3rem; opacity: 0; transition: opacity var(--dur-mid) var(--ease); }
.cm-article-body img.is-loaded { opacity: 1; min-height: 0; }
/* Reserve 16:9 until the authorised bytes arrive: a 3rem stub would put the end of a long, image-heavy
article on screen at once and count it as scrolled to the end before it was read. */
.cm-article-body img[data-file-id]:not(.is-loaded):not(.is-failed) { display: block; width: 100%; aspect-ratio: 16 / 9; }
.cm-art-extras { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-art-extras:empty { display: none; }
.cm-article-end { height: 1px; }
.cm-art-h2 { margin: 0 0 var(--cm-s-3); font-size: var(--cm-fs-h2); font-weight: 650; color: var(--text); }
.cm-art-files .cm-art-file-list { display: flex; flex-direction: column; }
.cm-art-file-list > .cm-ui-file { padding: var(--cm-s-3) var(--cm-s-4); }
.cm-art-file-list > .cm-ui-file + .cm-ui-file { border-top: 1px solid var(--border); }
.cm-art-engage { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cm-s-3);
padding: var(--cm-s-4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cm-art-rx-wrap { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-art-rx { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-art-rx-btn { gap: 6px; padding-left: 6px; }
.cm-art-rx-btn .cm-rx { width: 24px; height: 24px; box-shadow: none; }
.cm-art-rx-btn:disabled { cursor: default; opacity: .7; }
.cm-art-rx.is-compact .cm-art-rx-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-art-rx-total { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-art-actions { display: flex; align-items: center; gap: var(--cm-s-1); }
.cm-art-save.is-on { color: var(--cm-accent-text); }
.cm-art-comments { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-art-comments > .cm-art-h2 { margin: 0; }
.cm-cmt-list, .cm-cmt-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-cmt-replies { gap: var(--cm-s-3); margin-top: var(--cm-s-2); padding-left: var(--cm-s-2); border-left: 2px solid var(--border); }
.cm-cmt-replies:empty { display: none; }
.cm-cmt-actions { display: inline-flex; flex-wrap: wrap; gap: 0 var(--cm-s-2); }
.cm-cmt-actions[hidden] { display: none; }
.cm-cmt-act.cm-ui-btn { min-height: 0; padding: 0; font-size: var(--cm-fs-small); }
.cm-cmt-form { display: flex; align-items: flex-start; gap: var(--cm-s-3); }
.cm-cmt-form > .cm-ui-avatar { margin-top: 6px; }
.cm-cmt-form-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-cmt-form-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-cmt-hint { flex: 1 1 auto; font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-cmt-edit { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-cmt-more { display: flex; justify-content: center; }
.cm-cmt-more:empty { display: none; }
.cm-art-related-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--cm-s-3); }
.cm-report-intro { margin: 0; color: var(--text-dim); }
/* Read status near the end of the article: quiet, nothing to press (CHANGE-READS §9). */
.cm-read-state:empty { display: none; }
.cm-read-state { display: flex; }
.cm-read-mark .cm-ui-callout-body { font-weight: 600; }
.cm-read-where { font-weight: 400; color: var(--text-dim); }
/* Widgets (poll, survey, quiz, event, task, questions) */
.cm-widget-host { margin: 0; }
.cm-doc .cm-widget.is-mounted { border: 0; padding: 0; background: none; }
.cm-widget-card { padding: var(--cm-s-5); display: flex; flex-direction: column; gap: var(--cm-s-4); font-size: var(--cm-fs-body); line-height: 1.5; }
.cm-widget-head { display: flex; align-items: center; gap: var(--cm-s-3); }
.cm-widget-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md);
background: var(--accent-soft); color: var(--cm-accent-text); flex: 0 0 auto; }
.cm-widget-title { margin: 0; font-size: var(--cm-fs-h3); font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.cm-widget-meta { margin: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-choices { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-choice {
display: flex; align-items: center; gap: var(--cm-s-3); padding: 10px var(--cm-s-3); min-height: 44px;
border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); cursor: pointer;
transition: border-color var(--cm-t-fast) var(--ease), background var(--cm-t-fast) var(--ease);
}
.cm-choice.is-plain { border: 0; padding: 0; min-height: 40px; background: none; }
.cm-choice:hover { border-color: var(--border-hover); }
.cm-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cm-choice input { margin: 0; accent-color: var(--accent); width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.cm-choice.is-correct { border-color: var(--success); background: var(--success-soft); }
.cm-question { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-question.is-right .cm-question-mark { color: var(--success); color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-question.is-wrong .cm-question-mark { color: var(--danger); color: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.cm-question-text { font-weight: 600; color: var(--text); padding: 0; }
.cm-question-no, .cm-question-opt { color: var(--text-dim); font-weight: 400; }
.cm-question-mark { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-fs-meta); font-weight: 600; }
.cm-scale-wrap { display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-scale { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-scale-opt { position: relative; }
.cm-scale-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cm-scale-opt span {
display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem;
border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); font-weight: 600;
}
.cm-scale-opt input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.cm-scale-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-scale-labels { display: flex; justify-content: space-between; font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-poll-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-poll-result { display: flex; flex-direction: column; gap: 6px; }
.cm-poll-result-head { display: flex; justify-content: space-between; gap: var(--cm-s-3); }
.cm-poll-mine { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--cm-s-2); font-size: var(--cm-fs-small); color: var(--cm-accent-text); font-weight: 600; }
.cm-poll-bar { display: block; height: 8px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.cm-poll-bar-fill { display: block; height: 100%; width: 0; background: var(--c-1); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }
.cm-poll-result.is-mine .cm-poll-bar-fill { background: var(--accent); }
.cm-quiz-result:empty { display: none; }
.cm-event-facts { margin: 0; }
.cm-rsvp { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-rsvp-label { font-weight: 600; font-size: var(--cm-fs-meta); color: var(--text); }
.cm-rsvp-opt { min-height: 40px; padding: 0 var(--cm-s-4); }
.cm-task-due { margin: 0; }
.cm-task-photo { font: inherit; max-width: 100%; }
.cm-question-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-question-item { display: flex; gap: var(--cm-s-3); align-items: flex-start; padding: var(--cm-s-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.cm-question-item.is-answered { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.cm-question-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.cm-question-body { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.cm-question-answer { padding: var(--cm-s-2) var(--cm-s-3); border-radius: var(--radius-sm); background: var(--success-soft); color: var(--text); overflow-wrap: anywhere; }
.cm-question-quote { margin: 0; padding: var(--cm-s-2) var(--cm-s-3); border-left: 3px solid var(--border-strong); color: var(--text-dim); }
.cm-upvote {
appearance: none; -webkit-appearance: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
min-width: 44px; min-height: 48px; padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface);
color: var(--text-dim); font: inherit; font-weight: 700; cursor: pointer;
}
.cm-upvote:disabled { cursor: default; opacity: .7; }
.cm-upvote.is-on { color: var(--cm-accent-text); border-color: var(--accent); background: var(--accent-soft); }
.cm-upvote-n { font-size: var(--cm-fs-meta); font-feature-settings: 'tnum'; }
/* ---- Communities: discovery --------------------------------------------- */
.cm-cc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-s-3); }
.cm-cc-search { flex: 1 1 280px; max-width: 420px; min-width: 0; }
.cm-cc-chips { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-cc-summary { margin-left: auto; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cc-host { display: flex; flex-direction: column; gap: var(--cm-s-6); }
.cm-cc-sec { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cc-sec-title { margin: 0; display: flex; align-items: baseline; gap: var(--cm-s-2); font-size: var(--cm-fs-h2); font-weight: 650; color: var(--text); }
.cm-cc-sec-count { font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-cc { position: relative; display: flex; flex-direction: column; overflow: hidden; height: 100%; transition: box-shadow var(--cm-t-fast) var(--ease), border-color var(--cm-t-fast) var(--ease); }
.cm-cc.is-interactive:hover { border-color: var(--border-hover); }
[data-theme="light"] .cm-cc.is-interactive:hover { box-shadow: var(--shadow-md); }
.cm-cc-cover { height: 84px; flex: 0 0 auto; }
.cm-cc-body { position: relative; display: flex; flex-direction: column; gap: var(--cm-s-2); padding: 0 var(--cm-s-4) var(--cm-s-4); flex: 1 1 auto; min-width: 0; }
.cm-cc-logo-wrap { margin-top: -30px; margin-bottom: 2px; display: flex; }
.cm-cc-logo-wrap .cm-cm-logo { box-shadow: 0 0 0 3px var(--surface); }
.cm-cc-name { margin: 0; font-size: var(--cm-fs-h3); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.cm-cc-link { color: var(--text); text-decoration: none; }
a.cm-cc-link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.cm-cc { isolation: isolate; }
a.cm-cc-link:focus-visible { outline: none; }
.cm-cc:has(a.cm-cc-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-cc:hover a.cm-cc-link { color: var(--cm-accent-text); }
.cm-cc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-cc-desc { margin: 0; font-size: var(--cm-fs-meta); line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }
.cm-cc-desc.is-empty { font-style: italic; }
.cm-cc-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: var(--cm-s-1); }
.cm-cc-people .cm-ui-avstack > * + *, .cm-cp-facts .cm-ui-avstack > * + *, .cm-cp-rail-people .cm-ui-avstack > * + * { margin-left: -5px; }
.cm-cc-people { display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text); font-weight: 500; }
.cm-cc-activity { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-cc-action { position: relative; z-index: 1; display: flex; padding-top: var(--cm-s-2); }
.cm-cc-action:empty { display: none; }
.cm-cc-join { width: 100%; justify-content: center; }
.cm-cc-state, .cm-cp-state { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-cc-state.is-member, .cm-cp-state.is-member { color: var(--success); color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-cc.is-preview { pointer-events: none; }
.cm-cc.is-skeleton .cm-cc-cover { border-radius: 0; aspect-ratio: auto; }
.cm-cc.is-skeleton .cm-cc-body { padding-top: var(--cm-s-4); }
/* ---- Communities: the community page ------------------------------------- */
.cm-community .cm-ui-page-body { gap: var(--cm-s-5); }
.cm-cp-top { display: flex; flex-direction: column; gap: 0; }
.cm-cp-hero { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; overflow: hidden; }
[data-theme="light"] .cm-cp-hero { box-shadow: var(--shadow-sm); }
.cm-cp-hero.is-skeleton { border-radius: var(--radius-lg); border-bottom: 1px solid var(--border); padding-bottom: var(--cm-s-4); gap: var(--cm-s-4); }
.cm-cp-hero.is-skeleton .cm-ui-skel { padding: 0 var(--cm-s-5); }
.cm-cp-cover { height: 180px; }
.cm-cp-cover.cm-ui-skel-media { aspect-ratio: auto; border-radius: 0; }
.cm-cp-id { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--cm-s-4); padding: 0 var(--cm-s-5) var(--cm-s-4); }
.cm-cp-logo { margin-top: -44px; display: flex; }
.cm-cp-logo .cm-cm-logo { box-shadow: 0 0 0 4px var(--surface); }
.cm-cp-titles { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); padding-top: var(--cm-s-3); }
.cm-cp-back { align-self: flex-start; margin-left: -8px; }
.cm-cp-name { margin: 0; font-size: var(--cm-fs-title); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--text); overflow-wrap: anywhere; }
.cm-cp-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-s-2) var(--cm-s-3); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cp-people { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: var(--cm-s-2); padding: 2px 6px; margin: -2px -6px;
border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.cm-cp-people:hover { background: var(--surface-hover); }
.cm-cp-actions { display: flex; align-items: center; gap: var(--cm-s-2); margin-left: auto; padding-bottom: 2px; }
.cm-cp-tabs-host { background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 0 var(--cm-s-5); }
[data-theme="light"] .cm-cp-tabs-host { box-shadow: var(--shadow-sm); }
.cm-cp-tabs-host .cm-ui-tabs--line .cm-ui-tabs-strip { box-shadow: none; }
.cm-cp-panel { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cm-cp-panel:focus { outline: none; }
.cm-cp-conv { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-cp-compose-slot:empty { display: none; }
.cm-cp-compose { padding: var(--cm-s-4) var(--cm-s-5); }
.cm-cp-compose-open {
appearance: none; -webkit-appearance: none; width: 100%; display: flex; align-items: center; gap: var(--cm-s-3); padding: 0; border: 0; background: none;
font: inherit; text-align: left; cursor: text; color: var(--text-dim);
}
.cm-cp-compose-prompt { flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; padding: 0 var(--cm-s-4); border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--border-strong); font-size: var(--cm-fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-cp-compose-open:hover .cm-cp-compose-prompt { border-color: var(--border-hover); background: var(--surface-hover); }
.cm-cp-compose-open:focus-visible { outline: none; }
.cm-cp-compose-open:focus-visible .cm-cp-compose-prompt { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-cp-compose-form { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-compose-head { display: flex; align-items: center; gap: var(--cm-s-3); }
.cm-cp-compose-who { display: flex; flex-direction: column; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cp-compose-who strong { color: var(--text); font-size: var(--cm-fs-body); }
.cm-cp-compose-form .cm-mention-input { min-height: 112px; font-size: 15px; line-height: 1.55; }
.cm-cp-compose-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-s-2); padding-top: var(--cm-s-2); border-top: 1px solid var(--border); }
.cm-cp-compose-gap { flex: 1 1 auto; }
.cm-cp-compose-err:empty, .cm-cp-attach:empty { display: none; }
.cm-cp-attach { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-photo { display: flex; flex-wrap: wrap; gap: var(--cm-s-3); align-items: flex-start; padding: var(--cm-s-3); border-radius: var(--radius-md); background: var(--surface-2); }
.cm-cp-photo-thumb { position: relative; width: 128px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); flex: 0 0 auto; }
.cm-cp-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-cp-photo-thumb.is-busy img { opacity: .5; }
.cm-cp-photo-thumb .cm-ui-spinner { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px; }
.cm-cp-photo-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-2); }
.cm-cp-photo-main .cm-ui-field { width: 100%; }
.cm-cp-files { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-cp-files .cm-ui-file { padding: var(--cm-s-2) var(--cm-s-3); border-radius: var(--radius-md); background: var(--surface-2); }
.cm-cp-rail-card .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-rail-desc, .cm-cp-desc { margin: 0; color: var(--text); line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.cm-cp-rail-desc { font-size: var(--cm-fs-meta); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cm-cp-rail-desc.is-empty, .cm-cp-desc.is-empty { color: var(--text-dim); font-style: italic; }
.cm-cp-desc { font-size: 15px; margin-bottom: var(--cm-s-4); }
.cm-cp-rail-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-cp-rail-facts li { display: flex; align-items: flex-start; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.45; }
.cm-cp-rail-facts .cm-ui-icon { margin-top: 1px; flex: 0 0 auto; }
.cm-cp-rail-people { display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text); }
.cm-cp-rail-names { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-cp-rail-names li { display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text); min-width: 0; }
.cm-cp-rail-names li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-cp-muted { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cp-members-panel { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-cp-add-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--cm-s-2); }
.cm-cp-add-picker { flex: 1 1 260px; min-width: 0; }
.cm-cp-members-more { display: flex; justify-content: center; }
.cm-cp-members-more:empty { display: none; }
.cm-cp-members-more > .cm-ui-skel { width: 100%; }
.cm-cp-members-end { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cp-owners .cm-ui-list--plain > .cm-ui-lrow { padding-top: var(--cm-s-2); padding-bottom: var(--cm-s-2); }
/* ---- The community form (create / edit) ---------------------------------- */
.cm-cf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--cm-s-6); align-items: start; }
.cm-cf-form { display: flex; flex-direction: column; gap: var(--cm-s-5); min-width: 0; }
.cm-cf-err:empty { display: none; }
.cm-cf-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cf-side-title { margin: 0; display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-micro); font-weight: 600;
text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.cm-cf-swatches { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-cf-swatch {
appearance: none; -webkit-appearance: none; width: 40px; height: 40px; padding: 4px; border-radius: 50%;
border: 2px solid transparent; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.cm-cf-swatch-dot { width: 100%; height: 100%; border-radius: 50%; background: var(--cm-acc); color: var(--surface-solid);
display: inline-flex; align-items: center; justify-content: center; }
.cm-cf-swatch-dot .cm-ui-icon { opacity: 0; }
.cm-cf-swatch.is-selected { border-color: var(--cm-acc); }
.cm-cf-swatch.is-selected .cm-cf-swatch-dot .cm-ui-icon { opacity: 1; }
.cm-cf-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-cf-imgs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--cm-s-4); }
.cm-cf-img { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-cf-img-row { display: flex; align-items: center; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-cf-img-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cm-cf-img-status { font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-cf-img-status:empty { display: none; }
.cm-cf-thumb { position: relative; overflow: hidden; flex: 0 0 auto; border-radius: var(--radius-md); border: 1px solid var(--border);
background-color: var(--surface-3);
background-image: linear-gradient(135deg, color-mix(in srgb, var(--cm-acc) 30%, var(--surface)) 0%, color-mix(in srgb, var(--cm-acc) 12%, var(--surface)) 100%); }
.cm-cf-thumb--cover { width: 128px; height: 56px; }
.cm-cf-thumb--icon { width: 56px; height: 56px; background: var(--cm-acc); color: var(--surface-solid); display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: var(--text-xl); border-radius: 15px; }
.cm-cf-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-cf-thumb.is-busy img { opacity: .5; }
.cm-cf-preview-host .cm-cc { box-shadow: var(--shadow-md); }
/* ---- Required reading ------------------------------------------------------- */
.cm-req-host { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-req-summary { margin: 0; font-size: var(--cm-fs-body); color: var(--text); }
.cm-req-overdue-count { color: var(--danger); color: color-mix(in srgb, var(--danger) 72%, var(--text)); font-weight: 600; }
.cm-req-list .cm-ui-lrow-meta .cm-ui-meta { flex-wrap: wrap; row-gap: 4px; }
/* ---- Search ------------------------------------------------------------------ */
.cm-sr-form .cm-ui-search { width: 100%; }
.cm-sr-results { display: flex; flex-direction: column; gap: var(--cm-s-5); min-height: 120px; }
.cm-sr-summary { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-sr-sec { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-sr-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); }
.cm-sr-sec-title { margin: 0; display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-h3); font-weight: 650; color: var(--text); }
.cm-sr-sec-count { font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-sr-filters { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-sr-posts { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-sr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm-sr-row { padding: var(--cm-s-3) var(--cm-s-4); }
.cm-sr-row + .cm-sr-row { border-top: 1px solid var(--border); }
.cm-sr-comm { display: flex; align-items: center; gap: var(--cm-s-3); }
.cm-sr-comm-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-sr-comm-name { font-weight: 650; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.cm-sr-comm-name:hover { color: var(--cm-accent-text); }
.cm-sr-comm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-sr-member { display: inline-flex; align-items: center; gap: 4px; color: var(--success); color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-sr-recent { display: flex; flex-direction: column; gap: var(--cm-s-3); }
/* ---- Opt-in link page ------------------------------------------------------- */
.cm-go-card { margin-top: var(--cm-s-6); padding: var(--cm-s-5); }
.cm-go-card > .cm-ui-empty { border: 0; padding: var(--cm-s-5) var(--cm-s-3); background: none; box-shadow: none; }
.cm-go-wait { display: flex; flex-direction: column; align-items: center; gap: var(--cm-s-3); padding: var(--cm-s-6) var(--cm-s-3); text-align: center; color: var(--text-dim); }
.cm-go-spinner { width: 32px; height: 32px; border-width: 3px; }
.cm-go-wait-title { margin: 0; font-size: var(--cm-fs-h3); font-weight: 650; color: var(--text); }
.cm-go-wait-body, .cm-go-host { margin: 0; font-size: var(--cm-fs-meta); }
.cm-go-host { font-family: var(--font-mono, monospace); color: var(--text); overflow-wrap: anywhere; }
.cm-go-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cm-s-2); padding-bottom: var(--cm-s-3); }
/* ---- Huddle (frontline) ------------------------------------------------------ */
.cm-huddle-how { margin: 0; padding-left: 1.25rem; color: var(--text-dim); display: flex; flex-direction: column; gap: .25rem; }
.cm-huddle-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.cm-huddle-choice { align-items: flex-start; }
.cm-huddle-pick-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cm-huddle-start { min-height: 44px; }
.cm-huddle-stage { display: flex; flex-direction: column; gap: 1rem; }
.cm-huddle-stage.is-presenting {
position: fixed; inset: 0; z-index: 950; overflow-y: auto; padding: 2rem clamp(1rem, 5vw, 4rem);
background: var(--bg);
}
.cm-huddle-stage.is-presenting .cm-article-body { font-size: var(--text-xl); }
.cm-huddle-stage.is-presenting .cm-title { font-size: var(--text-3xl); }
.cm-huddle-nav { display: flex; flex-wrap: wrap; gap: .35rem; }
.cm-huddle-nav .cm-chip { cursor: pointer; min-width: 2.5rem; justify-content: center; }
.cm-huddle-nav .cm-chip.is-active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.cm-huddle-post { display: flex; flex-direction: column; gap: .75rem; }
.cm-huddle-step { justify-content: space-between; padding-top: .75rem; border-top: 1px solid var(--border); }
.cm-huddle-step .btn { min-height: 48px; }
.cm-huddle-count { font-size: var(--text-xl); color: var(--text); }
.cm-huddle-attendees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; max-height: 40vh; overflow-y: auto; }
.cm-huddle-attendees li { display: flex; align-items: center; gap: .5rem; }
.cm-huddle-att-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cm-huddle-self { min-height: 48px; }
/* ---- My data (frontline) ----------------------------------------------------- */
.cm-me-rules { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.cm-me-rules li { display: flex; gap: .6rem; align-items: flex-start; color: var(--text-dim); line-height: 1.5; }
.cm-me-rules .cm-icon { color: var(--accent); margin-top: .15rem; }
.cm-me-switch { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cm-me-switch-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; flex: 1 1 300px; }
.cm-me-switch-text p { margin: 0; }
.cm-me-section summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 600; color: var(--text); }
.cm-me-section[open] summary { margin-bottom: .75rem; }
.cm-me-table td, .cm-me-table th { white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.cm-me-list { margin: 0; padding-left: 1.2rem; }
.cm-me-facts { margin: 0; }
.cm-me-device-row { justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: nowrap; }
.cm-me-device-row > div { min-width: 0; }
.cm-me-device-row p { margin: .15rem 0 0; }
/* ---- Kiosk ------------------------------------------------------------------- */
.cm-kiosk-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem;
min-height: 64px;
background: var(--surface-solid); border-top: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
}
.cm-kiosk-who { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 auto; }
.cm-kiosk-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-kiosk-bar .btn { min-height: 48px; padding-left: 1.1rem; padding-right: 1.1rem; font-size: var(--text-md); }
[data-kiosk-bar="1"] body { padding-bottom: 72px; }
[data-kiosk="1"] .cm-reaction,
[data-kiosk="1"] .cm-choice,
[data-kiosk="1"] .cm-scale-opt span,
[data-kiosk="1"] .cm-carousel-dot,
[data-kiosk="1"] .tab-pill,
[data-kiosk="1"] .cm-page .input,
[data-kiosk="1"] .cm-page .select { min-height: 48px; }
[data-kiosk="1"] .cm-carousel-dot { min-width: 48px; border-radius: 999px; }
/* Every tap target on a kiosk is at least 48 px (small buttons, chips, language switch, dialogs). */
[data-kiosk="1"] .btn,
[data-kiosk="1"] .cm-chip,
[data-kiosk="1"] .cm-lang-btn,
[data-kiosk="1"] .cm-upvote { min-height: 48px; min-width: 48px; }
[data-kiosk="1"] .cm-card-link,
[data-kiosk="1"] .cm-req-title { display: inline-block; min-height: 48px; padding: .6rem 0; }
[data-kiosk="1"] .cm-article-body { font-size: var(--text-xl); }
.cm-kiosk-overlay {
position: fixed; inset: 0; z-index: 1500;
display: flex; align-items: center; justify-content: center; padding: 1rem;
background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cm-kiosk-dialog {
width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
padding: 2rem 1.5rem; border-radius: var(--radius-xl); background: var(--surface-solid); border: 1px solid var(--border-strong);
box-shadow: var(--shadow-lg); color: var(--text);
}
.cm-kiosk-dialog h2 { margin: 0; font-size: var(--text-2xl); }
.cm-kiosk-dialog p { margin: 0; color: var(--text-dim); font-size: var(--text-lg); }
.cm-kiosk-count { font-size: var(--text-xl); font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; }
.cm-kiosk-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.cm-kiosk-actions .btn, .cm-kiosk-big { min-height: 56px; padding-left: 1.5rem; padding-right: 1.5rem; font-size: var(--text-lg); }
.cm-kiosk-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.cm-kiosk-points li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--text-lg); line-height: 1.45; }
.cm-kiosk-points .cm-icon { color: var(--accent); margin-top: .2rem; }
.cm-kiosk-idle .btn { min-height: 48px; min-width: 64px; }
.cm-kiosk-hello { display: flex; flex-direction: column; gap: .25rem; }
.cm-kiosk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.cm-kiosk-tile {
display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.1rem; min-height: 110px;
border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--text-lg);
}
.cm-kiosk-tile:hover, .cm-kiosk-tile:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-md); outline: none; }
.cm-kiosk-tile-icon { color: var(--accent); }
.cm-kiosk-tile-sub { font-size: var(--text-sm); color: var(--text-faint); font-weight: 400; }
.cm-kiosk-must .cm-section-title { display: inline-flex; align-items: center; gap: .45rem; }
.cm-kiosk-must .cm-icon { color: var(--warn); }
.cm-kiosk-settings summary { cursor: pointer; font-weight: 600; min-height: 48px; display: flex; align-items: center; }
/* ---- TV loop (#/comms/tv/:token): full screen, no app chrome ------------------ */
[data-cm-tv="1"] .sidebar,
[data-cm-tv="1"] .app-topbar,
[data-cm-tv="1"] .cm-kiosk-bar { display: none !important; }
[data-cm-tv="1"] .layout { grid-template-columns: 1fr; }
[data-cm-tv="1"] body { overflow: hidden; }
.cm-tv {
position: fixed; inset: 0; z-index: 1400;
display: flex; align-items: center; justify-content: center;
background: var(--bg); color: var(--text); outline: none;
}
.cm-tv.is-idle { cursor: none; }
.cm-tv-stage {
position: relative; display: flex; flex-direction: column; overflow: hidden;
background: var(--bg-2); border-radius: 0; font-size: 1vw;
}
.cm-tv-top, .cm-tv-bottom { display: flex; align-items: center; gap: 1.5em; padding: 1.4em 3em; flex: 0 0 auto; }
.cm-tv-top { font-size: 1.6em; color: var(--text-dim); }
.cm-tv-spacer { flex: 1 1 auto; }
.cm-tv-clock { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cm-tv-offline { padding: .2em .8em; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.cm-tv-offline[hidden] { display: none; }
.cm-tv-slide-host { flex: 1 1 auto; display: flex; min-height: 0; }
.cm-tv-slide {
flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
gap: 2em; padding: 1em 3em 1em; min-height: 0; animation: cm-fade var(--dur-slow) var(--ease);
}
.cm-tv-slide.has-media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.cm-tv-text { display: flex; flex-direction: column; justify-content: center; gap: 1.2em; min-width: 0; min-height: 0; }
.cm-tv-alert {
align-self: flex-start; padding: .35em 1em; border-radius: 999px; font-size: 1.8em; font-weight: 800;
background: var(--cm-bg); color: var(--cm-fg); letter-spacing: .03em; text-transform: uppercase;
}
.cm-tv-kicker { font-size: 1.8em; font-weight: 600; color: var(--accent); }
.cm-tv-title { margin: 0; font-size: 4.4em; line-height: 1.1; font-weight: 800; color: var(--text); overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cm-tv-body { margin: 0; font-size: 2.3em; line-height: 1.4; color: var(--text-dim); overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cm-tv-slide.is-danger .cm-tv-title { color: var(--danger); }
.cm-tv-kpis { display: flex; flex-wrap: wrap; gap: 1.5em; }
.cm-tv-kpi { display: flex; flex-direction: column; gap: .2em; padding: 1em 1.4em; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.cm-tv-kpi-value { font-size: 3.4em; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.cm-tv-kpi-label { font-size: 1.6em; color: var(--text-dim); }
.cm-tv-kpi-delta { font-size: 1.4em; color: var(--success); font-weight: 700; }
.cm-tv-media { min-width: 0; min-height: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-3); display: flex; }
.cm-tv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-tv-qr {
position: absolute; right: 3em; bottom: 5em; display: flex; flex-direction: column; align-items: center; gap: .5em;
padding: 1em; border-radius: var(--radius-lg); background: var(--surface-solid); border: 1px solid var(--border);
font-size: 1.4em; color: var(--text-dim);
}
.cm-tv-qr img { width: 8em; height: 8em; display: block; background: var(--text-inverse); border-radius: var(--radius-sm); }
.cm-tv-qr-text { align-items: flex-start; max-width: 30em; }
.cm-tv-qr-text strong { color: var(--text); overflow-wrap: anywhere; }
.cm-tv-bottom { gap: 2em; }
.cm-tv-progress { flex: 1 1 auto; height: .5em; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.cm-tv-progress-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.cm-tv-counter { font-size: 1.6em; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cm-tv-message { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; text-align: center; padding: 3em; }
.cm-tv-message-title { font-size: 4em; font-weight: 800; color: var(--text); }
.cm-tv-message-body { font-size: 2.2em; color: var(--text-dim); max-width: 40em; }
@keyframes cm-tv-progress { from { width: 0; } to { width: 100%; } }
/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
.cm-home-head .cm-ui-ph-actions { flex: 1 1 100%; margin-left: 0; }
.cm-rail-shortcuts { display: none; }
.cm-cf { grid-template-columns: minmax(0, 1fr); gap: var(--cm-s-5); }
.cm-cf-side { position: static; }
}
@media (max-width: 720px) {
.cm-kiosk-bar { flex-wrap: wrap; }
.cm-kiosk-bar .cm-kiosk-home { display: none; }
.cm-me-device-row { flex-wrap: wrap; }
}
@media (max-width: 600px) {
.cm-cv-head { padding: var(--cm-s-4) var(--cm-s-3) 0 var(--cm-s-4); }
.cm-cp-compose { padding: var(--cm-s-3) var(--cm-s-4); }
.cm-widget-card { padding: var(--cm-s-4); }
.cm-cv-content, .cm-cv-stats, .cm-cv-cmts { padding-left: var(--cm-s-4); padding-right: var(--cm-s-4); }
.cm-cv-actions { margin: 0 var(--cm-s-2); }
.cm-cv-title { font-size: var(--text-lg); }
.cm-mr-head { padding: var(--cm-s-4) var(--cm-s-4) var(--cm-s-2); }
.cm-mr-all .cm-ui-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-mr-list > .cm-ui-lrow, .cm-req-list > .cm-ui-lrow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--cm-s-3); row-gap: var(--cm-s-2); }
.cm-mr-list > .cm-ui-lrow:has(.cm-ui-lrow-lead) > .cm-ui-lrow-trail:has(.btn), .cm-req-list > .cm-ui-lrow:has(.cm-ui-lrow-lead) > .cm-ui-lrow-trail:has(.btn) {
grid-column: 2; justify-content: flex-start; padding-left: 0; }
.cm-art-title { font-size: 22px; }
.cm-art-lead { font-size: var(--text-lg); }
.cm-art-engage { align-items: flex-start; }
.cm-cp-cover { height: 120px; }
.cm-cp-id { padding: 0 var(--cm-s-4) var(--cm-s-4); gap: var(--cm-s-2) var(--cm-s-3); }
.cm-cp-logo { margin-top: -36px; }
.cm-cp-logo .cm-cm-logo { --cm-logo: 72px; font-size: 24px; }
.cm-cp-titles { flex-basis: 100%; padding-top: 0; }
.cm-cp-actions { margin-left: 0; width: 100%; justify-content: space-between; }
.cm-cp-name { font-size: 22px; }
.cm-cp-tabs-host { padding: 0 var(--cm-s-3); }
.cm-cf-imgs { grid-template-columns: minmax(0, 1fr); }
.cm-cc-search { flex-basis: 100%; max-width: none; }
.cm-cc-summary { margin-left: 0; }
.cm-post-body { padding: var(--cm-s-4); }
.cm-post-featured .cm-post-body { padding: var(--cm-s-4) var(--cm-s-4) var(--cm-s-5); }
.cm-post-featured .cm-post-title { font-size: var(--text-lg); }
.cm-sr-row { padding: var(--cm-s-3); }
.cm-sr-person .cm-ui-person { flex-wrap: wrap; }
.cm-cmt-form > .cm-ui-avatar { display: none; }
.cm-cv-sub .cm-ui-meta-item:has(> .cm-cv-kind), .cm-post-meta .cm-ui-meta-item:has(> .cm-post-mins) { display: none; }
}
@media (max-width: 480px) {
.cm-cv-actions { margin: 0 var(--cm-s-1); gap: 0; }
.cm-cv-act { padding: 0 4px; gap: 6px; }
.cm-cv-act.is-minor { flex: 0 0 44px; }
.cm-cv-act.is-minor .cm-cv-act-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-cv-mins { display: none; }
.cm-rxp-label { display: none; }
.cm-rxp-opt { min-width: 44px; }
.cm-rxp-opt .cm-rx { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.cm-carousel-slide.is-active, .cm-tv-slide, .cm-rxp, .cm-cv.is-new, .cm-live-pill, .cm-cmt.is-new > .cm-cmt-main { animation: none; }
.cm-post-media img, .cm-cv-img, .cm-cm-logo-img, .cm-cm-cover-img, .cm-article-body img[data-file-id], .cm-poll-bar-fill, .cm-carousel-dot, .cm-rxp-opt { transition: none; }
.cm-rxp-opt:hover, .cm-rxp-opt:focus-visible { transform: none; }
}
/* ---- comms: composer (design/comms/css/composer.css) ---- */
/* ==========================================================================
comms — Studio slice (studio member, UI-TEAM §5): Studio home + calendar (cm-st-), the composer (cm-cp-),
previews (cm-pv-) and the side-by-side translation (cm-tr-). Built on the kit (ui-kit.css): this file only
lays kit parts out. Tokens only, both themes; 8-px rhythm (--cm-s-*); phones at 390 px; reduced motion honoured.
The audience step's inside is the people member's (people.css, cm-aud-).
========================================================================== */
/* ---- shared ----------------------------------------------------------------------------------------- */
.cm-cp-muted, .cm-st-muted, .cm-tr-muted { margin: 0; font-size: var(--cm-fs-meta); line-height: 1.5; color: var(--text-dim); }
.cm-cp-row-end { display: flex; justify-content: flex-end; gap: var(--cm-s-2); flex-wrap: wrap; }
/* ==========================================================================
Studio home (workspace template)
========================================================================== */
.cm-st-attn:empty { display: none; }
.cm-st-status .cm-ui-tabs-strip { padding-bottom: 2px; }
.cm-st-results { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cm-st-row .cm-ui-lrow-title { font-size: var(--text-md); }
.cm-st-row .cm-ui-lrow-meta { margin-top: 2px; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-st-row .cm-ui-lrow-trail { flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.cm-st-row.is-urgent .cm-ui-lrow-title { color: var(--text); }
.cm-st-kind { font-weight: 600; color: var(--text); }
.cm-st-when, .cm-st-src { display: inline-flex; align-items: center; gap: var(--cm-s-1); }
.cm-st-when .cm-ui-time { color: inherit; }
.cm-st-chans { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); vertical-align: middle; }
/* Calendar */
.cm-st-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-st-cal-move { display: flex; align-items: center; gap: var(--cm-s-2); }
.cm-st-cal-month { margin: 0; min-width: 10.5rem; text-align: center; font-size: var(--cm-fs-h2); font-weight: 650; line-height: 1.3; color: var(--text); }
.cm-st-cal-month::first-letter { text-transform: uppercase; }
.cm-st-legend { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-st-cal-alerts:empty { display: none; }
.cm-st-clash-list { margin: var(--cm-s-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-st-clash-when { margin: 0 0 var(--cm-s-1); font-size: var(--cm-fs-meta); color: var(--text); }
.cm-st-clash-posts { display: flex; flex-wrap: wrap; gap: var(--cm-s-1) var(--cm-s-2); }
.cm-st-cal { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
[data-theme="light"] .cm-st-cal { box-shadow: var(--shadow-sm); }
.cm-st-cal > .cm-ui-skel, .cm-st-cal > .cm-ui-error { padding: var(--cm-s-5); }
.cm-st-cal-head, .cm-st-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cm-st-cal-head span { padding: var(--cm-s-2) var(--cm-s-3); font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cm-st-cal-head span::first-letter { text-transform: uppercase; }
.cm-st-cal-week + .cm-st-cal-week { border-top: 1px solid var(--border); }
.cm-st-day { position: relative; min-height: 7.25rem; padding: var(--cm-s-2); display: flex; flex-direction: column; gap: var(--cm-s-1); min-width: 0; }
.cm-st-day + .cm-st-day { border-left: 1px solid var(--border); }
.cm-st-day.is-weekend { background: var(--surface-2); }
.cm-st-day.is-out { background: var(--surface-2); }
.cm-st-day.is-out .cm-st-day-n { color: var(--text-faint); }
.cm-st-day.has-clash::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--warn); pointer-events: none; }
.cm-st-day-n { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); font-feature-settings: "tnum"; }
.cm-st-day.is-today .cm-st-day-n { background: var(--accent); color: var(--text-inverse); }
.cm-st-day-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cm-st-item {
display: flex; align-items: center; gap: var(--cm-s-1); min-width: 0; padding: 3px var(--cm-s-2);
border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--surface-3); color: var(--text);
font-size: var(--cm-fs-small); line-height: 1.35; text-decoration: none;
}
a.cm-st-item:hover { border-color: var(--border-hover); }
a.cm-st-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cm-st-item .cm-ui-icon { flex: 0 0 auto; color: var(--text-dim); }
.cm-st-item.is-sent { background: var(--success-soft); }
.cm-st-item.is-sent .cm-ui-icon { color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-st-item.is-scheduled { background: var(--info-soft); }
.cm-st-item.is-scheduled .cm-ui-icon { color: color-mix(in srgb, var(--info) 72%, var(--text)); }
.cm-st-item.is-planned { background: transparent; border: 1px dashed var(--border-strong); }
.cm-st-item.is-clash .cm-ui-icon { color: color-mix(in srgb, var(--warn) 72%, var(--text)); }
.cm-st-item.is-redacted { color: var(--text-dim); border-style: dashed; cursor: default; }
.cm-st-day.is-past .cm-st-item { color: var(--text-dim); }
.cm-st-item-time { flex: 0 0 auto; color: var(--text-dim); font-feature-settings: "tnum"; }
.cm-st-item-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-st-item-meta { margin-left: auto; color: var(--text-dim); white-space: nowrap; }
.cm-st-more {
align-self: flex-start; padding: 2px var(--cm-s-2); border: 0; border-radius: var(--radius-sm); background: none;
font: inherit; font-size: var(--cm-fs-small); font-weight: 600; color: var(--cm-accent-text); cursor: pointer;
}
.cm-st-more:hover { background: var(--surface-hover); }
.cm-st-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cm-st-agenda:empty { display: none; }
.cm-st-agenda .cm-ui-section-body { gap: var(--cm-s-5); }
.cm-st-ag-day { display: flex; flex-direction: column; gap: var(--cm-s-2); scroll-margin-top: var(--cm-s-6); }
.cm-st-ag-day:focus { outline: none; }
.cm-st-ag-date { display: flex; align-items: center; gap: var(--cm-s-2); margin: 0; font-size: var(--text-md); font-weight: 650; color: var(--text); }
.cm-st-ag-date::first-letter { text-transform: uppercase; }
.cm-st-ag-time { min-width: 3.25rem; font-weight: 650; font-feature-settings: "tnum"; color: var(--text); }
/* ==========================================================================
Composer (wizard template)
========================================================================== */
.cm-cp-head .cm-ui-ph-title { overflow-wrap: anywhere; }
.cm-cp-eyebrow { display: inline-flex; align-items: center; gap: var(--cm-s-1); }
.cm-cp-head-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-cp-title-skel { display: block; width: min(420px, 80vw); }
/* Autosave state */
.cm-cp-save { display: inline-flex; align-items: center; gap: var(--cm-s-1); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cp-save.is-saved .cm-ui-icon { color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-cp-save.is-saving .cm-ui-icon { animation: cm-cp-spin 1s linear infinite; }
.cm-cp-save.is-offline { color: color-mix(in srgb, var(--warn) 72%, var(--text)); }
.cm-cp-save.is-error, .cm-cp-save.is-conflict { color: color-mix(in srgb, var(--danger) 72%, var(--text)); }
@keyframes cm-cp-spin { to { transform: rotate(360deg); } }
/* Stepper + notices */
.cm-cp-stepper { position: sticky; top: 0; z-index: 5; padding: var(--cm-s-2) 0; background: var(--bg); }
.cm-cp-banners { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-banners:empty, .cm-cp-notice:empty { display: none; }
/* Steps */
.cm-cp-panels { min-width: 0; }
.cm-cp-panel { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cm-cp-panel[hidden] { display: none; }
.cm-cp-panel-head { display: flex; flex-direction: column; gap: 2px; }
.cm-cp-panel-title { margin: 0; font-size: var(--cm-fs-h2); font-weight: 650; line-height: 1.3; color: var(--text); }
.cm-cp-panel-title:focus { outline: none; }
.cm-cp-panel-sub { margin: 0; font-size: var(--cm-fs-body); line-height: 1.5; color: var(--text-dim); max-width: 72ch; }
.cm-cp-solo { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cm-cp-split .cm-ui-split-rail { top: calc(var(--cm-s-8) + var(--cm-s-6)); }
.cm-cp-rail-card .cm-ui-card-body { gap: var(--cm-s-3); }
/* Footer: Back + the step's one primary */
.cm-cp-footer {
position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3);
margin-top: var(--cm-s-2); padding: var(--cm-s-3) var(--cm-s-4); background: var(--surface-solid);
border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.cm-cp-footer[hidden] { display: none; }
.cm-cp-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--cm-s-2); flex-wrap: wrap; margin-left: auto; }
/* Content: a document — title and summary sit on the page of the post, the canvas below */
.cm-cp-doc { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
[data-theme="light"] .cm-cp-doc { box-shadow: var(--shadow-sm); }
.cm-cp-doc-head { padding: var(--cm-s-5) var(--cm-s-6) var(--cm-s-4); border-bottom: 1px solid var(--border); }
.cm-cp-doc-fields { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cm-cp-langbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-2) var(--cm-s-3); min-width: 0; }
.cm-cp-langbar-note { font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cp-field-top { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-2); flex-wrap: wrap; min-width: 0; }
.cm-cp-field-tools { display: inline-flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-cp-titlefield, .cm-cp-summaryfield { display: flex; flex-direction: column; gap: var(--cm-s-1); min-width: 0; }
.cm-cp-title-input, .cm-cp-summary-input {
display: block; width: 100%; margin: 0; padding: var(--cm-s-1) var(--cm-s-2); margin-left: calc(-1 * var(--cm-s-2));
box-sizing: content-box; max-width: 100%; resize: none; overflow: hidden; border: 1px solid transparent;
border-radius: var(--radius-md); background: transparent; color: var(--text); font-family: inherit;
}
.cm-cp-title-input { font-size: var(--cm-fs-title, var(--text-2xl)); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.cm-cp-summary-input { font-size: var(--text-lg); line-height: 1.5; color: var(--text-dim); }
.cm-cp-title-input:hover, .cm-cp-summary-input:hover { border-color: var(--border); }
.cm-cp-title-input:focus, .cm-cp-summary-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.cm-cp-title-input::placeholder, .cm-cp-summary-input::placeholder { color: var(--text-faint); }
.cm-cp-title-input:disabled, .cm-cp-summary-input:disabled { cursor: default; border-color: transparent; }
.cm-cp-summaryfield .cm-ui-hint { margin: 0; }
.cm-cp-count { font-feature-settings: "tnum"; }
.cm-cp-count.is-over { color: color-mix(in srgb, var(--danger) 72%, var(--text)); font-weight: 600; }
.cm-cp-editor-card { min-width: 0; min-height: 28rem; }
.cm-cp-editor-host { min-width: 0; }
.cm-cp-editor-host > .cm-ui-skel { padding: var(--cm-s-5) var(--cm-s-6); }
.cm-cp-editor { display: block; min-width: 0; }
.cm-cp-editor-failed { display: flex; flex-direction: column; gap: var(--cm-s-4); padding: var(--cm-s-5); }
.cm-cp-subhead { margin: 0 0 var(--cm-s-2); font-size: var(--text-md); font-weight: 650; color: var(--text); }
.cm-cp-outline { margin: 0; padding-left: var(--cm-s-5); display: flex; flex-direction: column; gap: var(--cm-s-1); font-size: var(--cm-fs-body); color: var(--text); }
.cm-cp-outline li.is-flash { background: var(--accent-soft); border-radius: var(--radius-sm); }
/* Content: post settings (side panel; a disclosure on phones) */
.cm-cp-settings-card .cm-ui-card-body { gap: var(--cm-s-4); }
.cm-cp-group { display: flex; flex-direction: column; gap: var(--cm-s-3); padding-top: var(--cm-s-4); border-top: 1px solid var(--border); }
.cm-cp-group-label { margin: 0; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-cp-settings-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-1) var(--cm-s-2); margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cp-settings-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-cp-settings-card.is-compact .cm-ui-disclosure-body { display: flex; flex-direction: column; gap: var(--cm-s-4); padding-top: var(--cm-s-3); }
/* Channels */
.cm-cp-chlist { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-cp-ch { display: flex; flex-direction: column; gap: var(--cm-s-3); padding: var(--cm-s-4) var(--cm-s-5); min-width: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
[data-theme="light"] .cm-cp-ch { box-shadow: var(--shadow-sm); }
.cm-cp-ch.is-on { border-color: var(--border-strong); }
.cm-cp-ch-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--cm-s-3) var(--cm-s-4); }
.cm-cp-ch-main { min-width: 0; }
.cm-cp-ch-main .cm-ui-switch { width: 100%; }
.cm-cp-ch-side { display: flex; align-items: center; gap: var(--cm-s-2); justify-content: flex-end; flex-wrap: wrap; }
.cm-cp-ch-reach { font-size: var(--cm-fs-meta); color: var(--text-dim); font-feature-settings: "tnum"; white-space: nowrap; }
.cm-cp-ch-reach:empty { display: none; }
.cm-cp-ch.is-unavailable .cm-ui-icontile { opacity: .6; }
.cm-cp-ch-custom { margin-left: calc(40px + var(--cm-s-4)); }
.cm-cp-ch-custom-sum { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-cp-ch-custom .cm-ui-disclosure-body { display: flex; flex-direction: column; gap: var(--cm-s-4); padding-top: var(--cm-s-3); }
.cm-cp-ovfield { display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-cp-ov-state { display: inline-flex; align-items: center; gap: var(--cm-s-1); }
.cm-cp-reach-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-cp-reach-num { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-feature-settings: "tnum"; color: var(--text); }
.cm-cp-reach-unit { font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-cp-reach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-reach-list > li { display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-cp-reach-ch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text); }
/* Schedule */
.cm-cp-when, .cm-cp-after { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-cp-dtrow { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-cp-dt { max-width: 16.5rem; }
.cm-cp-indent { padding-left: calc(44px + var(--cm-s-3)); }
.cm-cp-clash { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-near-time { min-width: 3rem; font-weight: 650; font-feature-settings: "tnum"; color: var(--text); }
/* Review */
.cm-cp-checks { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-chk .cm-ui-lrow-title { font-weight: 500; }
.cm-cp-chk-go { display: inline-flex; align-items: center; gap: var(--cm-s-1); font-size: var(--cm-fs-meta); font-weight: 600; color: var(--cm-accent-text); white-space: nowrap; }
.cm-cp-pvbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cm-s-3); min-width: 0; }
.cm-cp-pvbar > .cm-ui-tabs { flex: 1 1 360px; min-width: 0; }
.cm-cp-pvhost { min-width: 0; }
/* Approval + review comments */
.cm-cp-slot .cm-ui-lrow-body { margin-top: var(--cm-s-1); }
.cm-cp-slot-comment { margin: 0; padding: var(--cm-s-2) var(--cm-s-3); border-left: 3px solid var(--border-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--surface-2); font-size: var(--cm-fs-meta); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-cp-warn-text { margin: var(--cm-s-1) 0 0; font-size: var(--cm-fs-meta); color: color-mix(in srgb, var(--warn) 72%, var(--text)); }
.cm-cp-comments-host:focus { outline: none; }
.cm-cp-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-comment { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-2); padding-bottom: var(--cm-s-3); border-bottom: 1px solid var(--border); }
.cm-cp-comment:last-child { border-bottom: 0; padding-bottom: 0; }
.cm-cp-comment.is-resolved .cm-cp-comment-body { color: var(--text-dim); }
.cm-cp-comment-body { margin: 0; font-size: var(--cm-fs-body); line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-cp-comment-acts { display: flex; align-items: center; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-cp-comment-form { display: flex; flex-direction: column; gap: var(--cm-s-2); padding-top: var(--cm-s-3); border-top: 1px solid var(--border); }
/* Send */
.cm-cp-send { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cm-cp-send-summary .cm-ui-section-body { gap: var(--cm-s-4); }
.cm-cp-kv dd { font-size: var(--text-md); font-weight: 600; }
.cm-cp-chline { display: inline-flex; flex-wrap: wrap; gap: var(--cm-s-1) var(--cm-s-3); font-weight: 500; }
.cm-cp-chline-item { display: inline-flex; align-items: center; gap: var(--cm-s-1); }
.cm-cp-reasons { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 2px; }
.cm-cp-confirm { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-confirm-big { margin: 0; font-size: var(--cm-fs-h2); font-weight: 650; line-height: 1.3; color: var(--text); }
.cm-cp-confirm-line { margin: 0; font-size: var(--cm-fs-body); color: var(--text-dim); }
.cm-cp-correction .cm-ui-section-body { gap: var(--cm-s-4); }
/* Undo toast (bottom centre, above the core toasts) */
.cm-cp-undo {
position: fixed; left: 50%; bottom: var(--cm-s-5); transform: translateX(-50%); z-index: 1200; max-width: calc(100vw - 2 * var(--cm-s-4));
display: flex; align-items: center; gap: var(--cm-s-3); padding: var(--cm-s-2) var(--cm-s-2) var(--cm-s-2) var(--cm-s-4);
background: var(--surface-solid); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.cm-cp-undo-icon { display: inline-flex; color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-cp-undo-text { font-size: var(--cm-fs-body); font-weight: 600; min-width: 0; }
.cm-cp-undo-count { font-size: var(--cm-fs-meta); color: var(--text-dim); font-feature-settings: "tnum"; }
/* AI suggestions, plain-language check */
.cm-cp-suggest { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-suggest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-cp-suggest-btn {
display: flex; flex-direction: column; gap: 2px; width: 100%; padding: var(--cm-s-3) var(--cm-s-4); text-align: left; cursor: pointer;
background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font: inherit;
}
.cm-cp-suggest-btn:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.cm-cp-suggest-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-cp-suggest-label { font-weight: 600; overflow-wrap: anywhere; }
.cm-cp-ai-note { display: flex; align-items: flex-start; gap: var(--cm-s-1); }
.cm-cp-plain { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-cp-plain-head { display: flex; align-items: center; gap: var(--cm-s-3); }
.cm-cp-plain-score { width: 3rem; height: 3rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
font-size: var(--text-lg); font-weight: 700; font-feature-settings: "tnum"; background: var(--surface-3); color: var(--text); }
.cm-cp-plain-score.is-easy { background: var(--success-soft); }
.cm-cp-plain-score.is-hard { background: var(--warn-soft); }
.cm-cp-plain-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-plain-issue { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-1); padding: var(--cm-s-3); border-radius: var(--radius-md); background: var(--surface-2); }
.cm-cp-plain-ex { font-style: italic; color: var(--text); overflow-wrap: anywhere; }
.cm-cp-plain-sug { display: flex; align-items: flex-start; gap: var(--cm-s-1); color: var(--text); overflow-wrap: anywhere; }
/* Versions and compare */
.cm-cp-history { display: flex; flex-direction: column; gap: var(--cm-s-3); min-height: 8rem; }
.cm-cp-history-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-2) var(--cm-s-3); }
.cm-cp-diff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-cp-diff-row { display: flex; flex-direction: column; gap: var(--cm-s-1); padding: var(--cm-s-3); border-radius: var(--radius-md); background: var(--surface-2); }
.cm-cp-diff-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text); }
.cm-cp-diff-before, .cm-cp-diff-after { font-size: var(--cm-fs-meta); padding: var(--cm-s-1) var(--cm-s-2); border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-cp-diff-before { background: var(--danger-soft); color: var(--text); text-decoration: line-through; text-decoration-color: var(--danger); }
.cm-cp-diff-after { background: var(--success-soft); color: var(--text); }
/* New post: templates and blank kinds */
.cm-cp-tpls { min-width: 0; }
.cm-cp-tpl .cm-ui-card-body { gap: var(--cm-s-2); }
.cm-cp-tpl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-cp-tpl-ch { display: flex; align-items: center; gap: var(--cm-s-2); color: var(--text-dim); }
.cm-cp-kind .cm-ui-card-sub { font-size: var(--cm-fs-meta); }
/* ==========================================================================
Previews (cm-pv-) — the widget (composer Review step) and the preview page
========================================================================== */
.cm-pv { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-pv-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-2) var(--cm-s-3); min-width: 0; }
.cm-pv-spacer { flex: 1 1 auto; }
.cm-pv-hint { display: inline-flex; align-items: center; gap: var(--cm-s-1); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-pv-seg { flex: 0 0 auto; }
.cm-pv-meta:empty { display: none; }
.cm-pv-surface { min-width: 0; transition: opacity var(--cm-t-fast, 120ms) var(--ease); }
.cm-pv-surface.is-loading { opacity: .55; }
.cm-pv-probe { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.cm-pv-col { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-pv-note { display: flex; align-items: flex-start; gap: var(--cm-s-2); margin: 0; font-size: var(--cm-fs-meta); line-height: 1.5; color: var(--text-dim); }
.cm-pv-note .cm-ui-icon { flex: 0 0 auto; margin-top: 2px; }
.cm-pv-dim { color: var(--text-dim); font-size: var(--cm-fs-meta); }
.cm-pv-kicker { margin: 0; font-size: var(--cm-fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.cm-pv-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; min-width: 0; }
.cm-pv-bar > .cm-pv-tabs { flex: 1 1 420px; min-width: 0; }
.cm-pv-langhost:empty, .cm-pv-testhost:empty { display: none; }
.cm-pv-host { min-width: 0; }
.cm-pv-card-label { display: flex; align-items: center; gap: var(--cm-s-1); margin: var(--cm-s-1) 0 0; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
/* Feed article */
.cm-pv-desktop {
max-width: 760px;
padding: 1.5rem 1.75rem;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--surface);
}
.cm-pv-article { display: flex; flex-direction: column; gap: .6rem; color: var(--text); min-width: 0; }
.cm-pv-h1 { margin: 0; font-size: var(--text-2xl); font-weight: 700; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.cm-pv-lede { margin: 0; font-size: var(--text-lg); color: var(--text-dim); line-height: 1.5; }
.cm-pv-doc { min-width: 0; }
.cm-pv-doc img { max-width: 100%; height: auto; }
.cm-pv-doc img.is-loading { min-height: 6rem; background: var(--surface-3); }
.cm-pv-doc img.is-broken { min-height: 3rem; outline: 1px dashed var(--danger); }
.cm-pv-doc.is-clickable [data-block-id] { cursor: pointer; border-radius: var(--radius-xs); transition: box-shadow var(--cm-t-fast, 120ms) var(--ease); }
.cm-pv-doc.is-clickable [data-block-id]:hover { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent); }
/* Device frames */
.cm-pv-stage { display: flex; justify-content: center; padding: 1rem; border-radius: var(--radius-lg); background: var(--surface-2); overflow-x: auto; }
.cm-pv-phone {
width: 390px;
max-width: 100%;
height: 780px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
border: 10px solid var(--surface-3);
border-radius: 2.4rem;
background: var(--surface);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.cm-pv-phone-bar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: .45rem 1.2rem .35rem;
font-size: var(--text-xs);
font-weight: 700;
color: var(--text);
position: relative;
}
.cm-pv-notch { width: 5.5rem; height: 1.1rem; border-radius: 999px; background: var(--surface-3); position: absolute; left: 50%; transform: translateX(-50%); top: .35rem; }
.cm-pv-phone-screen { flex: 1 1 auto; overflow-y: auto; padding: .9rem 1rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.cm-pv-phone-screen .cm-pv-h1 { font-size: var(--text-xl); }
.cm-pv-phone-screen .cm-pv-lede { font-size: var(--text-md); }
.cm-pv-phone-screen.is-frame { padding: 0; }
.cm-pv-phone-screen.is-frame .cm-pv-iframe { height: 100%; border: 0; border-radius: 0; }
.cm-pv-kiosk {
width: 100%;
max-width: 1100px;
aspect-ratio: 16 / 10;
border: 14px solid var(--surface-3);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.cm-pv-kiosk-screen { height: 100%; overflow-y: auto; padding: 2rem 2.5rem; }
.cm-pv-kiosk-screen .cm-pv-h1 { font-size: var(--text-3xl); }
.cm-pv-kiosk-screen .cm-pv-lede { font-size: var(--text-xl); }
.cm-pv-kiosk-screen .cm-pv-doc { font-size: var(--text-lg); }
/* Email */
.cm-pv-email { gap: .6rem; }
.cm-pv-inbox {
display: grid;
grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 1rem;
padding: .7rem 1rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--surface);
font-size: var(--text-md);
}
.cm-pv-inbox-from { grid-row: span 2; font-weight: 700; color: var(--text); align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pv-inbox-subject { font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.cm-pv-inbox-pre { color: var(--text-dim); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pv-mailbox { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); padding: .75rem; }
.cm-pv-iframe { display: block; width: 100%; height: 760px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-solid); }
.cm-pv-email.is-dark .cm-pv-mailbox { background: var(--surface-3); }
.cm-pv-text {
margin: 0;
padding: 1rem;
max-height: 760px;
overflow: auto;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: var(--text-sm);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.cm-pv-json { margin: .5rem 0 0; max-height: 18rem; overflow: auto; font-size: var(--text-xs); white-space: pre-wrap; color: var(--text-dim); }
/* Adaptive Cards (Teams / Outlook). The renderer sets its own layout; we theme the chrome. */
.cm-pv-card {
width: 100%;
max-width: 560px;
border-radius: var(--radius-md);
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text);
overflow: hidden;
}
.cm-pv-card .ac-adaptiveCard { font-size: var(--text-md); }
.cm-pv-card .ac-pushButton {
appearance: none;
-webkit-appearance: none;
flex: 0 1 auto;
padding: .4rem .9rem;
min-height: 2rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--surface-2);
color: var(--text);
font: inherit;
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
}
.cm-pv-card .ac-pushButton:hover { border-color: var(--accent); color: var(--accent); }
.cm-pv-card .ac-pushButton.style-positive { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.cm-pv-card .ac-pushButton.style-destructive { color: var(--danger); border-color: var(--danger); }
.cm-pv-card a { color: var(--accent); }
.cm-pv-outlook-card { max-width: 640px; }
.cm-pv-teams {
width: 100%;
max-width: 560px;
display: flex;
flex-direction: column;
gap: .5rem;
padding: 1rem;
border-radius: var(--radius-lg);
background: var(--surface-2);
color: var(--text);
}
.cm-pv-teams-head { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); }
.cm-pv-bot {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: var(--text-inverse);
font-weight: 700;
}
/* Push lock screen */
.cm-pv-phone.is-lock { background: var(--surface-3); }
.cm-pv-lock-time { text-align: center; font-size: var(--text-3xl); font-weight: 300; color: var(--text); margin-top: 2.5rem; font-variant-numeric: tabular-nums; }
.cm-pv-lock-date { text-align: center; font-size: var(--text-sm); color: var(--text-dim); margin-bottom: 1.5rem; }
.cm-pv-notif {
margin: 0 .75rem;
display: flex;
flex-direction: column;
gap: .2rem;
padding: .75rem .9rem;
border-radius: 1.1rem;
background: var(--surface);
box-shadow: var(--shadow-md);
}
.cm-pv-notif-head { display: flex; align-items: center; gap: .4rem; font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.cm-pv-app { width: 1.3rem; height: 1.3rem; border-radius: .35rem; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--text-inverse); }
.cm-pv-notif-title { font-size: var(--text-md); color: var(--text); overflow-wrap: anywhere; }
.cm-pv-notif-body { font-size: var(--text-md); color: var(--text-dim); overflow-wrap: anywhere; }
/* SMS */
.cm-pv-sms-head { text-align: center; padding-bottom: .6rem; border-bottom: 1px solid var(--border); color: var(--text); }
.cm-pv-bubble {
align-self: flex-start;
max-width: 85%;
padding: .6rem .8rem;
border-radius: 1.1rem 1.1rem 1.1rem .3rem;
background: var(--surface-3);
color: var(--text);
font-size: var(--text-md);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* ==========================================================================
Translation (side by side)
========================================================================== */
.cm-tr-banners { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-tr-banners:empty, .cm-tr-warnings:empty { display: none; }
.cm-tr-summary .cm-ui-card-body { gap: var(--cm-s-4); }
.cm-tr-progress { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-tr-progress-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--cm-s-2) var(--cm-s-3); }
.cm-tr-pct { font-size: var(--cm-fs-h2); font-weight: 700; font-feature-settings: "tnum"; color: var(--text); }
.cm-tr-progress-text { font-size: var(--cm-fs-body); color: var(--text-dim); margin-right: auto; }
.cm-tr-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cm-s-2) var(--cm-s-3); }
.cm-tr-actions:empty { display: none; }
.cm-tr-actions-ai, .cm-tr-actions-main { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-tr-actions-main { margin-left: auto; }
.cm-tr-reviewed { display: inline-flex; align-items: center; gap: var(--cm-s-1); font-size: var(--cm-fs-meta); font-weight: 600; color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cm-tr-ai-note { flex: 1 0 100%; }
.cm-tr-warn-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 2px; }
.cm-tr-warn-link { text-align: left; }
.cm-tr-table { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
[data-theme="light"] .cm-tr-table { box-shadow: var(--shadow-sm); }
.cm-tr-row {
display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) minmax(0, 1fr); gap: var(--cm-s-4);
padding: var(--cm-s-4) var(--cm-s-5); border-top: 1px solid var(--border); align-items: start; transition: background var(--cm-t-fast, 120ms) var(--ease);
}
.cm-tr-row:first-child { border-top: 0; }
.cm-tr-headrow { position: sticky; top: 0; z-index: 2; padding-top: var(--cm-s-2); padding-bottom: var(--cm-s-2); background: var(--surface-2);
font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); }
.cm-tr-headrow .cm-tr-src, .cm-tr-headrow .cm-tr-tgt, .cm-tr-headrow .cm-tr-label { font-size: inherit; font-weight: inherit; color: inherit; }
.cm-tr-row.is-missing { box-shadow: inset 3px 0 0 var(--warn); }
.cm-tr-row.is-orphan { box-shadow: inset 3px 0 0 var(--border-strong); background: var(--surface-2); }
.cm-tr-row.is-flash { background: var(--accent-soft); }
.cm-tr-label { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-2); min-width: 0; font-size: var(--cm-fs-meta); color: var(--text); overflow-wrap: anywhere; }
.cm-tr-label strong { font-weight: 600; }
.cm-tr-row-tools { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-tr-src, .cm-tr-tgt { min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-tr-src { color: var(--text); font-size: var(--text-md); line-height: 1.55; overflow-wrap: anywhere; }
.cm-tr-text { display: block; color: var(--text); font-size: var(--text-md); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-tr-seg { display: flex; flex-direction: column; gap: var(--cm-s-1); min-width: 0; }
.cm-tr-seg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-2); }
.cm-tr-seg-label { font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); }
.cm-tr-state { display: inline-flex; }
.cm-tr-state:empty { display: none; }
.cm-tr-missing { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-2); }
.cm-tr-rich { min-height: 2.6rem; padding: var(--cm-s-2) var(--cm-s-3); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.cm-tr-rich:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cm-tr-rich[contenteditable="false"] { cursor: default; color: var(--text-dim); }
.cm-tr-rich a, .cm-tr-src a { color: var(--cm-accent-text); }
.cm-tr-input { width: 100%; }
.cm-tr-section { padding: var(--cm-s-2) var(--cm-s-5); border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); }
.cm-tr-note { padding: var(--cm-s-3) var(--cm-s-5); border-top: 1px solid var(--border); }
/* ==========================================================================
Responsive + motion
========================================================================== */
@media (max-width: 1100px) {
.cm-st-row .cm-ui-lrow-trail { max-width: 55%; }
}
@media (max-width: 900px) {
.cm-cp-stepper { position: static; padding: 0; }
.cm-cp-split .cm-ui-split-rail { position: static; }
.cm-tr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cm-tr-label { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
.cm-tr-headrow .cm-tr-label { display: none; }
}
@media (max-width: 720px) {
.cm-st-cal { display: none; }
.cm-st-cal-nav { flex-direction: column; align-items: stretch; }
.cm-st-cal-move { justify-content: space-between; }
.cm-st-row { flex-wrap: wrap; align-items: flex-start; }
.cm-st-row .cm-ui-lrow-main { flex-basis: calc(100% - 56px); }
.cm-st-row .cm-ui-lrow-trail { max-width: none; width: 100%; justify-content: flex-start; padding-left: calc(40px + var(--cm-s-3)); }
.cm-st-row .cm-ui-menuwrap { margin-left: auto; }
.cm-st-row .cm-ui-lrow-meta .cm-ui-meta { display: flex; flex-wrap: wrap; gap: 2px var(--cm-s-3); }
.cm-st-row .cm-ui-lrow-meta .cm-ui-meta-sep { display: none; }
.cm-cp-doc-head { padding: var(--cm-s-4); }
.cm-cp-title-input { font-size: 1.375rem; }
.cm-cp-summary-input { font-size: var(--text-md); }
.cm-cp-ch { padding: var(--cm-s-4); }
.cm-cp-ch-head { grid-template-columns: auto minmax(0, 1fr); }
.cm-cp-ch-side { grid-column: 2; justify-content: flex-start; }
.cm-cp-ch-custom { margin-left: 0; }
.cm-cp-indent { padding-left: 0; }
.cm-cp-footer { margin-left: calc(-1 * var(--cm-s-4)); margin-right: calc(-1 * var(--cm-s-4)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; padding: var(--cm-s-3) var(--cm-s-4); }
.cm-cp-footer .cm-ui-btn { min-height: 44px; }
.cm-cp-kv.cm-ui-kv--cols-2 { grid-template-columns: minmax(0, 1fr); }
.cm-cp-undo { left: var(--cm-s-4); right: var(--cm-s-4); bottom: var(--cm-s-4); transform: none; max-width: none; flex-wrap: wrap; }
.cm-pv-desktop { padding: var(--cm-s-4); }
.cm-pv-stage { padding: var(--cm-s-2); }
.cm-pv-phone { height: 680px; border-width: 6px; border-radius: 1.8rem; }
.cm-pv-iframe { height: 620px; }
.cm-pv-inbox { grid-template-columns: minmax(0, 1fr); }
.cm-pv-inbox-from { grid-row: auto; }
.cm-tr-row { grid-template-columns: minmax(0, 1fr); gap: var(--cm-s-2); padding: var(--cm-s-3) var(--cm-s-4); }
.cm-tr-headrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cm-cp-save.is-saving .cm-ui-icon { animation: none; }
.cm-pv-surface, .cm-tr-row, .cm-pv-doc.is-clickable [data-block-id] { transition: none; }
}
/* a step whose side panel has nothing to say gives the work area the full width */
.cm-cp-split:has(> .cm-ui-split-rail > div:only-child:empty) { grid-template-columns: minmax(0, 1fr); }
.cm-cp-split > .cm-ui-split-rail:has(> div:only-child:empty) { display: none; }
/* the step you are on is always the accent one, also when it is already complete (kit: dark theme drew its number in --bg on --success-soft) */
.cm-cp-stepper .cm-ui-step.is-current.is-done .cm-ui-step-mark { border-color: var(--accent); background: var(--accent); color: var(--text-inverse); }
:root:not([data-theme="light"]) .cm-cp-stepper .cm-ui-step.is-current.is-done .cm-ui-step-mark { color: var(--bg); }
.cm-cp-slot .cm-ui-lrow-meta .cm-ui-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.cm-cp-slot .cm-ui-lrow-meta .cm-ui-meta-sep { display: none; }
/* ---- Interactive parts (poll / quiz / survey / event / task setup) ------------------------------------- */
.cm-cp-eg-host:empty, .cm-cp-eg-err:empty { display: none; }
.cm-cp-eg .cm-ui-section-body { gap: 0; }
.cm-cp-eg-row .cm-ui-lrow-trail { flex-wrap: wrap; justify-content: flex-end; }
.cm-cp-eg-row .cm-ui-lrow-meta { font-size: var(--cm-fs-meta); color: var(--text-dim); overflow-wrap: anywhere; }
.cm-cp-eg-dialog .cm-ui-modal-body { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-cp-eg-lang { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cm-s-3); min-width: 0; }
.cm-cp-eg-lang.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-cp-eg-opts { display: flex; flex-direction: column; gap: var(--cm-s-3); align-items: stretch; }
.cm-cp-eg-opts > .cm-ui-btn { align-self: flex-start; }
.cm-cp-eg-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: var(--cm-s-2) var(--cm-s-3); }
.cm-cp-eg-correct { display: inline-flex; align-items: center; gap: var(--cm-s-1); min-height: 40px; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.cm-cp-eg-correct input { width: 18px; height: 18px; accent-color: var(--accent); }
.cm-cp-eg-qs { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-cp-eg-qs > .cm-ui-btn { align-self: flex-start; }
.cm-cp-eg-q .cm-ui-card-body { gap: var(--cm-s-3); }
.cm-cp-eg-qhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-cp-eg-qhead .cm-ui-select { margin-left: auto; }
.cm-cp-eg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-s-3) var(--cm-s-4); }
@media (max-width: 720px) {
.cm-cp-eg-lang.is-two, .cm-cp-eg-two { grid-template-columns: minmax(0, 1fr); }
.cm-cp-eg-opt { grid-template-columns: minmax(0, 1fr) auto; }
.cm-cp-eg-opt .cm-cp-eg-lang { grid-column: 1 / -1; }
.cm-cp-eg-row { flex-wrap: wrap; }
.cm-cp-eg-row .cm-ui-lrow-trail { width: 100%; justify-content: flex-start; padding-left: calc(40px + var(--cm-s-3)); }
}
/* ---- comms: analytics (design/comms/css/analytics.css) ---- */
/* ==========================================================================
comms — analytics slice (cm-an-*: analytics.js + charts.js; team.js styles live in frontline.css).
Built on the UI kit (cm-ui-*): this file only adds what the dashboards need on
top of it — bar lists, heat chips, suppressed rows, the range control, the
funnel, "Who read it" details and print. Tokens only: every colour comes from
main.css custom properties (directly or through color-mix), so dark and light
need no theme-specific rule. charts.js reads the same tokens for ECharts.
========================================================================== */
/* ---- Page frame --------------------------------------------------------- */
.cm-an .cm-ui-page-body { gap: var(--cm-s-5); }
.cm-an.is-refreshing .cm-ui-page-body { opacity: .55; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
.cm-an .is-refreshing { opacity: .55; pointer-events: none; }
.cm-an-postmeta { align-items: center; color: var(--text-dim); font-size: var(--cm-fs-meta); }
.cm-an-dim { color: var(--text-dim); font-weight: 400; }
.cm-an-bad { color: color-mix(in srgb, var(--danger) 72%, var(--text)); font-weight: 600; }
.cm-an-block { min-width: 0; display: flex; }
.cm-an-block > * { flex: 1 1 auto; min-width: 0; }
.cm-an .cm-ui-grid > * { min-width: 0; }
.cm-an-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-s-4); align-items: start; }
.cm-an-grid2 > * { min-width: 0; }
@media (max-width: 900px) { .cm-an-grid2 { grid-template-columns: minmax(0, 1fr); } }
.cm-an-foot { margin-top: var(--cm-s-2); }
.cm-an-subhead { margin: var(--cm-s-4) 0 var(--cm-s-2); font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); }
.cm-an-acc {
display: inline-flex; align-items: center; gap: var(--cm-s-1);
font-size: var(--cm-fs-small); font-weight: 500; color: var(--text-dim); white-space: nowrap;
}
.cm-an-chan { display: inline-flex; align-items: center; gap: var(--cm-s-2); }
.cm-an-chan .cm-ui-icon { color: var(--text-dim); }
.cm-an-code { font-family: var(--font-mono, monospace); font-size: var(--cm-fs-small); color: var(--text-dim); overflow-wrap: anywhere; }
.cm-an-notes { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--cm-s-2); line-height: 1.55; color: var(--text); }
/* ---- Stat tiles: suppressed values read as a designed state ------------- */
.cm-an-tile-hidden { display: inline-flex; align-items: center; gap: var(--cm-s-2); font-size: var(--text-lg); font-weight: 600; color: var(--text-dim); }
.cm-an-tile.is-suppressed .cm-ui-stat-hint { color: var(--text-dim); }
/* ---- Range control ------------------------------------------------------ */
.cm-an-range { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-an-range-row { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-an-range-text { display: inline-flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-an-custom {
display: flex; align-items: flex-end; gap: var(--cm-s-3); flex-wrap: wrap;
padding: var(--cm-s-3) var(--cm-s-4); border-radius: var(--radius-lg); background: var(--surface-2);
}
.cm-an-custom[hidden] { display: none; }
.cm-an-range .cm-ui-seg-opt { white-space: nowrap; }
.cm-an-custom.is-static { padding: 0; background: none; margin-bottom: var(--cm-s-3); }
.cm-an-custom .cm-ui-field { min-width: 10rem; }
/* ---- Chart cards (kit card anatomy) ------------------------------------- */
.cm-an-chart { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.cm-an-chart .cm-ui-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-an-chart-head { flex-wrap: wrap; row-gap: var(--cm-s-2); }
.cm-an-chart-head > .cm-ui-card-titles { flex: 1 1 14rem; min-width: 0; }
.cm-an-chart-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.cm-an-canvas { width: 100%; min-width: 0; }
.cm-an-htmlchart { min-width: 0; }
.cm-an-chart-empty {
flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cm-s-2);
min-height: 140px; padding: var(--cm-s-5) var(--cm-s-4); border-radius: var(--radius-md);
background: var(--surface-2); color: var(--text-dim); text-align: center;
}
.cm-an-chart-empty p { margin: 0; max-width: 46ch; font-size: var(--cm-fs-meta); line-height: 1.5; }
.cm-an-chart-empty .cm-ui-icon { color: var(--text-faint); }
.cm-an-fail { display: flex; align-items: center; gap: var(--cm-s-2); margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-an-fail[hidden] { display: none; }
.cm-an-note { margin: var(--cm-s-3) 0 0; font-size: var(--cm-fs-meta); line-height: 1.5; color: var(--text-dim); }
/* ---- HTML bar list ------------------------------------------------------ */
.cm-an-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-an-bar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cm-an-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cm-s-3); min-width: 0; }
.cm-an-bar-label { display: inline-flex; align-items: center; gap: var(--cm-s-2); min-width: 0; font-size: var(--cm-fs-body); color: var(--text); overflow-wrap: anywhere; }
.cm-an-bar-label .cm-ui-icon { color: var(--text-dim); flex: 0 0 auto; }
.cm-an-bar-value { flex: 0 0 auto; font-size: var(--cm-fs-body); font-weight: 600; color: var(--text); font-feature-settings: 'tnum'; text-align: right; }
.cm-an-bar-track { display: block; height: 8px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.cm-an-bar-fill { --cm-an-bar: var(--accent); display: block; height: 100%; width: 0; border-radius: inherit; background: var(--cm-an-bar); transition: width 320ms var(--ease); }
.cm-an-bar.is-zero .cm-an-bar-value { color: var(--text-dim); font-weight: 500; }
.cm-an-bar.is-suppressed .cm-an-bar-value { font-weight: 500; }
.cm-an-bar-hint { font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-an-bars-empty { display: flex; align-items: center; gap: var(--cm-s-2); margin: 0; color: var(--text-dim); font-size: var(--cm-fs-meta); }
.cm-an-funnel-val { display: inline-flex; align-items: baseline; gap: var(--cm-s-2); }
.cm-an-funnel-val > span { min-width: 3.2em; text-align: right; font-weight: 500; color: var(--text-dim); }
.cm-an-funnel .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-4); }
/* ---- Suppression (k-anonymity) ------------------------------------------ */
.cm-an-supp {
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
font-size: var(--cm-fs-small); font-weight: 500; color: var(--text-dim); cursor: help;
}
.cm-an-supp .cm-ui-icon, .cm-an-supp svg { flex: 0 0 auto; }
.cm-an-supprow {
display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); white-space: nowrap;
}
.cm-an-supprow-why { font-weight: 400; }
.cm-an-supprow-why::before { content: "· "; }
.cm-an-supp-cell { display: inline-flex; color: var(--text-faint); }
/* ---- Heat table: one hue, six steps, from the accent token ---------------- */
.cm-an-heatsec .cm-ui-section-body { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-an-heat-take { margin: calc(-1 * var(--cm-s-2)) 0 0; }
.cm-an-heat-tools { display: flex; align-items: center; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-an-heat-body { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-an-hchip {
display: inline-flex; align-items: center; justify-content: flex-end; min-width: 4.25rem; padding: 4px 10px;
border-radius: var(--radius-sm); font-size: var(--cm-fs-body); font-weight: 600; font-feature-settings: 'tnum'; color: var(--text);
}
.cm-an-hchip.is-na { background: var(--surface-2); color: var(--text-dim); font-weight: 400; }
.cm-an-hchip.is-suppressed { background: var(--surface-2); padding-inline: 8px; }
.cm-an-heat-0 { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.cm-an-heat-1 { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.cm-an-heat-2 { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.cm-an-heat-3 { background: color-mix(in srgb, var(--accent) 46%, var(--surface)); }
.cm-an-hchip.cm-an-heat-4 { background: color-mix(in srgb, var(--accent) 72%, var(--text)); color: var(--text-inverse); }
.cm-an-hchip.cm-an-heat-5 { background: color-mix(in srgb, var(--accent) 52%, var(--text)); color: var(--text-inverse); }
.cm-an-heat-sw.cm-an-heat-4 { background: color-mix(in srgb, var(--accent) 72%, var(--text)); }
.cm-an-heat-sw.cm-an-heat-5 { background: color-mix(in srgb, var(--accent) 52%, var(--text)); }
.cm-an-heat-legend { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3) var(--cm-s-5); flex-wrap: wrap; font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-an-heat-legend-scale, .cm-an-heat-legend-hidden { display: inline-flex; align-items: center; gap: 4px; }
.cm-an-heat-sw { display: inline-block; width: 1.5rem; height: .65rem; border-radius: 3px; }
.cm-an-heattable .cm-ui-td { vertical-align: middle; }
.cm-an-heattable .cm-ui-td[data-role="title"] { font-weight: 500; }
.cm-an-tree { display: inline-flex; align-items: center; gap: var(--cm-s-1); min-width: 0; }
.cm-an-tree-label { overflow-wrap: anywhere; }
.cm-an-lvl-1 .cm-an-tree-label { font-weight: 600; }
.cm-an-lvl-2 { padding-left: var(--cm-s-5); }
.cm-an-lvl-3 { padding-left: calc(var(--cm-s-5) * 2); }
.cm-an-lvl-3 .cm-an-tree-label { color: var(--text); font-weight: 400; }
.cm-an-disclose {
display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto;
border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-dim); cursor: pointer;
}
.cm-an-disclose:hover { background: var(--surface-hover); color: var(--text); }
.cm-an-disclose:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-an-disclose-pad { display: inline-block; width: 28px; flex: 0 0 auto; }
.cm-an-dimbar { display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0; }
.cm-an-dimbar-label { flex: 0 0 auto; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-an-dimbar .cm-ui-tabs { min-width: 0; flex: 1 1 auto; }
/* ---- Overview posts table -------------------------------------------------- */
.cm-an-postcell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-an-postlink { overflow-wrap: anywhere; }
.cm-an-postcell-meta { display: inline-flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; font-size: var(--cm-fs-small); font-weight: 400; color: var(--text-dim); }
.cm-an-camplink { color: var(--cm-accent-text); text-decoration: none; }
.cm-an-camplink:hover { text-decoration: underline; }
.cm-an-ratecell { display: grid; grid-template-columns: 3.2em minmax(3rem, 1fr); align-items: center; gap: var(--cm-s-2); font-feature-settings: 'tnum'; }
.cm-an-ratecell-num { text-align: right; font-weight: 600; }
.cm-an-storecell { display: flex; flex-direction: column; gap: 2px; }
/* ---- Who read it --------------------------------------------------------- */
.cm-an-who-summary .cm-ui-card-title { font-size: var(--text-xl); }
.cm-an-who-summary .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-an-who-list .cm-ui-section-body { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-an-who-filters { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-an-who-status { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.cm-an-who-status .cm-ui-seg-opt { white-space: nowrap; flex: 0 0 auto; }
.cm-an-who-state { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cm-an-who-earlier { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-an-who-channels { display: inline-flex; flex-direction: column; gap: 4px; }
.cm-an-who-ch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-fs-meta); color: var(--text-dim); white-space: nowrap; }
.cm-an-who-ch .cm-ui-icon { color: var(--text-dim); }
.cm-an-who-ch-name { font-weight: 600; color: var(--text); }
.cm-an-who-table.is-refreshing { opacity: .55; }
.cm-an-nudge { display: flex; flex-direction: column; gap: var(--cm-s-2); padding-top: var(--cm-s-4); border-top: 1px solid var(--border); }
.cm-an-who-summary .cm-an-nudge:first-child, .cm-ui-card-body > .cm-an-nudge:first-child { padding-top: 0; border-top: 0; }
.cm-an-nudge-meta { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-an-nudge-note { display: flex; align-items: center; gap: var(--cm-s-2); margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-an-modal-lead { margin: 0 0 var(--cm-s-4); font-size: var(--text-md); line-height: 1.5; color: var(--text); }
/* ---- Email + campaign ----------------------------------------------------- */
.cm-an-clickmap { min-width: 0; }
.cm-an-clickframe { width: 100%; height: 560px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cm-an-goal-line { margin: 0 0 var(--cm-s-3); color: var(--text-dim); }
.cm-an-goal-line strong { color: var(--text); }
.cm-an-filerow { list-style: none; padding: var(--cm-s-2) 0; border-bottom: 1px solid var(--border); }
.cm-an-filerow:last-child { border-bottom: 0; }
/* ---- Proportion meter (team.js) ------------------------------------------ */
.cm-an-meter {
position: relative;
display: block;
min-width: 3rem;
height: 6px;
border-radius: 999px;
background: var(--chart-track);
overflow: hidden;
}
.cm-an-meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.cm-an-meter-success .cm-an-meter-fill { background: var(--success); }
.cm-an-meter-warn .cm-an-meter-fill { background: var(--warn); }
.cm-an-meter-danger .cm-an-meter-fill { background: var(--danger); }
.cm-an-meter-info .cm-an-meter-fill { background: var(--info); }
.cm-an-meter-muted .cm-an-meter-fill { background: var(--text-faint); }
/* Estimates are hatched, never solid (the same convention as the chart decals). */
.cm-an-meter.is-estimate .cm-an-meter-fill {
background-image: repeating-linear-gradient(135deg, transparent 0 3px,
color-mix(in srgb, var(--surface) 55%, transparent) 3px 5px);
}
.cm-an-hatch-key {
display: inline-block;
width: 1.1rem;
height: .7rem;
border-radius: 2px;
vertical-align: middle;
background-color: var(--accent);
background-image: repeating-linear-gradient(45deg, transparent 0 2px, var(--surface) 2px 4px);
}
/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 600px) {
.cm-an .cm-ui-page-body { gap: var(--cm-s-4); }
.cm-an-range-row { align-items: flex-start; }
.cm-an-range .cm-ui-seg { width: 100%; overflow-x: auto; }
.cm-an-custom .cm-ui-field { min-width: 0; flex: 1 1 8rem; }
.cm-an-hchip { min-width: 3.6rem; padding: 3px 8px; }
.cm-an-clickframe { height: 420px; }
.cm-an-dimbar { flex-direction: column; align-items: stretch; gap: var(--cm-s-2); }
.cm-an-heat-legend { justify-content: flex-start; }
.cm-an-who-summary .cm-ui-card-title { font-size: var(--text-lg); }
.cm-an-nudge .cm-ui-row > .btn { flex: 1 1 100%; }
.cm-an-supprow { justify-content: flex-start; white-space: normal; }
}
/* Phone cards of a heat table: hide the empty grey gaps of a suppressed row (the lock line already says it). */
@container (max-width: 640px) {
.cm-an-heattable .cm-ui-tr { margin: 0; padding: var(--cm-s-3) var(--cm-s-1); border-width: 0 0 1px; border-radius: 0; background: none; }
.cm-an-heattable .cm-ui-tr:last-child { border-bottom: 0; }
.cm-an-heattable .cm-an-tree-label { overflow-wrap: break-word; }
.cm-an-lvl-2 { padding-left: var(--cm-s-3); }
.cm-an-lvl-3 { padding-left: var(--cm-s-5); }
.cm-an-heattable .cm-ui-td.cm-an-heatcol:has(.cm-an-supp-cell) { display: none; }
.cm-an-heattable .cm-ui-td[data-role="meta"] { align-items: center; }
.cm-an-heattable .cm-ui-td[data-role="end"] .cm-an-supprow-why { display: none; }
.cm-an-who-channels { flex-direction: row; flex-wrap: wrap; gap: var(--cm-s-1) var(--cm-s-3); }
.cm-an-ratecell { display: block; }
.cm-an-ratecell .cm-ui-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cm-an.is-refreshing .cm-ui-page-body, .cm-an-bar-fill { transition: none; }
}
/* ---- Print: the dashboards double as the printable report (§15) ---------- */
@media print {
.cm-an-noprint, .cm-an-toggle, .cm-an .cm-ui-ph-actions { display: none !important; }
body:has(.cm-an) .sidebar,
body:has(.cm-an) .topbar { display: none !important; }
body:has(.cm-an) .layout { display: block; }
body:has(.cm-an) .main { padding: 0; overflow: visible; animation: none; }
.cm-ui-page.cm-an { max-width: none; padding: 0; }
.cm-an .cm-ui-grid { grid-template-columns: minmax(0, 1fr); }
.cm-an-chart, .cm-an .cm-ui-stat, .cm-an .cm-ui-section--card { break-inside: avoid; box-shadow: none; }
}
/* ---- comms: admin (design/comms/css/admin.css) ---- */
/* ==========================================================================
comms — admin area (admin member): admin.js (frame, kit helpers, settings, status, hub), moderation.js,
approval-rules.js, communities-admin.js, templates-admin.js, screens-admin.js, api-keys.js, files.js.
Built on the kit (ui-kit.css). Classes cm-ak-*; tokens only; calm, document-like.
========================================================================== */
/* ---- shared helpers ----------------------------------------------------- */
.cm-ak [hidden], .cm-ak-modal [hidden] { display: none !important; }
.cm-ak-help { margin: 0; font-size: var(--cm-fs-meta); line-height: 1.45; color: var(--text-dim); }
.cm-ak-meta { display: inline-flex; align-items: center; gap: var(--cm-s-1); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ak-mono, .cm-ak-code-sm { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); }
.cm-ak-code-sm { font-size: var(--cm-fs-small); color: var(--text-dim); overflow-wrap: anywhere; }
.cm-ak-row { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-ak-inline { display: flex; align-items: center; gap: var(--cm-s-2); min-width: 0; }
.cm-ak-inline > .input, .cm-ak-inline > .cm-ui-input { flex: 1 1 auto; min-width: 0; }
.cm-ak-unit { font-size: var(--cm-fs-meta); color: var(--text-dim); white-space: nowrap; }
.cm-ak-bullets { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--cm-s-1); font-size: var(--cm-fs-body); line-height: 1.5; }
.cm-ak-clip { display: block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ak-cellstack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-ak-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.cm-ak-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-s-4) var(--cm-s-5); align-items: start; }
.cm-ak-grid2 > .cm-ak-field-wide { grid-column: 1 / -1; }
.cm-ak-subsection { display: flex; flex-direction: column; gap: var(--cm-s-3); padding-top: var(--cm-s-4); border-top: 1px solid var(--border); }
.cm-ak-subhead { display: flex; flex-direction: column; gap: 2px; }
.cm-ak-subhead-row { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-ak-subtitle { margin: 0; display: inline-flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-h3); font-weight: 650; line-height: 1.35; color: var(--text); }
.cm-ak-choicegroup { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-ak-field .cm-ui-hint { max-width: 60ch; }
.cm-ak-form { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-ak-form > p { margin: 0; line-height: 1.55; }
.cm-ak-form-error:empty { display: none; }
.cm-ak-btn-danger-ghost { color: var(--danger); color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.cm-ak-btn-danger-ghost:hover { background: var(--danger-soft); }
.cm-ak-tabs { margin-top: var(--cm-s-1); }
/* ---- secret dialog -------------------------------------------------------- */
.cm-ak-secret { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-ak-secret-input { font-size: var(--cm-fs-meta); }
.cm-ak-code {
margin: 0; padding: var(--cm-s-3) var(--cm-s-4); border-radius: var(--cm-r-md); background: var(--surface-2); border: 1px solid var(--border);
font: 12.5px/1.55 var(--font-mono, "JetBrains Mono", ui-monospace, monospace); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* ---- audience rule editor -------------------------------------------------- */
.cm-ak-rule { display: flex; flex-direction: column; gap: var(--cm-s-3); padding: var(--cm-s-4); border-radius: var(--cm-r-lg); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.cm-ak-rule-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-ak-rule-lead { font-size: var(--cm-fs-body); font-weight: 600; color: var(--text); }
.cm-ak-rule-empty { margin: 0; display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ak-rule-block { display: flex; flex-direction: column; gap: var(--cm-s-2); align-items: flex-start; }
.cm-ak-rule-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); width: 100%; }
.cm-ak-rule-row {
display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto; gap: var(--cm-s-2); align-items: start;
padding: var(--cm-s-3); border-radius: var(--cm-r-md); background: var(--surface); border: 1px solid var(--border);
}
.cm-ak-rule-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cm-s-2); min-width: 0; }
.cm-ak-rule-values { min-width: 0; }
.cm-ak-rule-except { margin: 0; }
.cm-ak-rule-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-ak-rule-count { margin: 0; display: inline-flex; align-items: center; gap: var(--cm-s-1); font-size: var(--cm-fs-meta); color: var(--text-dim); font-feature-settings: 'tnum'; }
/* ---- status rows and cards ------------------------------------------------- */
.cm-ak-status-inline { display: flex; flex-direction: column; gap: var(--cm-s-2); padding: var(--cm-s-3); border-radius: var(--cm-r-md); background: var(--surface-2); }
.cm-ak-status-inline-title { margin: 0; font-size: var(--cm-fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.cm-ak-status-row { display: flex; align-items: center; gap: var(--cm-s-2) var(--cm-s-3); flex-wrap: wrap; min-width: 0; }
.cm-ak-status-row-name { display: inline-flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-body); font-weight: 600; color: var(--text); min-width: 9rem; }
.cm-ak-status-row-note { flex: 1 1 220px; min-width: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ak-status-card .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-ak-status-block { display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-ak-status-sub { margin: 0; font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); }
.cm-ak-env { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-ak-env-item { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ak-env-item code { font-size: var(--cm-fs-small); color: var(--text); overflow-wrap: anywhere; }
.cm-ak-env-item.is-set > .cm-ui-icon { color: var(--success); }
.cm-ak-env-item.is-missing > .cm-ui-icon { color: var(--warn); }
.cm-ak-env-state { font-weight: 600; }
.cm-ak-env-what { flex: 1 1 100%; padding-left: 24px; }
.cm-ak-env--table .cm-ak-env-item { padding: var(--cm-s-2) 0; border-bottom: 1px solid var(--border); }
.cm-ak-env--table .cm-ak-env-item:last-child { border-bottom: 0; }
/* ---- settings ---------------------------------------------------------------- */
.cm-ak-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--cm-s-6); align-items: start; }
.cm-ak-settings-nav { position: sticky; top: var(--cm-s-4); align-self: start; }
.cm-ak-setform { display: flex; flex-direction: column; gap: var(--cm-s-5); min-width: 0; }
.cm-ak-setsec { scroll-margin-top: var(--cm-s-5); }
.cm-ak-setsec .cm-ui-section-body { gap: var(--cm-s-4); }
.cm-ak-setsec--danger { border-color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.cm-ak-switches { display: flex; flex-direction: column; gap: 0; }
.cm-ak-switch-row { display: flex; flex-direction: column; gap: var(--cm-s-1); padding: var(--cm-s-3) 0; border-bottom: 1px solid var(--border); }
.cm-ak-switch-row:first-child { padding-top: 0; }
.cm-ak-switch-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cm-ak-switch-note { padding-left: 52px; }
.cm-ak-repeat { display: flex; flex-direction: column; gap: var(--cm-s-3); padding: var(--cm-s-4); border-radius: var(--cm-r-md); background: var(--surface-2); }
.cm-ak-repeat-head { display: flex; align-items: center; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-ak-repeat-title { display: inline-flex; align-items: center; gap: var(--cm-s-2); flex: 1 1 200px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cm-ak-mailboxes { display: flex; flex-direction: column; gap: var(--cm-s-3); align-items: stretch; }
.cm-ak-mailboxes > .cm-ui-btn { align-self: flex-start; }
.cm-ak-glossary { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-ak-glossary > .cm-ui-btn { align-self: flex-start; }
.cm-ak-glossary-head, .cm-ak-glossary-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto auto; gap: var(--cm-s-2); align-items: center; }
.cm-ak-glossary-head { font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); padding: 0 2px; }
.cm-ak-glossary-row > .cm-ak-field-error { grid-column: 1 / -1; }
.cm-ak-glossary-dnt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-ak-kill { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-4); flex-wrap: wrap; }
.cm-ak-kill-state { display: inline-flex; align-items: flex-start; gap: var(--cm-s-3); flex: 1 1 320px; min-width: 0; }
.cm-ak-kill-state > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ak-kill-state strong { font-size: var(--cm-fs-h3); color: var(--text); }
.cm-ak-kill-state > .cm-ui-icon { width: 40px !important; height: 40px !important; border-radius: var(--cm-r-md); }
.cm-ak-kill-state.is-on > .cm-ui-icon { background: var(--success-soft); color: var(--success); color: color-mix(in srgb, var(--success) 80%, var(--text)); }
.cm-ak-kill-state.is-off > .cm-ui-icon { background: var(--danger-soft); color: var(--danger); color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.cm-ak-savebar {
position: sticky; bottom: var(--cm-s-4); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap;
padding: var(--cm-s-3) var(--cm-s-4); border-radius: var(--cm-r-lg); background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
}
.cm-ak-savebar-text { display: inline-flex; align-items: center; gap: var(--cm-s-2); font-weight: 600; color: var(--text); }
.cm-ak-savebar-actions { display: flex; align-items: center; gap: var(--cm-s-2); margin-left: auto; }
/* ---- hub ---------------------------------------------------------------- */
.cm-ak-hub-card { height: 100%; }
/* ---- lists, cells, small parts used by several pages ------------------- */
.cm-ak-listbox { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-ak-cardlist { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-ak-pills { display: inline-flex; align-items: center; gap: var(--cm-s-1); flex-wrap: wrap; }
.cm-ak-num { align-items: flex-end; font-feature-settings: 'tnum'; }
.cm-ak-link { color: var(--cm-accent-text); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.cm-ak-link:hover { text-decoration: underline; }
.cm-ak-linkbtn {
display: inline-flex; align-items: center; gap: var(--cm-s-2); padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; font-weight: 600; color: var(--text); text-align: left; overflow-wrap: anywhere;
}
.cm-ak-linkbtn:hover { color: var(--cm-accent-text); }
.cm-ak-filename { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; line-height: 1.35; }
.cm-ak-filename:hover { color: var(--cm-accent-text); text-decoration: underline; }
.cm-ak-ccell { display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0; }
.cm-ak-ccell-title { gap: var(--cm-s-2); }
.cm-ak-eyebrow { margin: 0; font-size: var(--cm-fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.cm-ak-iconlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-ak-iconlist li { display: flex; align-items: flex-start; gap: var(--cm-s-2); font-size: var(--cm-fs-body); line-height: 1.5; color: var(--text); }
.cm-ak-iconlist li > .cm-ui-icon { margin-top: 2px; color: var(--text-dim); }
.cm-ak-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-ak-step { display: flex; align-items: flex-start; gap: var(--cm-s-3); }
.cm-ak-step-body { display: flex; flex-direction: column; gap: var(--cm-s-1); min-width: 0; font-size: var(--cm-fs-body); line-height: 1.5; }
.cm-ak-slot-n {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px;
background: var(--accent-soft); color: var(--cm-accent-text); font-size: var(--cm-fs-small); font-weight: 700; font-feature-settings: 'tnum';
}
.cm-ak-quiet-danger .cm-ui-section-title { font-size: var(--cm-fs-h3); }
.cm-ak-checks { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-ak-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--cm-s-2) var(--cm-s-3); }
.cm-ak-chiptoggles { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-ak-prefixed { display: flex; align-items: stretch; min-width: 0; }
.cm-ak-prefix {
display: inline-flex; align-items: center; padding: 0 var(--cm-s-3); border: 1px solid var(--border-strong); border-right: 0;
border-radius: 11px 0 0 11px; background: var(--surface-2); color: var(--text-dim); font-size: var(--cm-fs-meta); white-space: nowrap;
}
.cm-ak-prefixed > .input { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1 1 auto; min-width: 0; }
.cm-ak-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cm-s-1); font-size: var(--cm-fs-meta); }
.cm-ak-crumb { color: var(--text-dim); text-decoration: none; }
a.cm-ak-crumb:hover { color: var(--text); text-decoration: underline; }
.cm-ak-crumb.is-current { color: var(--text); font-weight: 600; }
.cm-ak-crumb-sep { color: var(--text-dim); display: inline-flex; }
.cm-ak-how { max-width: 72ch; }
/* ---- Documents: folders, files, uploads ----------------------------------- */
.cm-ak-files-filter .cm-ui-filterbar-search { flex: 1 1 360px; }
.cm-ak-folders:empty { display: none; }
.cm-ak-folder { height: 100%; }
.cm-ak-folder .cm-ui-card-title { font-size: var(--cm-fs-body); }
.cm-ak-folder .cm-ui-card-body { margin-top: var(--cm-s-1); }
.cm-ak-folder-rule { display: flex; align-items: center; gap: var(--cm-s-1); }
.cm-ak-folder.is-pseudo { background: transparent; box-shadow: none; }
.cm-ak-filecell { display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0; }
.cm-ak-filecell .cm-ui-file-icon { flex: 0 0 auto; }
.cm-ak-filecell-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-ak-files .cm-ui-td[data-role="title"] { min-width: 280px; }
.cm-ak-tray {
display: flex; flex-direction: column; gap: var(--cm-s-3); padding: var(--cm-s-4); border-radius: var(--cm-r-lg);
background: var(--surface); border: 1px solid var(--border);
}
[data-theme="light"] .cm-ak-tray { box-shadow: var(--shadow-sm); }
.cm-ak-tray-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-ak-tray-list, .cm-ak-picked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-ak-picked:empty { display: none; }
.cm-ak-tray-item, .cm-ak-picked-item {
display: flex; align-items: center; gap: var(--cm-s-3); padding: var(--cm-s-2) var(--cm-s-3); border-radius: var(--cm-r-md); background: var(--surface-2); min-width: 0;
}
.cm-ak-picked-item.is-refused { background: var(--danger-soft); }
.cm-ak-tray-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-ak-tray-name { display: flex; align-items: baseline; gap: var(--cm-s-2); flex-wrap: wrap; min-width: 0; }
.cm-ak-tray-file { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.cm-ak-tray-state .cm-ui-progress { max-width: 360px; }
.cm-ak-tray-error { display: inline-flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; font-size: var(--cm-fs-meta); color: var(--danger); color: color-mix(in srgb, var(--danger) 75%, var(--text)); }
.cm-ak-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.cm-ak-drop {
display: flex; align-items: center; gap: var(--cm-s-4); padding: var(--cm-s-5); border: 2px dashed var(--border-strong); border-radius: var(--cm-r-lg);
background: var(--surface-2); cursor: pointer; transition: border-color var(--cm-t-fast) var(--ease), background var(--cm-t-fast) var(--ease);
}
.cm-ak-drop:hover, .cm-ak-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.cm-ak-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-ak-drop.is-small { padding: var(--cm-s-3) var(--cm-s-4); }
.cm-ak-drop-art {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--cm-r-md);
background: var(--surface); color: var(--cm-accent-text);
}
.cm-ak-drop.is-small .cm-ak-drop-art { width: 40px; height: 40px; }
.cm-ak-drop-text { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.cm-ak-version-chosen { min-height: 1em; }
/* ---- Documents: the viewer ------------------------------------------------- */
.cm-ak-viewer { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-ak-viewer-state, .cm-ak-viewer-loading {
border-radius: var(--cm-r-lg); background: var(--surface); border: 1px solid var(--border); padding: var(--cm-s-5); min-height: 320px;
display: flex; flex-direction: column; justify-content: center;
}
.cm-ak-viewer-stage {
position: relative; overflow: hidden; border-radius: var(--cm-r-lg); border: 1px solid var(--border); background: var(--surface-2);
display: flex; align-items: center; justify-content: center; min-height: 320px;
}
.cm-ak-viewer-stage.is-document { min-height: 0; }
.cm-ak-viewer-frame { display: block; width: 100%; height: min(80vh, 1100px); border: 0; background: var(--surface); }
.cm-ak-viewer-img { display: block; max-width: 100%; max-height: 78vh; object-fit: contain; }
.cm-ak-viewer-video { display: block; width: 100%; max-height: 78vh; background: var(--bg); }
.cm-ak-viewer-text {
margin: 0; padding: var(--cm-s-5); width: 100%; max-height: 78vh; overflow: auto; align-self: stretch; background: var(--surface);
color: var(--text); font: 14px/1.6 "JetBrains Mono", ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.cm-ak-viewer-stage.is-protected { user-select: none; }
.cm-ak-watermark {
position: absolute; inset: -25%; pointer-events: none; z-index: 2; display: flex; flex-wrap: wrap; align-content: space-around;
justify-content: space-around; gap: 4rem 3rem; transform: rotate(-24deg); opacity: .42;
}
/* Mid-grey reads on white PDF pages and on dark video/image backgrounds alike, in both themes. */
.cm-ak-watermark span { font-size: var(--text-lg); font-weight: 700; color: var(--text-faint); white-space: nowrap; letter-spacing: .02em; }
.cm-ak-print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }
.cm-ak-versions .cm-ui-lrow-title { font-weight: 600; }
/* ---- communities: logo tiles, accents, header preview, pickers ----------- */
.cm-ak-acc-indigo { --cm-ak-acc: var(--c-1); }
.cm-ak-acc-violet { --cm-ak-acc: var(--c-2); }
.cm-ak-acc-sky { --cm-ak-acc: var(--c-3); }
.cm-ak-acc-green { --cm-ak-acc: var(--c-4); }
.cm-ak-acc-amber { --cm-ak-acc: var(--c-5); }
.cm-ak-acc-rose { --cm-ak-acc: var(--c-6); }
.cm-ak-acc-teal { --cm-ak-acc: var(--c-7); }
.cm-ak-acc-slate { --cm-ak-acc: var(--text-dim); }
.cm-ak-clogo {
--cm-ak-logo: 36px; position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
width: var(--cm-ak-logo); height: var(--cm-ak-logo); border-radius: 10px; font-weight: 700; letter-spacing: .02em;
background: var(--cm-ak-acc, var(--accent)); color: var(--surface-solid); line-height: 1; user-select: none;
}
.cm-ak-clogo--xs { --cm-ak-logo: 24px; border-radius: 6px; font-size: 10px; }
.cm-ak-clogo--sm { --cm-ak-logo: 36px; font-size: var(--cm-fs-small); }
.cm-ak-clogo--md { --cm-ak-logo: 52px; border-radius: 12px; font-size: var(--text-lg); }
.cm-ak-clogo--lg { --cm-ak-logo: 76px; border-radius: 18px; font-size: 26px; }
.cm-ak-clogo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-ak-cpv-host { min-width: 0; }
.cm-ak-cpv { border-radius: var(--cm-r-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.cm-ak-cpv-cover {
/* The same accent wash the community page shows when there is no cover photo (feed.css .cm-cm-cover). */
position: relative; height: 136px; overflow: hidden; background-color: var(--surface-3);
background-image:
radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--cm-ak-acc, var(--accent)) 46%, transparent) 0%, transparent 55%),
radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--cm-ak-acc, var(--accent)) 30%, transparent) 0%, transparent 60%),
linear-gradient(135deg, color-mix(in srgb, var(--cm-ak-acc, var(--accent)) 30%, var(--surface)) 0%, color-mix(in srgb, var(--cm-ak-acc, var(--accent)) 12%, var(--surface)) 100%);
}
.cm-ak-cpv-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-ak-cpv-body { display: flex; align-items: flex-start; gap: var(--cm-s-4); padding: var(--cm-s-3) var(--cm-s-5) var(--cm-s-4); position: relative; }
.cm-ak-cpv-logo { flex: 0 0 auto; margin-top: -46px; }
.cm-ak-cpv-logo .cm-ak-clogo { box-shadow: 0 0 0 4px var(--surface); }
.cm-ak-cpv-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-ak-cpv-name { margin: 0; display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; font-size: var(--cm-fs-h2); font-weight: 700; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.cm-ak-cpv-meta { margin: 0; display: flex; align-items: center; gap: var(--cm-s-1); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ak-cpv-desc { margin: var(--cm-s-1) 0 0; font-size: var(--cm-fs-body); color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-ak-cpv-tabs { display: flex; gap: var(--cm-s-5); padding: 0 var(--cm-s-5); border-top: 1px solid var(--border); font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-ak-cpv-tabs span { padding: var(--cm-s-3) 0; border-bottom: 2px solid transparent; }
.cm-ak-cpv-tabs span.is-active { color: var(--text); border-bottom-color: var(--accent); }
.cm-ak-imgpicks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-s-4); }
.cm-ak-imgpick { display: flex; flex-direction: column; gap: var(--cm-s-1); min-width: 0; }
.cm-ak-imgpick-row { display: flex; align-items: flex-start; gap: var(--cm-s-3); }
.cm-ak-imgpick-text { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-ak-imgpick-thumb { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.cm-ak-imgpick-thumb.is-cover {
width: 104px; height: 52px; border-radius: var(--cm-r-sm); color: var(--text-dim);
background: color-mix(in srgb, var(--cm-ak-acc, var(--accent)) 20%, var(--surface-2));
}
.cm-ak-imgpick-thumb.is-cover img { width: 100%; height: 100%; object-fit: cover; }
.cm-ak-swatches { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-ak-swatch {
display: inline-flex; align-items: center; gap: var(--cm-s-2); min-height: 40px; padding: 0 var(--cm-s-3) 0 var(--cm-s-2); border-radius: 999px;
border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: var(--cm-fs-meta); cursor: pointer;
transition: border-color var(--cm-t-fast) var(--ease), background var(--cm-t-fast) var(--ease);
}
.cm-ak-swatch:hover { background: var(--surface-hover); }
.cm-ak-swatch.is-selected { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.cm-ak-swatch-dot {
display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px;
background: var(--cm-ak-acc); color: var(--surface);
}
.cm-ak-swatch-dot .cm-ui-icon { opacity: 0; }
.cm-ak-swatch.is-selected .cm-ak-swatch-dot .cm-ui-icon { opacity: 1; }
.cm-ak-members { display: flex; flex-direction: column; gap: var(--cm-s-2); }
/* ---- moderation ---------------------------------------------------------- */
.cm-ak-mod-body { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cm-ak-mod-list { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-ak-mod-item .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-ak-mod-item.is-decided { background: var(--surface-2); box-shadow: none; }
.cm-ak-mod-kicker { display: flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-ak-mod-when { margin-left: auto; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ak-mod-text {
margin: 0; padding: var(--cm-s-3) var(--cm-s-4); border-radius: var(--cm-r-md); background: var(--surface-2); border-left: 3px solid var(--border-strong);
font-size: var(--cm-fs-read); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap;
display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-ak-mod-said { margin: 0; font-size: var(--cm-fs-body); }
.cm-ak-mod-who { display: flex; align-items: center; gap: var(--cm-s-2) var(--cm-s-4); flex-wrap: wrap; }
.cm-ak-mod-where { font-size: var(--cm-fs-meta); min-width: 0; overflow-wrap: anywhere; }
.cm-ak-mod-decided { gap: var(--cm-s-3); }
.cm-ak-pattern { font-size: var(--cm-fs-body); font-weight: 600; color: var(--text); }
.cm-ak-mod-test-out:empty { display: none; }
/* ---- approval rules -------------------------------------------------------- */
.cm-ak-rule-card.is-inactive { background: var(--surface-2); box-shadow: none; }
.cm-ak-rule-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-s-5); margin-top: var(--cm-s-2); }
.cm-ak-rule-col { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-ak-approvers { display: inline-flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-ak-approvers-names { font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-ak-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-ak-slot { display: flex; flex-direction: column; gap: var(--cm-s-3); padding: var(--cm-s-4); border-radius: var(--cm-r-md); background: var(--surface-2); }
.cm-ak-slot-head { display: flex; align-items: center; gap: var(--cm-s-2); }
.cm-ak-slot-title { flex: 1 1 auto; }
/* ---- templates, editor, brand kit, sections ------------------------------ */
.cm-ak-tpl-card { height: 100%; }
.cm-ak-tpl-card.is-inactive { background: var(--surface-2); box-shadow: none; }
.cm-ak-tpl-card .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-ak-editor-card .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-ak-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-ak-editor-host { min-height: 420px; min-width: 0; }
.cm-ak-outline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; }
.cm-ak-outline-item { padding: var(--cm-s-1) var(--cm-s-2); padding-left: calc(var(--cm-s-2) + var(--cm-ak-depth, 0) * 18px); border-radius: var(--cm-r-sm); }
.cm-ak-outline-item.is-locked { background: var(--warn-soft); }
.cm-ak-outline-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-ak-outline-type { display: inline-flex; align-items: center; gap: var(--cm-s-1); font-size: var(--cm-fs-small); font-weight: 600; color: var(--text); }
.cm-ak-outline-snippet { font-size: var(--cm-fs-meta); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
.cm-ak-theme-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(300px, 400px); gap: var(--cm-s-5); align-items: start; }
.cm-ak-theme-listcard { position: sticky; top: var(--cm-s-4); }
.cm-ak-theme-listcard .cm-ui-section-body > .cm-ui-btn { align-self: flex-start; }
.cm-ak-theme-swatch {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong);
background: linear-gradient(135deg, var(--sw-a) 0 50%, var(--sw-b) 50% 100%);
}
.cm-ak-theme-editor { display: flex; flex-direction: column; gap: var(--cm-s-5); min-width: 0; }
.cm-ak-theme-side { position: sticky; top: var(--cm-s-4); min-width: 0; }
.cm-ak-colour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--cm-s-3) var(--cm-s-4); }
.cm-ak-colour-row { display: flex; align-items: center; gap: var(--cm-s-2); }
.cm-ak-colour-row > .input { flex: 1 1 auto; min-width: 0; }
.cm-ak-colour { width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--cm-r-sm); background: none; cursor: pointer; flex: 0 0 auto; }
.cm-ak-contrast { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-ak-contrast li { display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); }
.cm-ak-contrast-label { flex: 1 1 auto; min-width: 0; color: var(--text); }
.cm-ak-contrast-swatch {
flex: 0 0 auto; width: 40px; height: 28px; border-radius: var(--cm-r-sm); display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: var(--cm-fs-small); border: 1px solid var(--border); background: var(--th-bg); color: var(--th-fg);
}
.cm-ak-theme-preview { border-radius: var(--cm-r-md); overflow: hidden; border: 1px solid var(--border); }
.cm-ak-theme-canvas { background: var(--th-background); padding: var(--cm-s-4); font-family: var(--th-font); }
.cm-ak-theme-mail { max-width: 520px; margin: 0 auto; background: var(--th-surface); border: 1px solid var(--th-border); border-radius: var(--th-radius); overflow: hidden; }
.cm-ak-theme-header { padding: var(--cm-s-3) var(--cm-s-4); border-bottom: 3px solid var(--th-primary); display: flex; align-items: center; }
.cm-ak-theme-logo { height: auto; max-width: 100%; display: block; }
.cm-ak-theme-brand { font-weight: 800; font-size: var(--text-lg); color: var(--th-primary); }
.cm-ak-theme-body { padding: var(--cm-s-4); display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-ak-theme-kicker { margin: 0; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--th-accent); }
.cm-ak-theme-title { margin: 0; font-size: var(--text-xl); line-height: 1.25; color: var(--th-text); }
.cm-ak-theme-text { margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--th-text); }
.cm-ak-theme-link { color: var(--th-link); text-decoration: underline; }
.cm-ak-theme-callout { padding: var(--cm-s-2) var(--cm-s-3); border-left: 4px solid var(--th-primary); background: var(--th-background); color: var(--th-text); font-size: var(--text-sm); border-radius: var(--th-radius); }
.cm-ak-theme-button { align-self: flex-start; display: inline-block; padding: var(--cm-s-2) var(--cm-s-4); border-radius: var(--th-radius); background: var(--th-primary); color: var(--th-on-primary); font-weight: 700; font-size: var(--text-sm); }
.cm-ak-theme-muted { margin: 0; font-size: var(--text-xs); color: var(--th-muted); }
.cm-ak-theme-footer { padding: var(--cm-s-3) var(--cm-s-4); border-top: 1px solid var(--th-border); font-size: var(--text-xs); color: var(--th-muted); }
/* ---- TV screens, API keys ---------------------------------------------------- */
.cm-ak-qr-row { display: flex; align-items: flex-start; gap: var(--cm-s-5); flex-wrap: wrap; }
.cm-ak-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--cm-s-2); }
.cm-ak-qr-svg { width: 200px; height: 200px; border-radius: var(--cm-r-sm); border: 1px solid var(--border); }
.cm-ak-qr-bg { fill: var(--surface-solid); }
.cm-ak-qr-fg { fill: var(--text); }
.cm-ak-setup { flex: 1 1 220px; }
.cm-ak-scope { padding: var(--cm-s-3); border-radius: var(--cm-r-md); background: var(--surface-2); }
.cm-ak-scope.is-locked { opacity: .78; }
@media (prefers-reduced-motion: reduce) {
.cm-ak-drop, .cm-ak-swatch { transition: none; }
}
@media (max-width: 1180px) {
.cm-ak-theme-layout { grid-template-columns: 220px minmax(0, 1fr); }
.cm-ak-theme-side { grid-column: 1 / -1; position: static; }
}
@media (max-width: 900px) {
.cm-ak-theme-layout { grid-template-columns: minmax(0, 1fr); }
.cm-ak-theme-listcard { position: static; }
.cm-ak-rule-cols { grid-template-columns: minmax(0, 1fr); gap: var(--cm-s-4); }
.cm-ak-imgpicks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.cm-ak-drop { padding: var(--cm-s-4); gap: var(--cm-s-3); }
.cm-ak-drop-art { width: 44px; height: 44px; }
.cm-ak-viewer-frame { height: 72vh; }
.cm-ak-cpv-cover { height: 96px; }
.cm-ak-cpv-body { padding: var(--cm-s-2) var(--cm-s-4) var(--cm-s-3); gap: var(--cm-s-3); }
.cm-ak-cpv-logo { margin-top: -36px; }
.cm-ak-cpv-body .cm-ak-clogo--lg { --cm-ak-logo: 60px; font-size: 20px; border-radius: 14px; }
.cm-ak-cpv-name { font-size: var(--cm-fs-h3); }
.cm-ak-cpv-tabs { gap: var(--cm-s-4); padding: 0 var(--cm-s-4); }
.cm-ak-mod-when { margin-left: 0; width: 100%; }
.cm-ak-mod-text { font-size: var(--cm-fs-body); }
.cm-ak-files .cm-ui-td[data-role="title"] { min-width: 0; }
.cm-ak-prefix { display: none; }
.cm-ak-prefixed > .input { border-radius: 11px; }
.cm-ak-swatch-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-ak-swatch { padding: 0 var(--cm-s-2); position: relative; }
}
.cm-ak-role { font-weight: 600; color: var(--cm-accent-text); }
.cm-ak-role.is-moderator { color: var(--info); color: color-mix(in srgb, var(--info) 72%, var(--text)); }
@media (max-width: 900px) {
.cm-ak-settings { grid-template-columns: minmax(0, 1fr); gap: var(--cm-s-4); }
.cm-ak-settings-nav { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * var(--cm-s-1)); padding: var(--cm-s-2) var(--cm-s-1); background: var(--bg); }
.cm-ak-settings-nav .cm-ui-secnav { position: static; }
.cm-ak-settings-nav .cm-ui-secnav-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cm-ak-settings-nav .cm-ui-secnav ul { flex-direction: row; overflow-x: auto; gap: var(--cm-s-2); border-left: 0; scrollbar-width: none; }
.cm-ak-settings-nav .cm-ui-secnav ul::-webkit-scrollbar { display: none; }
.cm-ak-settings-nav .cm-ui-secnav-link { white-space: nowrap; border-left: 0; border-radius: var(--cm-r-pill); background: var(--surface); border: 1px solid var(--border); min-height: 36px; padding: 0 var(--cm-s-3); }
.cm-ak-settings-nav .cm-ui-secnav-link.is-active { border-color: var(--accent); background: var(--accent-soft); }
}
@media (max-width: 640px) {
.cm-ak-grid2 { grid-template-columns: minmax(0, 1fr); }
.cm-ak-rule { padding: var(--cm-s-3); }
.cm-ak-rule-row { grid-template-columns: minmax(0, 1fr) auto; }
.cm-ak-rule-pick { grid-column: 1 / 2; grid-template-columns: minmax(0, 1fr); }
.cm-ak-rule-values { grid-column: 1 / -1; grid-row: 2; }
.cm-ak-rule-remove { grid-column: 2; grid-row: 1; }
.cm-ak-glossary-head { display: none; }
.cm-ak-glossary-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.cm-ak-glossary-row > .input:nth-of-type(3) { grid-column: 1 / -1; grid-row: 2; }
.cm-ak-switch-note { padding-left: 0; }
.cm-ak-savebar { bottom: var(--cm-s-2); }
.cm-ak-savebar-actions { width: 100%; }
.cm-ak-savebar-actions > .cm-ui-btn { flex: 1 1 0; }
.cm-ak-clip { max-width: 100%; white-space: normal; }
}
/* ---- comms: frontline (design/comms/css/frontline.css) ---- */
/* ==========================================================================
comms — frontline pages (UI team, frontline member): kiosk mode + kiosk chrome, store TV loop, team huddle,
my data, the manager's team page. Built on the UI kit (cm-ui-*). Loads after feed.css, whose legacy
kiosk / huddle / me / TV block it overrides. Tokens only, both themes, cm- classes.
========================================================================== */
/* ---- shared ---------------------------------------------------------------- */
.cm-fl .cm-ui-section-title { overflow-wrap: anywhere; }
.cm-fl .cm-ui-lrow-meta .cm-ui-meta { color: var(--text-dim); font-size: var(--cm-fs-meta); }
/* ---- kiosk chrome (built by feed.js installKioskChrome; restyled here) ------ */
.cm-kiosk-bar {
gap: var(--cm-s-3); padding: var(--cm-s-2) var(--cm-s-5); min-height: 72px;
background: var(--surface-solid); border-top: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
}
.cm-kiosk-who { gap: var(--cm-s-3); }
.cm-kiosk-name { font-size: var(--text-lg); font-weight: 650; }
.cm-kiosk-bar .btn { min-height: 52px; border-radius: 999px; gap: var(--cm-s-2); font-size: var(--text-md); font-weight: 600; }
[data-kiosk-bar="1"] body { padding-bottom: 88px; }
.cm-kiosk-overlay { padding: var(--cm-s-4); }
.cm-kiosk-dialog { gap: var(--cm-s-4); padding: var(--cm-s-6) var(--cm-s-5); border-radius: 22px; }
.cm-kiosk-dialog h2 { font-size: var(--text-2xl); font-weight: 700; }
.cm-kiosk-count {
min-width: 6em; padding: var(--cm-s-2) var(--cm-s-4); border-radius: 999px;
background: var(--warn-soft); color: var(--text); font-size: var(--text-xl);
}
.cm-kiosk-actions .btn { min-height: 56px; border-radius: 999px; }
/* ---- kiosk page ------------------------------------------------------------- */
.cm-kiosk .cm-ui-ph-title { font-size: 30px; }
.cm-kiosk-points .cm-ui-lrow { padding-top: var(--cm-s-4); padding-bottom: var(--cm-s-4); }
.cm-kiosk-points .cm-ui-lrow-title { font-size: var(--text-lg); }
.cm-kiosk-points .cm-ui-lrow-meta { font-size: var(--text-md); color: var(--text-dim); line-height: 1.5; }
.cm-kiosk-turnon .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-5); }
.cm-kiosk-turnon-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-2); }
.cm-kiosk-note { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-kiosk-idle { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-kiosk-idle .cm-ui-label { margin: 0; }
.cm-kiosk-idle .cm-ui-hint { margin: 0; }
.cm-kiosk-idle .cm-ui-seg { align-self: flex-start; max-width: 100%; }
.cm-kiosk-idle .cm-ui-seg-opt { min-height: 48px; min-width: 72px; font-size: var(--text-md); }
.cm-kiosk-big { min-height: 56px; padding-left: var(--cm-s-6); padding-right: var(--cm-s-6); font-size: var(--text-lg); }
.cm-kiosk-session .cm-ui-card-body { margin: 0; }
.cm-kiosk-session-row { display: flex; align-items: center; gap: var(--cm-s-4); flex-wrap: wrap; }
.cm-kiosk-session-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-kiosk-session-name { margin: 0; font-size: var(--text-xl); font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.cm-kiosk-session-meta { margin: 0; display: inline-flex; align-items: center; gap: var(--cm-s-2); font-size: var(--text-md); color: var(--text-dim); }
.cm-kiosk-notyou { min-height: 56px; border-radius: 999px; }
.cm-kiosk-must .cm-ui-section-title { font-size: var(--text-xl); }
.cm-kiosk-must-list .cm-ui-lrow { min-height: 72px; padding-top: var(--cm-s-4); padding-bottom: var(--cm-s-4); }
.cm-kiosk-must-list .cm-ui-lrow-title { font-size: var(--text-lg); }
.cm-kiosk-must-list .cm-mr-read { min-height: 48px; }
.cm-kiosk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--cm-s-3); }
.cm-kiosk-tile {
position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--cm-s-3);
min-height: 112px; padding: var(--cm-s-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
color: var(--text); text-decoration: none; font-weight: 650; font-size: var(--text-lg); line-height: 1.3;
transition: border-color var(--cm-t-fast, 120ms) var(--ease), box-shadow var(--cm-t-fast, 120ms) var(--ease);
}
[data-theme="light"] .cm-kiosk-tile { box-shadow: var(--shadow-sm); }
.cm-kiosk-tile:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.cm-kiosk-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-kiosk-tile-icon {
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
background: var(--accent-soft); color: var(--cm-accent-text);
}
.cm-kiosk-tile-label { overflow-wrap: anywhere; }
.cm-kiosk-tile-badge { position: absolute; top: var(--cm-s-3); right: var(--cm-s-3); }
.cm-kiosk-tile-badge:empty { display: none; }
.cm-kiosk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-s-5); align-items: start; }
.cm-kiosk-cards { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-kiosk-settings .cm-ui-disclosure-sum { min-height: 56px; font-size: var(--text-md); font-weight: 600; }
.cm-kiosk-settings-sum { display: inline-flex; align-items: center; gap: var(--cm-s-2); }
.cm-kiosk-settings-body { display: flex; flex-direction: column; gap: var(--cm-s-5); padding: var(--cm-s-3) 0 var(--cm-s-2); }
.cm-kiosk-settings-actions { display: flex; flex-wrap: wrap; gap: var(--cm-s-3); }
/* ---- TV loop (#/comms/tv/:token): read from 3 m; 1em = 1 % of the stage width -------------------- */
.cm-tv { background: var(--bg); }
.cm-tv-stage { background: var(--bg); color: var(--text); }
.cm-tv-top { gap: 1.6em; padding: 1.6em 3.2em 1em; font-size: 1em; color: var(--text-dim); }
.cm-tv-brand { display: inline-flex; align-items: center; gap: .6em; font-size: 1.9em; font-weight: 800; color: var(--text); }
.cm-tv-brand-mark {
display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border-radius: .45em;
background: var(--accent); color: var(--text-inverse);
}
.cm-tv-brand-mark .cm-ui-icon, .cm-tv-brand-mark svg { width: 1em; height: 1em; }
.cm-tv-screen { font-size: 1.6em; color: var(--text-dim); padding-left: 1em; border-left: 2px solid var(--border); }
.cm-tv-when { display: inline-flex; align-items: baseline; gap: .8em; }
.cm-tv-day { font-size: 1.6em; color: var(--text-dim); }
.cm-tv-clock { font-size: 2.6em; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cm-tv-offline {
display: inline-flex; align-items: center; gap: .4em; padding: .35em .9em; border-radius: 999px; font-size: 1.5em;
background: var(--warn-soft); color: var(--text); font-weight: 700;
}
.cm-tv-offline .cm-ui-icon, .cm-tv-offline svg { width: 1.1em; height: 1.1em; color: var(--warn); }
.cm-tv-offline[hidden] { display: none; }
.cm-tv-slide { gap: 3em; padding: 1.5em 3.2em 2em; }
.cm-tv-slide.has-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.cm-tv-slide.has-qr:not(.has-media) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); }
.cm-tv-slide.has-qr:not(.has-media) .cm-tv-qr { position: static; align-self: end; margin-bottom: 1em; }
.cm-tv-text { gap: 1.4em; }
.cm-tv-alert {
display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; padding: .35em 1em .35em .8em; border-radius: 999px;
font-size: 2em; font-weight: 800; letter-spacing: .02em; text-transform: none;
background: var(--cm-tone-soft); color: var(--text); border: 2px solid var(--cm-tone);
}
.cm-tv-alert .cm-ui-icon, .cm-tv-alert svg { width: 1.1em; height: 1.1em; color: var(--cm-tone); }
.cm-tv-kicker { font-size: 1.9em; font-weight: 650; color: var(--cm-accent-text); letter-spacing: .01em; }
.cm-tv-title { font-size: 4.8em; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; -webkit-line-clamp: 3; }
.cm-tv-title.is-long { font-size: 3.9em; }
.cm-tv-body { font-size: 2.4em; line-height: 1.4; color: var(--text-dim); -webkit-line-clamp: 4; max-width: 34em; }
.cm-tv-slide.is-danger .cm-tv-title { color: var(--text); }
.cm-tv-slide.is-danger { box-shadow: inset .5em 0 0 var(--danger); }
.cm-tv-slide.is-warn { box-shadow: inset .5em 0 0 var(--warn); }
.cm-tv-kpis { gap: 1.6em; }
.cm-tv-kpi { gap: .3em; padding: 1.1em 1.6em; border-radius: 1em; background: var(--surface); border: 1px solid var(--border); min-width: 12em; }
.cm-tv-kpi-value { font-size: 3.8em; line-height: 1; }
.cm-tv-kpi-label { font-size: 1.6em; }
.cm-tv-kpi-delta { font-size: 1.5em; color: var(--text); }
.cm-tv-media { border-radius: 1.4em; }
.cm-tv-qr {
right: 3.2em; bottom: 5.2em; flex-direction: row; align-items: center; gap: 1em; padding: 1em 1.4em 1em 1em;
border-radius: 1.2em; background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-size: 1em;
}
.cm-tv-qr img { width: 9em; height: 9em; padding: .5em; background: var(--text-inverse); border-radius: .6em; }
[data-theme="light"] .cm-tv-qr img { background: var(--surface-solid); }
.cm-tv-qr-text { display: flex; flex-direction: column; gap: .2em; max-width: 14em; }
.cm-tv-qr-text strong { font-size: 1.8em; color: var(--text); line-height: 1.2; }
.cm-tv-qr-text span { font-size: 1.5em; color: var(--text-dim); overflow-wrap: anywhere; }
.cm-tv-qr.is-text { max-width: 30em; }
.cm-tv-bottom { gap: 2em; padding: 1em 3.2em 1.8em; }
.cm-tv-progress { display: flex; gap: .5em; height: .6em; background: none; border-radius: 0; overflow: visible; }
.cm-tv-seg { flex: 1 1 0; height: 100%; border-radius: 999px; background: var(--border-strong); overflow: hidden; }
.cm-tv-seg-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.cm-tv-seg.is-done .cm-tv-seg-fill { width: 100%; background: var(--text-faint); }
.cm-tv-counter { font-size: 1.7em; font-weight: 700; color: var(--text-dim); }
.cm-tv-message { gap: 1.2em; }
.cm-tv-message-icon {
display: inline-flex; align-items: center; justify-content: center; width: 8em; height: 8em; border-radius: 50%;
background: var(--cm-tone-soft); color: var(--cm-tone);
}
.cm-tv-message-icon .cm-ui-icon, .cm-tv-message-icon svg { width: 4em; height: 4em; }
.cm-tv-message-icon.is-spinning svg { animation: cm-fl-spin 1.2s linear infinite; }
.cm-tv-message-title { font-size: 4.2em; line-height: 1.15; }
.cm-tv-message-body { font-size: 2.3em; line-height: 1.4; }
@keyframes cm-fl-spin { to { transform: rotate(360deg); } }
/* ---- huddle -------------------------------------------------------------------------------------- */
.cm-hd-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-s-3); }
.cm-hd-how li { display: flex; align-items: center; gap: var(--cm-s-3); padding: var(--cm-s-3) var(--cm-s-4); border-radius: var(--radius-lg);
background: var(--surface-2); color: var(--text); font-weight: 600; font-size: var(--cm-fs-body); line-height: 1.35; }
.cm-hd-how-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
background: var(--accent-soft); color: var(--cm-accent-text); font-weight: 700; font-size: var(--cm-fs-small); }
.cm-hd-form { display: flex; flex-direction: column; gap: var(--cm-s-5); }
.cm-hd-storecard .cm-ui-card-body { margin: 0; }
.cm-hd-storerow { display: flex; gap: var(--cm-s-2); align-items: stretch; flex-wrap: wrap; }
.cm-hd-storerow .cm-ui-input { flex: 1 1 180px; min-width: 0; max-width: 260px; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.cm-hd-err[hidden] { display: none; }
.cm-hd-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-hd-pick-item { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: border-color 120ms var(--ease), background 120ms var(--ease); }
[data-theme="light"] .cm-hd-pick-item { box-shadow: var(--shadow-sm); }
.cm-hd-pick-item.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.cm-hd-pick-label { display: flex; align-items: flex-start; gap: var(--cm-s-3); padding: var(--cm-s-4); cursor: pointer; min-height: 64px; }
.cm-hd-pick-box { flex: 0 0 auto; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.cm-hd-pick-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-hd-pick-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-hd-pick-title { font-size: var(--text-lg); font-weight: 650; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.cm-hd-pick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-hd-pick-text .cm-ui-progress { max-width: 320px; }
.cm-hd-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap;
padding-top: var(--cm-s-4); border-top: 1px solid var(--border); }
.cm-hd-summary { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-hd-footer-actions { display: inline-flex; align-items: center; gap: var(--cm-s-2); margin-left: auto; }
.cm-hd-start[hidden], .cm-hd-footer[hidden] { display: none; }
.cm-hd-session .cm-ui-split { grid-template-columns: minmax(0, 1fr) 360px; }
.cm-hd-stage { display: flex; flex-direction: column; gap: var(--cm-s-5); min-width: 0; padding: var(--cm-s-5) var(--cm-s-6);
border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
[data-theme="light"] .cm-hd-stage { box-shadow: var(--shadow-sm); }
.cm-hd-stage-top { display: flex; align-items: flex-start; gap: var(--cm-s-3); }
.cm-hd-steps { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--cm-s-2); overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.cm-hd-step {
flex: 0 1 220px; min-width: 120px; display: flex; align-items: center; gap: var(--cm-s-2); min-height: 48px; padding: var(--cm-s-2) var(--cm-s-3);
border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font: inherit; text-align: left; cursor: pointer;
}
.cm-hd-step:hover { background: var(--surface-hover); }
.cm-hd-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-hd-step.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.cm-hd-step-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
background: var(--surface-3); color: var(--text); font-weight: 700; font-size: var(--cm-fs-small); }
.cm-hd-step.is-active .cm-hd-step-n { background: var(--accent); color: var(--text-inverse); }
.cm-hd-step.is-done .cm-hd-step-n { background: var(--success-soft); color: var(--text); }
.cm-hd-step-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cm-fs-meta); font-weight: 600; }
.cm-hd-exit { display: none; }
.cm-hd-content { min-width: 0; }
.cm-hd-post { display: flex; flex-direction: column; gap: var(--cm-s-3); max-width: 72ch; }
.cm-hd-post-tags { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); align-items: center; }
.cm-hd-post-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 750; letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.cm-hd-post-lead { margin: 0; font-size: var(--text-lg); line-height: 1.5; color: var(--text-dim); }
.cm-hd .cm-article-body.cm-hd-body { font-size: 19px; line-height: 1.65; }
.cm-hd-stage-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); padding-top: var(--cm-s-4); border-top: 1px solid var(--border); }
.cm-hd-stage-nav .btn { min-height: 52px; }
.cm-hd-stepline { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); text-align: center; }
.cm-hd-stage.is-presenting {
position: fixed; inset: 0; z-index: 950; overflow-y: auto; border-radius: 0; border: 0;
padding: var(--cm-s-6) clamp(16px, 6vw, 96px); background: var(--bg); box-shadow: none;
}
.cm-hd-stage.is-presenting .cm-hd-exit { display: inline-flex; }
.cm-hd-stage.is-presenting .cm-hd-post { max-width: 60ch; margin: 0 auto; }
.cm-hd-stage.is-presenting .cm-hd-post-title { font-size: 44px; }
.cm-hd-stage.is-presenting .cm-hd-post-lead { font-size: 24px; }
.cm-hd-stage.is-presenting .cm-article-body.cm-hd-body { font-size: 26px; }
.cm-hd-stage.is-presenting .cm-hd-post { max-width: 64ch; }
.cm-hd-presenting .cm-kiosk-bar { display: none; }
.cm-hd-railcard .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-hd-count { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cm-s-2); }
.cm-hd-count-num { margin: 0; font-size: var(--text-lg); color: var(--text-dim); }
.cm-hd-count-num strong { font-size: 40px; line-height: 1; color: var(--text); font-feature-settings: 'tnum'; }
.cm-hd-count-label { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-hd-rail-title { margin: var(--cm-s-2) 0 0; font-size: var(--cm-fs-h3); font-weight: 650; color: var(--text); }
.cm-hd-rail-sub { margin: 0; font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); }
.cm-hd-hint { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.45; }
.cm-hd-roster .cm-ui-lrow { min-height: 60px; padding-left: var(--cm-s-3); padding-right: var(--cm-s-3); }
.cm-hd-roster .cm-ui-btn { min-height: 44px; min-width: 84px; }
.cm-hd-person.is-present { background: var(--success-soft); }
.cm-hd-others { display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-hd-picker { display: flex; flex-direction: column; gap: var(--cm-s-2); padding-top: var(--cm-s-2); }
.cm-hd-picker .cm-ui-btn { align-self: flex-start; }
.cm-hd-selfwrap { padding-top: var(--cm-s-3); border-top: 1px solid var(--border); }
.cm-hd-self { min-height: 52px; }
.cm-hd-note { margin: 0; display: flex; gap: var(--cm-s-2); align-items: flex-start; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.45; }
.cm-hd-note .cm-ui-icon { flex: 0 0 auto; margin-top: 1px; }
/* ---- my data --------------------------------------------------------------------------------------- */
.cm-me-rules .cm-ui-lrow { align-items: flex-start; padding-top: var(--cm-s-4); padding-bottom: var(--cm-s-4); }
.cm-me-rules .cm-ui-lrow-meta { font-size: var(--cm-fs-body); color: var(--text-dim); line-height: 1.55; }
.cm-me-post { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cm-me-post:hover { color: var(--cm-accent-text); text-decoration: underline; }
.cm-me-first, .cm-me-ch { display: inline-flex; align-items: center; gap: var(--cm-s-1); flex-wrap: wrap; }
.cm-me-first { gap: var(--cm-s-2); }
.cm-me-ch { font-weight: 600; color: var(--text); }
.cm-me-none { color: var(--text-faint); }
.cm-me-note { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.45; }
.cm-me-choices { overflow: hidden; }
.cm-me-choices .cm-ui-card-body { margin: 0; }
.cm-me-choice { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cm-s-4); padding: var(--cm-s-5); }
.cm-me-choice + .cm-me-choice { border-top: 1px solid var(--border); }
.cm-me-choice-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-me-choice-main .cm-ui-switch-label { font-size: var(--text-lg); font-weight: 650; }
.cm-me-choice-main .cm-ui-switch-desc { font-size: var(--cm-fs-body); line-height: 1.5; }
.cm-me-choice-main > .cm-me-note { padding-left: 56px; }
.cm-me-choice-state { flex: 0 0 auto; }
.cm-me-choice-title { margin: 0; font-size: var(--text-lg); font-weight: 650; color: var(--text); }
.cm-me-choice-body { margin: 0; color: var(--text-dim); }
.cm-me-unknown { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-me-unknown-actions { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-me-data { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cm-me-sections { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.cm-me-sections > .cm-ui-disclosure { margin: 0; border: 0; border-radius: 0; }
.cm-me-sections > .cm-ui-disclosure + .cm-ui-disclosure { border-top: 1px solid var(--border); }
.cm-me-sections .cm-ui-disclosure-sum { min-height: 52px; padding-left: var(--cm-s-4); padding-right: var(--cm-s-4); }
.cm-me-sections .cm-ui-disclosure-body { padding: 0 var(--cm-s-4) var(--cm-s-4); }
.cm-me-sum { display: inline-flex; align-items: baseline; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-me-sum-title { font-weight: 600; color: var(--text); }
.cm-me-sum-count { font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); font-feature-settings: 'tnum'; }
.cm-me-list { margin: 0; padding-left: 1.2rem; }
.cm-me-empties { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.6; }
.cm-me-empties strong { color: var(--text); font-weight: 600; }
.cm-me-device .cm-ui-card-body { margin: 0; }
.cm-me-device .cm-ui-list--plain > .cm-ui-lrow, .cm-me-device-row { padding: var(--cm-s-4) var(--cm-s-5); }
.cm-me-device .cm-ui-list > * + * { border-top: 1px solid var(--border); }
li.cm-me-device-row { list-style: none; }
.cm-me .cm-ui-table td { overflow-wrap: anywhere; }
/* ---- team ---------------------------------------------------------------------------------------- */
.cm-team-cards { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-team-card .cm-ui-card-eyebrow { margin-bottom: var(--cm-s-2); text-transform: none; letter-spacing: 0; }
.cm-team-card .cm-ui-card-title { font-size: var(--text-lg); }
.cm-team-card .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-team-card.is-overdue { border-color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.cm-team-progress-line { margin: 0; font-size: var(--cm-fs-body); color: var(--text); }
.cm-team-late { color: var(--danger); color: color-mix(in srgb, var(--danger) 72%, var(--text)); font-weight: 600; }
.cm-team-card .cm-ui-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-team-waiting { display: inline-flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-team-dim { color: var(--text-dim); }
.cm-team-card-actions { display: inline-flex; align-items: center; gap: var(--cm-s-2); margin-left: auto; position: relative; z-index: 1; flex-wrap: wrap; }
.cm-team-summary .cm-ui-card-body { display: flex; flex-direction: column; gap: var(--cm-s-3); margin: 0; }
.cm-team-summary-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-team-big { margin: 0; font-size: var(--text-lg); color: var(--text-dim); }
.cm-team-big strong { font-size: 36px; line-height: 1; color: var(--text); font-feature-settings: 'tnum'; }
.cm-team-channels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-s-2) var(--cm-s-4); font-size: var(--cm-fs-meta); }
.cm-team-ch { display: inline-flex; align-items: center; gap: var(--cm-s-1); color: var(--text); }
.cm-team-ch strong { font-feature-settings: 'tnum'; }
.cm-team-filter { margin-bottom: var(--cm-s-3); max-width: 100%; overflow-x: auto; }
.cm-team-filter .cm-ui-seg { flex-wrap: nowrap; }
.cm-team-person .cm-ui-lrow-trail { flex-wrap: wrap; justify-content: flex-end; }
.cm-team-person.is-overdue .cm-ui-lrow-title { color: var(--text); }
.cm-team-readwhere { display: inline-flex; align-items: center; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-team-reminded { display: inline-flex; align-items: center; gap: var(--cm-s-1); font-size: var(--cm-fs-small); font-weight: 600; color: var(--text-dim); min-height: 32px; }
.cm-team-remind { min-width: 96px; }
.cm-team .cm-ui-section-actions .cm-ui-search { min-width: 220px; }
/* phone cards of "What you have read": a channel the person never read in is left out instead of a row of dashes */
@container (max-width: 640px) {
.cm-me .cm-ui-td:has(.cm-me-none) { display: none; }
}
/* ---- responsive ---------------------------------------------------------------------------------- */
@media (max-width: 900px) {
.cm-kiosk-two { grid-template-columns: minmax(0, 1fr); }
.cm-hd-session .cm-ui-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
.cm-kiosk-bar { padding: var(--cm-s-2) var(--cm-s-3); min-height: 64px; gap: var(--cm-s-2); }
.cm-kiosk-bar .cm-kiosk-name { font-size: var(--text-md); }
.cm-hd-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
.cm-kiosk .cm-ui-ph-title { font-size: 24px; }
.cm-kiosk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-kiosk-tile { min-height: 96px; font-size: var(--text-md); }
.cm-kiosk-notyou { flex: 1 1 100%; }
.cm-kiosk-idle .cm-ui-seg { align-self: stretch; }
.cm-kiosk-idle .cm-ui-seg-opt { min-width: 0; flex: 1 1 0; }
.cm-hd-stage { padding: var(--cm-s-4); }
.cm-hd-post-title { font-size: 22px; }
.cm-hd .cm-article-body.cm-hd-body { font-size: 17px; }
.cm-hd-stage-nav .cm-ui-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-hd-stage-nav .btn { min-width: 56px; }
.cm-hd-step { flex-basis: auto; min-width: 48px; }
.cm-hd-step-title { display: none; }
.cm-hd-footer-actions { width: 100%; justify-content: flex-end; }
.cm-hd-pick-label { padding: var(--cm-s-3); }
.cm-me-choice { flex-direction: column-reverse; gap: var(--cm-s-2); padding: var(--cm-s-4); }
.cm-me-choice-main > .cm-me-note { padding-left: 0; }
.cm-me-device .cm-ui-list--plain > .cm-ui-lrow, .cm-me-device-row { padding: var(--cm-s-3) var(--cm-s-4); }
.cm-team-person, .cm-hd-person, .cm-me-device .cm-ui-lrow, .cm-kiosk-must-list .cm-ui-lrow {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--cm-s-3); row-gap: var(--cm-s-2); }
.cm-team-person > .cm-ui-lrow-trail, .cm-hd-person > .cm-ui-lrow-trail, .cm-me-device .cm-ui-lrow > .cm-ui-lrow-trail,
.cm-kiosk-must-list .cm-ui-lrow > .cm-ui-lrow-trail { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
.cm-team-card-actions { margin-left: 0; width: 100%; }
.cm-team .cm-ui-section-actions { width: 100%; }
.cm-team .cm-ui-section-actions .cm-ui-search { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cm-tv-message-icon.is-spinning svg, .cm-tv-seg-fill { animation: none !important; }
.cm-tv-seg.is-current .cm-tv-seg-fill { width: 100%; }
.cm-kiosk-tile, .cm-hd-pick-item { transition: none; }
}
/* ---- comms: people (design/comms/css/people.css) ---- */
/* ==========================================================================
comms — people: the person picker (shared.js peoplePicker, cm-pp-*), praise (praise.js, recognition.js,
cm-pr-*) and the audience step (audience-builder.js, cm-aud-*). Owner: UI team "people" member.
Built on the kit (ui-kit.css: .cm-ui-chipinput-box, .cm-ui-listbox, .cm-ui-option, .cm-ui-avatar …).
Tokens only; 8-px rhythm; motion ≤ 150 ms and none under prefers-reduced-motion.
========================================================================== */
/* ---- person picker ------------------------------------------------------------------------------------ */
.cm-pp { position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-pp [hidden] { display: none !important; }
.cm-pp-box { min-height: 48px; }
.cm-pp-input { min-width: 140px; font-size: var(--text-md); }
.cm-pp-pop { padding: var(--cm-s-1); }
.cm-pp.is-inline .cm-pp-pop {
position: static; max-height: none; overflow: visible; box-shadow: none; padding: 0; border: 0; background: transparent; z-index: auto;
}
.cm-pp.is-inline .cm-pp-pop .cm-ui-listbox-group { padding-left: 0; padding-right: 0; }
.cm-pp.is-inline .cm-pp-opt { padding-left: var(--cm-s-2); padding-right: var(--cm-s-2); }
.cm-pp.is-inline .cm-ui-listbox-state, .cm-pp.is-inline .cm-ui-listbox-loading { padding-left: 0; padding-right: 0; }
.cm-pp-listbox { display: flex; flex-direction: column; }
.cm-pp-listbox:empty { display: none; }
.cm-pp-opt { min-height: 52px; transition: background var(--cm-t-fast) var(--ease); }
.cm-pp-opt .cm-ui-option-text { flex: 1 1 auto; }
.cm-pp-opt .cm-ui-option-label, .cm-pp-opt .cm-ui-option-meta { white-space: normal; overflow-wrap: anywhere; }
.cm-pp-opt.is-self { cursor: default; opacity: .7; }
.cm-pp-opt.is-self:hover { background: none; }
.cm-pp-rel {
flex: 0 0 auto; margin-left: auto; padding: 2px var(--cm-s-2); border-radius: var(--cm-r-pill);
background: var(--surface-3); color: var(--text-dim); font-size: var(--cm-fs-small); font-weight: 600; white-space: nowrap;
}
.cm-pp-rel.is-self { background: transparent; border: 1px solid var(--border-strong); }
.cm-pp-note {
display: flex; align-items: flex-start; gap: var(--cm-s-2); margin: 0 0 var(--cm-s-1); padding: var(--cm-s-2) var(--cm-s-3);
border-radius: var(--cm-r-sm); background: var(--info-soft); color: var(--text); font-size: var(--cm-fs-meta); line-height: 1.45;
}
.cm-pp-note .cm-ui-icon { color: var(--info); color: color-mix(in srgb, var(--info) 72%, var(--text)); flex: 0 0 auto; margin-top: 1px; }
.cm-pp.is-inline .cm-pp-note { margin-bottom: var(--cm-s-2); }
.cm-pp-chosen {
display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0; padding: var(--cm-s-3) var(--cm-s-3) var(--cm-s-3) var(--cm-s-4);
border: 1px solid var(--accent); border-radius: 14px; background: var(--accent-soft);
}
.cm-pp-chosen-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-pp-chosen-name { font-size: var(--text-md); font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.cm-pp-chosen-meta { font-size: var(--cm-fs-meta); color: var(--text-dim); overflow-wrap: anywhere; }
.cm-pp-change { flex: 0 0 auto; }
.cm-pp-chip .cm-ui-avatar { margin-left: -4px; }
.cm-pp-error { margin: var(--cm-s-1) 0; }
/* ---- praise card ---------------------------------------------------------------------------------------- */
.cm-pr-card { height: 100%; }
.cm-pr-card-row { display: flex; align-items: flex-start; gap: var(--cm-s-4); padding: var(--cm-s-4) var(--cm-s-5); min-width: 0; }
.cm-pr-card-lead { flex: 0 0 auto; padding-top: 2px; }
.cm-pr-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-1); }
.cm-pr-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cm-s-2); min-width: 0; }
.cm-pr-card-badge { margin: 0; font-size: var(--cm-fs-meta); font-weight: 650; color: var(--cm-accent-text); min-width: 0; }
.cm-pr-card-time { flex: 0 0 auto; font-size: var(--cm-fs-small); color: var(--text-dim); white-space: nowrap; }
.cm-pr-card-to { margin: 0; display: flex; align-items: center; gap: var(--cm-s-2); min-width: 0; font-size: var(--cm-fs-h3); font-weight: 650; line-height: 1.35; color: var(--text); }
.cm-pr-card-to-name { min-width: 0; overflow-wrap: anywhere; }
.cm-pr-card-to.is-placeholder { color: var(--text-dim); font-weight: 600; }
.cm-pr-card-store { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--surface-3); color: var(--text-dim); flex: 0 0 auto; }
.cm-pr-card-to-meta { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-pr-card-msg {
margin: var(--cm-s-1) 0 0; font-size: var(--text-md); line-height: 1.55; color: var(--text); white-space: pre-line; overflow-wrap: anywhere;
}
.cm-pr-card-from { margin: var(--cm-s-2) 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-pr-card.is-preview { box-shadow: none; border-style: dashed; border-color: var(--border-strong); }
/* ---- give-praise dialog --------------------------------------------------------------------------------- */
.cm-pr-modal .cm-ui-modal-body { gap: 0; }
.cm-pr-form { display: flex; flex-direction: column; gap: var(--cm-s-5); min-width: 0; }
.cm-pr-step { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; margin: 0; }
.cm-pr-step-title { margin: 0; font-size: var(--text-md); font-weight: 650; color: var(--text); }
.cm-pr-who { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-pr-seg .cm-ui-seg-opt { min-height: 40px; }
.cm-pr-pick { min-width: 0; }
.cm-pr-who .cm-ui-field { gap: var(--cm-s-2); }
.cm-pr-badges.cm-ui-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cm-s-2); }
.cm-pr-badges .cm-ui-choice {
flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: var(--cm-s-2);
padding: var(--cm-s-3) var(--cm-s-2) var(--cm-s-3); min-height: 104px;
}
.cm-pr-badges .cm-ui-choice-text { padding-right: 0; align-items: center; }
.cm-pr-badges .cm-ui-choice-label { justify-content: center; font-size: var(--cm-fs-meta); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.cm-pr-badges .cm-ui-choice-check { position: absolute; top: 6px; right: 6px; }
.cm-pr-badges .cm-ui-choice:not(.is-selected) .cm-ui-choice-check { opacity: 0; }
.cm-pr-badges .cm-ui-choice:not(.is-selected) .cm-ui-icontile { background: var(--surface-2); color: var(--text-dim); }
.cm-pr-msg { min-height: 88px; }
.cm-pr-preview { gap: var(--cm-s-2); padding-top: var(--cm-s-1); }
.cm-pr-preview-title { margin: 0; display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-pr-err-host:empty { display: none; }
.cm-pr-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cm-s-3); padding: var(--cm-s-4) 0 var(--cm-s-2); }
.cm-pr-done-art { position: relative; display: inline-flex; }
.cm-pr-done-art .cm-ui-icontile--lg { width: 72px; height: 72px; border-radius: 22px; }
.cm-pr-done-art .cm-ui-icontile--lg .cm-ui-icon svg { width: 36px; height: 36px; }
.cm-pr-done-check {
position: absolute; right: -6px; bottom: -6px; display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%; background: var(--success); color: var(--surface); box-shadow: 0 0 0 3px var(--surface-solid);
}
.cm-pr-done-title { margin: var(--cm-s-2) 0 0; font-size: var(--text-xl); font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.cm-pr-done-body { margin: 0; max-width: 44ch; font-size: var(--text-md); color: var(--text-dim); line-height: 1.5; }
.cm-pr-done .cm-pr-card { width: 100%; text-align: left; margin-top: var(--cm-s-3); }
/* ---- feed rail card ------------------------------------------------------------------------------------- */
.cm-pr-rail .cm-ui-card-foot { justify-content: space-between; }
.cm-pr-rail-body { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-pr-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm-pr-rail-item { display: flex; align-items: flex-start; gap: var(--cm-s-3); padding: var(--cm-s-2) 0; min-width: 0; }
.cm-pr-rail-item + .cm-pr-rail-item { border-top: 1px solid var(--border); }
.cm-pr-rail-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-pr-rail-line { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--cm-s-2); font-size: var(--cm-fs-body); color: var(--text); line-height: 1.4; }
.cm-pr-rail-line strong { font-weight: 650; overflow-wrap: anywhere; }
.cm-pr-rail-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cm-fs-small); font-weight: 600; color: var(--cm-accent-text); }
.cm-pr-rail-badge .cm-ui-icon { align-self: center; }
.cm-pr-rail-sub { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pr-rail-sotm {
margin: 0; display: flex; align-items: center; gap: var(--cm-s-2); padding: var(--cm-s-2) var(--cm-s-3); border-radius: var(--cm-r-sm);
background: var(--warn-soft); color: var(--text); font-size: var(--cm-fs-meta); line-height: 1.4;
}
.cm-pr-rail-sotm .cm-ui-icon { color: var(--warn); color: color-mix(in srgb, var(--warn) 72%, var(--text)); flex: 0 0 auto; }
.cm-pr-rail-empty { padding: var(--cm-s-2) 0; }
.cm-pr-rail-empty-title { margin: 0; font-size: var(--cm-fs-body); font-weight: 600; color: var(--text); }
.cm-pr-rail-empty-body { margin: 2px 0 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
/* ---- praise page ---------------------------------------------------------------------------------------- */
.cm-pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--cm-s-4); align-items: stretch; }
.cm-pr-list { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cm-pr-sotm-host:empty { display: none; }
.cm-pr-sotm {
display: flex; align-items: center; gap: var(--cm-s-4); flex-wrap: wrap; padding: var(--cm-s-4) var(--cm-s-5);
border-radius: var(--cm-r-lg); border: 1px solid var(--border); background: var(--surface);
}
[data-theme="light"] .cm-pr-sotm { box-shadow: var(--shadow-sm); }
.cm-pr-sotm-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-pr-sotm-eyebrow { margin: 0; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-pr-sotm-name { margin: 0; font-size: var(--text-xl); font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.cm-pr-sotm-meta { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-pr-mine .cm-ui-stat { padding: var(--cm-s-3); }
.cm-pr-mine .cm-ui-stat-value { font-size: 26px; }
.cm-pr-how-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cm-pr-how-list li { display: flex; align-items: flex-start; gap: var(--cm-s-2); font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.5; }
.cm-pr-how-list .cm-ui-icon { flex: 0 0 auto; margin-top: 2px; color: var(--text-dim); }
.cm-pr-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm-pr-board-list li { display: flex; align-items: center; gap: var(--cm-s-3); padding: var(--cm-s-2) 0; font-size: var(--cm-fs-body); }
.cm-pr-board-list li + li { border-top: 1px solid var(--border); }
.cm-pr-board-rank { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-dim); font-size: var(--cm-fs-small); font-weight: 700; font-feature-settings: 'tnum'; flex: 0 0 auto; }
.cm-pr-board-name { flex: 1 1 auto; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.cm-pr-board-n { color: var(--text-dim); font-feature-settings: 'tnum'; }
@media (max-width: 600px) {
.cm-pp-opt { min-height: 56px; }
.cm-pp-chosen { padding: var(--cm-s-3); }
.cm-pr-badges.cm-ui-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-pr-badges .cm-ui-choice { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 56px; padding: var(--cm-s-2) var(--cm-s-3); }
.cm-pr-badges .cm-ui-choice .cm-ui-icontile { width: 32px; height: 32px; }
.cm-pr-badges .cm-ui-choice-text { align-items: flex-start; padding-right: var(--cm-s-4); }
.cm-pr-badges .cm-ui-choice-label { justify-content: flex-start; }
.cm-pr-card-row { padding: var(--cm-s-3) var(--cm-s-4); gap: var(--cm-s-3); }
.cm-pr-card-lead .cm-ui-icontile--lg { width: 40px; height: 40px; border-radius: var(--cm-r-md); }
.cm-pr-form { gap: var(--cm-s-4); }
.cm-pr-sotm { padding: var(--cm-s-4); }
.cm-pr-sotm-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cm-pp-opt { transition: none; }
}
/* ---- audience step ("Who should get this?") --------------------------------------------------------------- */
.cm-aud { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--cm-s-5); align-items: start; min-width: 0; }
.cm-aud [hidden] { display: none !important; }
.cm-aud-main { min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-5); }
.cm-aud-side { min-width: 0; position: sticky; top: var(--cm-s-4); max-height: calc(100vh - 2 * var(--cm-s-4)); overflow-y: auto; border-radius: var(--cm-r-lg); scrollbar-width: thin; }
/* three quick presets on the first row, the two "build it" choices wider on the second */
.cm-aud-choices.cm-ui-choices { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--cm-s-2); }
.cm-aud-choices .cm-ui-choice { grid-column: span 2; align-items: flex-start; }
.cm-aud-choices .cm-ui-choice[data-value="specific"], .cm-aud-choices .cm-ui-choice[data-value="saved"] { grid-column: span 3; }
.cm-aud-choices .cm-ui-choice[data-value="specific"]:last-child { grid-column: span 6; }
.cm-aud-choices .cm-ui-choice-label { font-size: var(--cm-fs-body); }
.cm-aud-mini { display: none; margin: calc(-1 * var(--cm-s-2)) 0 0; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text); font-feature-settings: 'tnum'; }
.cm-aud-body { display: flex; flex-direction: column; gap: var(--cm-s-5); min-width: 0; }
.cm-aud-body:empty { display: none; }
.cm-aud-actions:empty { display: none; }
.cm-aud-h { margin: 0; display: flex; align-items: center; gap: var(--cm-s-2); font-size: var(--text-md); font-weight: 650; color: var(--text); }
.cm-aud-h .cm-ui-icon { color: var(--text-dim); }
.cm-aud-h.is-small { font-size: var(--cm-fs-meta); margin-top: var(--cm-s-2); }
.cm-aud-h-row { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-aud-help { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.5; }
.cm-aud-start { padding: var(--cm-s-2) 0; }
.cm-aud-include, .cm-aud-exclude { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-aud-exclude { padding: var(--cm-s-4); border-radius: var(--cm-r-lg); background: var(--surface-2); }
.cm-aud-exclude .cm-aud-h, .cm-aud-exclude .cm-aud-h .cm-ui-icon { color: var(--danger); color: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.cm-aud-exclude-toggle { margin-top: calc(-1 * var(--cm-s-3)); }
.cm-aud-clear { margin-top: calc(-1 * var(--cm-s-1)); }
/* the one search box */
.cm-aud-search { position: relative; min-width: 0; }
.cm-aud-search-box { min-height: 52px; border-radius: 14px; }
.cm-aud-search-box .cm-ui-chipinput-icon { top: 15px; }
.cm-aud-search-input { font-size: var(--text-md); }
.cm-aud-search-box.is-exclude:focus-within { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.cm-aud-pop { max-height: min(440px, 60vh); padding: var(--cm-s-1); }
.cm-aud-listbox { display: flex; flex-direction: column; }
.cm-aud-group { display: flex; align-items: center; gap: 6px; }
.cm-aud-group:not(:first-child) { margin-top: var(--cm-s-1); border-top: 1px solid var(--border); padding-top: var(--cm-s-3); }
.cm-aud-opt .cm-ui-option-text { flex: 1 1 auto; }
.cm-aud-opt .cm-ui-option-label, .cm-aud-opt .cm-ui-option-meta { white-space: normal; overflow-wrap: anywhere; }
.cm-aud-opt-count { flex: 0 0 auto; margin-left: auto; font-size: var(--cm-fs-small); color: var(--text-dim); font-feature-settings: 'tnum'; white-space: nowrap; }
.cm-aud-hint { padding-bottom: var(--cm-s-1); }
.cm-aud-inline-note { margin: 0; padding: var(--cm-s-2) var(--cm-s-3); font-size: var(--cm-fs-meta); color: var(--text-dim); }
/* chosen chips, grouped by type */
.cm-aud-chips { display: flex; flex-direction: column; gap: var(--cm-s-3); min-width: 0; }
.cm-aud-chiprow { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--cm-s-2) var(--cm-s-3); align-items: start; }
.cm-aud-chiprow-label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--cm-fs-meta); font-weight: 600; color: var(--text-dim); }
.cm-aud-chiprow-n { padding: 0 6px; border-radius: var(--cm-r-pill); background: var(--surface-3); font-size: var(--cm-fs-small); font-feature-settings: 'tnum'; }
.cm-aud-chiprow-chips { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); min-width: 0; }
.cm-aud-chiprow-chips .cm-ui-chip { min-height: 32px; max-width: 100%; }
.cm-aud-chips.is-exclude .cm-aud-chiprow-n { background: var(--danger-soft); }
/* empty state under the search */
.cm-aud-empty { display: flex; align-items: flex-start; gap: var(--cm-s-4); padding: var(--cm-s-5); border-radius: var(--cm-r-lg); border: 1px dashed var(--border-strong); background: transparent; }
.cm-aud-empty-text { display: flex; flex-direction: column; gap: var(--cm-s-1); min-width: 0; }
.cm-aud-empty-title { margin: 0; font-size: var(--text-md); font-weight: 650; color: var(--text); }
.cm-aud-empty-body { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.5; }
.cm-aud-try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-s-2); margin-top: var(--cm-s-2); }
.cm-aud-try-label { font-size: var(--cm-fs-meta); color: var(--text-dim); }
/* saved audience */
.cm-aud-saved { display: flex; flex-direction: column; gap: var(--cm-s-3); max-width: 640px; }
.cm-aud-saved-card .cm-ui-card-body { gap: var(--cm-s-2); }
/* advanced conditions */
.cm-aud-adv-disc .cm-ui-disclosure-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-3); padding: var(--cm-s-2) 0 0 var(--cm-s-6); }
.cm-aud-adv { display: flex; flex-direction: column; gap: var(--cm-s-3); padding: var(--cm-s-4); border-radius: var(--cm-r-lg); border: 1px solid var(--border); background: var(--surface); }
.cm-aud-adv.is-exclude { background: var(--surface-2); border-color: transparent; }
.cm-aud-adv.is-exclude .cm-aud-h, .cm-aud-adv.is-exclude .cm-aud-h .cm-ui-icon { color: var(--danger); color: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.cm-aud-conds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-aud-cond { display: flex; flex-direction: column; gap: var(--cm-s-1); padding: var(--cm-s-3); border-radius: var(--cm-r-md); background: var(--surface-2); }
.cm-aud-adv.is-exclude .cm-aud-cond { background: var(--surface); }
.cm-aud-cond.has-error { box-shadow: inset 0 0 0 1px var(--danger); }
.cm-aud-cond-main { display: flex; align-items: flex-start; gap: var(--cm-s-2); flex-wrap: wrap; min-width: 0; }
.cm-aud-cond-sel { display: flex; gap: var(--cm-s-2); flex-wrap: wrap; flex: 0 0 auto; }
.cm-aud-cond-vals { flex: 1 1 260px; min-width: 0; }
.cm-aud-cond-rm { flex: 0 0 auto; margin-left: auto; }
.cm-aud-cond-hint { margin: 0; font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-aud-cond-err { margin: 0; }
.cm-aud-subgroup { list-style: none; padding: var(--cm-s-3); border-radius: var(--cm-r-md); border: 1px dashed var(--border-strong); display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-aud-sub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-aud-adders { display: flex; gap: var(--cm-s-2); flex-wrap: wrap; }
.cm-aud-group-box { display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-aud-vals { position: relative; min-width: 0; }
.cm-aud-val-box { min-height: 40px; padding: 4px var(--cm-s-2); }
.cm-aud-val-pop { max-height: 280px; }
.cm-aud-enum { display: flex; flex-wrap: wrap; gap: var(--cm-s-2); }
.cm-aud-inline { display: inline-flex; align-items: center; gap: var(--cm-s-2); }
.cm-aud-days { width: 110px; }
.cm-aud-back { display: flex; }
/* reach panel */
.cm-aud-reach {
display: flex; flex-direction: column; gap: var(--cm-s-4); padding: var(--cm-s-5); min-width: 0;
border-radius: var(--cm-r-lg); border: 1px solid var(--border); background: var(--surface);
transition: opacity var(--cm-t-mid) var(--ease);
}
[data-theme="light"] .cm-aud-reach { box-shadow: var(--shadow-sm); }
.cm-aud-reach.is-updating .cm-aud-reach-body { opacity: .6; }
.cm-aud-reach-eyebrow { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--cm-fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.cm-aud-reach-body { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; transition: opacity var(--cm-t-mid) var(--ease); }
.cm-aud-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--cm-s-2); }
.cm-aud-count-n { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-feature-settings: 'tnum'; }
.cm-aud-count.is-zero .cm-aud-count-n { color: var(--text-dim); }
.cm-aud-count-l { font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.cm-aud-count-of { flex-basis: 100%; font-size: var(--cm-fs-meta); color: var(--text-dim); }
.cm-aud-block { display: flex; flex-direction: column; gap: var(--cm-s-2); min-width: 0; }
.cm-aud-block-title { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--cm-fs-meta); font-weight: 650; color: var(--text); }
.cm-aud-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cm-s-2); }
.cm-aud-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 32px; gap: var(--cm-s-2); align-items: center; font-size: var(--cm-fs-meta); }
.cm-aud-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cm-aud-bar-n { text-align: right; color: var(--text-dim); font-feature-settings: 'tnum'; }
.cm-aud-chans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm-aud-chans li { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-s-2); padding: 6px 0; font-size: var(--cm-fs-meta); }
.cm-aud-chans li + li { border-top: 1px solid var(--border); }
.cm-aud-chan-name { display: inline-flex; align-items: center; gap: var(--cm-s-2); color: var(--text); }
.cm-aud-chan-name .cm-ui-icon { color: var(--text-dim); }
.cm-aud-chan-n { color: var(--text-dim); font-feature-settings: 'tnum'; white-space: nowrap; }
.cm-aud-chan-n strong { color: var(--text); font-weight: 650; }
.cm-aud-chan-off { color: var(--text-dim); font-style: italic; }
.cm-aud-chans li.is-off .cm-aud-chan-name { color: var(--text-dim); }
.cm-aud-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--cm-fs-meta); }
.cm-aud-facts li { display: flex; justify-content: space-between; gap: var(--cm-s-2); color: var(--text-dim); }
.cm-aud-facts li strong { color: var(--text); font-feature-settings: 'tnum'; }
.cm-aud-facts li.is-rest { font-style: italic; }
.cm-aud-at { margin: 0; font-size: var(--cm-fs-small); color: var(--text-dim); }
.cm-aud-reach-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-2); }
.cm-aud-reach-empty-title { margin: 0; font-size: var(--text-md); font-weight: 650; color: var(--text); }
.cm-aud-reach-empty-body { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.5; }
.cm-aud-leftout:empty { display: none; }
.cm-aud-leftout-body { display: flex; flex-direction: column; gap: var(--cm-s-2); padding-top: var(--cm-s-2); }
.cm-aud-leftout-count { margin: 0; font-size: var(--cm-fs-meta); color: var(--text); }
.cm-aud-check { display: flex; flex-direction: column; gap: var(--cm-s-2); border-top: 1px solid var(--border); padding-top: var(--cm-s-4); }
.cm-aud-check .cm-pp-box { min-height: 44px; }
.cm-aud-check .cm-pp-chosen { padding: var(--cm-s-2) var(--cm-s-2) var(--cm-s-2) var(--cm-s-3); }
.cm-aud-check-out:empty { display: none; }
.cm-aud-check:empty { display: none; }
.cm-aud-verdict { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-s-2); }
.cm-aud-verdict-why { margin: 0; font-size: var(--cm-fs-meta); color: var(--text-dim); line-height: 1.5; }
.cm-aud-verdict-ch { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cm-s-1) var(--cm-s-3); font-size: var(--cm-fs-small); }
.cm-aud-verdict-ch li { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.cm-aud-verdict-ch li.is-off { color: var(--text-dim); }
/* saved audiences pages */
.cm-aud-toolbar { display: flex; align-items: center; gap: var(--cm-s-3); flex-wrap: wrap; }
.cm-aud-toolbar-search { flex: 1 1 320px; max-width: 480px; }
.cm-aud-meta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--cm-s-4); }
@media (max-width: 1100px) {
.cm-aud { grid-template-columns: minmax(0, 1fr); }
.cm-aud-side { position: static; max-height: none; overflow: visible; }
.cm-aud-mini { display: block; }
}
@media (max-width: 600px) {
.cm-aud-main, .cm-aud-body { gap: var(--cm-s-4); }
.cm-aud-chiprow { grid-template-columns: minmax(0, 1fr); gap: var(--cm-s-1); }
.cm-aud-choices.cm-ui-choices { grid-template-columns: minmax(0, 1fr); }
.cm-aud-choices .cm-ui-choice, .cm-aud-choices .cm-ui-choice[data-value="specific"], .cm-aud-choices .cm-ui-choice[data-value="saved"] { grid-column: auto; }
.cm-aud-chiprow-label { min-height: 0; }
.cm-aud-reach { padding: var(--cm-s-4); }
.cm-aud-count-n { font-size: 36px; }
.cm-aud-empty { padding: var(--cm-s-4); gap: var(--cm-s-3); }
.cm-aud-exclude, .cm-aud-adv { padding: var(--cm-s-3); }
.cm-aud-meta-grid { grid-template-columns: minmax(0, 1fr); }
.cm-aud-adv-disc .cm-ui-disclosure-body { padding-left: 0; }
.cm-aud-cond-sel, .cm-aud-cond-sel .cm-ui-select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cm-aud-reach, .cm-aud-reach-body { transition: none; }
}
/* ─── GateKeeper: unused accounts ─────────────────────────────────────────
One figure per row — days since last use — so that figure gets the badge
and the colour; everything else stays quiet. On a phone the table turns
into one card per account (labels from data-label), name and badge first. */
.gku-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gku-tile {
font: inherit; color: inherit; text-align: left; cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.gku-tile:hover { border-color: var(--border-hover); }
.gku-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gku-tile.is-active { border-color: var(--accent); background: var(--accent-soft); }
.gku-tile.is-active .gk-tile-l { color: var(--accent); }
.gku-filters { display: flex; flex-direction: column; gap: .75rem; }
.gku-chiprow { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.gku-flabel { font-size: var(--text-sm); color: var(--text-dim); margin-right: .25rem; }
.gku-seg {
font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
color: var(--text-dim); background: var(--surface-2);
border: 1px solid var(--border); border-radius: 999px; padding: .32rem .75rem;
font-feature-settings: 'tnum';
}
.gku-seg:hover { color: var(--text); border-color: var(--border-hover); }
.gku-seg.is-on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.gku-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gku-check {
display: inline-flex; align-items: center; gap: .4rem; margin-left: .6rem;
font-size: 13px; color: var(--text-dim); cursor: pointer;
}
.gku-frow { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.gku-frow .form-group { margin: 0; }
.gku-fsearch { flex: 1 1 260px; }
.gku-fstore { flex: 0 1 260px; min-width: 180px; }
.gku-table td { vertical-align: top; }
.gku-sortable { padding: 0 !important; }
.gku-sortbtn {
font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
padding: .85rem 1rem; width: 100%; text-transform: inherit; letter-spacing: inherit;
}
.gku-sorticon { display: inline-flex; }
.gku-name { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gku-link { font-weight: 500; color: var(--text); text-decoration: none; }
a.gku-link:hover { color: var(--accent); text-decoration: underline; }
.gku-link.is-plain { color: var(--text-dim); }
.gku-sub { font-size: 12px; color: var(--text-faint); line-height: 1.35; display: inline-flex; align-items: center; gap: .3rem; }
.gku-mono { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 12.5px; }
.gku-num { font-feature-settings: 'tnum'; white-space: nowrap; }
.gku-days { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.gku-chips { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .1rem; }
.gku-chip {
display: inline-flex; align-items: center; gap: .25rem;
font-size: 11px; font-weight: 500; color: var(--text-dim);
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 999px; padding: .05rem .45rem; white-space: nowrap;
}
.gku-chip.is-bad { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.gku-email-under { display: none; }
.gku-row-orphan td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.gku-spin { width: 14px; height: 14px; vertical-align: -2px; }
.gku-running .spinner { margin-right: .2rem; }
.gku-msg { margin-top: .35rem; opacity: .9; }
.gku-empty { text-align: center; padding: 2.2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.gku-empty svg { color: var(--text-faint); }
.gku-empty h3 { margin: .3rem 0 0; }
.gku-empty p { max-width: 56ch; margin: 0 0 .5rem; }
.gku .gk-ctx, .gku .alert, .gku .gk-blast { margin-bottom: 1rem; }
.gku .gk-decides + .gk-affects, .gku > div > .gk-affects { margin-bottom: 1rem; }
@media (max-width: 1100px) {
.gku-c-email { display: none; }
.gku-email-under { display: inline-flex; }
}
@media (max-width: 640px) {
.gku-scroll { overflow: visible; }
.gku-table, .gku-table tbody, .gku-table tr, .gku-table td { display: block; width: 100%; }
.gku-table thead { display: none; }
.gku-table tr {
display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem;
padding: .8rem .2rem; border-bottom: 1px solid var(--border);
}
.gku-table td { padding: 0 !important; border: 0 !important; }
.gku-table td.gku-c-email { display: none; }
.gku-table td.gku-c-name { grid-column: 1; grid-row: 1; }
.gku-table td.gku-c-days { grid-column: 2; grid-row: 1; justify-self: end; }
.gku-table td.gku-c-days .gku-days { align-items: flex-end; text-align: right; }
.gku-table td.gku-c-store, .gku-table td.gku-c-title,
.gku-table td.gku-c-last, .gku-table td.gku-c-dev, .gku-table td.gku-c-act { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: baseline; }
.gku-table td[data-label]:not(.gku-c-name):not(.gku-c-days)::before {
content: attr(data-label); flex: 0 0 7.5rem; font-size: 11px; font-weight: 500;
color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em;
}
.gku-table td.empty-state { grid-column: 1 / -1; text-align: center; padding: 1.5rem 0 !important; }
.gku-table td.empty-state::before { content: none !important; }
.gku-row-orphan td:first-child { box-shadow: none; }
.gku-row-orphan { box-shadow: inset 3px 0 0 var(--danger); padding-left: .7rem !important; }
.gku-check { margin-left: 0; }
.gku-fstore, .gku-fsearch { flex: 1 1 100%; }
}
/* ─── GateKeeper: changed & moved ─────────────────────────────────────────
Builds on the unused-accounts page (.gku-*): same tiles, filters and phone
cards. What is new is the old → new pair — old struck through and faint,
new in the accent — and the three finding types, each with one colour:
changed = info, out of date in GateKeeper = warn, no longer entitled = danger. */
.gkc .gk-v-info { color: var(--info); }
.gkc-tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.gkc-tile { border-top: 3px solid transparent; }
.gkc-tile.is-changed { border-top-color: var(--info); }
.gkc-tile.is-outdated { border-top-color: var(--warn); }
.gkc-tile.is-moved { border-top-color: var(--danger); }
.gkc-type {
display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
border-radius: 999px; padding: .05rem .5rem; white-space: nowrap;
}
.gkc-type.is-changed { color: var(--info); background: var(--info-soft); }
.gkc-type.is-outdated { color: var(--warn); background: var(--warn-soft); }
.gkc-type.is-moved { color: var(--danger); background: var(--danger-soft); }
.gkc-on { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .35rem; }
.gkc-old { color: var(--text-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.gkc-new { color: var(--text); font-weight: 600; background: var(--accent-soft); border-radius: 4px; padding: 0 .3rem; }
.gkc-arrow { color: var(--text-faint); font-size: 12px; }
.gkc-names { flex-basis: 100%; }
.gkc-sub { display: block; }
.gkc-hub { display: flex; flex-direction: column; gap: .2rem; }
.gkc-hubline { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.gkc-hublbl { font-size: 11px; color: var(--text-faint); min-width: 3.6rem; }
.gkc-hubline.is-stale .gkc-new { background: var(--warn-soft); color: var(--warn); }
.gkc-whys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.gkc-why { display: flex; gap: .35rem; align-items: flex-start; line-height: 1.35; }
.gkc-why svg { margin-top: 2px; color: var(--text-faint); }
.gkc-why.is-moved { color: var(--danger); font-weight: 500; }
.gkc-why.is-moved svg { color: var(--danger); }
.gkc-why.is-outdated svg { color: var(--warn); }
.gkc-why a { display: inline-flex; gap: .3rem; align-items: center; }
.gkc-c-sel { width: 2.2rem; }
.gkc-c-sel input, .gkc-bulk input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.gkc-table td { vertical-align: top; }
.gkc-table tr.is-selected td { background: var(--accent-soft); }
.gkc-row-moved td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.gkc-acts { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; min-width: 9.5rem; }
.gkc-acts .btn { justify-content: flex-start; gap: .35rem; white-space: nowrap; }
.gkc-remove { color: var(--danger); border-color: var(--danger-soft); }
.gkc-remove:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.gkc-bulk {
position: sticky; top: .5rem; z-index: 5;
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
margin-bottom: 1rem; padding: .6rem .8rem;
background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-md);
box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.gkc-bulk-sp { flex: 1 1 auto; }
.gkc-bulk .btn { gap: .35rem; }
.gkc-confirm p { margin: 0 0 .6rem; }
.gkc-confirm .gk-blast { margin-top: .75rem; }
.gkc-confirm textarea { width: 100%; resize: vertical; }
.gkc-namelist { margin: 0 0 .5rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.gkc-ressum { margin: 0 0 .75rem; font-weight: 500; }
.gkc-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; max-height: 55vh; overflow: auto; }
.gkc-results li { display: flex; gap: .6rem; align-items: flex-start; }
.gkc-results .badge { flex: 0 0 auto; min-width: 5.5rem; justify-content: center; }
.gkc-resname { font-weight: 500; }
.gkc-allgood svg { color: var(--success); }
.gkc-notice { margin: 0 0 1rem; }
.gkc-notice-list { margin: .35rem 0 .45rem; padding-left: 1.1rem; }
.gkc-notice-when { opacity: .85; }
.gkc-notice-link { display: inline-flex; align-items: center; gap: .2rem; font-weight: 600; color: inherit; text-decoration: underline; }
@media (max-width: 1250px) {
.gkc-c-dept { display: none; }
}
@media (max-width: 640px) {
.gkc-table td.gkc-c-dept { display: flex; }
.gkc-table tr { grid-template-columns: auto 1fr; }
.gkc-table td.gkc-c-sel { grid-column: 1; grid-row: 1; padding-top: .15rem !important; }
.gkc-table td.gkc-c-sel:empty { display: none; }
.gkc-table td.gkc-c-name { grid-column: 2; grid-row: 1; }
.gkc-table td.gkc-c-store, .gkc-table td.gkc-c-title, .gkc-table td.gkc-c-dept,
.gkc-table td.gkc-c-hub, .gkc-table td.gkc-c-why, .gkc-table td.gkc-c-when,
.gkc-table td.gkc-c-act { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: baseline; }
.gkc-table td[data-label]:not(.gkc-c-name)::before {
content: attr(data-label); flex: 0 0 6.5rem; font-size: 11px; font-weight: 500;
color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em;
}
.gkc-table td.gkc-c-name::before { content: none !important; }
.gkc-acts { flex-direction: row; flex-wrap: wrap; min-width: 0; }
.gkc-row-moved td:first-child { box-shadow: none; }
.gkc-row-moved { box-shadow: inset 3px 0 0 var(--danger); padding-left: .7rem !important; }
.gkc-bulk { top: 0; }
.gkc-bulk-sp { display: none; }
.gkc-bulk strong { flex-basis: 100%; }
}
/* =============================================================================
DAILY INFO v2 — design B "Newsroom" (FE 7.57.0). BEGIN di2 block.
Source: design/daily-info-v2/B/di2-b.css (adapted) + real-app additions. Prefix di2-, tokens only.
Regenerate with .di2fe/merge_css.py; do not hand-edit inside the markers.
============================================================================= */
/* =============================================================================
Daily info v2 — Direction B · "Newsroom"
An editorial front page for HQ → store announcements.
Rules this file keeps:
- tokens only: every colour is a main.css variable or a color-mix() of them;
- one prefix: every class is di2-*;
- category colours are 8 palette slots (di2-c1 … di2-c8) mapped from the
app's own categorical chart tokens --c-1 … --c-8, so they follow light and
dark mode with no extra work. A category stores a slot number, never a hex.
============================================================================= */
/* ---- Category palette ------------------------------------------------------ */
.di2-c0 { --cat: var(--text-faint); } /* "no category yet" (composer) */
.di2-c1 { --cat: var(--c-1); } /* indigo */
.di2-c2 { --cat: var(--c-2); } /* violet */
.di2-c3 { --cat: var(--c-3); } /* sky */
.di2-c4 { --cat: var(--c-4); } /* emerald */
.di2-c5 { --cat: var(--c-5); } /* amber */
.di2-c6 { --cat: var(--c-6); } /* rose */
.di2-c7 { --cat: var(--c-7); } /* cyan */
.di2-c8 { --cat: var(--c-8); } /* pink */
.di2-call { --cat: var(--text); } /* "Όλα" */
.di2-c0, .di2-c1, .di2-c2, .di2-c3, .di2-c4, .di2-c5, .di2-c6, .di2-c7, .di2-c8, .di2-call {
/* text-grade ink: pulled toward --text so it stays readable in both themes */
--cat-ink: color-mix(in srgb, var(--cat) 68%, var(--text));
/* a solid fill that carries --surface text */
--cat-solid: color-mix(in srgb, var(--cat) 84%, var(--text));
--cat-line: color-mix(in srgb, var(--cat) 36%, var(--surface));
--cat-mid: color-mix(in srgb, var(--cat) 24%, var(--surface));
--cat-soft: color-mix(in srgb, var(--cat) 13%, var(--surface));
--cat-wash: color-mix(in srgb, var(--cat) 6%, var(--surface));
}
/* ---- Page root -------------------------------------------------------------- */
.di2 {
--di2-accent-ink: color-mix(in srgb, var(--accent) 72%, var(--text));
--di2-rule: color-mix(in srgb, var(--text) 82%, var(--surface));
max-width: 1120px;
margin: 0 auto;
color: var(--text);
font-size: 14px;
line-height: 1.5;
padding-bottom: 48px;
}
.di2 *, .di2 *::before, .di2 *::after { box-sizing: border-box; }
.di2 a { text-decoration: none; }
.di2 a:not(.btn):where(:not(.di2-prose a, .di2-builder-host a)) { color: inherit; }
.di2 :where(h1, h2, h3, h4, p):where(:not(.di2-prose *, .di2-builder-host *)) { margin: 0; }
.di2-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.di2-i {
width: 16px; height: 16px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
vertical-align: -3px;
}
.di2-i-sm { width: 14px; height: 14px; }
.di2-i-lg { width: 20px; height: 20px; }
.di2-i-xl { width: 28px; height: 28px; stroke-width: 1.6; }
.di2-num { font-variant-numeric: tabular-nums; }
.di2-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .92em; }
.di2-dim { color: var(--text-dim); }
.di2-faint { color: var(--text-faint); }
.di2-sep { color: var(--text-faint); padding: 0 2px; }
.di2-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.di2 .btn .di2-i { margin-left: -2px; }
.di2-btn-quiet { background: var(--surface); }
.di2-link { color: var(--di2-accent-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.di2-link:hover { text-decoration: underline; }
/* ---- Masthead (reader + HQ feed) ------------------------------------------- */
.di2-mast-top {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 12.5px; color: var(--text-dim);
padding: 2px 0 10px;
border-bottom: 1px solid var(--border);
}
.di2-mast-top strong { color: var(--text); font-weight: 600; }
.di2-mast-top .di2-push { margin-left: auto; }
.di2-scope {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 10px 2px 8px; border-radius: 999px;
background: var(--surface-3); color: var(--text-dim); font-weight: 500;
}
.di2-scope .di2-i { color: var(--text-faint); }
.di2-mast-main {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
padding: 20px 0 18px;
}
.di2-mast-title {
font-size: 36px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04;
color: var(--text);
}
.di2-mast-head { flex: 1 1 340px; min-width: 0; }
.di2-mast-dek { color: var(--text-dim); font-size: 14.5px; margin-top: 8px; max-width: 54ch; }
.di2-mast-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
.di2-search { position: relative; width: 300px; }
.di2-search .di2-i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.di2 .di2-search .input { padding-left: 38px; border-radius: 999px; height: 38px; }
.di2-kbd {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
font-size: 11px; color: var(--text-faint); border: 1px solid var(--border-strong);
border-radius: 6px; padding: 0 6px; line-height: 18px; background: var(--surface-2);
}
.di2-datebtn {
display: inline-flex; align-items: center; gap: 8px; height: 38px;
padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong);
background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
white-space: nowrap; cursor: pointer;
}
.di2-datebtn .di2-i { color: var(--text-faint); }
.di2-datebtn small { color: var(--text-faint); font-size: 12px; font-weight: 500; }
/* ---- Section nav: categories as newspaper sections ------------------------- */
.di2-sections {
display: flex; align-items: stretch; gap: 2px;
border-top: 2px solid var(--di2-rule);
border-bottom: 1px solid var(--border-strong);
overflow-x: auto; scrollbar-width: none;
margin-bottom: 24px;
}
.di2-sections::-webkit-scrollbar { display: none; }
.di2-sections.is-overflow { -webkit-mask-image: linear-gradient(90deg, var(--text) calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, var(--text) calc(100% - 56px), transparent); }
.di2-sec {
display: inline-flex; align-items: center; gap: 7px;
padding: 12px 10px 10px;
font-size: 13.5px; font-weight: 500; color: var(--text-dim);
white-space: nowrap; cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.di2-sec:hover { color: var(--text); background: var(--cat-wash); }
.di2-sec .di2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: none; }
.di2-sec.is-active { color: var(--text); font-weight: 650; border-bottom-color: var(--cat-solid); }
.di2-sec-tools { margin-left: auto; display: flex; align-items: center; padding-left: 12px; }
.di2-sec-tools .btn { white-space: nowrap; }
.di2-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
font-size: 11px; font-weight: 700; line-height: 1;
background: var(--cat-solid); color: var(--surface);
font-variant-numeric: tabular-nums;
}
.di2-count.is-accent { background: var(--accent); color: var(--text-inverse); }
.di2-count.is-total { background: var(--surface-3); color: var(--text-faint); font-weight: 600; }
/* ---- Flags & kickers --------------------------------------------------------- */
.di2-kicker {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; font-weight: 650; color: var(--cat-ink); letter-spacing: .005em;
white-space: nowrap;
}
.di2-tile {
width: 24px; height: 24px; border-radius: 7px; flex: none;
display: inline-grid; place-items: center;
background: var(--cat-soft); color: var(--cat-ink);
}
.di2-tile .di2-i { width: 14px; height: 14px; }
.di2-tile-lg { width: 40px; height: 40px; border-radius: 11px; }
.di2-tile-lg .di2-i { width: 20px; height: 20px; }
.di2-tile-solid { background: var(--cat-solid); color: var(--surface); }
.di2-flags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.di2-flag {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 600; line-height: 1;
padding: 4px 9px; border-radius: 999px; white-space: nowrap;
background: var(--surface-3); color: var(--text-dim);
}
.di2-flag .di2-i { width: 12px; height: 12px; stroke-width: 2.1; }
.di2-flag-new { background: var(--accent-soft); color: var(--di2-accent-ink); }
.di2-flag-ack { background: var(--warn-soft); color: var(--warn); }
.di2-flag-done { background: var(--success-soft); color: var(--success); }
.di2-flag-pin { background: var(--surface-3); color: var(--text); }
.di2-unread-dot {
width: 8px; height: 8px; border-radius: 50%; flex: none;
background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.di2-byline { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-dim); min-width: 0; }
.di2-byline b { color: var(--text); font-weight: 600; }
.di2-av {
width: 28px; height: 28px; border-radius: 50%; flex: none;
display: grid; place-items: center;
font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
background: var(--surface-3); color: var(--text-dim);
border: 1px solid var(--border);
}
.di2-av-lg { width: 40px; height: 40px; font-size: 13px; }
.di2-av-sm { width: 22px; height: 22px; font-size: 9px; }
/* ---- Illustrations (stand-ins for the post's own first image) --------------- */
.di2-art { display: block; width: 100%; height: 100%; }
.di2-art .bg { fill: var(--cat-soft); }
.di2-art .bg2 { fill: var(--cat-mid); }
.di2-art .sh { fill: var(--cat-line); }
.di2-art .fg { fill: var(--surface); }
.di2-art .ac { fill: var(--cat); }
.di2-art .ink { fill: var(--cat-ink); }
.di2-art .ln { fill: none; stroke: var(--cat-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.di2-art .fg.ln { fill: var(--surface); }
.di2-art .dash { stroke-dasharray: 4 6; }
.di2-art .tx { fill: var(--surface); font: 700 15px 'Inter', sans-serif; letter-spacing: -.02em; }
/* ---- Hero ------------------------------------------------------------------- */
.di2-hero {
position: relative; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
[data-theme="light"] .di2-hero { box-shadow: var(--shadow-md); }
.di2-hero::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cat); z-index: 1;
}
.di2-hero-media { position: relative; min-height: 300px; background: var(--cat-soft); overflow: hidden; }
.di2-hero-media .di2-art { position: absolute; inset: 0; }
.di2-hero-body { padding: 28px 32px 26px; display: flex; flex-direction: column; gap: 14px; }
.di2-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.di2-hero-title { font-size: 25px; line-height: 1.22; letter-spacing: -0.025em; font-weight: 700; color: var(--text); }
.di2-hero-dek { font-size: 15px; line-height: 1.6; color: var(--text-dim); }
.di2-hero-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.di2-due {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--warn-soft); color: var(--text); font-size: 13px;
}
.di2-due .di2-i { color: var(--warn); }
.di2-due b { font-weight: 650; }
.di2-hero-admin {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding-top: 12px; border-top: 1px dashed var(--border-strong);
font-size: 12.5px; color: var(--text-dim);
}
.di2-hero-admin .di2-push { margin-left: auto; display: flex; gap: 6px; }
/* lead story on a category page: the newest post, beside two shorter ones */
.di2-leadrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
.di2-leadcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.di2-leadcol > .di2-card { flex: 1; }
.di2-hero--lead { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.di2-hero--lead::before { height: 3px; }
.di2-hero--lead .di2-hero-media { min-height: 0; }
.di2-hero--lead .di2-hero-body { padding: 22px 24px 20px; gap: 11px; }
.di2-hero--lead .di2-hero-title { font-size: 21px; }
.di2-hero--lead .di2-hero-dek { font-size: 14px; }
@media (max-width: 1000px) { .di2-leadrow { grid-template-columns: 1fr; } }
.di2-sec-card-head:last-child { padding-bottom: 18px; }
/* ---- Section heads ------------------------------------------------------------ */
.di2-shead {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
margin: 36px 0 16px;
padding-top: 12px;
border-top: 1px solid var(--border-strong);
}
.di2-shead h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; color: var(--text); }
.di2-shead-sub { color: var(--text-faint); font-size: 13px; font-weight: 500; }
.di2-shead-tools { display: flex; align-items: center; gap: 14px; font-size: 13px; }
/* ---- Card grid ---------------------------------------------------------------- */
.di2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.di2-card {
position: relative; display: flex; flex-direction: column; min-width: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
[data-theme="light"] .di2-card { box-shadow: var(--shadow-sm); }
.di2-card:hover { border-color: var(--border-hover); }
[data-theme="light"] .di2-card:hover { box-shadow: var(--shadow-md); }
.di2-card-band { height: 3px; background: var(--cat); flex: none; }
.di2-card-media { aspect-ratio: 2 / 1; background: var(--cat-soft); border-bottom: 1px solid var(--border); flex: none; }
.di2-card-body { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.di2-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.di2-card-title { font-size: 15.5px; font-weight: 650; line-height: 1.38; letter-spacing: -0.01em; color: var(--text); }
.di2-card-ex {
font-size: 13px; line-height: 1.55; color: var(--text-dim);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.di2-card-foot {
margin-top: auto; padding-top: 10px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 12px; color: var(--text-faint);
border-top: 1px solid var(--border);
}
.di2-card-foot .di2-byline { font-size: 12px; }
.di2-card-foot .di2-byline { flex: 1; }
.di2-card-foot .di2-byline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di2-card-foot > :last-child { white-space: nowrap; flex: none; }
.di2-readmark { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--text-faint); }
.di2-readmark .di2-i { width: 13px; height: 13px; color: var(--success); }
.di2-card.is-unread { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.di2-card.is-read .di2-card-title { font-weight: 600; }
.di2-card-main { display: flex; gap: 14px; align-items: flex-start; }
.di2-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.di2-card.no-media.di2-card--full .di2-card-ex { -webkit-line-clamp: 6; }
.di2-card-mark { position: absolute; right: -14px; bottom: 48px; color: color-mix(in srgb, var(--cat) 10%, var(--surface)); pointer-events: none; }
.di2-card-mark .di2-i { width: 132px; height: 132px; stroke-width: 1.2; }
.di2-card-body > * { position: relative; }
.di2-art .lnw { fill: none; stroke: var(--surface); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
/* compact variant: older posts, small thumbnail beside the title */
.di2-card--compact .di2-card-body { padding: 14px 16px; }
.di2-card--compact .di2-card-title { font-size: 14.5px; }
.di2-card--compact .di2-card-ex { -webkit-line-clamp: 2; }
.di2-thumb {
width: 84px; height: 63px; flex: none; border-radius: var(--radius-sm); overflow: hidden;
background: var(--cat-soft); border: 1px solid var(--border);
}
.di2-thumb .di2-art { width: 100%; height: 100%; }
/* admin footer on a card (HQ feed) */
.di2-card-stats { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.di2-card-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.di2-iconbtn {
width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center;
border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
cursor: pointer; flex: none;
}
.di2-iconbtn:hover { color: var(--text); border-color: var(--border-hover); background: var(--surface-2); }
.di2-iconbtn.is-open { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.di2-iconbtn.is-danger { color: var(--danger); }
.di2-iconbtn.is-danger:hover { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.di2-iconbtn.is-ghost { border-color: transparent; background: transparent; }
/* overflow menu */
.di2-menu {
position: absolute; z-index: 20; min-width: 236px;
background: var(--surface-solid);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 6px;
font-size: 13px;
}
.di2-menu-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 7px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.di2-menu-item .di2-i { color: var(--text-faint); }
.di2-menu-item:hover, .di2-menu-item.is-hover { background: var(--surface-hover); }
.di2-menu-item small { margin-left: auto; color: var(--text-faint); font-size: 11.5px; }
.di2-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.di2-menu-item.is-danger, .di2-menu-item.is-danger .di2-i { color: var(--danger); }
.di2-menu-item.is-danger:hover, .di2-menu-item.is-danger.is-hover { background: var(--danger-soft); }
.di2-menu-note { padding: 4px 10px 6px; font-size: 11.5px; color: var(--text-faint); display: flex; gap: 6px; align-items: center; }
/* more / pagination */
.di2-more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 32px 0 0; font-size: 12.5px; color: var(--text-faint); }
/* ---- HQ strip (feed as admin) ------------------------------------------------- */
.di2-hqstrip {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding: 10px 14px; margin-bottom: 20px;
border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--surface-2); font-size: 13px; color: var(--text-dim);
}
.di2-hqstrip b { color: var(--text); font-weight: 650; }
.di2-hqstrip .di2-push { margin-left: auto; }
.di2-hqstrip-item { display: inline-flex; align-items: center; gap: 7px; }
.di2-hqstrip-item .di2-i { color: var(--text-faint); }
/* ---- Category page header ------------------------------------------------------ */
.di2-cathead {
position: relative; overflow: hidden;
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
padding: 26px 28px;
border-radius: var(--radius-lg);
background: var(--cat-wash);
border: 1px solid var(--cat-line);
margin-bottom: 24px;
}
.di2-cathead::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cat); }
.di2-cathead-icon {
width: 60px; height: 60px; border-radius: 16px;
display: grid; place-items: center;
background: var(--cat-solid); color: var(--surface);
}
.di2-cathead-icon .di2-i { width: 30px; height: 30px; stroke-width: 1.7; }
.di2-cathead-kicker { font-size: 12px; font-weight: 600; color: var(--cat-ink); margin-bottom: 4px; }
.di2-cathead h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); }
.di2-cathead p { color: var(--text-dim); margin-top: 6px; font-size: 14.5px; max-width: 60ch; }
.di2-cathead-stats { display: flex; gap: 22px; text-align: right; }
.di2-stat-mini b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.di2-stat-mini span { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
/* filter row under a category header */
.di2-subbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; font-size: 13px; color: var(--text-dim); }
.di2-subbar .di2-push { margin-left: auto; }
.di2-toggle-group { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-3); gap: 2px; }
.di2-toggle-group span { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--text-dim); white-space: nowrap; cursor: pointer; }
.di2-toggle-group span.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }
/* date popover */
.di2-pop {
position: absolute; z-index: 30; width: 340px;
background: var(--surface-solid); border: 1px solid var(--border-strong);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 14px;
}
.di2-pop h4 { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.di2-pop-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.di2-chipbtn {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
border: 1px solid var(--border-strong); background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--text-dim);
white-space: nowrap; cursor: pointer;
}
.di2-chipbtn.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--di2-accent-ink); font-weight: 600; }
.di2-pop-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: 12px; color: var(--text-faint); }
.di2-pop-range .input { height: 36px; font-size: 13px; }
.di2-pop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-faint); }
/* ---- Empty state ---------------------------------------------------------------- */
.di2-empty {
text-align: center; padding: 56px 24px 52px;
border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
background: var(--surface);
}
.di2-empty-art {
width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 20px;
display: grid; place-items: center; background: var(--cat-soft); color: var(--cat-ink);
}
.di2-empty-art .di2-i { width: 32px; height: 32px; stroke-width: 1.6; }
.di2-empty h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.di2-empty p { color: var(--text-dim); margin: 8px auto 0; max-width: 52ch; font-size: 14px; }
.di2-empty-actions { display: flex; gap: 8px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
/* ---- Article (post page) --------------------------------------------------------- */
.di2-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-faint); margin: 4px 0 26px; flex-wrap: wrap; }
.di2-crumbs a { color: var(--text-dim); font-weight: 500; }
.di2-crumbs a:hover { color: var(--text); }
.di2-crumbs .di2-push { margin-left: auto; display: flex; gap: 6px; }
.di2-read { display: grid; grid-template-columns: minmax(0, 680px) 272px; gap: 56px; justify-content: center; }
.di2-art-head .di2-flags { margin-top: 2px; }
.di2-art-headtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.di2-art-title { font-size: 36px; line-height: 1.15; letter-spacing: -0.032em; font-weight: 750; margin: 16px 0 14px; color: var(--text); text-wrap: balance; }
.di2-art-dek { font-size: 18px; line-height: 1.6; color: var(--text-dim); margin-bottom: 22px; text-wrap: pretty; }
.di2-art-meta {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
font-size: 13px; color: var(--text-dim);
}
.di2-art-meta .di2-who b { display: block; color: var(--text); font-weight: 600; font-size: 13.5px; }
.di2-art-meta .di2-who span { font-size: 12.5px; }
.di2-art-meta .di2-push { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.di2-meta-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.di2-meta-item .di2-i { color: var(--text-faint); }
.di2-figure { margin: 28px 0; }
.di2-figure-media { aspect-ratio: 16 / 7.5; border-radius: var(--radius-md); overflow: hidden; background: var(--cat-soft); border: 1px solid var(--border); }
.di2-figure figcaption { font-size: 13px; color: var(--text-faint); margin-top: 10px; line-height: 1.5; }
.di2-prose { font-size: 16px; line-height: 1.75; color: var(--text); }
.di2-prose p { margin: 0 0 1.05em; }
.di2-prose h2 { font-size: 21px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; margin: 1.9em 0 .55em; color: var(--text); }
.di2-prose h3 { font-size: 17px; font-weight: 650; margin: 1.5em 0 .4em; }
.di2-prose ul, .di2-prose ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.di2-prose li { margin: .35em 0; padding-left: .2em; }
.di2-prose li::marker { color: var(--cat-ink); font-weight: 700; }
.di2-prose strong { font-weight: 650; }
.di2-prose .di2-lead::first-letter { font-weight: 700; }
.di2-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); margin: 18px 0 8px; background: var(--surface); }
.di2-ptable { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.di2-ptable th {
text-align: left; font-size: 12px; font-weight: 600; color: var(--text-dim);
background: var(--surface-2); padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--border);
}
.di2-ptable td { padding: 11px 14px; border-top: 1px solid var(--border); vertical-align: top; }
.di2-ptable tr:first-child td { border-top: 0; }
.di2-ptable .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.di2-ptable .old { color: var(--text-faint); text-decoration: line-through; }
.di2-ptable .new { font-weight: 700; }
.di2-ptable .code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.di2-delta { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--success-soft); color: var(--success); }
.di2-table-note { font-size: 13px; color: var(--text-faint); margin-bottom: 1.2em; }
.di2-callout {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px; margin: 22px 0;
border-radius: var(--radius-md);
background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 22%, var(--border));
font-size: 14.5px; line-height: 1.6; color: var(--text);
}
.di2-callout > .di2-i { color: var(--info); margin-top: 3px; }
.di2-callout b { font-weight: 650; }
.di2-callout-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, var(--border)); }
.di2-callout-warn > .di2-i { color: var(--warn); }
.di2-callout-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, var(--border)); }
.di2-callout-danger > .di2-i { color: var(--danger); }
.di2-block-title { font-size: 13px; font-weight: 650; color: var(--text); margin: 36px 0 12px; display: flex; align-items: center; gap: 8px; }
.di2-block-title .di2-count { background: var(--surface-3); color: var(--text-dim); }
.di2-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.di2-files.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.di2-file {
display: flex; gap: 12px; align-items: center; min-width: 0;
padding: 12px 12px 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--surface);
}
.di2-file-ico {
width: 38px; height: 46px; border-radius: 6px; flex: none;
display: grid; place-items: end center; padding-bottom: 6px;
font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
background: var(--danger-soft); color: var(--danger);
border: 1px solid color-mix(in srgb, var(--danger) 20%, var(--border));
}
.di2-file-ico.is-sheet { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, var(--border)); }
.di2-file-ico.is-doc { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 20%, var(--border)); }
.di2-file-meta { flex: 1; min-width: 0; }
.di2-file-meta b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di2-file-meta span { font-size: 12px; color: var(--text-faint); }
.di2-file-acts { display: flex; gap: 4px; }
.di2-readstate {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-top: 36px; padding: 16px 18px;
border-radius: var(--radius-md); border: 1px solid var(--border);
background: var(--surface-2); font-size: 13.5px; color: var(--text-dim);
}
.di2-readstate .di2-ok { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); flex: none; }
.di2-readstate b { display: block; color: var(--text); font-weight: 650; }
.di2-readstate > div { flex: 1; min-width: 220px; }
.di2-readstate .di2-push { margin-left: auto; white-space: nowrap; }
.di2-ackbox {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin: 0 0 26px; padding: 16px 18px;
border-radius: var(--radius-md);
background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 25%, var(--border));
}
.di2-ackbox > .di2-i { color: var(--warn); }
.di2-ackbox div { flex: 1; min-width: 220px; font-size: 14px; color: var(--text); }
.di2-ackbox div span { display: block; color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.di2-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.di2-pn a {
display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-width: 0;
border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
.di2-pn a:hover { border-color: var(--cat-line); background: var(--cat-wash); }
.di2-pn small { font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; }
.di2-pn b { font-size: 14.5px; font-weight: 650; line-height: 1.4; color: var(--text); }
.di2-pn .is-next { text-align: right; align-items: flex-end; }
.di2-pn .is-off { opacity: .55; pointer-events: none; }
.di2-rail { align-self: start; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 76px; }
.di2-rail-box { border-top: 2px solid var(--di2-rule); padding-top: 12px; }
.di2-rail-box h4 { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: .02em; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.di2-toc { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.di2-toc li { padding: 6px 0 6px 12px; border-left: 2px solid var(--border); color: var(--text-dim); }
.di2-toc li.is-on { border-left-color: var(--cat-solid); color: var(--text); font-weight: 600; }
.di2-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.di2-kv dt { color: var(--text-faint); }
.di2-kv dd { margin: 0; color: var(--text); text-align: right; }
.di2-mini { display: flex; flex-direction: column; gap: 12px; }
.di2-mini a { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--text); }
.di2-mini a span { font-size: 12px; font-weight: 500; color: var(--text-faint); }
.di2-mini a:hover { color: var(--cat-ink); }
/* ---- Admin: page header, tabs, toolbar --------------------------------------------- */
.di2-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 2px 0 20px; }
.di2-ph-crumb { font-size: 12.5px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.di2-ph-crumb a { color: var(--text-dim); font-weight: 500; }
.di2-ph h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--text); }
.di2-ph-sub { color: var(--text-dim); margin-top: 6px; font-size: 14px; }
.di2-ph-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.di2-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-strong); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.di2-tab {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 9px;
font-size: 13.5px; font-weight: 500; color: var(--text-dim);
border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer;
}
.di2-tab:hover { color: var(--text); }
.di2-tab.is-active { color: var(--text); font-weight: 650; border-bottom-color: var(--text); }
.di2-tab .di2-count { background: var(--surface-3); color: var(--text-dim); font-weight: 600; }
.di2-tab.is-active .di2-count { background: var(--text); color: var(--surface); }
.di2-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.di2-toolbar .di2-search { width: 280px; }
.di2-toolbar .di2-push { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.di2-filter {
display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
font-size: 13px; color: var(--text-dim); white-space: nowrap; cursor: pointer;
}
.di2-filter b { color: var(--text); font-weight: 600; }
.di2-filter .di2-i { color: var(--text-faint); }
.di2-filter.is-set { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); color: var(--di2-accent-ink); }
.di2-filter.is-set b { color: var(--di2-accent-ink); }
.di2-filter .di2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.di2-bulk {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 10px 8px 14px; margin-bottom: 12px;
border-radius: var(--radius-md);
background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
font-size: 13px; color: var(--text);
}
.di2-bulk b { font-weight: 650; }
.di2-bulk .di2-push { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.di2-bulk .btn { background: var(--surface); }
.di2-btn-danger-quiet { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 35%, var(--border)) !important; }
.di2-btn-danger-quiet:hover { background: var(--danger-soft) !important; }
.di2-role {
display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
padding: 2px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-dim); white-space: nowrap;
}
/* the CMS table */
.di2-tablecard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
[data-theme="light"] .di2-tablecard { box-shadow: var(--shadow-sm); }
.di2-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.di2-tbl th {
text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-faint);
padding: 10px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.di2-tbl td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.di2-pill-sub.di2-who-line { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--text-dim); }
.di2-who-line .di2-av-sm { width: 18px; height: 18px; font-size: 8px; }
.di2-tbl tr:last-child td { border-bottom: 0; }
.di2-tbl tbody tr:hover td { background: var(--surface-2); }
.di2-tbl tr.is-selected td { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.di2-tbl tr.is-hover td { background: var(--surface-2); }
.di2-tbl .cb { width: 36px; padding-right: 0; }
.di2-tbl input[type="checkbox"] { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--accent); }
.di2-tbl .r { text-align: right; }
.di2-tbl .nowrap { white-space: nowrap; }
.di2-post-cell { display: flex; gap: 12px; align-items: center; min-width: 0; }
.di2-post-cell .di2-thumb { width: 56px; height: 42px; border-radius: 7px; }
.di2-thumb-none { display: grid; place-items: center; color: var(--cat-ink); background: var(--cat-wash); }
.di2-thumb-none .di2-i { width: 18px; height: 18px; }
.di2-post-cell-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.di2-post-cell-title { font-weight: 600; font-size: 13.5px; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.di2-post-cell-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-faint); flex-wrap: wrap; }
.di2-post-cell-sub .di2-i { width: 12px; height: 12px; }
.di2-catpill {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 9px 2px 7px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; white-space: nowrap;
background: var(--cat-soft); color: var(--cat-ink);
}
.di2-catpill .di2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat); }
.di2-catpill .di2-i { width: 12px; height: 12px; }
.di2-catpill.is-missing { background: var(--danger-soft); color: var(--danger); }
.di2-pill {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
background: var(--surface-3); color: var(--text-dim);
}
.di2-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.di2-pill-draft { background: var(--surface-3); color: var(--text-dim); }
.di2-pill-draft::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.di2-pill-scheduled { background: var(--info-soft); color: var(--info); }
.di2-pill-published { background: var(--success-soft); color: var(--success); }
.di2-pill-recalled { background: var(--warn-soft); color: var(--warn); }
.di2-pill-sub { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 4px; white-space: nowrap; }
.di2-aud b { display: block; font-weight: 600; color: var(--text); font-size: 13px; white-space: nowrap; }
.di2-aud span { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.di2-aud .is-warn { color: var(--warn); }
.di2-chans { display: inline-flex; gap: 4px; }
.di2-chan {
width: 24px; height: 24px; border-radius: 6px; display: inline-grid; place-items: center;
background: var(--surface-3); color: var(--text-dim);
}
.di2-chan .di2-i { width: 13px; height: 13px; }
.di2-chan.is-off { background: transparent; color: var(--text-faint); opacity: .45; border: 1px dashed var(--border-strong); }
.di2-meter { display: flex; flex-direction: column; gap: 5px; min-width: 96px; }
.di2-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.di2-meter-top b { font-size: 13px; color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.di2-track { height: 4px; border-radius: 4px; background: var(--chart-track); overflow: hidden; }
.di2-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.di2-fill.is-low { background: var(--warn); }
.di2-who-cell { display: flex; align-items: center; gap: 8px; }
.di2-who-cell b { display: block; font-weight: 600; font-size: 12.5px; color: var(--text); white-space: nowrap; }
.di2-who-cell span { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.di2-rowacts { display: flex; gap: 4px; justify-content: flex-end; position: relative; }
.di2-tfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-faint); background: var(--surface); flex-wrap: wrap; }
.di2-pager { display: flex; align-items: center; gap: 6px; }
.di2-pager span.is-on { background: var(--text); color: var(--surface); }
.di2-pager span { min-width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; font-weight: 600; color: var(--text-dim); padding: 0 6px; }
/* ---- Composer ----------------------------------------------------------------- */
.di2-actionbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; margin-bottom: 16px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
[data-theme="light"] .di2-actionbar { box-shadow: var(--shadow-sm); }
.di2-actionbar h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.di2-actionbar .di2-ab-sub { font-size: 12.5px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.di2-actionbar .di2-push { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.di2-split-btn { display: inline-flex; }
.di2-split-btn .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.di2-split-btn .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: .6rem; padding-right: .7rem; border-left: 1px solid color-mix(in srgb, var(--surface) 35%, transparent); }
.di2-blocker {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 11px 12px 11px 14px; margin-bottom: 18px;
border-radius: var(--radius-md);
background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
font-size: 13.5px; color: var(--text);
}
.di2-blocker-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--danger); color: var(--surface); font-weight: 800; font-size: 13px; flex: none; }
.di2-blocker b { font-weight: 650; }
.di2-blocker .di2-faint { margin-left: 4px; }
.di2-blocker .btn { margin-left: auto; background: var(--surface); }
.di2-compose { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 24px; align-items: start; }
.di2-steps { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.di2-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px 22px; }
[data-theme="light"] .di2-step { box-shadow: var(--shadow-sm); }
.di2-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.di2-step-n {
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
font-size: 12.5px; font-weight: 700; background: var(--surface-3); color: var(--text-dim);
}
.di2-step-n.is-bad { background: var(--danger); color: var(--surface); }
.di2-step-n.is-ok { background: var(--success-soft); color: var(--success); }
.di2-step-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.di2-step-head p { font-size: 12.5px; color: var(--text-faint); margin-top: 1px; }
.di2-step-head .di2-push { margin-left: auto; }
.di2-step.is-invalid { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); box-shadow: 0 0 0 3px var(--danger-soft); }
.di2-field { margin-bottom: 16px; }
.di2-field:last-child { margin-bottom: 0; }
.di2-label { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.di2-label .di2-req { color: var(--danger); font-weight: 700; }
.di2-label .di2-opt { font-weight: 500; color: var(--text-faint); font-size: 12px; }
.di2-label .di2-push { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--text-faint); }
.di2-help { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; line-height: 1.5; }
.di2-err { font-size: 12.5px; color: var(--danger); margin-top: 8px; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.di2-err .di2-i { width: 14px; height: 14px; }
.di2 .di2-input-lg { font-size: 15px; font-weight: 600; padding: .7rem .9rem; }
.di2-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.di2-tplline {
display: flex; align-items: center; gap: 12px; padding: 10px 12px;
border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); margin-bottom: 16px;
}
.di2-tplline b { font-weight: 650; white-space: nowrap; }
.di2-tplline-note { font-size: 12.5px; color: var(--text-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di2-tplline .btn { margin-left: auto; white-space: nowrap; }
.di2-kind {
display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650;
padding: 2px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-dim); white-space: nowrap;
}
.di2-catpick { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); }
.di2-catpick.is-invalid { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
.di2-catopt {
display: flex; align-items: center; gap: 9px; padding: 9px 10px; min-width: 0;
border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
font-size: 13px; font-weight: 550; color: var(--text); cursor: pointer;
}
.di2-catopt span { white-space: nowrap; }
.di2-catopt-def { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-faint); padding: 1px 6px; border-radius: 5px; background: var(--surface-3); }
.di2-catopt:hover { border-color: var(--cat-line); background: var(--cat-wash); }
.di2-catopt.is-on { border-color: var(--cat-solid); background: var(--cat-soft); box-shadow: 0 0 0 1px var(--cat-solid); }
.di2-builder { border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); }
.di2-builder-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); flex-wrap: wrap; }
.di2-builder-bar b { color: var(--text); font-weight: 650; }
.di2-builder-bar .di2-push { margin-left: auto; display: flex; gap: 6px; }
.di2-builder-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 300px; }
.di2-builder-pal { padding: 10px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.di2-builder-pal span { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border); color: var(--text-dim); background: var(--surface-2); }
.di2-builder-pal span .di2-i { width: 13px; height: 13px; }
.di2-builder-canvas { padding: 18px; }
.di2-mail { max-width: 460px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.di2-mail-hd { height: 26px; border-radius: 5px; background: var(--surface-3); display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 700; color: var(--text-faint); letter-spacing: .03em; }
.di2-mail h5 { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; }
.di2-mail p { font-size: 12px; color: var(--text-dim); line-height: 1.55; }
.di2-mail-img { height: 112px; border-radius: 6px; overflow: hidden; background: var(--cat-soft); }
.di2-mail-tbl { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.di2-mail-tbl div { display: grid; grid-template-columns: 70px 1fr 54px 54px; gap: 6px; padding: 5px 8px; font-size: 10.5px; color: var(--text-dim); border-top: 1px solid var(--border); }
.di2-mail-tbl div:first-child { border-top: 0; background: var(--surface-2); font-weight: 700; color: var(--text-faint); }
.di2-mail-blk { position: relative; outline: 1.5px dashed transparent; outline-offset: 4px; border-radius: 4px; }
.di2-mail-blk.is-sel { outline-color: var(--accent); }
.di2-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.di2-seg span {
display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px;
border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.di2-seg span.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--accent); }
.di2-radio { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border-hover); flex: none; display: inline-grid; place-items: center; }
.is-on > .di2-radio { border-color: var(--accent); }
.is-on > .di2-radio::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.di2-storesum { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); flex-wrap: wrap; }
.di2-storesum b { font-size: 15px; font-weight: 700; }
.di2-storesum .di2-push { margin-left: auto; }
.di2-regions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.di2-regions span { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); white-space: nowrap; }
.di2-regions span.is-out { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-faint); text-decoration: line-through; }
.di2-emails { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); min-height: 42px; align-items: center; }
.di2-emails span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text); }
.di2-emails span .di2-i { width: 12px; height: 12px; color: var(--text-faint); }
.di2-emails em { font-style: normal; color: var(--text-faint); font-size: 13px; padding-left: 4px; }
.di2-chopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.di2-chopt { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); align-items: flex-start; }
.di2-chopt.is-on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.di2-chopt.is-locked { background: var(--surface-2); }
.di2-chopt b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; color: var(--text); }
.di2-chopt span { display: block; font-size: 12px; color: var(--text-faint); margin-top: 3px; line-height: 1.45; }
.di2-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-hover); display: grid; place-items: center; flex: none; margin-top: 1px; color: var(--text-inverse); }
.di2-check .di2-i { width: 12px; height: 12px; stroke-width: 3; }
.is-on > .di2-check, .di2-check.is-on { background: var(--accent); border-color: var(--accent); }
.di2-chopt.is-locked .di2-check { background: var(--text-faint); border-color: var(--text-faint); }
.di2-outcome { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; color: var(--text-dim); }
.di2-outcome b { color: var(--text); }
.di2-optrow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.di2-optrow:first-child { border-top: 0; padding-top: 0; }
.di2-optrow b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.di2-optrow span { display: block; font-size: 12.5px; color: var(--text-faint); margin-top: 2px; line-height: 1.5; }
.di2-optrow > div { flex: 1; }
.di2-switch { width: 34px; height: 20px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; flex: none; margin-top: 1px; }
.di2-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--border-strong); }
.di2-switch.is-on { background: var(--accent); border-color: var(--accent); }
.di2-switch.is-on::after { left: 16px; border-color: transparent; }
.di2-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.di2-when-opt { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); align-items: flex-start; }
.di2-when-opt.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.di2-when-opt b { font-size: 13.5px; font-weight: 650; display: block; }
.di2-when-opt small { font-size: 12px; color: var(--text-faint); display: block; margin-top: 2px; }
.di2-when-in { display: flex; gap: 8px; margin-top: 10px; }
.di2-when-in .input { height: 34px; font-size: 13px; padding: .35rem .6rem; }
.di2-preview { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; }
.di2-pv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
[data-theme="light"] .di2-pv-card { box-shadow: var(--shadow-sm); }
.di2-pv-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.di2-pv-head h3 { font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.di2-pv-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--success); }
.di2-pv-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.di2-pv-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--border); }
.di2-pv-tabs span { font-size: 12.5px; padding: 6px 10px 8px; color: var(--text-faint); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.di2-pv-tabs span.is-on { color: var(--text); font-weight: 650; border-bottom-color: var(--text); }
.di2-pv-stage { padding: 16px; background: var(--bg); }
.di2-pv-stage .di2-card { box-shadow: var(--shadow-md); }
.di2-catpill.is-placeholder, .di2-kicker.is-placeholder { color: var(--danger); }
.di2-card.is-nocat .di2-card-band { background: repeating-linear-gradient(90deg, var(--danger) 0 8px, transparent 8px 14px); }
.di2-pv-note { font-size: 12px; color: var(--text-faint); padding: 0 16px 14px; background: var(--bg); line-height: 1.5; }
.di2-pv-note b { color: var(--danger); font-weight: 600; }
.di2-checklist { list-style: none; margin: 0; padding: 6px 14px 12px; font-size: 13px; }
.di2-checklist li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); color: var(--text); }
.di2-checklist li:first-child { border-top: 0; }
.di2-checklist li small { margin-left: auto; color: var(--text-faint); font-size: 12px; white-space: nowrap; }
.di2-ck { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--success-soft); color: var(--success); }
.di2-ck .di2-i { width: 12px; height: 12px; stroke-width: 2.6; }
.di2-ck.is-bad { background: var(--danger); color: var(--surface); }
.di2-checklist li.is-bad { color: var(--danger); font-weight: 600; }
.di2-reach { padding: 12px 14px 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; border-top: 1px solid var(--border); }
.di2-reach div { text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--surface-2); }
.di2-reach b { display: block; font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.di2-reach span { font-size: 11.5px; color: var(--text-faint); }
/* ---- Delivery -------------------------------------------------------------------- */
.di2-dhead { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 22px; }
.di2-dhead .di2-thumb { width: 96px; height: 72px; }
.di2-dhead h1 { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 6px 0 6px; }
.di2-dhead-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); }
.di2-dhead .di2-ph-actions { align-self: start; }
.di2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.di2-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[data-theme="light"] .di2-kpi { box-shadow: var(--shadow-sm); }
.di2-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); display: flex; align-items: center; gap: 7px; }
.di2-kpi-label .di2-i { color: var(--text-faint); }
.di2-kpi-val { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.di2-kpi-val small { font-size: 15px; font-weight: 600; color: var(--text-faint); letter-spacing: 0; margin-left: 4px; }
.di2-kpi-sub { font-size: 12px; color: var(--text-faint); }
.di2-kpi-sub b { color: var(--text-dim); font-weight: 600; }
.di2-kpi .di2-track { height: 6px; }
.di2-stack { display: flex; gap: 2px; height: 6px; border-radius: 4px; overflow: hidden; }
.di2-stack i { display: block; height: 100%; }
.di2-stack i:first-child { border-radius: 4px 0 0 4px; }
.di2-stack i:last-child { border-radius: 0 4px 4px 0; }
.di2-s-ok { background: var(--success); }
.di2-s-bad { background: var(--danger); }
.di2-s-skip { background: var(--text-faint); }
.di2-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.di2-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.di2-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.di2-dsplit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.di2-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
[data-theme="light"] .di2-panel { box-shadow: var(--shadow-sm); }
.di2-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.di2-panel-head h2 { font-size: 15px; font-weight: 700; color: var(--text); }
.di2-panel-head p { font-size: 12.5px; color: var(--text-faint); width: 100%; margin-top: -4px; }
.di2-panel-head .di2-push { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.di2-panel-foot { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-faint); display: flex; justify-content: space-between; align-items: center; }
.di2-srow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 64px 64px; gap: 12px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.di2-srow.is-head { border-top: 0; font-size: 11.5px; font-weight: 600; color: var(--text-faint); background: var(--surface-2); padding-top: 8px; padding-bottom: 8px; }
.di2-srow.is-sel { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.di2-srow .r { text-align: right; font-variant-numeric: tabular-nums; }
.di2-srow b { font-weight: 600; color: var(--text); }
.di2-srow .di2-mono { color: var(--text-faint); margin-right: 6px; }
.di2-bar { display: flex; align-items: center; gap: 8px; }
.di2-bar .di2-track { flex: 1; height: 6px; }
.di2-bar em { font-style: normal; font-size: 12.5px; font-weight: 650; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.di2-people { padding: 4px 0; }
.di2-person { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.di2-person:first-child { border-top: 0; }
.di2-person b { display: block; font-weight: 600; color: var(--text); }
.di2-person span { font-size: 12px; color: var(--text-faint); }
.di2-person > div { flex: 1; min-width: 0; }
.di2-person .di2-tag { margin-left: auto; font-size: 12px; color: var(--text-dim); white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; }
.di2-person .di2-tag .di2-i { width: 13px; height: 13px; }
.di2-tag.is-ok .di2-i { color: var(--success); }
.di2-tag.is-no { color: var(--text-faint); }
.di2-subtabs { display: flex; gap: 4px; padding: 10px 16px 0; }
.di2-privacy { display: flex; gap: 8px; align-items: flex-start; padding: 10px 16px; font-size: 12px; color: var(--text-faint); background: var(--surface-2); border-top: 1px solid var(--border); }
.di2-privacy .di2-i { width: 14px; height: 14px; margin-top: 1px; }
.di2-errcode { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--danger); background: var(--danger-soft); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
/* ---- Categories ------------------------------------------------------------------- */
.di2-cl { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: visible; }
[data-theme="light"] .di2-cl { box-shadow: var(--shadow-sm); }
.di2-cl-row {
position: relative;
display: grid; grid-template-columns: 20px 40px minmax(0, 1fr) 128px 76px;
gap: 14px; align-items: center; padding: 14px 16px;
border-top: 1px solid var(--border); background: var(--surface);
}
.di2-cl-row:first-child { border-top: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.di2-cl-row.is-head { padding-top: 10px; padding-bottom: 10px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); background: var(--surface-2); }
.di2-grip { color: var(--text-faint); cursor: grab; display: grid; place-items: center; }
.di2-cl-name { min-width: 0; }
.di2-cl-name b { font-size: 14.5px; font-weight: 650; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.di2-cl-name b em { font-style: normal; font-weight: 500; color: var(--text-faint); font-size: 13px; }
.di2-cl-name p { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di2-cl-count b { display: block; font-weight: 650; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.di2-cl-count span { font-size: 12px; color: var(--text-faint); }
.di2-default { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--di2-accent-ink); white-space: nowrap; }
.di2-cl-row.is-dragging {
z-index: 3; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
box-shadow: var(--shadow-lg); transform: translateX(10px) rotate(-.4deg);
margin: 0 -6px;
}
.di2-cl-row.is-dragging .di2-grip { color: var(--text); cursor: grabbing; }
.di2-dropline { height: 0; position: relative; }
.di2-dropline::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 3px; border-radius: 3px; background: var(--accent); z-index: 4; }
.di2-dropline::after { content: ""; position: absolute; left: 10px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); z-index: 4; box-sizing: border-box; }
.di2-cl-row.is-archived { background: var(--surface-2); grid-template-columns: 20px 40px minmax(0, 1fr) 150px 118px; }
.di2-cl-row.is-archived:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.di2-cl-row.is-archived:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.di2-cl-row.is-archived .di2-cl-name b { color: var(--text-dim); }
.di2-cl-row.is-archived .di2-tile-lg { filter: saturate(.3); opacity: .7; }
.di2-cl-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-faint); margin: 12px 2px 0; line-height: 1.55; }
.di2-cl-note .di2-i { margin-top: 2px; }
.di2-catlayout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 20px; align-items: start; }
.di2-dock {
position: sticky; top: 72px; display: flex; flex-direction: column; overflow: hidden;
background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.di2-dock::before { content: ""; display: block; height: 4px; background: var(--cat); }
.di2-dock .di2-drawer-head { padding: 16px 18px 14px; }
.di2-dock .di2-drawer-body { padding: 16px 18px; }
.di2-dock .di2-drawer-foot { padding: 12px 18px; }
.di2-drawer-foot .btn { white-space: nowrap; }
.di2-cl-name b .di2-default { margin-left: 2px; }
@media (max-width: 1180px) { .di2-catlayout { grid-template-columns: 1fr; } .di2-dock { position: static; } }
/* drawer + scrim (shared with dialogs) */
.di2-scrim { position: fixed; inset: 0; z-index: 900; background: color-mix(in srgb, var(--bg) 66%, transparent); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.di2-drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 901; width: 460px; max-width: 100vw;
background: var(--surface-solid); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
display: flex; flex-direction: column;
}
.di2-drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
.di2-drawer-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.di2-drawer-head p { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }
.di2-drawer-head .di2-iconbtn { margin-left: auto; }
.di2-drawer-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.di2-drawer-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface); }
.di2-drawer-foot .di2-push { margin-left: auto; display: flex; gap: 8px; }
.di2-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.di2-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-faint); }
.di2-swatch i { width: 30px; height: 30px; border-radius: 50%; background: var(--cat); display: grid; place-items: center; color: var(--surface); position: relative; }
.di2-swatch.is-on i { box-shadow: 0 0 0 3px var(--surface-solid), 0 0 0 5px var(--cat-solid); }
.di2-swatch.is-used i::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface-solid); border: 2px solid var(--surface-solid); box-shadow: inset 0 0 0 3px var(--text-faint); }
.di2-icons { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.di2-icons span { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--text-dim); background: var(--surface); }
.di2-icons span.is-on { border-color: var(--cat-solid); background: var(--cat-soft); color: var(--cat-ink); box-shadow: 0 0 0 1px var(--cat-solid); }
.di2-dpreview { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.di2-dpreview-label { font-size: 11.5px; font-weight: 600; color: var(--text-faint); padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.di2-dpreview .di2-sections { margin: 0; border-top: 0; padding: 0 8px; }
.di2-dpreview .di2-cathead { margin: 12px; padding: 16px; gap: 14px; }
.di2-dpreview .di2-cathead-icon { width: 44px; height: 44px; border-radius: 12px; }
.di2-dpreview .di2-cathead-icon .di2-i { width: 22px; height: 22px; }
.di2-dpreview .di2-cathead h1 { font-size: 19px; }
.di2-dpreview .di2-cathead p { font-size: 12.5px; }
/* ---- Templates -------------------------------------------------------------------- */
.di2-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.di2-kindcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px dashed var(--border-hover); border-radius: var(--radius-md); background: var(--surface); }
.di2-kindcard b { display: block; font-size: 13.5px; font-weight: 650; color: var(--text); }
.di2-kindcard span { display: block; font-size: 12.5px; color: var(--text-faint); margin-top: 2px; line-height: 1.45; }
.di2-kindcard .di2-tile-lg { background: var(--surface-3); color: var(--text-dim); }
.di2-tpl { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
[data-theme="light"] .di2-tpl { box-shadow: var(--shadow-sm); }
.di2-tpl-prev { height: 150px; background: var(--cat-wash); border-bottom: 1px solid var(--border); padding: 16px 28px 0; overflow: hidden; position: relative; }
.di2-tpl-sheet { background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; height: 100%; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--shadow-sm); }
.di2-tpl-sheet i { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); }
.di2-tpl-sheet i.h { height: 9px; width: 70%; background: var(--cat-line); }
.di2-tpl-sheet i.band { height: 14px; width: 100%; background: var(--cat); border-radius: 4px; opacity: .85; }
.di2-tpl-sheet i.img { height: 34px; background: var(--cat-soft); border-radius: 5px; }
.di2-tpl-sheet .rows { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 4px 6px; }
.di2-tpl-sheet .rows i { height: 5px; }
.di2-tpl-sheet .rows i.th { background: var(--cat-line); }
.di2-tpl-sheet .kv { display: grid; grid-template-columns: 1fr 2fr; gap: 5px 8px; }
.di2-tpl-sheet .kv i:nth-child(odd) { background: var(--cat-mid); }
.di2-tpl-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.di2-tpl-body h3 { font-size: 15px; font-weight: 650; color: var(--text); display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.di2-tpl-body p { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.di2-tpl-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.di2-tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-faint); }
.di2-tpl-foot .di2-rowacts { gap: 2px; }
/* ---- Settings ---------------------------------------------------------------------- */
.di2-set { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.di2-setnav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.di2-setnav a { padding: 8px 12px; border-radius: 8px; color: var(--text-dim); display: flex; align-items: center; gap: 9px; }
.di2-setnav a .di2-i { color: var(--text-faint); }
.di2-setnav a.is-on { background: var(--surface); color: var(--text); font-weight: 650; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.di2-setnav a.is-on .di2-i { color: var(--text); }
.di2-setnav .di2-setnav-sep { height: 1px; background: var(--border); margin: 8px 6px; }
.di2-sec-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 16px; }
[data-theme="light"] .di2-sec-card { box-shadow: var(--shadow-sm); }
.di2-sec-card-head { padding: 18px 22px 0; display: flex; gap: 12px; align-items: flex-start; }
.di2-sec-card-head h2 { font-size: 16px; font-weight: 700; color: var(--text); }
.di2-sec-card-head p { font-size: 13px; color: var(--text-faint); margin-top: 3px; }
.di2-sec-card-head .di2-push { margin-left: auto; }
.di2-sec-card-body { padding: 16px 22px 20px; }
.di2-sec-card-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-faint); }
.di2-sec-card-foot .di2-pushl { margin-right: auto; }
.di2-health { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--success-soft); color: var(--text); font-size: 13px; margin-bottom: 16px; }
.di2-health .di2-i { color: var(--success); }
.di2-inbox { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; font-size: 13px; }
.di2-inbox-label { font-size: 11.5px; font-weight: 600; color: var(--text-faint); padding: 7px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.di2-inbox-row { display: grid; grid-template-columns: 30px 170px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; }
.di2-inbox-row b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di2-inbox-row span { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di2-inbox-row small { color: var(--text-faint); }
.di2-testrow { display: flex; gap: 8px; align-items: center; }
.di2-testrow .input { flex: 1; }
.di2-log { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.di2-log div { display: grid; grid-template-columns: 22px 120px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); }
.di2-log div:first-child { border-top: 0; }
.di2-log .di2-i { width: 15px; height: 15px; }
.di2-log .is-ok .di2-i { color: var(--success); }
.di2-log .is-bad .di2-i { color: var(--danger); }
.di2-log small { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.di2-sel { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); font-size: 13.5px; color: var(--text); }
.di2-sel .di2-i:last-child { margin-left: auto; color: var(--text-faint); }
.di2-perm { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.di2-perm:first-child { border-top: 0; padding-top: 0; }
.di2-perm b { font-weight: 600; min-width: 220px; }
.di2-perm span { color: var(--text-dim); }
/* ---- Delete dialog ---------------------------------------------------------------- */
.di2-dialog-wrap { position: fixed; inset: 0; z-index: 901; display: grid; place-items: center; padding: 24px; }
.di2-dialog {
width: 100%; max-width: 600px; max-height: calc(100vh - 40px); overflow-y: auto;
background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.di2-dialog-head { display: flex; gap: 14px; align-items: center; padding: 20px 24px 4px; }
.di2-dialog-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); flex: none; }
.di2-dialog-ico .di2-i { width: 22px; height: 22px; }
.di2-dialog-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); line-height: 1.3; }
.di2-dialog-head p { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; }
.di2-dialog-body { padding: 14px 24px 18px; display: flex; flex-direction: column; gap: 14px; }
.di2-dialog-foot .btn { white-space: nowrap; }
.di2-victim { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.di2-victim .di2-thumb { width: 64px; height: 64px; }
.di2-victim h3 { font-size: 14.5px; font-weight: 650; line-height: 1.4; color: var(--text); margin: 6px 0 4px; }
.di2-victim-meta { font-size: 12.5px; color: var(--text-dim); display: flex; gap: 6px 12px; flex-wrap: wrap; }
.di2-victim-nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.di2-victim-nums div b { display: block; font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.di2-victim-nums div span { font-size: 12px; color: var(--text-faint); }
.di2-conseq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--text); }
.di2-conseq li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.di2-conseq li .di2-i { margin-top: 2px; color: var(--danger); }
.di2-conseq li.is-kept .di2-i { color: var(--success); }
.di2-conseq li span { color: var(--text-dim); }
.di2-alt { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; color: var(--text-dim); }
.di2-alt .di2-i { color: var(--text-faint); }
.di2-alt a { margin-left: auto; white-space: nowrap; }
.di2-confirm label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 7px; }
.di2-confirm label b { color: var(--text); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; background: var(--surface-3); padding: 1px 6px; border-radius: 4px; }
.di2-confirm .input { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.di2-dialog-foot { display: flex; gap: 8px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface-2); }
.di2-dialog-foot .di2-push { margin-left: auto; display: flex; gap: 8px; }
.di2-dialog-foot small { font-size: 12px; color: var(--text-faint); display: inline-flex; gap: 6px; align-items: center; }
/* The closed phone drawer of the shell casts its shadow onto the page edge. */
@media (max-width: 900px) { .layout:not(.sidebar-open):has(.di2) > .sidebar { box-shadow: none; } }
/* ---- Responsive -------------------------------------------------------------------- */
@media (max-width: 1180px) {
.di2-read { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.di2-rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.di2-compose { grid-template-columns: minmax(0, 1fr); }
.di2-preview { position: static; }
}
@media (max-width: 1000px) {
.di2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.di2-hero { grid-template-columns: 1fr; }
.di2-hero-media { min-height: 0; aspect-ratio: 2 / 1; }
.di2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.di2-dsplit { grid-template-columns: 1fr; }
.di2-set { grid-template-columns: 1fr; }
.di2-setnav { position: static; flex-direction: row; overflow-x: auto; }
}
@media (max-width: 600px) {
.di2 { font-size: 14px; padding-bottom: 24px; }
.di2-mast-top { font-size: 12px; gap: 8px; }
.di2-mast-top .di2-hide-sm { display: none; }
.di2-mast-main { padding: 14px 0 14px; gap: 12px; align-items: stretch; flex-direction: column; }
.di2-mast-head { flex: none; }
.di2-mast-title { font-size: 27px; }
.di2-mast-dek { font-size: 13.5px; margin-top: 4px; }
.di2-mast-tools { flex-wrap: nowrap; }
.di2-mast-tools .di2-search { width: auto; flex: 1; }
.di2-datebtn { padding: 0 12px; }
.di2-datebtn .di2-hide-sm { display: none; }
.di2-sections { margin: 0 -12px 16px; padding: 0 6px; }
.di2-sec { padding: 11px 10px 9px; font-size: 13px; }
.di2-hero { border-radius: var(--radius-md); }
.di2-hero-body { padding: 16px 16px 16px; gap: 10px; }
.di2-hero-title { font-size: 20px; }
.di2-hero-dek { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.di2-hero-foot { flex-direction: column; align-items: stretch; }
.di2-hero-foot .btn { justify-content: center; }
.di2-shead { margin: 26px 0 10px; }
.di2-shead h2 { font-size: 16px; flex-wrap: wrap; row-gap: 2px; }
.di2-shead-sub { flex-basis: 100%; font-size: 12.5px; }
.di2-readmark-t { display: none; }
.di2-card-top { gap: 6px; }
.di2-grid { grid-template-columns: 1fr; gap: 10px; }
/* every card becomes a compact row with the thumbnail on the right */
.di2-card .di2-card-media { display: none; }
.di2-card-body { padding: 12px 14px; gap: 6px; }
.di2-card-title { font-size: 15px; }
.di2-card-ex { -webkit-line-clamp: 2; font-size: 13px; }
.di2-card-foot { padding-top: 8px; }
.di2-thumb { width: 64px; height: 64px; }
.di2-card .di2-sm-thumb { display: block; }
.di2-cathead { grid-template-columns: auto 1fr; padding: 18px; }
.di2-cathead-stats { grid-column: 1 / -1; text-align: left; }
.di2-crumbs { margin-bottom: 16px; }
.di2-crumbs .di2-push { display: none; }
.di2-art-title { font-size: 25px; margin: 12px 0 10px; letter-spacing: -0.025em; }
.di2-art-dek { font-size: 16px; margin-bottom: 16px; }
.di2-art-meta { gap: 10px; }
.di2-art-meta .di2-push { margin-left: 0; width: 100%; gap: 14px; }
.di2-prose { font-size: 16px; line-height: 1.7; }
.di2-prose h2 { font-size: 19px; }
.di2-figure { margin: 20px -12px; }
.di2-figure-media { border-radius: 0; border-left: 0; border-right: 0; aspect-ratio: 16 / 9; }
.di2-figure figcaption { padding: 0 12px; }
.di2-files, .di2-files.is-2 { grid-template-columns: 1fr; }
.di2-file-meta b { white-space: normal; overflow-wrap: anywhere; }
.di2-file-acts .di2-iconbtn:last-child { display: none; }
.di2-pn { grid-template-columns: 1fr; }
.di2-pn .is-next { text-align: left; align-items: flex-start; }
.di2-rail { grid-template-columns: 1fr; }
.di2-ackbox { margin-bottom: 18px; }
.di2:has(.di2-ackbar) { padding-bottom: 132px; }
.di2-ackbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
background: var(--surface-solid); border-top: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
display: flex; flex-direction: column; gap: 8px;
}
.di2-ackbar .btn { justify-content: center; width: 100%; }
.di2-ackbar small { font-size: 12px; color: var(--text-faint); text-align: center; }
}
.di2-sm-thumb { display: none; }
.di2-ackbar { display: none; }
@media (max-width: 600px) { .di2-ackbar { display: flex; } .di2-ack-desktop { display: none; } }
/* ---- Real-app additions (components B drew as static markup, states B did not draw) ---------- */
/* Controls B drew as are real buttons here: same look, no UA chrome. */
.di2 button.di2-sec, .di2-toggle-group button, .di2-seg button, .di2-pv-tabs button, .di2-icons button,
.di2-pager button, .di2-swatch, .di2-catopt, .di2-chopt, .di2-kindcard, .di2-regionchip, .di2-sel,
.di2-menu-item, .di2-iconbtn, .di2-filter, .di2-chipbtn, .di2-grip, .di2-switch, .di2-link, .di2-emailchip button {
font: inherit; -webkit-appearance: none; appearance: none;
}
.di2-iconbtn, .di2-grip { padding: 0; }
button.di2-link { background: none; border: 0; padding: 0; cursor: pointer; }
.di2-toggle-group button { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--text-dim);
white-space: nowrap; cursor: pointer; border: 0; background: transparent; }
.di2-toggle-group button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }
.di2-toggle-group button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.di2-seg button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px;
border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; color: var(--text-dim); cursor: pointer; text-align: left; }
.di2-seg button.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--accent); }
.di2-pv-tabs button { font-size: 12.5px; padding: 6px 10px 8px; color: var(--text-faint); font-weight: 500; border: 0; background: none;
border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.di2-pv-tabs button.is-on { color: var(--text); font-weight: 650; border-bottom-color: var(--text); }
.di2-icons button { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--border);
color: var(--text-dim); background: var(--surface); cursor: pointer; padding: 0; }
.di2-icons button.is-on { border-color: var(--cat-solid); background: var(--cat-soft); color: var(--cat-ink); box-shadow: 0 0 0 1px var(--cat-solid); }
.di2-icons button:hover { border-color: var(--border-hover); }
.di2-pager button { min-width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; font-weight: 600;
color: var(--text-dim); padding: 0 6px; border: 0; background: none; cursor: pointer; }
.di2-pager button.is-on { background: var(--text); color: var(--surface); }
.di2-pager button:disabled { opacity: .35; cursor: default; }
.di2-pager-gap { color: var(--text-faint); padding: 0 2px; }
.di2-swatch { border: 0; background: none; padding: 0; cursor: pointer; }
.di2-swatch:focus-visible i { outline: 2px solid var(--accent); outline-offset: 3px; }
.di2-catopt { font: inherit; font-size: 13px; text-align: left; }
.di2-chopt { cursor: pointer; text-align: left; }
.di2-chopt.is-locked { cursor: default; }
.di2-chopt:focus-visible, .di2-catopt:focus-visible, .di2-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.di2 .di2-switch { cursor: pointer; padding: 0; }
.di2-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.di2-switch:disabled { opacity: .5; cursor: not-allowed; }
.di2-iconbtn:focus-visible, .di2-filter:focus-visible, .di2-datebtn:focus-visible, .di2-menu-item:focus-visible, .di2-chipbtn:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px; }
.di2-iconbtn:disabled, .di2-iconbtn.is-disabled { opacity: .35; cursor: not-allowed; }
.di2-iconbtn.is-busy { opacity: .6; cursor: progress; }
.di2-datebtn.is-open, .di2-filter.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Layers appended to (menus, popovers, dialogs) carry their own resets. */
.di2-layer, .di2-layer *, .di2-layer *::before, .di2-layer *::after { box-sizing: border-box; }
.di2-layer :is(h2, h3, h4, p) { margin: 0; }
.di2-menu { max-width: calc(100vw - 16px); max-height: min(70vh, 520px); overflow-y: auto; }
.di2-menu-item { width: 100%; border: 0; background: none; text-align: left; font-size: 13px; }
.di2-menu-item span { overflow: hidden; text-overflow: ellipsis; }
.di2-menu-item:disabled { opacity: .45; cursor: default; }
.di2-pop { width: min(340px, calc(100vw - 16px)); }
.di2-pop-range .input { min-width: 0; }
.di2-noscroll, .di2-noscroll body { overflow: hidden; }
.di2-dialog.is-wide { max-width: 760px; }
.di2-dialog-head { position: relative; padding-right: 56px; }
.di2-dialog-x { position: absolute; top: 14px; right: 14px; }
.di2-dialog-ico.is-accent { background: var(--accent-soft); color: var(--di2-accent-ink, var(--accent)); }
.di2-dialog-wrap { overflow-y: auto; }
.di2-dlg-stack { display: flex; flex-direction: column; gap: 12px; }
.di2-dlg-stack .di2-label { margin-bottom: 0; }
.di2-layer .di2-label { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.di2-layer .di2-opt { font-weight: 500; color: var(--text-faint); font-size: 12px; }
.di2-layer .di2-help { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }
.di2-layer .di2-dim { color: var(--text-dim); }
.di2-layer .di2-faint { color: var(--text-faint); }
.di2-reason label b { background: none; padding: 0; font-family: inherit; }
.di2-confirm .input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.di2-bulklist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.di2-bulklist li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.di2-bulklist li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.di2-victim-bulk { grid-template-columns: minmax(0, 1fr); }
.di2-victim .di2-thumb img, .di2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kicker suffix for a post whose category was archived (BUILD decision 3). */
.di2-kicker-arch { font-size: 11px; font-weight: 600; color: var(--text-faint); padding: 1px 7px; border-radius: 999px;
background: var(--surface-3); white-space: nowrap; }
/* Real pictures where B drew illustrations. */
.di2-hero-media > img, .di2-card-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.di2-hero-media > img { position: absolute; inset: 0; }
.di2-card-media { overflow: hidden; }
.di2-hero-media.is-broken, .di2-card-media.is-broken, .di2-thumb.is-broken { background: var(--cat-soft); }
.di2-card-title a, .di2-hero-title a { color: inherit; }
.di2-card-title a:hover, .di2-hero-title a:hover { text-decoration: underline; text-decoration-color: var(--cat-line); text-underline-offset: 3px; }
.di2-card-title a:focus-visible, .di2-hero-title a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.di2-card, .di2-hero { cursor: pointer; }
.di2-card-stats .di2-meter { min-width: 74px; }
.di2-leadrow.is-single { grid-template-columns: minmax(0, 1fr); }
.di2-leadrow + .di2-shead, .di2-leadrow + .di2-more { margin-top: 32px; }
.di2-hero-admin .di2-push .btn { white-space: nowrap; }
/* Loading skeletons in the shape of the page that is coming. */
.di2-skel { display: block; }
.di2-skel-bar, .di2-skel-media, .di2-skel-input {
display: block; background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
background-size: 200% 100%; animation: di2-shimmer 1.4s ease-in-out infinite; border-radius: 999px; height: 12px;
}
.di2-skel-bar.is-thin { height: 9px; } .di2-skel-bar.is-strong { height: 15px; } .di2-skel-bar.is-title { height: 26px; border-radius: 8px; }
.di2-skel-media { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.di2-skel-input { height: 40px; border-radius: 10px; }
.di2-skel-col { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.di2-skel-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 28px; padding: 18px;
border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin-bottom: 28px; }
.di2-skel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.di2-skel-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--border);
border-radius: var(--radius-md); background: var(--surface); }
.di2-skel-article { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 8px auto 0; }
.di2-skel-table { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.di2-skel-trow { display: grid; grid-template-columns: 3fr 1.2fr 1fr 1fr; gap: 18px; padding: 16px; border-top: 1px solid var(--border); }
.di2-skel-trow:first-child { border-top: 0; }
@keyframes di2-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .di2-skel-bar, .di2-skel-media, .di2-skel-input { animation: none; } }
/* States */
.di2-empty-error .di2-empty-art { background: var(--danger-soft); color: var(--danger); }
.di2-empty.is-compact { padding: 32px 20px; }
.di2-empty + .di2-shead { margin-top: 28px; }
.di2-empty-actions .btn .di2-i { margin-left: 0; }
/* Admin head */
.di2-admin-head { display: block; }
.di2-tabs-end { margin-left: auto; display: flex; align-items: center; padding-left: 16px; white-space: nowrap; }
.di2-tab .di2-i { color: var(--text-faint); }
.di2-tab.is-active .di2-i { color: var(--text); }
.di2-filter { position: relative; }
.di2-filter-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; border-radius: 50%; cursor: pointer; }
.di2-filter-x:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.di2-toolbar .di2-toggle-group { flex-wrap: wrap; }
.di2-tbl-scroll { overflow-x: auto; }
.di2-tbl-posts .di2-td-post { min-width: 280px; }
.di2-tbl-posts tbody tr { cursor: pointer; }
.di2-post-cell-title { color: var(--text); }
.di2-post-cell-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.di2-post-cell-sub span { display: inline-flex; align-items: center; gap: 4px; }
.di2-rowacts .di2-row-del { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.di2-tbl tr:hover .di2-row-del, .di2-tbl tr:focus-within .di2-row-del, .di2-tbl tr.is-selected .di2-row-del { opacity: 1; }
@media (hover: none) { .di2-rowacts .di2-row-del { opacity: 1; } }
.di2-pagesize { font-size: 12.5px; }
.di2-bulk input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
/* Editor */
.di2-ab-sub .di2-pill-sub { display: none; }
.di2-catauto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-md);
border: 1px solid var(--cat-line); background: var(--cat-wash); font-size: 13.5px; }
.di2-catauto b { font-weight: 650; color: var(--text); }
.di2-catauto .di2-faint { font-size: 12.5px; }
.di2-catpick-tpl { background: transparent; border: 0; padding: 0; }
.di2-builder-bar > span:not(.di2-push) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di2-builder-host { background: var(--surface); padding: 12px; min-width: 0; }
.di2-builder-host > .di-compose, .di2-builder-host > .kb-editor-host { margin: 0; }
.di2-storesum .di2-i { color: var(--text-faint); }
.di2-regions:empty, .di2-regions[hidden] { display: none; }
.di2-regionchip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; background: var(--surface-3);
color: var(--text-dim); white-space: nowrap; cursor: pointer; }
.di2-regionchip.is-on { background: var(--accent-soft); color: var(--di2-accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.di2-regionchip.is-part { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.di2-regionchip.is-out { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-faint); }
.di2-storepick { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); padding: 10px; }
.di2-storepick[hidden] { display: none; }
.di2-storepick-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.di2-storepick-bar .di2-search { flex: 1 1 220px; width: auto; }
.di2 .di2-storepick-bar .di2-search .input { height: 34px; }
.di2-storegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; max-height: 280px; overflow-y: auto;
padding: 2px; border-radius: 8px; }
.di2-storegrid.di-is-bad { box-shadow: 0 0 0 2px var(--danger); }
.di2-storeopt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; font-size: 13px; cursor: pointer; min-width: 0; }
.di2-storeopt:hover { background: var(--surface-hover); }
.di2-storeopt input { accent-color: var(--accent); margin: 0; flex: none; }
.di2-storeopt span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di2-storeopt .di2-mono { color: var(--text-faint); }
.di2-titles { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.di2-titles[hidden] { display: none; }
.di2-emails { cursor: text; }
.di2-emailchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 3px 4px 3px 10px; border-radius: 999px;
background: var(--surface-3); color: var(--text); max-width: 100%; overflow-wrap: anywhere; }
.di2-emailchip button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--text-faint);
display: inline-grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.di2-emailchip button:hover { background: var(--surface-hover); color: var(--text); }
.di2-emailchip .di2-i { width: 12px; height: 12px; }
.di2-emails-in { flex: 1 1 200px; min-width: 120px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; padding: 4px; }
.di2-dls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12.5px; }
.di2-optrows .di2-optrow:first-child { border-top: 0; padding-top: 0; }
.di2-optrow.is-first { border-top: 0; padding-top: 0; }
.di2-outcome { line-height: 1.5; }
.di2-subject { margin-top: 14px; }
.di2-subject[hidden] { display: none; }
.di2-step-n .di2-i { width: 14px; height: 14px; stroke-width: 2.4; }
.di2-step .di2-step-head .btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--di2-accent-ink); }
.di2-pv-frame { width: 100%; height: 440px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-solid); display: block; }
.di2-pv-note[hidden] { display: none; }
.di2-pv-count { font-size: 12px; }
.di2-card.is-nocat .di2-card-band { background: repeating-linear-gradient(90deg, var(--danger) 0 8px, transparent 8px 14px); }
.di2-pv-stage .di2-card { cursor: default; }
.di2-reach { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.di2-pubpreview { display: flex; flex-direction: column; gap: 12px; }
.di2-pubpreview h4 { margin: 4px 0 2px; font-size: 13px; }
.di2-pubpreview ul { margin: 4px 0 0 18px; padding: 0; }
.di2-pub-cat { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); }
.di2-pub-cat b { font-size: 14px; line-height: 1.4; }
/* Post */
.di2-post .di2-crumbs .di2-push { align-items: center; }
.di2-prose { max-width: none; }
.di2-prose > :first-child { margin-top: 0; }
.di2-prose a:not(.btn):not(.di2-iconbtn):not(.di2-file) { color: var(--di2-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.di2-prose h2 { border-bottom: 0; padding-bottom: 0; }
.di2-prose img { border-radius: var(--radius-md); }
.di2-prose table:not([role="presentation"]) { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; margin: 18px 0 8px;
border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; display: block; overflow-x: auto; }
.di2-prose table:not([role="presentation"]) th { background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-dim);
text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); }
.di2-prose table:not([role="presentation"]) td { padding: 11px 14px; border: 0; border-top: 1px solid var(--border); }
.di2-prose blockquote { background: var(--info-soft); border-left-color: var(--info); color: var(--text); }
.di2-prose .di2-file, .di2-prose .di-filecard-wrap { margin: 10px 0; }
/* The body as a document (article.js rewrites the stored email; nothing of its inline style reaches here).
B's .di2-prose sets the reading size; these are the parts B's mock-up had no email-made example of. */
.di2-post .di2-art-head { margin-bottom: 28px; }
.di2-article > :last-child { margin-bottom: 0; }
.di2-article img { max-width: 100%; height: auto; }
.di2-article .di2-lead { font-size: 18px; line-height: 1.6; color: var(--text-dim); margin: 0 0 1.1em; text-wrap: pretty; }
.di2-article .di2-lead::first-letter { font-weight: inherit; }
.di2-article .di2-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cat-ink); margin: 0 0 .5em; }
.di2-article.is-brief { font-size: 18px; line-height: 1.65; }
.di2-article.is-brief p { margin-bottom: .8em; }
.di2-article hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }
.di2-article .di2-figure { margin: 28px 0; }
.di2-article > .di2-figure:first-child { margin-top: 0; }
.di2-figure.is-photo .di2-figure-media { aspect-ratio: auto; background: var(--surface-2); }
.di2-figure.is-photo .di2-figure-media > a { display: block; }
.di2-figure.is-photo .di2-figure-media img { display: block; width: 100%; max-width: 100%; height: auto; border: 0; border-radius: 0; }
/* The figure under the byline (B 03), always there: the body's opening picture moved up (post.js), or the
category's illustration — artFallback, the drawing the feed's hero card uses for a post without a picture. */
.di2-post .di2-art-hero { margin: 0 0 28px; }
.di2-art-hero.is-art .di2-figure-media { aspect-ratio: 16 / 7.5; }
.di2-art-hero.is-photo .di2-figure-media { display: flex; align-items: center; justify-content: center; width: auto; background: var(--cat-soft); }
.di2-art-hero.is-photo .di2-figure-media > a { display: flex; justify-content: center; }
.di2-art-hero.is-photo .di2-figure-media img { width: auto; max-width: 100%; max-height: 440px; height: auto; }
.di2-art-hero.is-photo.is-narrow .di2-figure-media { width: auto; padding: 24px; }
/* A picture much narrower than the column is shown at its own size, not stretched (article.js marks it). */
.di2-figure.is-photo.is-narrow .di2-figure-media { width: fit-content; max-width: 100%; }
.di2-figure.is-photo.is-narrow .di2-figure-media img { width: auto; }
.di2-article .di2-img-small { margin: 0 0 1.05em; }
.di2-article .di2-img-small img { display: inline-block; vertical-align: middle; border-radius: 4px; }
.di2-article .di2-cta-row { margin: 24px 0; }
.di2-article a.btn.di2-cta { gap: 8px; text-decoration: none; }
.di2-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 0 0 1.05em; }
.di2-cols > div > :last-child { margin-bottom: 0; }
.di2-article .di2-callout > div > :last-child { margin-bottom: 0; }
.di2-article .di2-callout p { margin: 0 0 .5em; }
.di2-ptable td > :last-child, .di2-ptable th > :last-child { margin-bottom: 0; }
.di2-ptable .di2-file { margin: 0; }
.di2-kvtable th { width: 34%; text-align: left; vertical-align: top; white-space: normal; background: transparent;
font-size: 13px; font-weight: 500; color: var(--text-dim); padding: 11px 14px; border-bottom: 0; border-top: 1px solid var(--border); }
.di2-kvtable tr:first-child th { border-top: 0; }
.di2-delta.is-up { background: var(--warn-soft); color: var(--warn); }
/* A file inside a table cell (the list template's file column): one compact chip that is the link. */
.di2-file.is-compact { display: inline-flex; max-width: 100%; padding: 6px 10px 6px 6px; gap: 8px; border-radius: var(--radius-sm);
text-decoration: none; color: var(--text); }
a.di2-file.is-compact:hover { border-color: var(--cat-line, var(--border-strong)); background: var(--cat-wash, var(--surface-2)); }
.di2-file.is-compact .di2-file-ico { width: 24px; height: 30px; font-size: 7.5px; padding-bottom: 3px; border-radius: 4px; }
.di2-file.is-compact { min-width: 170px; }
.di2-file.is-compact .di2-file-meta { min-width: 0; }
.di2-file.is-compact .di2-file-meta b { font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di2-file.is-compact .di2-file-meta span { font-size: 11.5px; display: block; line-height: 1.3; }
.di2-prose a.di2-file .di2-file-meta span { color: var(--text-faint); }
.di2-article .di2-table-wrap { margin: 20px 0 1.3em; }
@media (max-width: 600px) {
.di2-post .di2-art-hero { margin: 0 -20px 20px; }
.di2-art-hero.is-art .di2-figure-media { aspect-ratio: 16 / 7; }
.di2-art-hero.is-photo .di2-figure-media img { max-height: 320px; }
}
@media print { .di2-art-hero.is-art { display: none !important; } }
@media (max-width: 640px) {
/* The list template's entries: one card per entry, each value under its label. */
.di2-article .di2-table-wrap.is-entries { border: 0; background: transparent; overflow: visible; border-radius: 0; }
.di2-article .di2-table-wrap.is-entries table, .di2-article .di2-table-wrap.is-entries tbody,
.di2-article .di2-table-wrap.is-entries tr, .di2-article .di2-table-wrap.is-entries td { display: block; width: auto; }
.di2-article .di2-table-wrap.is-entries thead { display: none; }
.di2-article .di2-table-wrap.is-entries tr { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 4px 14px; margin-bottom: 10px; }
.di2-article .di2-table-wrap.is-entries td { border: 0; padding: 8px 0; text-align: left; white-space: normal; }
.di2-article .di2-table-wrap.is-entries td + td { border-top: 1px solid var(--border); }
.di2-article .di2-table-wrap.is-entries td::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 2px; }
.di2-article .di2-table-wrap.is-entries td:empty { display: none; }
.di2-article .di2-table-wrap.is-entries .di2-file.is-compact { display: flex; min-width: 0; }
.di2-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
.di2-cols > div + div { margin-top: 1.05em; }
.di2-article .di2-lead { font-size: 17px; }
.di2-article.is-brief { font-size: 17px; }
}
.di2-gallery { margin-top: 8px; }
.di2-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.di2-gallery-grid a { display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); aspect-ratio: 4 / 3; }
.di2-gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.di2-file-ico.is-img { background: var(--accent-soft); color: var(--di2-accent-ink); border-color: color-mix(in srgb, var(--accent) 20%, var(--border)); }
.di2-file-ico.is-slides { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 20%, var(--border)); }
.di2-file-ico.is-zip, .di2-file-ico.is-other { background: var(--surface-3); color: var(--text-dim); border-color: var(--border); }
.di2-file-ico .di2-i { width: 16px; height: 16px; margin-bottom: 4px; }
.di2-file-acts a.di2-iconbtn { color: var(--text-dim); }
.di2-ackbox .btn { white-space: nowrap; }
.di2-ackbox div b { font-weight: 650; }
.di2-ackbox.is-done { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 25%, var(--border)); }
.di2-ackbox.is-done > .di2-i { color: var(--success); }
.di2-pn a.is-off small, .di2-pn a.is-off b { color: var(--text-faint); }
.di2-toc li { cursor: pointer; }
.di2-toc li:hover { color: var(--text); }
.di2-toc li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.di2-rail-box[hidden] { display: none; }
.di2-rail-all { margin-top: 12px; }
.di2-kv dd .di2-catpill { white-space: normal; }
/* Delivery */
.di2-count.is-danger { background: var(--danger-soft); color: var(--danger); }
.di2-srow .r.is-bad { color: var(--danger); font-weight: 600; }
.di2-srow-3 { grid-template-columns: minmax(0, 1fr) 90px 120px; }
.di2-dsplit.is-single { grid-template-columns: minmax(0, 1fr); }
.di2-panel-log { margin-top: 18px; }
.di2-people-empty { padding: 20px 16px; font-size: 13px; color: var(--text-faint); }
.di2-subtabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; }
.di2-search.di2-search-sm { width: auto; flex: 1 1 160px; }
.di2 .di2-search-sm .input { height: 32px; font-size: 13px; }
.di2-dstatus { font-size: 12.5px; color: var(--text-dim); }
.di2-dstatus.is-sent { color: var(--success); }
.di2-panel-foot .di2-link { font-size: 12.5px; }
.di2-tbl-log td { vertical-align: top; }
.di2-tbl-log td:first-child { overflow-wrap: anywhere; }
/* Categories */
.di2-cl-strip { margin-bottom: 16px; }
.di2-cl-strip .di2-sections { padding: 0 8px; }
.di2-cl-row.is-editing { box-shadow: inset 3px 0 0 var(--cat-solid); background: var(--cat-wash); }
.di2-grip { border: 0; background: none; color: var(--text-faint); cursor: grab; width: 20px; height: 28px; border-radius: 6px; }
.di2-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text); }
.di2-cl-row[draggable="true"] { cursor: grabbing; }
.di2-cl-row .di2-rowacts { align-items: center; }
.di2-only-touch { display: none; }
@media (hover: none), (max-width: 700px) { .di2-only-touch { display: inline-grid; } }
.di2-catlayout.is-editing { align-items: start; }
.di2-cat-dock:empty { display: none; }
.di2-catlayout:not(.is-editing) { grid-template-columns: minmax(0, 1fr); }
.di2-dock-pos { font-size: 12px; }
.di2-dock .di2-err { margin-top: 0; }
.di2-dock .di2-err[hidden] { display: none; }
.di2-dock .input.di-is-bad, .di2 .input.di-is-bad { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
/* Templates */
.di2-kindcard { cursor: pointer; text-align: left; color: inherit; width: 100%; }
.di2-kindcard:hover { border-color: var(--accent); border-style: solid; }
.di2-kindcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.di2-tpl { cursor: pointer; }
.di2-tpl:hover { border-color: var(--border-hover); }
.di2-tpl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.di2-tpl.is-archived .di2-tpl-prev { filter: saturate(.3); opacity: .75; }
.di2-tpl.is-blank .di2-tpl-prev { background: var(--surface-2); }
.di2-tpl-body h3 a { color: inherit; }
.di2-tpl-count { font-size: 12px; }
.di2-tpl-key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di2-tpl-head ~ * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.di2-tpl-head { padding-bottom: 0; }
.di2-tpl-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1.2rem; }
/* Settings */
.di2-sel { font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; width: 100%; }
.di2-sel:hover { border-color: var(--border-hover); }
.di2-sel .di2-tile { width: 22px; height: 22px; }
.di2-sel.is-static { cursor: default; background: var(--surface-2); border-style: dashed; color: var(--text-dim); }
.di2-health.is-off { background: var(--surface-2); }
.di2-health.is-off .di2-i { color: var(--text-faint); }
.di2-health.is-warn { background: var(--warn-soft); }
.di2-health.is-warn .di2-i { color: var(--warn); }
.di2-sec-card-head-only { padding-bottom: 18px; }
.di2-set-main { min-width: 0; }
.di2-log[hidden] { display: none; }
.di2-log .di2-errcode { white-space: normal; overflow-wrap: anywhere; }
.di2-setnav a { text-decoration: none; }
/* Print a post: the article, not the app. */
@media print {
body:has(.di2-read) .sidebar, body:has(.di2-read) .topbar, body:has(.di2-read) .di2-rail,
body:has(.di2-read) .di2-crumbs, body:has(.di2-read) .di2-ackbar, body:has(.di2-read) .di2-pn,
body:has(.di2-read) .di2-readstate, body:has(.di2-read) .di2-file-acts { display: none !important; }
body:has(.di2-read) .layout { display: block; }
body:has(.di2-read) .di2-read { display: block; }
}
/* ---- Phone and narrow screens (B drew the reader at 390 px; the HQ pages follow the same rules) -- */
@media (max-width: 1000px) {
.di2-skel-hero { grid-template-columns: 1fr; }
.di2-skel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.di2-tabs-end { display: none; }
.di2-ph-actions { width: 100%; }
.di2-toolbar .di2-search { width: 100%; flex: 1 1 100%; }
.di2-toolbar .di2-push { margin-left: 0; }
/* The CMS table becomes one card per announcement. */
.di2-tbl-posts, .di2-tbl-posts tbody, .di2-tbl-posts tr, .di2-tbl-posts td { display: block; width: 100%; }
.di2-tbl-posts thead { display: none; }
.di2-tbl-posts tr { position: relative; padding: 12px 12px 10px 44px; border-bottom: 1px solid var(--border); }
.di2-tbl-posts tr:last-child { border-bottom: 0; }
.di2-tbl-posts td { padding: 0; border: 0; }
.di2-tbl-posts td.cb { position: absolute; left: 14px; top: 16px; width: auto; }
.di2-tbl-posts .di2-td-post { min-width: 0; margin-bottom: 8px; }
.di2-tbl-posts .di2-td-status, .di2-tbl-posts .di2-td-aud, .di2-tbl-posts .di2-td-chan, .di2-tbl-posts .di2-td-read {
display: inline-flex; vertical-align: top; margin: 0 14px 6px 0; width: auto; }
.di2-tbl-posts .di2-td-status > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.di2-tbl-posts .di2-pill-sub { margin-top: 0; }
.di2-tbl-posts .di2-td-acts { position: absolute; right: 8px; top: 8px; width: auto; }
.di2-tbl-posts .di2-post-cell { padding-right: 76px; }
.di2-tbl-posts .di2-rowacts .di2-row-del { display: none; }
.di2-tfoot { justify-content: center; }
.di2-catlayout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
.di2-cl-row { grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
.di2-cl-row.is-head { display: none; }
.di2-cl-row .di2-cl-count { grid-column: 3 / 4; grid-row: 2; }
.di2-cl-row .di2-rowacts { grid-column: 4; grid-row: 1 / span 2; flex-wrap: wrap; justify-content: flex-end; max-width: 72px; }
.di2-cl-row.is-archived { grid-template-columns: 22px 40px minmax(0, 1fr) auto; }
.di2-cl-row.is-archived .di2-rowacts { max-width: none; }
.di2-cl-name p { white-space: normal; }
.di2-icons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.di2-dhead { grid-template-columns: 64px minmax(0, 1fr); }
.di2-dhead .di2-thumb { width: 64px; height: 64px; }
.di2-dhead .di2-ph-actions { grid-column: 1 / -1; }
.di2-dhead h1 { font-size: 19px; }
.di2-srow { grid-template-columns: minmax(0, 1fr) 96px 56px; }
.di2-srow > :nth-child(4) { display: none; }
.di2-srow-3 { grid-template-columns: minmax(0, 1fr) 70px 96px; }
.di2-inbox-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
.di2-inbox-row > span { grid-column: 1 / -1; white-space: normal; }
.di2-perm { flex-direction: column; align-items: flex-start; gap: 4px; }
.di2-perm b { min-width: 0; }
.di2-testrow { flex-wrap: wrap; }
.di2-testrow .btn { width: 100%; justify-content: center; }
.di2-log div { grid-template-columns: 20px minmax(0, 1fr); }
.di2-log div > span { grid-column: 2; }
}
@media (max-width: 600px) {
.di2-skel-grid { grid-template-columns: 1fr; }
.di2-actionbar .di2-push { margin-left: 0; width: 100%; }
.di2-actionbar .di2-push .btn-ghost { display: none; }
.di2-actionbar .di2-push .btn-primary { flex: 1; justify-content: center; }
.di2-blocker .btn { margin-left: 0; }
.di2-step { padding: 16px 14px 18px; }
.di2-step-head { flex-wrap: wrap; }
.di2-step-head .di2-push { margin-left: 38px; }
.di2-label { flex-wrap: wrap; }
.di2-label .di2-push { margin-left: 0; width: 100%; }
.di2-chopts, .di2-when, .di2-row2, .di2-kinds { grid-template-columns: 1fr; }
.di2-catopt span { white-space: normal; }
.di2-tplline { flex-wrap: wrap; }
.di2-tplline .btn { margin-left: 0; }
.di2-tplline-note { white-space: normal; }
.di2-builder-host { padding: 6px; }
.di2-storegrid { grid-template-columns: 1fr; }
.di2-kpis { grid-template-columns: 1fr; }
.di2-kpi-val { font-size: 26px; }
.di2-panel-head .di2-push { margin-left: 0; width: 100%; }
.di2-panel-head .di2-toggle-group { flex-wrap: wrap; }
.di2-person { flex-wrap: wrap; }
.di2-person .di2-tag { margin-left: 38px; white-space: normal; }
.di2-dialog-wrap { padding: 10px; place-items: end center; }
.di2-dialog { max-height: calc(100vh - 20px); border-radius: var(--radius-lg); }
.di2-dialog-head { padding: 16px 52px 4px 16px; }
.di2-dialog-body { padding: 12px 16px 16px; }
.di2-dialog-foot { padding: 12px 16px; flex-wrap: wrap; }
.di2-dialog-foot .di2-push { margin-left: 0; width: 100%; }
.di2-dialog-foot .di2-push .btn { flex: 1; justify-content: center; }
.di2-victim { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
.di2-victim .di2-thumb { width: 48px; height: 48px; }
.di2-victim-nums div b { font-size: 16px; }
.di2-ph h1 { font-size: 24px; }
.di2-ph-actions .btn { flex: 1 1 auto; justify-content: center; }
.di2-sec-card-head, .di2-sec-card-body { padding-left: 16px; padding-right: 16px; }
.di2-sec-card-foot { padding: 12px 16px; flex-wrap: wrap; }
.di2-sec-card-foot .di2-pushl { width: 100%; }
.di2-subbar .di2-push { display: none; }
.di2-hqstrip { gap: 10px 14px; }
.di2-hqstrip .di2-push { display: none; }
.di2-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.di2-pv-frame { height: 380px; }
}
/* Card heads wrap rather than clip when a long category name meets several flags. */
.di2-card-top { flex-wrap: wrap; row-gap: 6px; }
.di2-card-top .di2-kicker { min-width: 0; white-space: normal; }
.di2-hero-top .di2-kicker { white-space: normal; }
/* [hidden] must win over the display of every di2 component. */
.di2 [hidden], .di2-layer [hidden], .di2[hidden] { display: none !important; }
/* An unticked channel shows an empty box (B 05), not a faint tick. */
.di2-chopt:not(.is-on) .di2-check .di2-i { visibility: hidden; }
/* The optional reason is ordinary text, not the typed confirmation word. */
.di2-confirm.di2-reason .input { font-family: inherit; letter-spacing: normal; border-color: var(--border-strong); }
.di2-confirm.di2-reason .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.di2-toolbar .di2-search { flex: 0 1 230px; min-width: 180px; }
.di2-prose .di2-table-wrap { margin: 18px 0 8px; }
.di2-prose .di2-table-wrap .di2-ptable { margin: 0; border: 0; border-radius: 0; display: table; }
@media (max-width: 600px) {
.di2-pn a.is-off { display: none; }
.di2-rail .di2-rail-box:has(.di2-toc) { display: none; }
}
.di2-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; }
.di2-toolbar > .di2-filters { flex: 1 1 0; min-width: 260px; }
@media (max-width: 760px) {
.di2-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px 2px; }
.di2-filters::-webkit-scrollbar { display: none; }
.di2-filters .di2-filter { flex: none; }
.di2-tbl-posts .di2-post-cell .di2-thumb { display: none; }
.di2-tbl-posts .di2-post-cell { padding-right: 64px; }
}
@media (max-width: 700px) {
.di2-cl-row, .di2-cl-row.is-archived { grid-template-columns: 22px 40px minmax(0, 1fr); grid-template-areas: "grip tile name" ". . count" ". . acts"; row-gap: 8px; }
.di2-cl-row > .di2-grip { grid-area: grip; }
.di2-cl-row > .di2-tile-lg { grid-area: tile; }
.di2-cl-row > .di2-cl-name { grid-area: name; }
.di2-cl-row > .di2-cl-count { grid-area: count; grid-column: auto; grid-row: auto; }
.di2-cl-row > .di2-rowacts { grid-area: acts; grid-column: auto; grid-row: auto; max-width: none; justify-content: flex-start; flex-wrap: nowrap; }
.di2-cl-count b, .di2-cl-count span { display: inline; }
.di2-cl-count span::before { content: " · "; }
}
@media (max-width: 600px) {
.di2-person > div { flex: 1 1 calc(100% - 44px); }
.di2-person .di2-tag { margin-left: 38px; }
}
/* Inside the builder frame the template's fields read one per line (label beside control when wide). */
.di2-builder-host .di-fieldset { grid-template-columns: minmax(0, 1fr); }
/* Editor: the card summary (one paragraph, counted). */
.di2-editor .di2-summary-in { width: 100%; min-height: 64px; resize: vertical; line-height: 1.5; font: inherit; font-size: 14px; }
.di2-editor .di2-label .di2-num.is-near { color: var(--warn); font-weight: 650; }
/* The section strip: «Όλα» pinned at the start; ‹ › on the side that has more, with a fade there. */
.di2-sections-wrap { position: relative; }
.di2-sections { position: relative; }
.di2-sections > .di2-sec.di2-call { position: sticky; left: 0; z-index: 2; background: var(--bg);
box-shadow: -12px 0 0 var(--bg); } /* also covers the strip's own padding on the left */
.di2-sections.is-scrolled > .di2-sec.di2-call { box-shadow: -12px 0 0 var(--bg), 10px 0 12px -10px color-mix(in srgb, var(--text) 40%, transparent); }
@media (max-width: 600px) {
/* B moves the strip to the screen's edges on a phone: the wrapper does it now, so ‹ › line up with it. */
.di2-sections-wrap { margin: 0 -12px 16px; }
.di2-sections-wrap > .di2-sections { margin: 0; }
}
.di2-sec-more {
position: absolute; top: 2px; bottom: 1px; z-index: 3; width: 34px; padding: 0; border: 0; cursor: pointer;
display: grid; place-items: center; color: var(--text-dim); background: var(--bg);
}
.di2-sec-more[hidden] { display: none; }
.di2-sec-more:hover { color: var(--text); }
.di2-sec-more .di2-i { width: 16px; height: 16px; }
.di2-sec-more.is-fwd { right: 0; box-shadow: -14px 0 14px -2px var(--bg); }
.di2-sec-more.is-back { left: var(--di2-pin-w, 64px); box-shadow: 14px 0 14px -2px var(--bg); }
/* =====================================================================================================
The announcement page (7.59): the article on a "paper" with a band tinted by the category, a faint wash
of that colour behind the top of the page, the rail as cards, the read state and prev/next as cards.
Tokens only; the category colour comes from the page's .di2-cN slot (--cat and its mixes).
===================================================================================================== */
.di2-post { position: relative; isolation: isolate; }
.di2-post::before {
content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -1.25rem; height: 560px; pointer-events: none;
background: radial-gradient(ellipse 48% 78% at 40% 22%, color-mix(in srgb, var(--cat) 16%, transparent), transparent 70%);
/* no hard edge at the top either: the wash fades in under the top bar */
-webkit-mask-image: linear-gradient(180deg, transparent 0, var(--text) 90px);
mask-image: linear-gradient(180deg, transparent 0, var(--text) 90px);
}
.di2-post .di2-read { grid-template-columns: minmax(0, 760px) 316px; gap: 32px; }
.di2-read-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.di2-paper {
background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
padding: 0 40px 36px; box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0;
}
[data-theme="light"] .di2-paper { box-shadow: var(--shadow-md); }
.di2-paper > .di2-art-head {
margin: 0 -40px 28px; padding: 30px 40px 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 17%, var(--surface)) 0%,
color-mix(in srgb, var(--cat) 7%, var(--surface)) 58%, var(--surface) 100%);
border-bottom: 1px solid color-mix(in srgb, var(--cat) 20%, var(--border));
}
.di2-paper > .di2-art-head .di2-art-title { margin-top: 18px; }
.di2-paper > .di2-art-head .di2-art-meta { border-bottom: 0; padding-bottom: 18px;
border-top-color: color-mix(in srgb, var(--cat) 18%, var(--border)); }
.di2-paper > .di2-art-head .di2-av-lg { background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 22%, transparent); }
.di2-paper .di2-readstate { margin-top: 32px; background: color-mix(in srgb, var(--success) 7%, var(--surface));
border-color: color-mix(in srgb, var(--success) 24%, var(--border)); }
.di2-paper .di2-readstate .di2-ok { box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent); }
.di2-paper .di2-ackbox { box-shadow: 0 1px 0 color-mix(in srgb, var(--warn) 12%, transparent); }
.di2-paper .di2-ackbox .di2-i { flex: none; }
/* prev/next: cards with the category's accent */
.di2-read-main > .di2-pn { margin-top: 0; }
.di2-pn a { position: relative; overflow: hidden; border-radius: 14px; padding-top: 18px;
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
[data-theme="light"] .di2-pn a { box-shadow: var(--shadow-sm); }
.di2-pn a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cat); }
.di2-pn a.is-off::before { background: var(--border-strong); }
.di2-pn a:not(.is-off):hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* the rail: cards */
.di2-post .di2-rail { gap: 16px; }
.di2-rcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
[data-theme="light"] .di2-rcard { box-shadow: var(--shadow-sm); }
.di2-rcard[hidden] { display: none; }
.di2-rcard-head {
display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 16px;
font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--text);
border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--cat) 5%, var(--surface));
}
.di2-rcard-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none;
background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.di2-rcard-ico.is-cat { background: var(--cat-soft); color: var(--cat-ink); border-color: var(--cat-line); }
.di2-rcard-ico .di2-i { width: 15px; height: 15px; }
.di2-rcard-body { padding: 14px 16px 16px; }
.di2-rcard .di2-toc li { cursor: pointer; border-radius: 0 6px 6px 0; transition: background var(--dur-fast) var(--ease); }
.di2-rcard .di2-toc li:hover { background: var(--cat-wash); color: var(--text); }
.di2-kv-rich { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.di2-kv-rich dt { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 12.5px; }
.di2-kv-rich dt .di2-i { color: var(--text-faint); width: 14px; height: 14px; }
.di2-kv-rich dd { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; min-width: 0; }
.di2-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text); }
.di2-chip .di2-i { width: 13px; height: 13px; color: var(--text-dim); }
.di2-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.di2-minis { display: flex; flex-direction: column; gap: 4px; }
.di2-mini-card { display: flex; gap: 10px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 10px; color: var(--text);
transition: background var(--dur-fast) var(--ease); }
.di2-mini-card:hover { background: var(--cat-wash); }
.di2-mini-card:hover b { color: var(--cat-ink); }
.di2-mini-thumb { width: 66px; height: 46px; border-radius: 8px; overflow: hidden; flex: none; background: var(--cat-soft); border: 1px solid var(--border); }
.di2-mini-thumb > img, .di2-mini-thumb > .di2-art { width: 100%; height: 100%; display: block; object-fit: cover; }
.di2-mini-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.di2-mini-text b { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.di2-mini-text small { font-size: 11.5px; color: var(--text-faint); }
.di2-rcard-btn { display: flex; width: 100%; justify-content: center; gap: 6px; margin-top: 12px; }
/* desktop: the rail stays in view. The shell's .main scrolls sideways (overflow-x:auto), which makes it the
rail's scroll box and stops position:sticky; on this page it clips instead (no sideways scroll either way). */
@media (min-width: 1181px) {
body:has(.di2-post .di2-read) .main { overflow-x: clip; }
body:has(.di2-post .di2-read) .app-topbar { position: relative; }
.di2-post .di2-rail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin;
padding: 1px 3px 6px; margin: -1px -3px 0; }
}
@media (max-width: 1180px) {
.di2-post .di2-read { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.di2-post .di2-rail { gap: 16px; align-items: start; }
}
@media (max-width: 600px) {
.di2-paper { padding: 0 20px 22px; border-radius: 14px; }
.di2-paper .di2-readstate > div, .di2-paper .di2-ackbox div { min-width: 0; }
.di2-paper .di2-art-meta .di2-push { flex-wrap: wrap; gap: 4px 14px; }
.di2-paper > .di2-art-head { margin: 0 -20px 20px; padding: 20px 20px 0; }
.di2-paper > .di2-art-head .di2-art-title { margin-top: 12px; }
.di2-paper .di2-figure { margin-left: -20px; margin-right: -20px; }
.di2-post .di2-art-hero .di2-figure-media { border-radius: 0; border-left: 0; border-right: 0; }
.di2-post::before { height: 360px; }
}
@media print {
.di2-post::before { display: none; }
.di2-paper { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.di2-paper > .di2-art-head { margin: 0 0 16px; padding: 0; background: none; border: 0; }
}
/* The same treatment where the module shows the same patterns elsewhere. */
.di2-leadcol > .di2-card { flex: 1 0 auto; } /* a side card grows with its text, never clips it */
.di2-cathead { background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 15%, var(--surface)) 0%,
color-mix(in srgb, var(--cat) 5%, var(--surface)) 70%); }
[data-theme="light"] .di2-cathead { box-shadow: var(--shadow-sm); }
.di2-pv-head { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.di2-pv-head h3 > .di2-i { box-sizing: border-box; width: 26px; height: 26px; padding: 5px; border-radius: 8px;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
.di2-dhead { padding: 18px 20px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--cat) 20%, var(--border));
background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 13%, var(--surface)) 0%, var(--surface) 72%); }
[data-theme="light"] .di2-dhead { box-shadow: var(--shadow-sm); }
@media (max-width: 600px) { .di2-dhead { padding: 14px; border-radius: 14px; } }
/* Outlook recall (recall.js): the dialog options, the delivery report, the Settings card. */
.di2-rc-opts { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md);
border: 1px solid var(--border); background: var(--surface-2); }
.di2-rc-opts.is-unavailable { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 24%, var(--border)); }
.di2-rc-opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.di2-rc-opt input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.di2-rc-opt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.di2-rc-opt small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.di2-rc-opt.is-off { cursor: not-allowed; opacity: .55; }
.di2-rc-honest, .di2-rc-off { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.di2-rc-honest .di2-i, .di2-rc-off .di2-i { flex: none; margin-top: 2px; }
.di2-rc-off { color: var(--text); }
.di2-rc-off .di2-i { color: var(--warn); }
.di2-rc-host:empty { display: none; }
.di2-rc-host { margin-bottom: 16px; }
.di2-rc-report .di2-panel-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.di2-rc-report .di2-panel-head p { width: 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); }
.di2-rc-state { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.di2-rc-state.is-run { background: var(--info-soft); color: var(--info); }
.di2-rc-state.is-ok { background: var(--success-soft); color: var(--success); }
.di2-rc-state.is-warn { background: var(--warn-soft); color: var(--warn); }
.di2-rc-state.is-bad { background: var(--danger-soft); color: var(--danger); }
.di2-rc-pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: di2RcPulse 1.2s ease-in-out infinite; }
@keyframes di2RcPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.di2-rc-progress { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; font-size: 12.5px; color: var(--text-dim); }
.di2-rc-progress .di2-track { flex: 1; height: 6px; }
.di2-rc-progress em { font-style: normal; color: var(--info); }
.di2-rc-totals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 0 16px 6px; }
.di2-rc-total { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); min-width: 0; }
.di2-rc-total b { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.di2-rc-total span { font-size: 11.5px; color: var(--text-dim); }
.di2-rc-total.is-ok b { color: var(--success); }
.di2-rc-total.is-bad b { color: var(--danger); }
.di2-rc-total.is-warn b { color: var(--warn); }
.di2-rc-total.is-run b { color: var(--info); }
.di2-rc-chip { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.di2-rc-chip.is-ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.di2-rc-chip.is-bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.di2-rc-chip.is-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.di2-rc-chip.is-run { background: var(--info-soft); color: var(--info); border-color: transparent; }
.di2-rc-steps-title { font-size: 13.5px; font-weight: 700; margin: 16px 0 8px; color: var(--text); }
.di2-rc-steps { margin: 0 0 12px; padding-left: 1.3em; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.di2-rc-steps li { margin: 0 0 8px; }
.di2-rc-code { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border);
font: 12px/1.6 'JetBrains Mono', ui-monospace, monospace; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.di2-rc-ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 25%, var(--border)); }
.di2-rc-ok > .di2-i { color: var(--success); }
.di2-rc-report .di2-toggle-group { flex-wrap: wrap; border-radius: 14px; }
@media (max-width: 900px) { .di2-rc-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.di2-rc-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.di2-rc-progress { flex-direction: column; align-items: stretch; gap: 6px; }
.di2-rc-progress .di2-track { flex: none; width: 100%; }
.di2-rc-report th:nth-child(3), .di2-rc-report td:nth-child(3) { display: none; }
.di2-rc-report td.di2-mono { overflow-wrap: anywhere; }
}
.di2-dhead .di2-ph-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 440px; }
.di2-rc-teams { display: flex; gap: 8px; align-items: center; margin: 4px 16px 6px; font-size: 12.5px; color: var(--text-dim); }
.di2-rc-msg { margin: 0 16px 10px; }
/* The categories editor dock: the same tinted card header as the post rail. */
.di2-dock .di2-drawer-head { background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 9%, var(--surface)), var(--surface)); }
[data-theme="light"] .di2-dock { box-shadow: var(--shadow-md); }
/* ========================= END di2 block (Daily info v2) ========================= */
/* =====================================================================================================================
COFFEE CHATS (module "meetings", FE 7.60.0) — BEGIN mt block.
Ported from the approved mockup (retailops-wip/meetings-mockup/mt.css) + what the real pages need.
Tokens only (no literal colours), prefix .mt-, never .mt- (main.css owns the .mt-1/.mt-2 utilities).
===================================================================================================================== */
.mt { max-width: 1240px; margin: 0 auto; padding: 4px 0 48px; color: var(--text); }
.mt * { box-sizing: border-box; }
.mt .mt-i { flex: none; }
.mt .mono, .mt-drawer .mono, .mt-dialog .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.mt .strong { font-weight: 650; }
.mt-faint { color: var(--text-faint); }
.mt-push { flex: 1 1 auto; }
.mt-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.mt-noscroll { overflow: hidden; }
.mt [hidden], .mt-dialog [hidden], .mt-drawer [hidden] { display: none !important; }
/* crumbs + module nav */
.mt-crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-dim); margin-bottom: 14px; }
.mt-crumbs a { color: var(--text-dim); text-decoration: none; }
.mt-crumbs a:hover { color: var(--text); text-decoration: underline; }
.mt-crumbs b { color: var(--text); font-weight: 600; }
.mt-crumbs-sep { color: var(--text-faint); }
.mt-modnav { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); max-width: 100%; }
.mt-modnav-a { display: inline-flex; gap: 7px; align-items: center; padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-dim); text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.mt-modnav-a:hover { background: var(--surface-2); color: var(--text); }
.mt-modnav-a.on { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); }
/* hero */
.mt-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 28px 32px; margin-bottom: 22px;
background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%, color-mix(in srgb, var(--c-2) 10%, var(--surface)) 55%, var(--surface) 100%);
border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); box-shadow: var(--shadow-sm); }
.mt-hero.is-compact { padding: 22px 28px; }
.mt-hero h1 { margin: 6px 0 6px; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; max-width: calc(100% - 240px); }
.mt-hero.is-compact h1 { font-size: 26px; }
.mt-hero.no-art h1, .mt-hero.no-art p { max-width: 760px; }
.mt-hero p { margin: 0; max-width: 640px; color: var(--text-dim); line-height: 1.55; }
.mt-eyebrow { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.mt-hero-art { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 230px; height: 150px; opacity: .95; pointer-events: none; }
.mt-hero.is-compact .mt-hero-art { width: 200px; height: 130px; right: 24px; }
.mt-hero-art .a { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.mt-hero-art .b { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.mt-hero-art .c { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.mt-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; max-width: calc(100% - 250px); }
.mt-hero.no-art .mt-rules { max-width: none; }
.mt-rule { display: inline-flex; gap: 6px; align-items: center; padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 500;
background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--border); color: var(--text); }
.mt-rule svg { color: var(--accent); }
.mt-hero-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; position: relative; }
/* layout */
.mt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.mt-grid.wide-side { grid-template-columns: minmax(0, 1fr) 400px; }
.mt-stack { display: grid; gap: 18px; min-width: 0; }
.mt-stack + .mt-grid, .mt-grid + .mt-grid, .mt-grid + .mt-card, .mt-card + .mt-grid, .mt-stats + .mt-card, .mt-card + .mt-card,
.mt-banner + .mt-stats, .mt-banner + .mt-grid, .mt-banner + .mt-banner, .mt-setup + .mt-stats, .mt-setup + .mt-card,
.mt-tabs + .mt-card, .mt-card + .mt-stats, .mt-dirswitch + .mt-hero { margin-top: 18px; }
.mt > .mt-banner, .mt-adminhead + .mt-banner { margin: 0 0 18px; }
.mt-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; }
.mt-card-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.mt-card-h h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.mt-card-h .mt-sub { margin-left: auto; font-size: 13px; color: var(--text-dim); }
.mt-card-h .mt-sub + .mt-card-tools { margin-left: 0; }
.mt-card-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.mt-card-b { padding: 18px; }
.mt-card-pad { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.mt-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent);
background: color-mix(in srgb, var(--accent) 13%, var(--surface)); flex: none; }
.mt-ic.sm { width: 26px; height: 26px; border-radius: 8px; }
.mt-ic.ok { color: var(--success); background: var(--success-soft); }
.mt-ic.warn { color: var(--warn); background: var(--warn-soft); }
.mt-ic.danger { color: var(--danger); background: var(--danger-soft); }
.mt-ic.accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
/* buttons */
.mt-btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 12px; font: inherit; font-weight: 600; font-size: 14px; line-height: 1.2;
border: 1px solid var(--border); background: var(--surface); color: var(--text); white-space: nowrap; cursor: pointer; text-decoration: none;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.mt-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.mt-btn:focus-visible, .mt-iconbtn:focus-visible, .mt-slot:focus-visible, .mt-opt:focus-visible, .mt-seg button:focus-visible, .mt-sw:focus-visible,
.mt-daychip:focus-visible, .mt-tabs > *:focus-visible, .mt-modnav-a:focus-visible, .mt-blk.clickable:focus-visible, .mt-li.link:focus-visible, .mt-dirchip:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-btn.pri { background: var(--accent); color: var(--text-inverse); border-color: transparent; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 32%, transparent); }
.mt-btn.pri:hover { background: var(--accent-strong); }
.mt-btn.block { width: 100%; padding: 13px 16px; font-size: 15px; }
.mt-btn.sm { padding: 7px 11px; font-size: 13px; border-radius: 10px; gap: 6px; }
.mt-btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.mt-btn.danger:hover { background: var(--danger-soft); }
.mt-btn.danger.soft { opacity: .62; }
.mt-btn.pri.dangerfill { background: var(--danger); box-shadow: none; }
.mt-btn.pri.dangerfill:hover { background: color-mix(in srgb, var(--danger) 85%, var(--text)); }
.mt-btn.ghost { border-color: transparent; background: transparent; color: var(--text-dim); }
.mt-btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.mt-btn[disabled], .mt-btn.is-busy { opacity: .55; cursor: default; }
.mt-btn.is-busy { cursor: progress; }
.mt-iconbtn { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; background: var(--surface); color: var(--text-dim); cursor: pointer; padding: 0; flex: none; }
.mt-iconbtn:hover { background: var(--surface-2); color: var(--text); }
.mt-iconbtn.ghost { border-color: transparent; background: transparent; }
.mt-iconbtn.sm { width: 28px; height: 28px; border-radius: 8px; }
.mt-iconbtn[disabled] { opacity: .35; cursor: default; }
.mt-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.mt-link:hover { text-decoration: underline; }
.mt-link.small { font-size: 12px; }
/* director card */
.mt-dir { display: flex; gap: 18px; align-items: center; padding: 20px; }
.mt-dir-t { min-width: 0; }
.mt-av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 22px; flex: none;
color: var(--text-inverse); background: linear-gradient(135deg, var(--accent), var(--c-2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.mt-av.sm { width: 34px; height: 34px; font-size: 13px; box-shadow: none; }
.mt-av.xs { width: 26px; height: 26px; font-size: 11px; box-shadow: none; }
.mt-av.g2 { background: linear-gradient(135deg, var(--c-3), var(--c-4)); }
.mt-av.g3 { background: linear-gradient(135deg, var(--c-5), var(--c-6)); }
.mt-av.g4 { background: linear-gradient(135deg, var(--c-7), var(--c-8)); }
.mt-dir h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.25; }
.mt-dir .role { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.mt-dir .next { margin-top: 8px; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--success);
background: var(--success-soft); padding: 4px 10px; border-radius: 999px; }
.mt-dir .next.is-pending { color: var(--text-faint); background: var(--surface-2); }
.mt-dir .next.none { color: var(--warn); background: var(--warn-soft); }
.mt-dir-actions { margin-left: auto; display: flex; gap: 8px; align-self: flex-start; }
.mt-dir-actions.wrap { flex-wrap: wrap; justify-content: flex-end; max-width: 52%; }
.mt-dir .mt-pills { margin-top: 8px; }
.mt-scope { display: flex; gap: 8px; align-items: flex-start; padding: 11px 18px; font-size: 13px; color: var(--text-dim); line-height: 1.5;
background: color-mix(in srgb, var(--info) 7%, var(--surface)); border-top: 1px solid var(--border); }
.mt-scope svg { margin-top: 2px; }
.mt-dirchooser { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-dirchip { display: inline-flex; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
cursor: pointer; font: inherit; color: var(--text); text-align: left; box-shadow: var(--shadow-sm); }
.mt-dirchip .who b { display: block; font-size: 13.5px; } .mt-dirchip .who span { display: block; font-size: 12px; color: var(--text-dim); }
.mt-dirchip.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
/* segmented control */
.mt-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); gap: 2px; max-width: 100%; }
.mt-seg button { padding: 6px 12px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-dim); display: inline-flex; gap: 6px; align-items: center;
border: 0; background: transparent; cursor: pointer; white-space: nowrap; }
.mt-seg button:hover { color: var(--text); }
.mt-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.mt-seg button[disabled] { opacity: .4; cursor: default; }
/* a seg with long labels (e.g. the Greek-gender choice) wraps instead of pushing its card wider */
.mt-seg.wrap { flex-wrap: wrap; }
.mt-seg.wrap button { white-space: normal; text-align: center; min-width: 0; }
/* Settings › Coffee chats — Graph: the status strip sits apart from the first card */
.mt-graphset > .mt-stack + .mt-stack { margin-top: 18px; }
/* Outlook access (managed administrative unit) */
.mt-acc-head { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 16px; }
.mt-acc-mode { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--text-dim); }
.mt-acc-mode svg { color: var(--accent); flex: none; }
.mt-acc-card .mt-li .end { margin-left: auto; text-align: right; }
.mt-acc-card .mt-li .end .mt-cellstack { align-items: flex-end; }
.mt-acc-list { max-height: 220px; overflow: auto; }
.mt-acc-list li span.mono { color: var(--text-faint); }
.mt-au { display: flex; flex-direction: column; gap: 10px; }
.mt-au-none { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; border: 1px dashed var(--border); background: var(--surface-2); }
.mt-au-none-t { display: flex; gap: 12px; align-items: flex-start; }
.mt-au-none-t svg { color: var(--accent); flex: none; margin-top: 2px; }
.mt-au-none-t b { display: block; font-size: 14px; margin-bottom: 2px; }
.mt-au-none-t span { font-size: 13px; color: var(--text-dim); }
.mt-au-none .mt-btn { max-width: 100%; white-space: normal; text-align: left; }
.mt-or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.mt-or::before, .mt-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.mt-au-link .mt-inline .mt-input { flex: 1; min-width: 0; }
.mt-acc-preview { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 10px 12px; border-radius: 12px;
background: var(--surface-2); border: 1px dashed var(--border); font-size: 13.5px; }
.mt-acc-preview .k { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.mt-acc-preview .v { color: var(--text); font-weight: 600; }
/* week + slots */
.mt-weeknav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mt-weeknav .t { font-weight: 700; font-size: 15px; }
.mt-weeknav .mt-seg, .mt-weeknav-mode { margin-left: auto; }
.mt-weeknote { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; color: var(--text-dim);
background: color-mix(in srgb, var(--info) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 20%, var(--border)); }
.mt-weeknote svg { color: var(--info); }
.mt-days { display: grid; grid-template-columns: repeat(var(--mt-days, 5), minmax(0, 1fr)); gap: 12px; }
.mt-day { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); padding: 10px; min-height: 260px; min-width: 0; }
.mt-day.today { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); }
.mt-day.past { opacity: .6; }
.mt-day-h { display: flex; gap: 6px; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding: 2px 2px 8px; border-bottom: 1px dashed var(--border); }
.mt-day-h b { font-size: 14px; } .mt-day-h span { font-size: 12px; color: var(--text-faint); }
.mt-day-h .n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.mt-slot { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; margin-bottom: 7px; border-radius: 11px; font: inherit; font-size: 13px; color: var(--text); text-align: left;
background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
button.mt-slot { cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
button.mt-slot:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-1px); }
.mt-slot b { font-variant-numeric: tabular-nums; font-size: 14px; }
.mt-slot .m { margin-left: auto; display: inline-flex; gap: 3px; color: var(--text-faint); }
.mt-slot .m .p { color: var(--c-4); } .mt-slot .m .t { color: var(--c-1); }
.mt-slot.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.mt-slot.taken, .mt-slot.busy { background: transparent; box-shadow: none; border-style: dashed; color: var(--text-faint); cursor: default; }
.mt-slot.taken b { text-decoration: line-through; font-weight: 500; }
.mt-slot.busy { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--surface-3) 70%, transparent) 6px 12px); }
.mt-slot.busy b { font-weight: 500; }
.mt-slot.mine { background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: none; cursor: default; }
.mt-slot-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.mt-slot-skel { height: 38px; border-radius: 11px; margin-bottom: 7px; background: linear-gradient(90deg, var(--surface-3), var(--surface), var(--surface-3)); background-size: 200% 100%; animation: mtShimmer 1.4s linear infinite; }
@keyframes mtShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.mt-noslot { font-size: 12.5px; color: var(--text-faint); padding: 8px 4px; line-height: 1.45; }
.mt-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--text-dim); }
.mt-legend span { display: inline-flex; gap: 6px; align-items: center; }
.mt-legend .lg-room { color: var(--c-4); } .mt-legend .lg-teams { color: var(--c-1); }
.lg-sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; flex: none; }
.lg-sw.room { background: color-mix(in srgb, var(--c-4) 30%, var(--surface)); border: 1px solid var(--c-4); }
.lg-sw.teams { background: color-mix(in srgb, var(--c-1) 25%, var(--surface)); border: 1px solid var(--c-1); }
.lg-sw.both { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); border: 1px solid var(--accent); }
.lg-sw.busy { background: var(--surface-3); }
.lg-sw.other { border: 1px dashed var(--warn); }
.lg-sw.c1 { background: color-mix(in srgb, var(--c-1) 30%, var(--surface)); border: 1px solid var(--c-1); }
.lg-sw.c2 { background: color-mix(in srgb, var(--c-2) 30%, var(--surface)); border: 1px solid var(--c-2); }
.lg-sw.c3 { background: color-mix(in srgb, var(--c-3) 30%, var(--surface)); border: 1px solid var(--c-3); }
.lg-sw.c4 { background: color-mix(in srgb, var(--c-4) 30%, var(--surface)); border: 1px solid var(--c-4); }
.lg-sw.c5 { background: color-mix(in srgb, var(--c-5) 30%, var(--surface)); border: 1px solid var(--c-5); }
.lg-sw.c6 { background: color-mix(in srgb, var(--c-6) 30%, var(--surface)); border: 1px solid var(--c-6); }
.lg-sw.c7 { background: color-mix(in srgb, var(--c-7) 30%, var(--surface)); border: 1px solid var(--c-7); }
.lg-sw.c8 { background: color-mix(in srgb, var(--c-8) 30%, var(--surface)); border: 1px solid var(--c-8); }
.lg-bars { display: inline-flex; gap: 2px; }
.lg-bars i { width: 10px; height: 5px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.lg-bars i:first-child { background: var(--accent); }
.mt-daychips { display: none; gap: 8px; overflow-x: auto; margin: 4px -2px 14px; padding: 2px; scrollbar-width: none; }
.mt-daychip { flex: none; width: 58px; padding: 8px 0; text-align: center; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.mt-daychip b { display: block; font-size: 18px; } .mt-daychip span { font-size: 11.5px; color: var(--text-dim); }
.mt-daychip i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin: 4px auto 0; }
.mt-daychip.on { background: var(--accent); border-color: transparent; color: var(--text-inverse); }
.mt-daychip.on span { color: var(--text-inverse); opacity: .85; } .mt-daychip.on i { background: var(--text-inverse); }
.mt-daychip.none i { background: transparent; }
/* the booking panel */
.mt-book .mt-side { position: sticky; top: 14px; }
.mt-sum-when { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.mt-cal { width: 54px; border-radius: 12px; overflow: hidden; text-align: center; background: var(--surface); border: 1px solid var(--border); flex: none; }
.mt-cal .mo { background: var(--accent); color: var(--text-inverse); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 0; text-transform: uppercase; }
.mt-cal .d { font-size: 22px; font-weight: 800; padding: 3px 0 4px; color: var(--text); }
.mt-cal.lg { width: 66px; } .mt-cal.lg .d { font-size: 28px; }
.mt-sum-when b { font-size: 16px; } .mt-sum-when .s { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.mt-sum-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 22px 14px; border-radius: 14px; border: 1px dashed var(--border-strong);
background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.mt-sum-empty-art { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); margin-bottom: 4px; }
.mt-sum-empty b { font-size: 15px; } .mt-sum-empty span { font-size: 13px; color: var(--text-dim); line-height: 1.45; max-width: 280px; }
.mt-choice { display: grid; gap: 10px; margin: 16px 0; }
.mt-choice.row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 4px 0; }
.mt-choice.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.mt-opt { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
font: inherit; color: var(--text); text-align: left; cursor: pointer; width: 100%; }
.mt-opt:hover { border-color: var(--border-strong); }
.mt-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.mt-opt.off { opacity: .55; cursor: default; }
.mt-opt .r { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; margin-top: 2px; }
.mt-opt.on .r { border: 5px solid var(--accent); }
.mt-opt-t { min-width: 0; }
.mt-opt b { font-size: 14px; display: flex; gap: 6px; align-items: center; } .mt-opt-t > span { display: block; font-size: 12.5px; color: var(--text-dim); line-height: 1.4; margin-top: 2px; }
.mt-opt .tag { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--success); background: var(--success-soft); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.mt-label { font-size: 13px; font-weight: 600; margin: 4px 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt-label i { flex-basis: 100%; display: block; font-style: normal; font-weight: 400; font-size: 12px; color: var(--text-faint); margin-top: -4px; }
.mt-ta, .mt-input { width: 100%; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text); }
.mt-ta { min-height: 84px; resize: vertical; line-height: 1.45; display: block; }
.mt-input { border-radius: 11px; padding: 9px 12px; min-height: 40px; }
select.mt-input { padding-right: 30px; }
.mt-input.narrow { width: 110px; }
.mt-ta::placeholder, .mt-input::placeholder { color: var(--text-faint); }
.mt-ta:focus, .mt-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); background: var(--surface); }
.mt-ta-wrap { position: relative; }
.mt-ta-wrap .mt-ta { padding-bottom: 24px; }
.mt-count { position: absolute; right: 10px; bottom: 6px; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.mt-count.near { color: var(--warn); font-weight: 700; }
.mt-sum-msg:not(:empty) { margin-top: 12px; }
.mt-sum-go { margin-top: 16px; }
.mt-fine { display: grid; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--text-dim); }
.mt-fine div { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.mt-fine svg { color: var(--text-faint); flex: none; margin-top: 1px; }
.mt-fine.big { margin-top: 0; font-size: 13.5px; gap: 12px; }
.mt-fine.big svg { color: var(--accent); }
.mt-ph-bar { display: none; }
.mt-already { display: grid; gap: 14px; }
.mt-already-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mt-already-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-already p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.mt-topic { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-dim); font-style: italic; }
.mt-landgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.mt-land { display: grid; gap: 14px; justify-items: start; }
.mt-land p { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.5; }
/* success + key/value rows */
.mt-conf { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; }
.mt-ok { text-align: center; padding: 34px 28px 28px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--success) 16%, var(--surface)) 0%, var(--surface) 62%); }
.mt-ok .big { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; color: var(--text-inverse);
background: var(--success); box-shadow: 0 0 0 10px color-mix(in srgb, var(--success) 16%, transparent); }
.mt-ok.pending { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--info) 14%, var(--surface)) 0%, var(--surface) 62%); }
.mt-ok.pending .big { background: var(--info); box-shadow: 0 0 0 10px color-mix(in srgb, var(--info) 16%, transparent); }
.mt-ok h2 { margin: 0 0 6px; font-size: 24px; } .mt-ok p { margin: 0 auto; max-width: 520px; color: var(--text-dim); line-height: 1.5; }
.mt-kv { display: grid; gap: 0; }
.mt-kv > div { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); font-size: 14px; min-width: 0; }
.mt-kv > div:first-child { border-top: 0; }
.mt-kv .k { color: var(--text-dim); width: 130px; flex: none; display: inline-flex; gap: 8px; align-items: center; }
.mt-kv .v { font-weight: 600; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.mt-kv .v.plain { font-weight: 500; }
.mt-kv .v.bad { color: var(--danger); }
.mt-kv .v.mono { overflow-wrap: anywhere; }
.mt-kv.in-dialog > div, .mt-kv.in-card > div { padding: 10px 0; }
.mt-kv.in-card .k { width: 120px; }
.mt-v-note { font-weight: 500; color: var(--text-dim); font-size: 13px; }
.mt-conf-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
/* pills */
.mt-pill { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text); white-space: nowrap; text-decoration: none; }
.mt-pill.ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.mt-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.mt-pill.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.mt-pill.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.mt-pill.acc { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); border-color: transparent; }
.mt-pill.teams { background: color-mix(in srgb, var(--c-1) 14%, var(--surface)); color: var(--c-1); border-color: transparent; }
.mt-pill.room { background: color-mix(in srgb, var(--c-4) 14%, var(--surface)); color: var(--c-4); border-color: transparent; }
a.mt-pill.link:hover { text-decoration: underline; }
.mt-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* my meetings */
.mt-mtg { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--border); }
.mt-mtg:first-child { border-top: 0; }
.mt-mtg .t { font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; }
.mt-mtg a.t:hover { color: var(--accent); }
.mt-mtg .s { font-size: 13px; color: var(--text-dim); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mt-mtg .mt-topic { margin-top: 6px; }
.mt-mtg .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mt-mtg.past { opacity: .78; }
.mt-mtgs > .mt-banner { margin: 4px 18px 16px; }
.mt-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); font-size: 13.5px; line-height: 1.45; }
.mt-banner > svg { color: var(--warn); margin-top: 1px; }
.mt-banner.info { background: color-mix(in srgb, var(--info) 9%, var(--surface)); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
.mt-banner.info > svg { color: var(--info); }
.mt-banner.bad { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.mt-banner.bad > svg { color: var(--danger); }
.mt-banner.ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.mt-banner.ok > svg { color: var(--success); }
.mt-banner-b { min-width: 0; }
.mt-banner b { display: block; margin-bottom: 2px; }
.mt-banner .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mt-quote { font-style: italic; }
/* tabs */
.mt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; align-items: flex-end; }
.mt-tabs > button, .mt-tabs > a { padding: 10px 14px; font: inherit; font-weight: 600; font-size: 14px; color: var(--text-dim); border: 0; background: transparent; border-bottom: 2px solid transparent;
display: inline-flex; gap: 6px; align-items: center; cursor: pointer; text-decoration: none; white-space: nowrap; margin-bottom: -1px; }
.mt-tabs > button:hover, .mt-tabs > a:hover { color: var(--text); }
.mt-tabs > .on { color: var(--text); border-bottom-color: var(--accent); }
.mt-tabs .n { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); }
.mt-tabs > .on .n { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent); }
.mt-tabs-end { margin-left: auto; align-self: center; }
.mt-adminhead .mt-hero { margin-bottom: 14px; }
/* dialog + drawer */
.mt-scrim { position: fixed; inset: 0; z-index: 900; background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(2px); }
.mt-scrim.light { background: color-mix(in srgb, var(--bg) 40%, transparent); }
.mt-dialog-wrap { position: fixed; inset: 0; z-index: 901; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 8vh 16px 32px; }
.mt-dialog { width: 520px; max-width: 100%; margin: auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; color: var(--text); }
.mt-dialog.wide { width: 680px; } .mt-dialog.xwide { width: 980px; }
.mt-dialog .hd { display: flex; gap: 12px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.mt-dialog .hd-t { min-width: 0; flex: 1; }
.mt-dialog .hd h3, .mt-drawer h3 { margin: 0; font-size: 17px; }
.mt-dialog .hd p, .mt-drawer .hd-t p { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }
.mt-dialog .bd { padding: 18px 20px; display: grid; gap: 14px; font-size: 14px; line-height: 1.5; }
.mt-dialog .bd p { margin: 0; }
.mt-dialog .ft { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.mt-dlg-stack { display: grid; gap: 14px; min-width: 0; }
.mt-drawer { position: fixed; z-index: 901; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100%; background: var(--surface); border-left: 1px solid var(--border);
box-shadow: var(--shadow-lg); display: flex; flex-direction: column; color: var(--text); animation: mtSlide var(--dur-mid) var(--ease); }
@keyframes mtSlide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mt-drawer-h { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.mt-drawer-h .hd-t { flex: 1; min-width: 0; } .mt-drawer-h h3 { overflow-wrap: anywhere; }
.mt-drawer-b { padding: 16px 18px; overflow-y: auto; flex: 1; display: grid; gap: 12px; align-content: start; }
.mt-drawer-f { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.mt-drawer-links { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-h4 { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; font-size: 13.5px; }
.mt-h4 .mt-btn { margin-left: auto; }
.mt-code { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
font: 12px/1.6 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.mt-code.tall { max-height: 560px; }
/* states */
.mt-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 24px; border-radius: 18px; border: 1px solid var(--border);
background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%, var(--surface) 70%); box-shadow: var(--shadow-sm); }
.mt-empty.compact { padding: 24px 18px; box-shadow: none; }
.mt-empty-art { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); margin-bottom: 6px; }
.mt-empty.compact .mt-empty-art { width: 48px; height: 48px; border-radius: 14px; }
.mt-empty.bad .mt-empty-art { color: var(--danger); background: var(--danger-soft); }
.mt-empty.warn .mt-empty-art { color: var(--warn); background: var(--warn-soft); }
.mt-empty h3 { margin: 0; font-size: 18px; }
.mt-empty p { margin: 0; max-width: 560px; color: var(--text-dim); line-height: 1.55; font-size: 14px; }
.mt-empty-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.mt-skel { display: grid; gap: 18px; }
.mt-skel-bar { display: block; height: 12px; border-radius: 6px; margin: 8px 0; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: mtShimmer 1.4s linear infinite; }
.mt-skel-bar.thin { height: 9px; } .mt-skel-bar.strong { height: 14px; } .mt-skel-bar.title { height: 26px; }
.mt-skel-hero { padding: 28px 32px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 18px; }
.mt-skel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; }
.mt-skel-card { padding: 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.mt-skel-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
.mt-skel-days span { height: 220px; border-radius: 14px; background: var(--surface-2); }
.mt-skel-row { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.mt-skel-row .mt-skel-bar { margin: 0; }
.mt-skel-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); flex: none; }
/* alerts + form */
.mt-alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--text);
background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.mt-alert > svg { color: var(--danger); flex: none; margin-top: 1px; }
.mt-alert.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .mt-alert.warn > svg { color: var(--warn); }
.mt-alert.info { background: color-mix(in srgb, var(--info) 8%, var(--surface)); border-color: color-mix(in srgb, var(--info) 26%, transparent); } .mt-alert.info > svg { color: var(--info); }
.mt-alert.ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); } .mt-alert.ok > svg { color: var(--success); }
.mt-alert-b { min-width: 0; } .mt-alert-b > b { display: block; margin-bottom: 2px; } .mt-alert-b > span { display: block; }
.mt-alert-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mt-ul { margin: 6px 0 0; padding-left: 1.2em; } .mt-ul li { margin: 2px 0; }
.mt-steps { margin: 0; padding-left: 1.3em; line-height: 1.6; } .mt-steps li { margin: 0 0 4px; }
.mt-form { display: grid; gap: 14px; min-width: 0; }
.mt-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.mt-field > label { font-size: 13px; font-weight: 600; }
.mt-field > label i { font-style: normal; font-weight: 400; color: var(--text-faint); }
.mt-field.has-err .mt-input, .mt-field.has-err .mt-ta { border-color: var(--danger); }
.mt-field-err { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--danger); }
.mt-hint { font-size: 12.5px; color: var(--text-faint); line-height: 1.45; margin: 0; }
.mt-hint.pad { padding: 12px 18px 0; }
.mt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mt-row3 > :first-child { grid-column: 1 / -1; }
.mt-repeat { display: grid; gap: 8px; }
.mt-until { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); }
.mt-until .mt-input { flex: 1; }
.mt-inline { display: flex; gap: 8px; align-items: center; min-width: 0; }
.mt-inline.wrap { flex-wrap: wrap; }
.mt-inline > .mt-input { flex: 1; min-width: 0; }
.mt-inline > .mt-input.narrow { flex: none; }
.mt-form-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt-form-acts > div:empty { display: none; }
.mt-form-acts.sticky { position: sticky; bottom: 0; z-index: 3; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent);
border: 1px solid var(--border); box-shadow: var(--shadow-md); backdrop-filter: blur(6px); }
.mt-edit-sum { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mt-edit-sum b { display: block; font-size: 13.5px; } .mt-edit-sum span { font-size: 12.5px; color: var(--text-dim); }
.mt-blk-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; background: color-mix(in srgb, var(--accent) 30%, var(--surface)); border: 1.5px solid var(--accent); }
.mt-blk-dot.room { background: color-mix(in srgb, var(--c-4) 30%, var(--surface)); border-color: var(--c-4); }
.mt-blk-dot.teams { background: color-mix(in srgb, var(--c-1) 25%, var(--surface)); border-color: var(--c-1); }
/* switch */
.mt-switch { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.mt-switch-l span { display: block; } .mt-switch-l small { display: block; font-size: 12px; color: var(--text-faint); margin-top: 1px; line-height: 1.4; }
.mt-switch.bare .mt-switch-l { display: none; }
.mt-switch.big { font-size: 15px; font-weight: 600; }
.mt-sw { width: 36px; height: 20px; border-radius: 999px; background: var(--surface-3); position: relative; flex: none; border: 0; padding: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.mt-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: left var(--dur-fast) var(--ease); }
.mt-sw.on { background: var(--accent); } .mt-sw.on::after { left: 18px; }
.mt-switch.big .mt-sw { width: 46px; height: 26px; } .mt-switch.big .mt-sw::after { width: 22px; height: 22px; } .mt-switch.big .mt-sw.on::after { left: 22px; }
.mt-sw[disabled] { opacity: .5; cursor: default; }
/* lists */
.mt-list { display: grid; }
.mt-li { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text); text-decoration: none; min-width: 0; }
.mt-li:first-child { border-top: 0; }
.mt-li.link { cursor: pointer; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; text-align: left; width: 100%; }
.mt-li.link:hover { background: var(--surface-2); }
.mt-li > .w { width: 64px; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-li > .w span { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.mt-li .who { min-width: 0; flex: 1; } .mt-li .who b { display: block; } .mt-li .who > span { display: block; color: var(--text-dim); font-size: 12.5px; overflow-wrap: break-word; }
.mt-li.up { align-items: flex-start; }
.mt-li.up > .w, .mt-li.up > .mt-av { margin-top: 2px; }
.mt-li .who > .mt-li-pill { margin-top: 6px; }
.mt-li.more { justify-content: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 13px; padding: 10px 18px; }
.mt-li .end { margin-left: auto; flex: none; }
.mt-li.empty { color: var(--text-dim); justify-content: center; padding: 22px 18px; text-align: center; }
.mt-li.empty svg { color: var(--text-faint); }
.mt-li.warn .mt-dot { flex: none; }
.mt-li-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mt-li.prop { flex-wrap: wrap; }
.mt-li.prop > .who { flex: 1 1 160px; }
.mt-li.prop > .end { flex: 1 1 100%; margin-left: 46px; justify-content: flex-start; }
.mt-list.in-dialog { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; max-height: 60vh; overflow-y: auto; }
/* person search */
.mt-search { display: flex; gap: 8px; align-items: center; padding: 0 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); min-height: 40px; color: var(--text-faint); min-width: 0; }
.mt-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); background: var(--surface); }
.mt-search .mt-input { border: 0; background: transparent; box-shadow: none; padding: 8px 0; min-height: 0; }
.mt-search .mt-input:focus { box-shadow: none; }
.mt-search.grow { flex: 1 1 240px; }
.mt-psearch { display: grid; gap: 8px; }
.mt-psearch-list { display: grid; gap: 4px; }
.mt-psearch-list:empty { display: none; }
.mt-psearch-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.mt-psearch-row:hover { border-color: var(--accent); }
.mt-psearch-row[disabled] { opacity: .55; cursor: default; }
.mt-psearch-row .who { flex: 1; min-width: 0; } .mt-psearch-row .who b { display: block; font-size: 13.5px; } .mt-psearch-row .who span { display: block; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.mt-psearch-row small { font-size: 11.5px; color: var(--text-faint); }
.mt-psearch-row > svg { color: var(--accent); }
.mt-psearch-note { font-size: 12.5px; color: var(--text-faint); padding: 6px 2px; } .mt-psearch-note.bad { color: var(--danger); }
.mt-person-picked { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.mt-person-picked .who { flex: 1; min-width: 0; } .mt-person-picked .who b { display: block; } .mt-person-picked .who span { display: block; font-size: 12.5px; color: var(--text-dim); }
.mt-stepn { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--text-inverse); background: var(--accent); flex: none; }
.mt-bf-step { display: grid; gap: 10px; min-width: 0; }
.mt-resched-now { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mt-picker-bare .mt-days { gap: 8px; } .mt-picker-bare .mt-day { min-height: 180px; padding: 8px; }
/* booking detail */
.mt-detail-top { display: flex; gap: 18px; align-items: center; padding: 20px; flex-wrap: wrap; }
.mt-detail-t { flex: 1; min-width: 240px; }
.mt-detail-t h2 { margin: 4px 0 2px; font-size: 21px; }
.mt-detail-t .s { color: var(--text-dim); font-size: 14px; margin-bottom: 8px; }
.mt-detail-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-detail-head + .mt-banner, .mt-stack > .mt-banner { margin: 0; }
.mt-syncline { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13.5px; color: var(--text-dim); }
.mt-tline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mt-tline li { display: flex; gap: 12px; position: relative; padding: 0 0 14px 0; font-size: 13.5px; }
.mt-tline li:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--border); }
.mt-tline .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--border-strong); flex: none; margin-top: 3px; position: relative; z-index: 1; }
.mt-tline li.ok .dot { background: var(--success); border-color: var(--success); }
.mt-tline li.bad .dot { background: var(--danger); border-color: var(--danger); }
.mt-tline li.info .dot { background: var(--info); border-color: var(--info); }
.mt-tline b { display: block; font-weight: 600; } .mt-tline span { display: block; font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.mt-tline li.empty { color: var(--text-dim); padding: 4px 0; }
.mt-tline.compact li { padding-bottom: 10px; }
/* director availability editor */
.mt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.mt-stats-cap { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: -4px; font-size: 13px; color: var(--text-dim); }
.mt-stats-cap b { color: var(--text); font-weight: 650; }
.mt-stats-cap .mt-pill { font-size: 11.5px; }
.mt-stat { padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-width: 0; }
.mt-stat .l { font-size: 12.5px; color: var(--text-dim); display: flex; gap: 6px; align-items: center; }
.mt-stat .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mt-stat .h { font-size: 12px; color: var(--text-faint); }
.mt-stat.warn .v { color: var(--warn); } .mt-stat.bad .v { color: var(--danger); }
.mt-dirswitch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; font-size: 13px; color: var(--text-dim); }
.mt-chip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.mt-chip:hover { color: var(--text); border-color: var(--border-strong); }
.mt-chip.on { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); border-color: transparent; }
.mt-chip.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.mt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-tools { display: flex; gap: 8px; align-items: center; }
.mt-tl-host { display: grid; gap: 12px; min-width: 0; }
.mt-tl-host > *, .mt-picker > *, .mt-form > *, .mt-dlg-stack > * { min-width: 0; }
.mt-tl-wrap { position: relative; }
.mt-tl { display: grid; grid-template-columns: 52px repeat(var(--mt-tl-days, 5), minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.mt-tl-h { padding: 10px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-tl-h span { font-weight: 500; color: var(--text-faint); margin-left: 4px; }
.mt-tl-h.corner { border-left: 0; }
.mt-tl-h.today { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.mt-tl-times { position: relative; }
.mt-tl-times div { height: 64px; font-size: 11px; color: var(--text-faint); text-align: right; padding: 2px 8px 0 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.mt-tl-times div:first-child { border-top: 0; }
.mt-tl-col { position: relative; border-left: 1px solid var(--border);
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 63px, var(--border) 63px, var(--border) 64px); }
.mt-tl-col.today { background-color: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.mt-tl-col.past { background-color: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.mt-tl-col.clickable { cursor: copy; }
.mt-tl-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.mt-tl-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.mt-tl-hint { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; max-width: calc(100% - 90px);
padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--text-dim); background: color-mix(in srgb, var(--surface) 92%, transparent);
border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-sm); pointer-events: none; z-index: 2; }
.mt-tl-hint svg { color: var(--accent); }
.mt-blk { position: absolute; border-radius: 10px; padding: 7px 9px; font-size: 12px; line-height: 1.35; overflow: hidden; z-index: 1; text-align: left; font-family: inherit; }
.mt-blk b { display: block; font-size: 12.5px; }
.mt-blk .sub { display: block; overflow: hidden; text-overflow: ellipsis; }
.mt-blk.tight { padding: 3px 8px; } .mt-blk.tight .sub { display: none; }
.mt-blk.has-in { padding-right: 36px; }
.mt-blk.bg { z-index: 0; }
.mt-blk.clickable { cursor: pointer; } .mt-blk.clickable:hover { filter: brightness(.98); box-shadow: var(--shadow-md); z-index: 3; }
.mt-blk.avail { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); }
.mt-blk.avail.teams { background: color-mix(in srgb, var(--c-1) 13%, var(--surface)); border-color: color-mix(in srgb, var(--c-1) 55%, transparent); }
.mt-blk.avail.room { background: color-mix(in srgb, var(--c-4) 14%, var(--surface)); border-color: color-mix(in srgb, var(--c-4) 60%, transparent); }
.mt-blk.avail.conflict { border: 2px solid var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.mt-blk.avail.removed { opacity: .6; border-style: dashed; }
.mt-blk.avail.editing { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); z-index: 3; }
.mt-blk.busy { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface-3) 6px 12px); border: 1px solid var(--border); color: var(--text-dim); }
.mt-blk.other { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 8%, var(--surface)) 0 6px, color-mix(in srgb, var(--warn) 14%, var(--surface)) 6px 12px); border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); color: var(--text-dim); }
.mt-blk.bkg { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border: 1px solid var(--accent); color: var(--text); }
.mt-blk.bkg.room { background: color-mix(in srgb, var(--c-4) 22%, var(--surface)); border-color: var(--c-4); }
.mt-blk.bkg.teams { background: color-mix(in srgb, var(--c-1) 22%, var(--surface)); border-color: var(--c-1); }
.mt-blk.win { color: var(--text); border: 1.5px solid; }
.mt-blk.win.c1 { background: color-mix(in srgb, var(--c-1) 15%, var(--surface)); border-color: color-mix(in srgb, var(--c-1) 50%, transparent); }
.mt-blk.win.c2 { background: color-mix(in srgb, var(--c-2) 15%, var(--surface)); border-color: color-mix(in srgb, var(--c-2) 50%, transparent); }
.mt-blk.win.c3 { background: color-mix(in srgb, var(--c-3) 15%, var(--surface)); border-color: color-mix(in srgb, var(--c-3) 50%, transparent); }
.mt-blk.win.c4 { background: color-mix(in srgb, var(--c-4) 15%, var(--surface)); border-color: color-mix(in srgb, var(--c-4) 50%, transparent); }
.mt-blk.win.c5 { background: color-mix(in srgb, var(--c-5) 15%, var(--surface)); border-color: color-mix(in srgb, var(--c-5) 50%, transparent); }
.mt-blk.win.c6 { background: color-mix(in srgb, var(--c-6) 15%, var(--surface)); border-color: color-mix(in srgb, var(--c-6) 50%, transparent); }
.mt-blk.win.c7 { background: color-mix(in srgb, var(--c-7) 15%, var(--surface)); border-color: color-mix(in srgb, var(--c-7) 50%, transparent); }
.mt-blk.win.c8 { background: color-mix(in srgb, var(--c-8) 15%, var(--surface)); border-color: color-mix(in srgb, var(--c-8) 50%, transparent); }
.mt-blk .bk { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.mt-blk .bk i { width: 18px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.mt-blk .bk i.f { background: var(--accent); }
.mt-blk.room .bk i { background: color-mix(in srgb, var(--c-4) 30%, transparent); } .mt-blk.room .bk i.f { background: var(--c-4); }
.mt-blk.teams .bk i { background: color-mix(in srgb, var(--c-1) 30%, transparent); } .mt-blk.teams .bk i.f { background: var(--c-1); }
.mt-blk-c { position: relative; z-index: 1; }
.mt-blk-flag { position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; color: var(--text-dim); background: var(--surface); }
.mt-blk-flag.bad { color: var(--danger); }
.mt-blk-in { position: absolute; right: 4px; width: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--text-inverse);
background: var(--accent); text-decoration: none; z-index: 2; box-shadow: var(--shadow-sm); overflow: hidden; }
.mt-blk-in.room { background: var(--c-4); } .mt-blk-in.teams { background: var(--c-1); }
a.mt-blk-in:hover { filter: brightness(1.1); }
.mt-editor { scroll-margin-top: 16px; }
/* admin */
.mt-toolbar, .mt-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.mt-toolbar .mt-search { flex: 1 1 260px; max-width: 460px; }
.mt-toolbar > select.mt-input { width: auto; min-width: 180px; }
.mt-filters { padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.mt-filters > select.mt-input, .mt-filters > .mt-input { width: auto; min-width: 140px; flex: 0 1 auto; }
.mt-daterange { display: flex; gap: 6px; align-items: center; color: var(--text-faint); }
.mt-daterange .mt-input { width: 150px; }
.mt-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 13px; color: var(--text-dim); }
.mt-pager:empty { display: none; }
.mt-pager > span { margin-right: auto; }
.mt-tablecard { overflow: hidden; }
.mt-table-scroll { width: 100%; overflow-x: auto; }
.mt-table-scroll.bordered { border: 1px solid var(--border); border-radius: 12px; }
.mt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mt-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-dim); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.mt-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.mt-table tr:last-child td { border-bottom: 0; }
.mt-table.dense td { padding: 8px 12px; font-size: 13px; }
.mt-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-table td.acts { text-align: right; white-space: nowrap; }
.mt-table td.nowrap { white-space: nowrap; }
.mt-table td.kind { font-size: 12px; white-space: nowrap; }
.mt-table td.msg { min-width: 240px; } .mt-table td.msg > span { display: block; }
.mt-table tr.clickable { cursor: pointer; } .mt-table tr.clickable:hover td { background: var(--surface-2); }
.mt-table tr.is-archived td { opacity: .6; }
.mt-table tr.lv-error td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.mt-table tr.lv-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.mt-table td > b, .mt-table td > .mt-tiny { display: block; }
.mt-who { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; min-width: 0; }
.mt-who b { display: block; } .mt-who div span { display: block; font-size: 12px; color: var(--text-dim); }
.mt-who.link:hover b { color: var(--accent); }
.mt-cellstack { display: grid; gap: 4px; justify-items: start; }
.mt-tiny { font-size: 12px; color: var(--text-dim); }
.mt-tiny.strong { color: var(--text); font-weight: 600; }
.mt-tiny.bad, .mt .bad.mt-tiny { color: var(--danger); } .mt-tiny.warn { color: var(--warn); } .mt-tiny.faint { color: var(--text-faint); }
.mt-rowacts { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.mt-rowacts.stack { flex-direction: column; align-items: flex-end; gap: 6px; }
.mt-table td > .mt-who { min-width: 190px; }
.mt-http { display: inline-block; margin-top: 3px; font-size: 11.5px; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--text-faint); }
.mt-http.bad { color: var(--danger); }
.mt-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; width: 120px; }
.mt-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--c-2)); }
.mt-room { display: grid; grid-template-columns: 92px repeat(5, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.mt-room .h { font-weight: 700; color: var(--text-dim); padding: 4px 6px; }
.mt-room .t { color: var(--text-faint); padding: 8px 6px; font-variant-numeric: tabular-nums; }
.mt-room .c { border-radius: 9px; padding: 7px 8px; background: var(--surface-2); border: 1px dashed var(--border); color: var(--text-faint); min-height: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt-room .c.b1 { background: color-mix(in srgb, var(--c-1) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c-1) 45%, transparent); color: var(--text); }
.mt-room .c.b2 { background: color-mix(in srgb, var(--c-3) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c-3) 45%, transparent); color: var(--text); }
.mt-room .c.b3 { background: color-mix(in srgb, var(--c-5) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c-5) 45%, transparent); color: var(--text); }
.mt-room .c.b4 { background: color-mix(in srgb, var(--c-7) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c-7) 45%, transparent); color: var(--text); }
.mt-check { display: grid; gap: 10px; }
.mt-check-row { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.mt-check-t { flex: 1; min-width: 0; } .mt-check-t b { display: block; font-weight: 600; } .mt-check-t span { display: block; font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.mt-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--text-inverse); background: var(--success); flex: none; }
.mt-dot.wn { background: var(--warn); } .mt-dot.bad { background: var(--danger); }
.mt-setup { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); margin-bottom: 18px; }
.mt-setup .mt-card-h { background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.mt-setup.is-ready { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.mt-setup.is-ready .mt-card-h { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.mt-setup.is-on { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.mt-setup.is-on .mt-card-h { background: color-mix(in srgb, var(--success) 7%, var(--surface)); }
.mt-setup-b { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.mt-setup-list { padding: 18px; }
.mt-setup-sw { padding: 18px; border-left: 1px solid var(--border); background: var(--surface-2); display: grid; gap: 10px; align-content: start; }
.mt-rulegrid { display: grid; gap: 0; }
.mt-rulerow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.mt-rulerow:first-child { border-top: 0; padding-top: 0; }
.mt-rulerow span { color: var(--text-dim); } .mt-rulerow b { text-align: right; }
.mt-conn-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mt-dirs-card .mt-tablecard { border: 0; border-radius: 0; box-shadow: none; }
.mt-dirs-card .mt-empty { border: 0; border-radius: 0; box-shadow: none; }
.mt-adir-head { margin-bottom: 18px; }
.mt-checkhead { display: flex; gap: 8px; align-items: center; }
.mt-checklist { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.mt-checkrow { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--border); cursor: pointer; }
.mt-checkrow .who { flex: 1; min-width: 0; } .mt-checkrow .who b { display: block; font-size: 13.5px; } .mt-checkrow .who span { display: block; font-size: 12px; color: var(--text-dim); }
.mt-checkrow.off { opacity: .65; cursor: default; }
.mt-checkrow input, .mt-checkpill input { accent-color: var(--accent); width: 16px; height: 16px; }
.mt-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-checkpill { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; cursor: pointer; }
.mt-mbstate { display: flex; gap: 8px; align-items: center; margin-top: -6px; }
/* settings → Coffee chats Graph */
.mt-graphset { max-width: none; padding-top: 0; }
.mt-statusstrip { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.mt-graphset > .mt-stack + .mt-grid { margin-top: 18px; }
.mt-testing { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-dim); padding: 6px 0; }
.mt-testres { display: grid; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.mt-testres.ok { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.mt-testres.bad { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.mt-testres-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt-testres-h .mt-tiny { margin-left: auto; }
.mt-tokbox { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.mt-tokbox .mt-tiny.mono { overflow-wrap: anywhere; }
.mt-tokrow { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.mt-tokrow .mt-pill { margin-left: auto; }
.mt-checklist2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mt-checklist2 li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); }
.mt-checklist2 li .mt-dot { width: 18px; height: 18px; margin-top: 1px; }
.mt-checklist2 li > div { min-width: 0; flex: 1; }
.mt-checklist2 .row1 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.mt-checklist2 .row1 .mono { overflow-wrap: anywhere; }
.mt-checkhint { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; font-size: 12px; color: var(--text-dim); padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--info) 8%, var(--surface)); }
.mt-checkhint svg { color: var(--info); margin-top: 1px; }
.mt-script-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.mt-doclink { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; }
.mt-doclink:hover { border-color: var(--accent); }
.mt-graphset .mt-table td { vertical-align: top; }
.mt-inline.secret { flex-wrap: wrap; }
.mt-inline.secret > .mt-input { flex: 1 1 240px; }
/* ---- owner change 1: synced-user picker, HR availability ---- */
.mt-psearch-empty { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; font-size: 13px; line-height: 1.45;
background: color-mix(in srgb, var(--info) 8%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--info) 35%, var(--border)); }
.mt-psearch-empty > svg { color: var(--info); margin-top: 2px; flex: none; }
.mt-psearch-empty b { display: block; } .mt-psearch-empty span { display: block; color: var(--text-dim); margin: 2px 0 8px; }
.mt-psearch-row .mt-pill { flex: none; }
.mt-psearch-row .who .mono { font-size: 11.5px; color: var(--text-faint); }
.mt-iconrow { display: inline-flex; gap: 2px; align-items: center; }
.mt-btn.mt-avail-btn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.mt-btn.mt-avail-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.mt-dirbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 18px; border-radius: 16px;
background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.mt-dirbar-t { min-width: 0; } .mt-dirbar-t b { display: block; } .mt-dirbar-t span { display: block; font-size: 12.5px; color: var(--text-dim); }
.mt-dirbar-l { font-size: 12.5px; color: var(--text-dim); }
.mt-dirbar select.mt-input { width: auto; min-width: 220px; }
.mt-blk-by { display: flex; gap: 4px; align-items: center; margin-top: 4px; font-size: 11px; color: var(--text-dim); }
.mt-edit-by { display: flex !important; gap: 5px; align-items: center; margin-top: 3px; color: var(--accent) !important; }
.mt-tl-raw { font-size: 11.5px !important; color: var(--text-faint) !important; font-style: italic; }
.mt-bulk { display: grid; gap: 8px; }
.mt-bulkrow { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mt-bulkrow-1 { display: flex; gap: 8px; align-items: center; } .mt-bulkrow-1 .mt-input { flex: 1; }
.mt-bulkrow-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mt-bulkrow-2 > :last-child { grid-column: 1 / -1; }
.mt-bulk-warn { font-size: 12px; color: var(--danger); } .mt-bulk-warn:empty { display: none; }
.mt-avgrid-scroll { overflow-x: auto; }
.mt-avgrid { display: grid; grid-template-columns: 230px repeat(var(--mt-av-days, 5), minmax(120px, 1fr)); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; min-width: 820px; background: var(--surface); }
.mt-avgrid-h { padding: 10px 12px; font-size: 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); display: flex; gap: 6px; align-items: baseline; }
.mt-avgrid-h span { color: var(--text-faint); font-size: 12px; }
.mt-avgrid-h.corner { border-left: 0; color: var(--text-dim); font-weight: 600; font-size: 12px; }
.mt-avgrid-h.today { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.mt-avgrid-dir { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-bottom: 1px solid var(--border); min-width: 0; }
.mt-avgrid-dir .who { min-width: 0; display: grid; gap: 3px; justify-items: start; }
.mt-avgrid-dir .who a { font-weight: 700; color: var(--text); text-decoration: none; } .mt-avgrid-dir .who a:hover { color: var(--accent); }
.mt-avgrid-dir .who > span { font-size: 12px; color: var(--text-dim); }
.mt-avgrid-dir.off { background: color-mix(in srgb, var(--warn) 4%, var(--surface)); }
.mt-avpat { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px !important; color: var(--accent) !important; }
.mt-avgrid-c { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); min-height: 74px; }
.mt-avgrid-c.today { background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.mt-avgrid-c.past { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.mt-avchip { display: flex; gap: 5px; align-items: center; padding: 5px 8px; border-radius: 9px; font-size: 12px; text-decoration: none; color: var(--text);
background: color-mix(in srgb, var(--accent) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.mt-avchip.room { background: color-mix(in srgb, var(--c-4) 13%, var(--surface)); border-color: color-mix(in srgb, var(--c-4) 50%, transparent); }
.mt-avchip.teams { background: color-mix(in srgb, var(--c-1) 12%, var(--surface)); border-color: color-mix(in srgb, var(--c-1) 50%, transparent); }
.mt-avchip.pat { border-left-width: 3px; }
.mt-avchip b { font-variant-numeric: tabular-nums; } .mt-avchip span { margin-left: auto; color: var(--text-dim); font-size: 11px; }
.mt-avchip:hover { box-shadow: var(--shadow-md); }
.mt-avadd { align-self: flex-start; width: 28px; height: 24px; border-radius: 8px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-faint); cursor: pointer; display: grid; place-items: center; }
.mt-avadd:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.mt-avgrid > :nth-last-child(-n + 6) { border-bottom: 0; }
/* ---- owner change 2: weekly standard schedule ---- */
.mt-pat-card { margin-bottom: 18px; }
.mt-pat-card .mt-card-h { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), color-mix(in srgb, var(--accent) 4%, var(--surface))); }
.mt-pat-host { display: grid; gap: 14px; }
.mt-pat-sep { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.mt-pat-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.mt-patgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mt-patcard { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
border-top: 3px solid var(--accent); }
.mt-patcard.room { border-top-color: var(--c-4); } .mt-patcard.teams { border-top-color: var(--c-1); }
.mt-patcard.ended { opacity: .65; }
.mt-patcard-h { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mt-wdchips { display: inline-flex; gap: 4px; }
.mt-wdchip { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px; font-size: 12px; font-weight: 700;
color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); font-family: inherit; }
.mt-wdchip.on { color: var(--text-inverse); background: var(--accent); border-color: transparent; }
.mt-wdchips.small .mt-wdchip { min-width: 24px; height: 22px; font-size: 11px; }
button.mt-wdchip { cursor: pointer; }
.mt-wdchip.big { min-width: 46px; height: 40px; font-size: 14px; border-radius: 12px; }
button.mt-wdchip:not(.on):hover { color: var(--text); border-color: var(--accent); }
.mt-wdpick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mt-patcard-t b { font-size: 15px; display: block; margin-bottom: 6px; }
.mt-pathours { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-hourpill { display: inline-flex; gap: 5px; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); }
.mt-patmeta { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-dim); }
.mt-patmeta span { display: flex; gap: 6px; align-items: center; }
.mt-patmeta svg { color: var(--text-faint); }
.mt-patmeta .next { color: var(--success); font-weight: 600; } .mt-patmeta .next svg { color: var(--success); }
.mt-patnote { font-size: 12.5px; color: var(--text-dim); font-style: italic; }
.mt-patby { display: flex; gap: 5px; align-items: center; font-size: 12px; color: var(--accent); }
.mt-patexc { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-dim); }
.mt-patcard-f { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--border); }
.mt-btn.ghost.danger { color: var(--danger); }
.mt-patform { display: grid; gap: 14px; padding: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.mt-patform-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt-patform-h b { font-size: 15px; } .mt-patform-h .mt-faint { font-size: 12.5px; }
.mt-patform-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.mt-ranges { display: grid; gap: 8px; justify-items: start; }
.mt-rangerow { display: flex; gap: 8px; align-items: center; } .mt-rangerow > svg { color: var(--text-faint); }
.mt-rangerow select.mt-input { width: 110px; }
.mt-untilbox { display: grid; gap: 6px; } .mt-untilbox.off .mt-input { opacity: .45; }
.mt-patpreview { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.mt-patpreview-l { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; } .mt-patpreview-l > svg { color: var(--accent); align-self: center; }
.mt-patpreview-l span { color: var(--text-dim); }
.mt-patpreview-l.empty { color: var(--text-faint); }
.mt-patpreview-s { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-blk.avail.pat { border-left-width: 4px; }
.mt-blk-rep { display: inline-flex; vertical-align: -1px; margin-right: 4px; color: var(--accent); }
.mt-blk.skipped { background-color: var(--surface); background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--danger) 9%, transparent) 7px 9px);
border: 1.5px dashed color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--text-dim); z-index: 2; }
.mt-blk.skipped b { text-decoration: line-through; }
.lg-sw.pat { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); border: 1px solid var(--accent); border-left-width: 4px; }
.lg-sw.skipped { border: 1px dashed var(--danger); }
/* tablet */
@media (max-width: 1100px) {
.mt-grid, .mt-grid.wide-side, .mt-skel-grid { grid-template-columns: minmax(0, 1fr); }
.mt-hero-art { display: none; }
.mt-hero h1 { max-width: none; }
.mt-rules { max-width: none; }
.mt-book .mt-side { position: static; }
.mt-setup-b { grid-template-columns: minmax(0, 1fr); }
.mt-setup-sw { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 900px) {
.mt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-days { gap: 8px; }
.mt-day { padding: 8px; }
.mt-dir-actions.wrap { max-width: none; }
}
/* phone (mockup 06) */
@media (max-width: 640px) {
.mt { padding: 0 4px 24px; }
.mt-hero, .mt-hero.is-compact { padding: 18px 18px; border-radius: 18px; margin-bottom: 16px; }
.mt-hero h1, .mt-hero.is-compact h1 { font-size: 22px; }
.mt-hero p { font-size: 14px; }
.mt-rules { gap: 6px; margin-top: 12px; }
.mt-rule { font-size: 12px; padding: 5px 9px; }
.mt-modnav { display: flex; flex-wrap: wrap; }
.mt-modnav-a { flex: 1 1 auto; justify-content: center; padding: 7px 10px; }
.mt-book .mt-hero p, .mt-book .mt-hero .mt-rules { display: none; }
.mt-daychips { gap: 6px; margin: 4px 0 14px; }
.mt-daychip { flex: 1 1 0; width: auto; min-width: 44px; }
.mt-seg { display: flex; width: 100%; }
.mt-seg button { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 6px 8px; }
.mt-li .mt-pill { white-space: normal; }
.mt-legend { gap: 8px 12px; }
.mt-dir { padding: 14px; gap: 12px; flex-wrap: wrap; }
.mt-dir .mt-av { width: 48px; height: 48px; font-size: 17px; }
.mt-dir h2 { font-size: 16px; }
.mt-dir .role { font-size: 12.5px; }
.mt-dir-t { flex: 1 1 200px; }
.mt-dir-actions { margin-left: 0; width: 100%; }
.mt-dir-actions .mt-btn { flex: 1 1 auto; }
.mt-card-h { padding: 12px 14px; }
.mt-card-b { padding: 14px; }
.mt-weeknav .mt-seg, .mt-weeknav-mode { margin-left: 0; width: 100%; }
.mt-weeknav .mt-seg button { flex: 1; justify-content: center; }
.mt-weeknav .t { flex: 1; text-align: center; font-size: 14px; }
.mt-daychips { display: flex; }
.mt-days { display: block; }
.mt-day { display: none; }
.mt-day.cur { display: block; background: transparent; border: 0; padding: 0; min-height: 0; }
.mt-day.cur .mt-day-h { display: none; }
.mt-day-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mt-day-slots .mt-slot { margin: 0; }
.mt-legend { gap: 10px; font-size: 12px; }
.mt-ph-bar:not([hidden]) { display: block; position: sticky; bottom: 0; z-index: 20; margin: 12px -16px 0; padding: 12px 16px 16px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.mt-ph-bar .s { font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; }
.mt-sum .mt-sum-go { display: none; }
.mt-stats { gap: 10px; }
.mt-stat { padding: 12px 14px; } .mt-stat .v { font-size: 22px; }
.mt-mtg { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 14px; }
.mt-mtg .acts { grid-column: 1 / -1; justify-content: flex-start; }
.mt-mtg .acts .mt-btn { flex: 1 1 auto; }
.mt-kv > div { flex-wrap: wrap; padding: 11px 14px; gap: 6px 12px; }
.mt-kv .k { width: 100%; }
.mt-kv.in-dialog > div, .mt-kv.in-card > div { padding: 8px 0; }
.mt-conf-acts .mt-btn { flex: 1 1 calc(50% - 10px); }
.mt-ok { padding: 26px 18px 22px; }
.mt-ok h2 { font-size: 20px; }
.mt-banner { flex-wrap: wrap; }
.mt-banner .acts { margin-left: 30px; width: 100%; }
.mt-tl { grid-template-columns: 44px minmax(0, 1fr); }
.mt-tl-h:not(.corner):not(.cur), .mt-tl-col:not(.cur) { display: none; }
.mt-daychips.tl { display: flex; }
.mt-tl-hint { max-width: calc(100% - 60px); left: calc(50% + 22px); font-size: 12px; }
.mt-tools .mt-btn.sm span { display: none; }
.mt-row2, .mt-choice.row, .mt-choice.two { grid-template-columns: minmax(0, 1fr); }
.mt-patform-b { grid-template-columns: minmax(0, 1fr); }
.mt-patgrid { grid-template-columns: minmax(0, 1fr); }
.mt-dirbar select.mt-input { min-width: 0; flex: 1; }
.mt-wdchip.big { min-width: 0; flex: 1 1 0; }
.mt-dialog-wrap { padding: 12px 8px 24px; }
.mt-dialog .hd, .mt-dialog .bd, .mt-dialog .ft { padding-left: 14px; padding-right: 14px; }
.mt-dialog .ft .mt-btn { flex: 1 1 auto; }
.mt-filters > select.mt-input, .mt-filters > .mt-input, .mt-daterange { flex: 1 1 100%; min-width: 0; }
.mt-daterange .mt-input { width: auto; flex: 1; }
.mt-filters .mt-push { display: none; }
.mt-filters > .mt-btn { flex: 1 1 auto; }
.mt-toolbar .mt-search { max-width: none; }
.mt-room { grid-template-columns: 64px repeat(5, minmax(0, 1fr)); font-size: 11px; gap: 4px; }
.mt-room .c { padding: 6px 4px; }
.mt-li { padding: 12px 14px; flex-wrap: wrap; }
.mt-li .end { margin-left: 0; }
.mt-li.link .end, .mt-li .w + .mt-av + .who + .end { margin-left: auto; }
.mt-detail-top { padding: 14px; gap: 12px; }
.mt-detail-acts { width: 100%; } .mt-detail-acts .mt-btn { flex: 1 1 auto; }
.mt-dirchip { flex: 1 1 100%; }
.mt-tabs > button, .mt-tabs > a { padding: 9px 10px; font-size: 13px; }
.mt-drawer { width: 100%; }
.mt-pager { flex-wrap: wrap; }
.mt-form-acts .mt-btn.pri { flex: 1 1 auto; }
.mt-kv.in-card .k { width: 100%; }
}
/* ============================== END mt block (Coffee chats) ============================== */
/* ==== BEGIN access block (design/access/css) ==== */
/* Access 2.0 + Apps shell. Generated by .e2e/css-access.mjs from design/access/css/*.css (order: shell, access-ui, esl-fix, gk-auto, mentions, post-page, shell-home). Tokens only. Do not hand-edit between the markers. */
/* ---- access: shell (design/access/css/shell.css) ---- */
/* FE-SHELL — the "Apps" shell (layout D): top bar, launcher, palette, app bar, Home tiles, user menu, phone tabs.
Prefix .ro-. Tokens only. The shell keeps .layout / .main / #page-content so module CSS keeps working. */
:root { --ro-top-h: 64px; --ro-tabs-h: 64px; --ro-gutter: 1.5rem; }
/* Older module code asks for var(--surface-1, #fff) (migration stat cards, tasks), a token main.css never defined, so it
painted white cards with light text in dark mode. Alias it to the real surface token (per theme). */
:root, [data-theme="dark"], [data-theme="light"] { --surface-1: var(--surface); }
/* ---- layout: no sidebar column any more ---------------------------------------------------------------------------- */
.layout.ro-shell { display: flex; flex-direction: column; grid-template-columns: none; min-height: 100vh; }
.layout.ro-shell > .main { flex: 1 1 auto; width: 100%; padding-left: 0; padding-right: 0; padding-top: 0; }
.layout.ro-shell > .main > #page-content { padding-left: var(--ro-gutter); padding-right: var(--ro-gutter); }
.layout.ro-shell > .main > #page-content:focus { outline: none; }
html.ro-noscroll, html.ro-noscroll body { overflow: hidden; }
.ro-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ro-grow { flex: 1 1 auto; }
.ro-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.ro-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.ro-ic-sm { width: 17px; height: 17px; }
.ro-ic-xs { width: 14px; height: 14px; }
.ro-shell kbd, .ro-ov kbd {
font: 600 11px/1 'Inter', -apple-system, sans-serif; color: var(--text-faint); background: var(--surface-2);
border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; white-space: nowrap;
}
.ro-shell mark, .ro-ov mark { background: color-mix(in srgb, var(--c-5) 34%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.ro-iconbtn {
position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
border-radius: 10px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; flex: 0 0 auto;
}
.ro-iconbtn:hover { background: var(--surface-hover); color: var(--text); }
.ro-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.ro-link:hover { text-decoration: underline; }
.ro-shell :focus-visible, .ro-ov :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- top bar ------------------------------------------------------------------------------------------------------- */
.ro-top {
position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; height: var(--ro-top-h);
padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ro-brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; color: var(--text); text-decoration: none; border-radius: 12px; }
.ro-logo { display: inline-flex; border-radius: 9px; box-shadow: var(--glow-accent); }
.ro-logo svg { display: block; }
.ro-bword { display: flex; flex-direction: column; line-height: 1.1; }
.ro-bword b { font-size: 18px; font-weight: 800; letter-spacing: -.035em; color: var(--text); }
.ro-bword small { font-size: 11px; color: var(--text-faint); letter-spacing: .02em; }
.ro-search {
flex: 0 1 640px; margin: 0 auto; min-width: 0; height: 44px; display: flex; align-items: center; gap: 10px;
padding: 0 10px 0 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border-strong);
color: var(--text-faint); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ro-search > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-search:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.ro-top-r { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ro-appsbtn {
display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border-radius: 11px;
background: var(--surface-2); border: 1px solid var(--border-strong); font: inherit; font-weight: 600; font-size: 13px;
color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.ro-appsbtn:hover, .ro-appsbtn.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ro-bell { display: flex; align-items: center; }
.ro-bell .bell-button { width: 40px; height: 40px; border-radius: 10px; }
.ro-bell .bell-badge { border-color: var(--surface); }
/* The inbox panel is placed at the bell's left edge; the bell now sits on the right, so pin the panel to the right. */
.bell-panel { left: auto !important; right: 12px !important; }
/* the visible language switch (ΕΛ | EN) */
.ro-lang { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); flex: 0 0 auto; }
.ro-lang button {
border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em;
min-width: 34px; height: 28px; padding: 0 9px; border-radius: 999px; cursor: pointer;
}
.ro-lang button:hover { color: var(--text); }
.ro-lang button.is-on { background: var(--accent); color: var(--text-inverse); }
.ro-lang-top { margin: 0 2px; }
.ro-me-langtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-dim); }
.ro-me-langtop > span { display: inline-flex; align-items: center; gap: 8px; }
.ro-me-langtop .ro-lang button { min-width: 44px; height: 34px; font-size: 13px; }
.ro-mebtn {
display: inline-flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px; border-radius: 12px; border: 0;
background: transparent; font: inherit; color: var(--text); cursor: pointer; max-width: 260px;
}
.ro-mebtn:hover, .ro-mebtn[aria-expanded="true"] { background: var(--surface-hover); }
.ro-me-t { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.2; }
.ro-me-t b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-me-t small { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-mebtn > .ro-ic { color: var(--text-faint); }
.ro-av {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
flex: 0 0 auto; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-inverse);
background: linear-gradient(135deg, var(--c-1), var(--c-2));
}
.ro-av-lg { width: 46px; height: 46px; font-size: 15px; }
/* ---- the «access changed» notice ----------------------------------------------------------------------------------- */
.ro-notice-host:empty { display: none; }
.ro-notice {
display: flex; align-items: center; gap: 12px; margin: 14px var(--ro-gutter) 0; padding: 12px 12px 12px 14px;
border-radius: 14px; background: color-mix(in srgb, var(--info) 10%, var(--surface));
border: 1px solid color-mix(in srgb, var(--info) 35%, var(--border)); box-shadow: var(--shadow-sm); animation: roDrop .18s ease-out;
}
.ro-notice-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--info-soft); color: var(--info); flex: 0 0 auto; }
.ro-notice-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ro-notice-t b { font-size: 14px; }
.ro-notice-t span { font-size: 13px; color: var(--text-dim); }
.ro-notice .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* ---- app bar: breadcrumb · star · sibling sub-nav ------------------------------------------------------------------- */
.ro-appbar { display: flex; flex-direction: column; gap: 10px; padding: 14px var(--ro-gutter) 0; }
.ro-appbar[hidden] { display: none; }
.ro-ab-row { display: flex; align-items: center; gap: 12px; min-height: 32px; min-width: 0; }
.ro-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; font-size: 13px; color: var(--text-faint); }
.ro-crumbs a { color: var(--text-dim); text-decoration: none; border-radius: 6px; }
.ro-crumbs a:hover { color: var(--accent); }
.ro-crumbs .ro-crumb-app { color: var(--text); font-weight: 600; }
.ro-crumb-sep { color: var(--text-faint); opacity: .7; }
.ro-ab-star {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 10px;
border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600;
color: var(--text-dim); cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.ro-ab-star:hover { border-color: var(--border-hover); color: var(--text); }
.ro-ab-star.is-on { color: var(--c-5); border-color: color-mix(in srgb, var(--c-5) 45%, var(--border)); background: color-mix(in srgb, var(--c-5) 9%, var(--surface)); }
.ro-ab-star.is-on svg, .ro-star.is-on svg { fill: currentColor; }
.ro-subnav {
display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-3); width: max-content; max-width: 100%;
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ro-subnav::-webkit-scrollbar { display: none; }
.ro-subnav a {
position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600;
color: var(--text-dim); padding: 6px 12px; border-radius: 9px; text-decoration: none; flex: 0 0 auto;
}
.ro-subnav a:hover { color: var(--text); }
.ro-subnav a.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ro-subnav a .ro-ic { opacity: .8; }
.ro-badge {
display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10.5px; font-weight: 700;
line-height: 18px; text-align: center; background: var(--warn); color: var(--text-inverse);
}
.ro-badge.is-danger { background: var(--danger); }
.ro-subnav .ro-badge { margin-left: 2px; }
/* ---- tiles (Home + launcher share the icon chip) --------------------------------------------------------------------- */
.ro-tl-ic {
display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
color: var(--text-inverse); background: linear-gradient(135deg, var(--c-1), var(--c-2)); box-shadow: var(--shadow-sm);
}
/* Area colours (tones). Two classes so they also beat .ro-pi's neutral chip in the palette. */
.ro-tl-ic.ro-tone-0, .ro-pi.ro-tone-0 { background: var(--surface-3); color: var(--text-dim); box-shadow: none; }
.ro-tl-ic.ro-tone-1, .ro-pi.ro-tone-1 { background: linear-gradient(135deg, var(--c-1), var(--c-2)); }
.ro-tl-ic.ro-tone-2, .ro-pi.ro-tone-2 { background: linear-gradient(135deg, var(--c-8), var(--c-6)); }
.ro-tl-ic.ro-tone-3, .ro-pi.ro-tone-3 { background: linear-gradient(135deg, var(--c-3), var(--c-1)); }
.ro-tl-ic.ro-tone-4, .ro-pi.ro-tone-4 { background: linear-gradient(135deg, var(--c-4), var(--c-3)); }
.ro-tl-ic.ro-tone-5, .ro-pi.ro-tone-5 { background: linear-gradient(135deg, var(--c-5), var(--c-6)); }
.ro-pi.ro-tone-1, .ro-pi.ro-tone-2, .ro-pi.ro-tone-3, .ro-pi.ro-tone-4, .ro-pi.ro-tone-5 { color: var(--text-inverse); }
/* ---- Home: «Οι εφαρμογές μου» ----------------------------------------------------------------------------------------- */
.ro-home { margin: 2px 0 22px; }
.ro-home-search { display: none; }
.ro-home-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.ro-home-h h2 { margin: 0; font-size: 19px; letter-spacing: -.015em; }
.ro-home-h small { color: var(--text-faint); font-size: 12.5px; }
.ro-more {
margin-left: auto; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 4px 6px;
border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer;
}
.ro-more:hover { background: var(--accent-soft); }
.ro-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.ro-tile {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 8px 13px;
border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--text-dim);
text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ro-tile:hover { transform: translateY(-2px); border-color: var(--border-hover); color: var(--text); }
.ro-tile-name, .ro-la-name { overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.ro-tile .ro-badge { position: absolute; top: 8px; right: 8px; }
.ro-tile-add { border-style: dashed; box-shadow: none; background: transparent; color: var(--text-faint); }
.ro-tile-add .ro-tl-ic { background: var(--surface-3); color: var(--text-faint); box-shadow: none; }
/* Home board: a band with only one side (role-aware Home) spans the width; its stacked cards sit side by side. */
.ops-band.ops-band-one { grid-template-columns: minmax(0, 1fr); }
.ops-band.ops-band-one > .ops-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.ro-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ro-recent-l { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-faint); margin-right: 2px; }
.ro-recent-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); text-decoration: none;
}
.ro-recent-chip:hover { color: var(--text); border-color: var(--border-hover); }
/* ---- «Δεν έχετε πρόσβαση» page (known app the user cannot open) ----------------------------------------------------------- */
.ro-denied {
max-width: 560px; margin: 8vh auto 40px; padding: 32px 28px; text-align: center; background: var(--surface);
border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-md);
}
.ro-denied .ro-tl-ic { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px; }
.ro-denied-app { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text-faint); }
.ro-denied h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.015em; }
.ro-denied-desc { margin: 0 0 14px; color: var(--text-dim); }
.ro-denied-need { margin: 0 auto 6px; max-width: 460px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2);
border: 1px solid var(--border); font-size: 13.5px; color: var(--text); }
.ro-denied-ask { margin: 10px 0 18px; color: var(--text-dim); font-size: 13.5px; }
.ro-denied-acts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ro-denied-acts .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
@media (max-width: 759.98px) { .ro-denied { margin-top: 16px; padding: 24px 18px; } }
/* ---- overlays ----------------------------------------------------------------------------------------------------- */
.ro-ov { position: fixed; inset: 0; z-index: 1200; }
.ro-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 58%, transparent); backdrop-filter: blur(2px); animation: roFade .12s ease-out; }
.ro-scrim.is-clear { background: transparent; backdrop-filter: none; }
@keyframes roFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes roDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes roUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* launcher */
.ro-launcher {
position: fixed; top: calc(var(--ro-top-h) + 8px); right: 24px; width: min(780px, calc(100vw - 48px));
max-height: calc(100vh - var(--ro-top-h) - 24px); display: flex; flex-direction: column; background: var(--surface);
border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: var(--shadow-lg); animation: roDrop .16s ease-out; overflow: hidden;
}
.ro-la-head { display: flex; align-items: center; gap: 8px; padding: 16px 18px 6px; }
.ro-la-search {
flex: 1 1 auto; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-faint);
}
.ro-la-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); }
.ro-ov .ro-la-search input:focus-visible, .ro-ov .ro-pal-q:focus-visible { outline: none; }
.ro-la-search:focus-within { border-color: var(--accent); }
.ro-la-x { display: none; }
.ro-la-body { overflow-y: auto; padding: 0 18px 16px; overscroll-behavior: contain; }
.ro-la-sec { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 2px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); }
.ro-la-sec small { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; }
.ro-la-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ro-la-app { position: relative; min-width: 0; }
.ro-la-link {
display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 10px; border-radius: 14px;
font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--text-dim); text-decoration: none;
}
.ro-la-link:hover, .ro-la-link:focus-visible { background: var(--surface-hover); color: var(--text); }
.ro-la-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ro-la-link .ro-tl-ic { width: 42px; height: 42px; border-radius: 13px; }
.ro-la-link .ro-badge { position: absolute; top: 6px; left: 6px; }
.ro-star {
position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center;
justify-content: center; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; opacity: 0;
}
.ro-star:hover { background: var(--surface-3); color: var(--text); }
.ro-la-app:hover .ro-star, .ro-la-app:focus-within .ro-star, .ro-star.is-on { opacity: 1; }
.ro-star.is-on, .ro-star.is-on:hover { color: var(--c-5); }
@media (hover: none) { .ro-star { opacity: .9; } }
.ro-la-empty { grid-column: 1 / -1; padding: 10px 4px; color: var(--text-faint); font-size: 13px; }
.ro-la-none { padding: 22px 4px; text-align: center; }
.ro-la-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-faint); flex-wrap: wrap; }
.ro-la-foot .ro-link { margin-left: auto; font-size: 12.5px; }
/* palette */
.ro-pal {
position: fixed; left: 50%; top: 84px; transform: translateX(-50%); width: 720px; max-width: calc(100vw - 32px);
max-height: calc(100vh - 120px); display: flex; flex-direction: column; background: var(--surface); border-radius: 20px;
border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); overflow: hidden; animation: roDrop .14s ease-out;
}
.ro-pal-in { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.ro-pal-in > .ro-ic { color: var(--accent); }
.ro-pal-q { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 18px; color: var(--text); }
.ro-pal-x { display: inline-flex; align-items: center; border: 0; background: none; padding: 4px; cursor: pointer; color: var(--text-faint); border-radius: 8px; }
.ro-pal-x .ro-ic-x { display: none; }
.ro-pal-f { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; flex: 0 0 auto; }
.ro-pf {
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim); padding: 4px 11px; border-radius: 999px;
border: 1px solid var(--border-strong); background: transparent; cursor: pointer;
}
.ro-pf:hover { color: var(--text); border-color: var(--border-hover); }
.ro-pf.is-on { background: var(--text); color: var(--surface); border-color: var(--text); }
.ro-pal-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 6px; overscroll-behavior: contain; }
.ro-pal-g { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); padding: 12px 20px 4px; }
.ro-pr { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 0 8px; border-radius: 12px; cursor: pointer; }
.ro-prt { flex: 1 1 auto; min-width: 0; }
.ro-pr b { display: block; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-pr small { display: block; font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-pr.is-sel { background: var(--accent-soft); }
.ro-pr em {
font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--surface); border-radius: 7px;
padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); visibility: hidden; flex: 0 0 auto;
}
.ro-pr.is-sel em { visibility: visible; }
.ro-pi { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); color: var(--text-dim); flex: 0 0 auto; }
.ro-pr.is-sel .ro-pi.ro-tone-0, .ro-pr.is-sel .ro-pi:not([class*="ro-tone-"]) { background: var(--accent-strong); color: var(--text-inverse); }
.ro-pr .ro-av { width: 32px; height: 32px; font-size: 11px; }
.ro-pal-none { padding: 26px 20px; text-align: center; color: var(--text-faint); }
.ro-pal-foot {
display: flex; gap: 16px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
font-size: 12px; color: var(--text-faint); flex: 0 0 auto; flex-wrap: wrap;
}
.ro-pal-foot kbd { padding: 2px 5px; margin-right: 2px; }
.ro-pal-status:empty { display: none; }
/* person card */
.ro-person {
position: fixed; left: 50%; top: 14vh; transform: translateX(-50%); width: 420px; max-width: calc(100vw - 32px);
background: var(--surface); border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: var(--shadow-lg);
padding: 22px; animation: roDrop .14s ease-out;
}
.ro-person-x { position: absolute; top: 10px; right: 10px; }
.ro-person-head { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.ro-person-head h2 { margin: 0; font-size: 19px; }
.ro-person-head p { margin: 2px 0 0; color: var(--text-dim); font-size: 13px; }
.ro-person-dl, .ro-me-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 16px 0 0; font-size: 13px; }
.ro-person-dl dt, .ro-me-dl dt { color: var(--text-faint); }
.ro-person-dl dd, .ro-me-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ro-person-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ro-person-acts .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ro-person-note { margin: 14px 0 0; font-size: 12px; color: var(--text-faint); }
/* user menu */
.ro-me {
position: fixed; width: 344px; max-width: calc(100vw - 24px); max-height: calc(100vh - var(--ro-top-h) - 24px); overflow-y: auto;
background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg);
padding: 8px; animation: roDrop .14s ease-out;
}
.ro-me-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 4px; }
.ro-me-id { display: flex; flex-direction: column; min-width: 0; }
.ro-me-id b { font-size: 15px; }
.ro-me-id small { font-size: 12px; color: var(--text-faint); overflow-wrap: anywhere; }
.ro-me-dl { margin: 8px 10px 4px; }
.ro-me-sec { margin: 8px 4px 0; padding: 10px 6px 4px; border-top: 1px solid var(--border); }
.ro-me-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin-bottom: 8px; }
.ro-me-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.ro-me-none { margin: 0; font-size: 13px; color: var(--text-dim); }
.ro-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.ro-chip.is-legacy { background: var(--surface-3); color: var(--text-dim); }
.ro-chip.is-ok { background: var(--success-soft); color: var(--success); }
.ro-me-prefs { display: flex; flex-direction: column; gap: 8px; }
.ro-me-pref { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-dim); }
.ro-me-pref > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.ro-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; }
.ro-seg button { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: var(--text-xs); font-weight: 700; padding: .25rem .65rem; border-radius: 999px; cursor: pointer; }
.ro-seg button:hover { color: var(--text); }
.ro-seg button.is-on { background: var(--accent); color: var(--text-inverse); }
.ro-me-acts { margin: 8px 4px 0; padding-top: 6px; border-top: 1px solid var(--border); }
.ro-me-item {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0; background: none;
font: inherit; font-size: 13.5px; color: var(--text-dim); text-align: left; cursor: pointer;
}
.ro-me-item:hover { background: var(--surface-hover); color: var(--text); }
.ro-me-item.is-danger:hover { color: var(--danger); background: var(--danger-soft); }
.ro-me-ver { padding: 6px 10px 4px; font-size: 11px; color: var(--text-faint); }
.ro-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 4px auto 6px; }
/* ---- phone tabs (hidden on desktop) -------------------------------------------------------------------------------- */
.ro-tabs { display: none; }
/* ---- module-markup fixes the new shell needs (one-liners, see SHELL-NOTES §3) --------------------------------------- */
/* Coffee chats draws its own "Αρχική › Coffee chats" crumb on its landing page; the app bar already says it. Deeper
meetings pages (3+ crumbs) keep theirs. */
.ro-shell .mt-crumbs:not(:has(> :nth-child(4))) { display: none; }
/* News admin › settings: choice cards with a fixed column count (3 × 220 px) ran past a 390 px screen and made .main
scroll sideways. On phones the grid falls back to "as many 220 px columns as fit" (one at 390 px). */
@media (max-width: 759.98px) {
.cm-ui-choices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
/* The shared status/filter pills (.tab-pills: feature suggestions, payment terminals, settings, daily-info templates)
never wrapped, so five pills pushed .main 240 px sideways on a phone. */
.tab-pills { flex-wrap: wrap; max-width: 100%; border-radius: 18px; }
/* Migration › progress by location: label · bar · numbers stack on a phone (the row was 160px 1fr 240px). */
.mig-loc-row { grid-template-columns: minmax(0, 1fr) !important; gap: .35rem !important; }
.mig-loc-row > :last-child { text-align: left !important; }
/* GateKeeper › Changed & moved: the "when" cell is a no-wrap flex row; its sub-line ran ~56 px off a phone. */
.gkc-table td.gkc-c-when { flex-wrap: wrap; min-width: 0; }
.gkc-table .gku-sub { flex-wrap: wrap; min-width: 0; max-width: 100%; }
/* Tasks › leaderboard: the section label row with its period select overflowed by ~14 px. */
.tk-seclabel { flex-wrap: wrap; min-width: 0; }
.tk-seclabel > span { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.tk-seclabel select.input { max-width: 100%; min-width: 0; }
/* Settings on a phone: alert rows with long wrap, wide tables scroll inside their card, fixed-width stat
grids (diagnostics) reflow — instead of pushing .main sideways. */
.settings-pane .alert { flex-wrap: wrap; }
.settings-pane .alert code { overflow-wrap: anywhere; }
.settings-pane table.table { overflow-x: auto; max-width: 100%; }
.settings-pane .stack-md > div[style*="grid-template-columns"] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
}
/* Migration › progress by location (desktop): the module tags the row .mig-loc-row instead of an inline grid. */
.mig-loc-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 240px; gap: .75rem; align-items: center; }
/* ---- tablet --------------------------------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
.ro-me-t { display: none; }
.ro-mebtn { padding: 4px; }
.ro-mebtn > .ro-ic { display: none; }
.ro-la-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
:root { --ro-gutter: .75rem; }
.ro-top { gap: 12px; padding: 0 14px; }
.ro-bword small { display: none; }
.ro-search kbd { display: none; }
.ro-la-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ---- phone (< 760 px): bottom tabs, full-screen launcher and palette, sheet for «Εγώ» -------------------------------- */
@media (max-width: 759.98px) {
:root { --ro-top-h: 56px; }
.ro-top { padding: 0 8px 0 14px; gap: 6px; padding-top: env(safe-area-inset-top, 0); height: calc(var(--ro-top-h) + env(safe-area-inset-top, 0px)); }
.ro-top .ro-search, .ro-top .ro-appsbtn, .ro-top .ro-mebtn, .ro-top .ro-lang { display: none; }
.ro-top-r { margin-left: auto; }
.ro-bword b { font-size: 17px; }
.layout.ro-shell > .main { padding-bottom: calc(var(--ro-tabs-h) + 18px + env(safe-area-inset-bottom, 0px)); }
.ro-tabs {
display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; justify-content: space-around; align-items: stretch;
height: calc(var(--ro-tabs-h) + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px);
background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.ro-tab {
position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
border: 0; background: none; padding: 0; font: inherit; font-size: 11px; font-weight: 600; color: var(--text-faint);
text-decoration: none; cursor: pointer; min-width: 0;
}
.ro-tab .ro-ic { width: 23px; height: 23px; }
.ro-tab.is-on { color: var(--accent); }
.ro-tab.is-on::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.ro-appbar { padding-top: 10px; gap: 8px; }
.ro-crumb-apps, .ro-crumb-apps + .ro-crumb-sep { display: none; }
.ro-ab-star { height: 32px; padding: 0 9px; }
.ro-ab-star span { display: none; }
.ro-subnav { width: auto; }
.ro-notice { flex-wrap: wrap; }
.ro-notice-t { flex-basis: calc(100% - 50px); }
.ro-home-search {
display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; margin-bottom: 16px; padding: 0 14px; border-radius: 14px;
background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-faint); font: inherit; font-size: 14px; cursor: pointer;
box-shadow: var(--shadow-sm);
}
.ro-home-h small { display: none; }
.ro-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ro-tile { padding: 10px 4px 9px; font-size: 11px; gap: 6px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.ro-tile .ro-tl-ic { width: 40px; height: 40px; border-radius: 12px; }
.ro-tile .ro-badge { top: 4px; right: 4px; }
.ro-tile:hover { transform: none; }
.ro-launcher { top: 0; right: 0; left: 0; bottom: 0; width: auto; max-height: none; border-radius: 0; border: 0; animation: roUp .18s ease-out; }
.ro-la-head { padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 6px; }
.ro-la-search kbd { display: none; }
.ro-la-x { display: inline-flex; }
.ro-la-body { padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
.ro-la-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.ro-la-link { padding: 10px 2px 8px; font-size: 11px; }
.ro-la-sec small { display: none; }
.ro-pal { top: 0; left: 0; transform: none; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; animation: roUp .18s ease-out; }
.ro-pal-in { padding-top: env(safe-area-inset-top, 0px); height: calc(60px + env(safe-area-inset-top, 0px)); }
.ro-pal-q { font-size: 16px; }
.ro-pal-x kbd { display: none; }
.ro-pal-x .ro-ic-x { display: block; }
.ro-pal-f { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ro-pf { flex: 0 0 auto; }
.ro-pal-foot { display: none; }
.ro-me-ov.is-sheet .ro-me {
top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 86vh; border-radius: 20px 20px 0 0;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); animation: roUp .18s ease-out;
}
.ro-person { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-width: none; border-radius: 20px 20px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); animation: roUp .18s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
.ro-launcher, .ro-pal, .ro-me, .ro-person, .ro-notice, .ro-scrim { animation: none; }
.ro-tile, .ro-search { transition: none; }
}
@media print {
.ro-top, .ro-tabs, .ro-appbar, .ro-notice-host { display: none !important; }
}
/* ---- ΕΛ | EN on the screens before the shell (sign-in, no account, blocked) — REVIEW L27 ---------------------------- */
.login-card { position: relative; }
.login-lang { display: flex; justify-content: flex-end; margin: -.5rem -.5rem .75rem 0; }
/* ---- access: access-ui (design/access/css/access-ui.css) ---- */
/* «Πρόσβαση» app (module "access", FE 8.0.0) — FE-ACCESS. Prefix .ax-. Tokens only (no literal colours):
surfaces/text from main.css, group colours from the --c-1..--c-8 slots (.c1…c8 set --ax-c). Light + dark come from
the tokens; phone (≤ 760 px) stacks everything at the end of this file. */
.ax { --ax-c: var(--accent); max-width: 1320px; margin: 0 auto; padding: 4px 0 96px; color: var(--text); }
.ax *, .ax-dlg * { box-sizing: border-box; }
.ax [hidden], .ax-dlg [hidden] { display: none !important; }
.ax-i { flex: none; }
.ax .mono, .ax-dlg .mono, .ax code, .ax-dlg code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.ax-faint { color: var(--text-faint); }
.ax-grow1 { flex: 1 1 auto; min-width: 0; }
html.ax-noscroll { overflow: hidden; }
.c1 { --ax-c: var(--c-1); } .c2 { --ax-c: var(--c-2); } .c3 { --ax-c: var(--c-3); } .c4 { --ax-c: var(--c-4); }
.c5 { --ax-c: var(--c-5); } .c6 { --ax-c: var(--c-6); } .c7 { --ax-c: var(--c-7); } .c8 { --ax-c: var(--c-8); }
/* ---- page head band ------------------------------------------------------------------------------------------- */
.ax-head { position: relative; overflow: hidden; display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; padding: 24px 28px; margin: 0 0 16px;
border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); box-shadow: var(--shadow-sm);
background: linear-gradient(118deg, color-mix(in srgb, var(--accent) 15%, var(--surface)) 0%, color-mix(in srgb, var(--c-3) 9%, var(--surface)) 58%, var(--surface) 100%); }
.ax-head.compact { padding: 18px 24px; }
.ax-head.ed { background: linear-gradient(118deg, color-mix(in srgb, var(--ax-c) 16%, var(--surface)) 0%, color-mix(in srgb, var(--ax-c) 6%, var(--surface)) 60%, var(--surface) 100%);
border-color: color-mix(in srgb, var(--ax-c) 26%, var(--border)); }
.ax-head-t { position: relative; flex: 1 1 420px; min-width: 0; }
.ax-head h1 { margin: 6px 0 6px; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
.ax-head.compact h1 { font-size: 24px; margin: 2px 0; }
.ax-head-sub { margin: 0; max-width: 760px; color: var(--text-dim); line-height: 1.55; font-size: 14px; }
.ax-head-a { position: relative; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ax-head-art { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 220px; height: 120px; opacity: .9; pointer-events: none; }
.ax-head-art svg { width: 100%; height: 100%; }
.ax-head-art .a { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.ax-head-art .a2 { fill: color-mix(in srgb, var(--c-3) 18%, transparent); }
.ax-head-art .b { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.ax-head-art .c { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ax-head-art .d { fill: color-mix(in srgb, var(--c-2) 40%, transparent); }
.ax-head.ed .ax-head-art, .ax-head.compact .ax-head-art { display: none; }
.ax-head:not(.compact) .ax-head-t { padding-right: 230px; }
.ax-head:not(.compact) .ax-head-a { flex-basis: 100%; order: 3; position: relative; }
.ax-eyebrow { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ax-crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.ax-crumbs a { color: var(--text-dim); text-decoration: none; }
.ax-crumbs a:hover { color: var(--text); text-decoration: underline; }
.ax-crumbs b { color: var(--text); font-weight: 600; }
.ax-crumbs-sep { color: var(--text-faint); }
.ax-ed-title { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.ax-ed-title h1 { margin: 0 0 6px; }
.ax-ed-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ax-ed-sentence { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; max-width: 980px;
background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--border); color: var(--text); }
.ax-ed-sentence svg { color: var(--ax-c); margin-top: 3px; }
/* ---- tabs ---------------------------------------------------------------------------------------------------- */
.ax-tabs, .ax-subtabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
box-shadow: var(--shadow-sm); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ax-tabs::-webkit-scrollbar, .ax-subtabs::-webkit-scrollbar { display: none; }
.ax-tab, .ax-subtab { display: inline-flex; gap: 7px; align-items: center; padding: 8px 13px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-dim);
text-decoration: none; white-space: nowrap; border: 0; background: transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ax-tab:hover, .ax-subtab:hover { background: var(--surface-2); color: var(--text); }
.ax-tab.on, .ax-subtab.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.ax-subtab[disabled] { opacity: .45; cursor: default; }
.ax-subtab .n { min-width: 20px; padding: 0 6px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; background: var(--surface-3); color: var(--text-dim); }
.ax-subtab.on .n { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); color: var(--accent); }
.ax-tab:focus-visible, .ax-subtab:focus-visible, .ax-btn:focus-visible, .ax-iconbtn:focus-visible, .ax-seg button:focus-visible, .ax-switch:focus-visible,
.ax-grow:focus-visible, .ax-tpl:focus-visible, .ax-start-o:focus-visible, .ax-tchip:focus-visible, .ax-swatch:focus-visible, .ax-iconopt:focus-visible,
.ax-pp-apph:focus-visible, .ax-cat-h:focus-visible, .ax-val:focus-visible, .ax-pv-person:focus-visible, .ax-chip-x:focus-visible, .ax-rung:focus-within,
.ax-check-input:focus-visible, .ax-dir-t tr.click:focus-visible, .ax-recent-p:focus-visible, .ax-pg > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- generic blocks ------------------------------------------------------------------------------------------- */
.ax-body > * + * { margin-top: 16px; }
.ax-stack { display: grid; gap: 16px; min-width: 0; align-content: start; }
.ax-grid2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ax-grid2.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ax-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ax-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; }
[data-theme="light"] .ax-card { box-shadow: var(--shadow-md); }
.ax-card-h { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.ax-card-ht { flex: 1 1 220px; min-width: 0; }
.ax-card-h h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.ax-card-h p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.ax-card-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ax-card-b { padding: 16px 18px; }
.ax-card-b.flush { padding: 0; }
.ax-card-f { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
.ax-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.ax-ic.ok { color: var(--success); background: var(--success-soft); }
.ax-ic.warn { color: var(--warn); background: var(--warn-soft); }
.ax-ic.danger { color: var(--danger); background: var(--danger-soft); }
.ax-ic.info { color: var(--info); background: var(--info-soft); }
.ax-ic.mute { color: var(--text-dim); background: var(--surface-3); }
.ax-ic.accent { color: var(--accent); }
.ax-form { display: grid; gap: 14px; min-width: 0; }
.ax-field { display: grid; gap: 6px; min-width: 0; }
.ax-label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); }
.ax-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-faint); }
.ax-hint { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.ax-hint svg { margin-top: 2px; }
.ax-field-err { margin: -6px 0 0; font-size: 13px; color: var(--danger); font-weight: 600; }
.ax-input, .ax-select { width: 100%; min-width: 0; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
font: inherit; font-size: 14px; line-height: 1.3; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.ax-input:focus, .ax-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); background: var(--surface); }
.ax-input[disabled], .ax-select[disabled] { opacity: .7; cursor: default; }
.ax-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.ax-select { appearance: auto; cursor: pointer; padding-right: 8px; }
.ax-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; max-width: 520px; }
.ax-search > svg { position: absolute; left: 12px; color: var(--text-faint); pointer-events: none; }
.ax-search .ax-input { padding-left: 36px; border-radius: 12px; }
.ax-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ax-inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.ax-inline .ax-input { flex: 1 1 140px; width: auto; }
.ax-toolbar .ax-select, .ax-inline .ax-select { width: auto; max-width: 100%; }
.ax-inline-toggle { display: inline-flex; gap: 9px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.ax-inline-toggle.big { align-items: flex-start; }
.ax-inline-toggle.big > span { display: grid; gap: 3px; } .ax-inline-toggle.big b { color: var(--text); font-size: 14px; } .ax-inline-toggle.big .ax-faint { font-weight: 500; font-size: 12.5px; line-height: 1.45; }
.ax-link { display: inline-flex; gap: 6px; align-items: center; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 13px; }
.ax-link:hover { text-decoration: underline; }
.ax-kv { display: grid; gap: 3px; min-width: 0; }
.ax-kv .k { display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.ax-kv .v { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.ax-kvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 18px; }
.ax-kv.wide { margin-top: 14px; }
/* ---- buttons ------------------------------------------------------------------------------------------------- */
.ax-btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 9px 15px; border-radius: 12px; font: inherit; font-weight: 600; font-size: 14px; line-height: 1.2;
border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); white-space: nowrap; cursor: pointer; text-decoration: none;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ax-btn:hover { background: var(--surface-2); border-color: var(--border-hover); }
.ax-btn:active { transform: translateY(1px); }
.ax-btn.pri { background: var(--accent); color: var(--text-inverse); border-color: transparent; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.ax-btn.pri:hover { background: var(--accent-strong); }
.ax-btn.pri.dangerfill { background: var(--danger); box-shadow: none; }
.ax-btn.soft { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); color: var(--accent); }
.ax-btn.soft:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.ax-btn.soft-ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); color: var(--success); }
.ax-btn.soft-ok:hover { background: color-mix(in srgb, var(--success) 20%, var(--surface)); }
.ax-btn.ghost { border-color: transparent; background: transparent; color: var(--text-dim); }
.ax-btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.ax-btn.ghost.danger { color: var(--danger); }
.ax-btn.ghost.danger:hover { background: var(--danger-soft); }
.ax-btn.chipbtn { border-radius: 999px; background: var(--surface); border-color: var(--border-strong); color: var(--text); font-weight: 600; }
.ax-btn.chipbtn svg { color: var(--accent); }
.ax-btn.chipbtn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.ax-btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 10px; gap: 6px; }
.ax-btn.block { width: 100%; justify-content: flex-start; }
.ax-btn[disabled], .ax-btn.is-busy { opacity: .5; cursor: default; transform: none; }
.ax-btn.is-busy { cursor: progress; }
.ax-iconbtn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; background: var(--surface); color: var(--text-dim); cursor: pointer; padding: 0; flex: none; }
.ax-iconbtn:hover { background: var(--surface-2); color: var(--text); }
.ax-iconbtn.ghost { border-color: transparent; background: transparent; }
.ax-iconbtn[disabled] { opacity: .35; cursor: default; }
.ax-menu { display: grid; gap: 4px; }
/* ---- pills, chips, counts ------------------------------------------------------------------------------------ */
.ax-pill { display: inline-flex; gap: 5px; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1.35; white-space: nowrap;
background: var(--surface-3); color: var(--text-dim); border: 1px solid transparent; }
.ax-pill.ok { color: var(--success); background: var(--success-soft); }
.ax-pill.warn { color: var(--warn); background: var(--warn-soft); }
.ax-pill.danger { color: var(--danger); background: var(--danger-soft); }
.ax-pill.info { color: var(--info); background: var(--info-soft); }
.ax-pill.accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.ax-pill.mute { color: var(--text-dim); background: var(--surface-3); }
.ax-count { display: inline-flex; gap: 5px; align-items: baseline; }
.ax-count b { font-size: 15px; } .ax-count span { font-size: 12px; color: var(--text-dim); }
.ax-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.ax-chip { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 550; line-height: 1.3;
background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; }
.ax-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ax-chip:not(:has(.ax-chip-x)) { padding-right: 10px; }
.ax-chip b { font-size: 12px; color: var(--text-dim); }
.ax-chip.on { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ax-chip.on > svg { color: var(--accent); }
.ax-chip.off { color: var(--text-faint); border-style: dashed; background: transparent; }
.ax-chip.legacy > svg { color: var(--warn); }
.ax-chip.link:hover { border-color: var(--accent); }
.ax-chip.more { color: var(--text-dim); padding: 4px 10px; }
.ax-chip.person { padding-left: 4px; }
.ax-chip-x { width: 22px; height: 22px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: var(--text-dim); cursor: pointer; padding: 0; flex: none; }
.ax-chip-x:hover { background: var(--danger-soft); color: var(--danger); }
.ax-tchip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-dim); }
.ax-tchip:hover { border-color: var(--accent); color: var(--text); }
.ax-tchip.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); color: var(--accent); }
.ax-tchip .n { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); }
.ax-tchip.on .n { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--accent); }
.ax-tchip[disabled] { cursor: default; opacity: .8; }
.ax-mark { background: color-mix(in srgb, var(--warn) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
/* ---- segmented, switch, checkbox ----------------------------------------------------------------------------- */
.ax-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); gap: 2px; max-width: 100%; }
.ax-seg.wrap { flex-wrap: wrap; }
.ax-seg button { padding: 6px 12px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-dim); display: inline-flex; gap: 6px; align-items: center;
border: 0; background: transparent; cursor: pointer; white-space: nowrap; }
.ax-seg button:hover { color: var(--text); }
.ax-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ax-seg button.on svg { color: var(--accent); }
.ax-seg button[disabled] { opacity: .4; cursor: default; }
.ax-seg.sm button { padding: 4px 10px; font-size: 12.5px; }
.ax-switch { position: relative; width: 40px; height: 24px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-3); cursor: pointer; padding: 0; flex: none;
transition: background var(--dur-fast) var(--ease); }
.ax-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease); }
.ax-switch[aria-checked="true"] { background: var(--accent); border-color: transparent; }
.ax-switch[aria-checked="true"] .ax-switch-knob { transform: translateX(16px); }
.ax-switch[disabled] { opacity: .5; cursor: default; }
.ax-check-input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; flex: none; }
.ax-check-input[disabled] { cursor: default; }
/* ---- banners, states ---------------------------------------------------------------------------------------- */
.ax-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; margin: 0;
background: color-mix(in srgb, var(--info) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 26%, var(--border)); color: var(--text); }
.ax-banner > svg { color: var(--info); margin-top: 1px; }
.ax-banner.warn { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.ax-banner.warn > svg { color: var(--warn); }
.ax-banner.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.ax-banner.danger > svg { color: var(--danger); }
.ax-banner.ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.ax-banner.ok > svg { color: var(--success); }
.ax-banner-t { flex: 1 1 auto; min-width: 0; }
.ax-banner-a { display: flex; gap: 8px; flex-wrap: wrap; }
.ax-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 34px 20px; border-radius: 16px; border: 1px dashed var(--border-strong); background: var(--surface-2); }
.ax-empty h3 { margin: 6px 0 0; font-size: 16px; }
.ax-empty p { margin: 0; max-width: 520px; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.ax-empty-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ax-empty.is-error .ax-empty-ic { color: var(--danger); background: var(--danger-soft); }
.ax-empty.is-denied .ax-empty-ic { color: var(--warn); background: var(--warn-soft); }
.ax-empty-a { margin-top: 8px; }
.ax-skel-wrap { display: grid; gap: 10px; }
.ax-skel { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ax-skel-c { width: 38px; height: 38px; border-radius: 11px; flex: none; }
.ax-skel-l { flex: 1; display: grid; gap: 8px; }
.ax-skel-l i { display: block; height: 10px; border-radius: 6px; width: 60%; }
.ax-skel-l i + i { width: 36%; }
.ax-skel-c, .ax-skel-l i { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: axShimmer 1.4s linear infinite; }
@keyframes axShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ax-spin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: axSpin .8s linear infinite; }
@keyframes axSpin { to { transform: rotate(360deg); } }
/* ---- stats ------------------------------------------------------------------------------------------------- */
.ax-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ax-stats.compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ax-stat { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-width: 0; }
.ax-stat > div { display: grid; min-width: 0; }
.ax-stat-l { font-size: 12px; font-weight: 650; color: var(--text-dim); }
.ax-stat-v { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-stat-s { font-size: 12px; color: var(--text-faint); }
.ax-stats.compact .ax-stat { padding: 11px 13px; box-shadow: none; background: var(--surface-2); }
.ax-stats.compact .ax-stat-v { font-size: 19px; }
/* ---- group tiles + list ------------------------------------------------------------------------------------- */
.ax-gtile { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; color: var(--ax-c);
background: color-mix(in srgb, var(--ax-c) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ax-c) 28%, transparent); }
.ax-gtile.lg { width: 54px; height: 54px; border-radius: 16px; }
.ax-glist { display: grid; gap: 10px; }
.ax-grow { --ax-c: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 16px 14px 18px; border-radius: 16px;
background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; position: relative; overflow: hidden;
transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.ax-grow.c1 { --ax-c: var(--c-1); } .ax-grow.c2 { --ax-c: var(--c-2); } .ax-grow.c3 { --ax-c: var(--c-3); } .ax-grow.c4 { --ax-c: var(--c-4); }
.ax-grow.c5 { --ax-c: var(--c-5); } .ax-grow.c6 { --ax-c: var(--c-6); } .ax-grow.c7 { --ax-c: var(--c-7); } .ax-grow.c8 { --ax-c: var(--c-8); }
.ax-grow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ax-c); opacity: .85; }
.ax-grow:hover { border-color: color-mix(in srgb, var(--ax-c) 45%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ax-grow.is-off { opacity: .72; }
.ax-grow-m { min-width: 0; display: grid; gap: 6px; }
.ax-grow-t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ax-grow-t b { font-size: 15.5px; }
.ax-grow-rule { display: flex; gap: 7px; align-items: flex-start; margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.45; }
.ax-grow-rule svg { color: var(--ax-c); margin-top: 3px; }
.ax-grow-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.ax-grow-meta > span { display: inline-flex; gap: 5px; align-items: center; }
.ax-grow-apps { gap: 5px !important; flex-wrap: wrap; }
.ax-mini-app { padding: 2px 8px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--text); }
.ax-mini-app.more { color: var(--text-dim); }
.ax-grow-n { display: grid; justify-items: end; text-align: right; min-width: 80px; }
.ax-grow-n b { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ax-grow-n span { font-size: 12px; color: var(--text-dim); }
.ax-grow-n .ax-grow-n-note { color: var(--warn); font-weight: 600; }
.ax-grow-chev { color: var(--text-faint); }
.ax-tpls .ax-card-b { padding: 14px; }
.ax-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ax-tpl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px; border-radius: 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
background: color-mix(in srgb, var(--ax-c) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ax-c) 20%, var(--border)); }
.ax-tpl:hover { border-color: var(--ax-c); box-shadow: var(--shadow-sm); }
.ax-tpl .ax-gtile { grid-row: span 2; }
.ax-tpl-t { display: grid; gap: 3px; min-width: 0; } .ax-tpl-t b { font-size: 14px; } .ax-tpl-t span { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.ax-tpl-k { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--text-faint); }
/* ---- new-group dialog ---------------------------------------------------------------------------------------- */
.ax-start { display: grid; gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
.ax-start-o { --ax-c: var(--accent); display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface);
font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ax-start-o:hover { border-color: color-mix(in srgb, var(--ax-c) 50%, var(--border)); }
.ax-start-o.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ax-start-t { display: grid; gap: 2px; flex: 1; min-width: 0; } .ax-start-t b { font-size: 14px; } .ax-start-t span { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.ax-start-ok { color: var(--accent); }
/* ---- editor ------------------------------------------------------------------------------------------------- */
.ax-ruleg { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ax-ed-side { position: sticky; top: 76px; display: grid; gap: 16px; min-width: 0; }
.ax-sumbox { display: grid; gap: 6px; padding: 12px 14px; margin: 0 0 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); }
.ax-sumline { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.5; font-weight: 550; }
.ax-sumline svg { color: var(--accent); margin-top: 4px; }
.ax-how-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ax-how-l li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.ax-how-l svg { color: var(--success); margin-top: 3px; }
.ax-perm-intro { display: grid; gap: 6px; margin: 0 0 14px; }
.ax-perm-intro p { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.ax-perm-intro svg { margin-top: 2px; color: var(--accent); }
.ax-swatches, .ax-iconpick { display: flex; gap: 8px; flex-wrap: wrap; }
.ax-swatch { width: 34px; height: 34px; border-radius: 11px; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; color: var(--text-inverse);
background: var(--ax-c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.ax-swatch.on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--ax-c); }
.ax-iconopt { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-dim); display: grid; place-items: center; cursor: pointer; }
.ax-iconopt:hover { color: var(--text); border-color: var(--border-hover); }
.ax-iconopt.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ax-swatch[disabled], .ax-iconopt[disabled] { cursor: default; opacity: .7; }
.ax-status-now { display: grid; gap: 8px; justify-items: start; }
.ax-status-now p { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.ax-status-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ax-status-steps li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--text-faint); border: 1px dashed var(--border); }
.ax-status-steps li.on { color: var(--text); border-style: solid; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ax-status-steps li.on svg { color: var(--accent); }
.ax-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ax-plist li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 6px 6px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.ax-plist li.ax-plist-empty { justify-content: flex-start; color: var(--text-faint); font-size: 13px; border-style: dashed; background: transparent; padding: 10px 12px; }
.ax-inc .ax-card-h { background: color-mix(in srgb, var(--success) 7%, var(--surface)); }
.ax-exc .ax-card-h { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.ax-savebar { position: sticky; bottom: 14px; z-index: 30; margin-top: 18px; }
.ax-savebar-in { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px 12px 18px; border-radius: 16px; background: var(--surface-solid);
border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-lg); }
.ax-savebar-t { display: flex; gap: 8px; align-items: center; flex: 1 1 260px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.ax-savebar-t svg { color: var(--accent); }
/* ---- people + picker ---------------------------------------------------------------------------------------- */
.ax-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 13px; color: var(--text-inverse);
background: linear-gradient(135deg, var(--ax-c), color-mix(in srgb, var(--ax-c) 55%, var(--accent-2))); }
.ax-av.sm { width: 30px; height: 30px; font-size: 11.5px; }
.ax-av.xs { width: 20px; height: 20px; font-size: 10px; }
.ax-av.lg { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ax-c) 20%, transparent); }
.ax-person { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ax-person-t { display: grid; min-width: 0; }
.ax-person-t b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-person-t span { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-ppick { position: relative; display: flex; align-items: center; min-width: 0; }
.ax-ppick-ic { position: absolute; left: 12px; color: var(--text-faint); display: inline-flex; pointer-events: none; }
.ax-ppick .ax-input { padding-left: 36px; }
.ax-ppick.big .ax-input { padding: 13px 14px 13px 40px; font-size: 15.5px; border-radius: 14px; }
.ax-ppick.big .ax-ppick-ic { left: 14px; }
.ax-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow: auto; padding: 6px; border-radius: 14px;
background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.ax-pop-opt { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.ax-pop-opt > .ax-person { flex: 1; }
.ax-pop-opt:hover, .ax-pop-opt.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ax-pop-opt > svg { color: var(--text-faint); }
.ax-pop-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ax-pop-n { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.ax-pop-state { display: flex; gap: 8px; align-items: center; padding: 10px; color: var(--text-dim); font-size: 13px; }
/* ---- rule builder ------------------------------------------------------------------------------------------- */
.ax-rb { display: grid; gap: 14px; }
.ax-rb-block { border: 1px solid var(--border-strong); border-radius: 16px; padding: 14px; background: var(--surface-2); display: grid; gap: 12px; min-width: 0; }
.ax-rb-block.is-ex { background: color-mix(in srgb, var(--danger) 4%, var(--surface-2)); border-color: color-mix(in srgb, var(--danger) 26%, var(--border)); }
.ax-rb-bh { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ax-rb-bht { flex: 1 1 200px; min-width: 0; }
.ax-rb-bht h4 { margin: 0; font-size: 15px; }
.ax-rb-bht p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); }
.ax-rb-quick { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ax-rb-quick-t { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 13px; font-weight: 650; color: var(--accent); }
.ax-rb-quick-l { display: flex; gap: 8px; flex-wrap: wrap; }
.ax-rb-group { display: grid; gap: 10px; min-width: 0; }
.ax-rb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; min-width: 0; }
.ax-rb-join { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 22px; position: relative; }
.ax-rb-join::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; border-left: 2px dotted var(--border-hover); }
.ax-rb-join span { position: relative; z-index: 1; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
background: var(--surface); border: 1px solid var(--border-strong); color: var(--accent); }
.ax-rb-cond { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 10px; border-radius: 14px;
background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-width: 0; }
.ax-rb-cond.is-incomplete { border-style: dashed; border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
.ax-rb-cond.has-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.ax-rb-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); margin-top: 3px; }
.ax-rb-cond-main { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 8px 10px; align-items: start; min-width: 0; }
.ax-rb-sel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.ax-rb-sel .ax-select { padding: 8px 10px; font-size: 13.5px; }
.ax-rb-attr { font-weight: 600; }
.ax-rb-vals { min-width: 0; }
.ax-rb-vals-w { position: relative; min-width: 0; }
.ax-rb-rm { margin-top: 2px; }
.ax-rb-hint, .ax-rb-err { grid-column: 2 / -1; display: flex; gap: 6px; align-items: center; margin: 2px 0 0; font-size: 12.5px; color: var(--warn); }
.ax-rb-err { color: var(--danger); font-weight: 600; }
.ax-rb-sub { padding: 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--surface-2)); display: grid; gap: 10px; }
.ax-rb-sub.has-error { border-color: var(--danger); }
.ax-rb-subh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ax-rb-subh > svg { color: var(--accent); }
.ax-rb-subt { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-right: auto; }
.ax-rb-adds { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 2px; }
.ax-rb-exceptbar { display: flex; }
.ax-rb-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.ax-rb-note svg { margin-top: 2px; color: var(--accent); }
.ax-rb-note.warn { color: var(--warn); } .ax-rb-note.warn svg { color: var(--warn); }
.ax-rb-stack { display: grid; gap: 8px; min-width: 0; }
.ax-rb-enum { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-rb-inline { display: inline-flex; gap: 8px; align-items: center; }
.ax-rb-inline.wrap { flex-wrap: wrap; display: flex; }
.ax-rb-num { width: 110px; }
.ax-rb-date { max-width: 220px; }
.ax-rb-gsel { max-width: 420px; }
.ax-rb-people { display: grid; gap: 8px; min-width: 0; }
.ax-chipbox { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 40px; padding: 5px 8px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface-2); cursor: text; }
.ax-chipbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); background: var(--surface); }
.ax-chipbox-chips { display: contents; }
.ax-rb-people .ax-chipbox-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-chipbox-input { flex: 1 1 120px; min-width: 100px; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; padding: 4px 2px; }
.ax-chipbox.is-ro { cursor: default; }
.ax-rb.is-ro .ax-rb-cond { box-shadow: none; }
/* ---- preview + why ------------------------------------------------------------------------------------------ */
.ax-pv .ax-card-b { display: grid; gap: 14px; }
.ax-pv-count { display: grid; gap: 6px; transition: opacity var(--dur-fast) var(--ease); }
.ax-pv-count.is-busy { opacity: .45; }
.ax-pv-num { display: flex; gap: 8px; align-items: baseline; }
.ax-pv-num b { font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent); }
.ax-pv-num span { font-size: 15px; color: var(--text-dim); font-weight: 600; }
.ax-pv-bar { height: 8px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.ax-pv-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--c-3)); transition: width var(--dur-mid) var(--ease); }
.ax-pv-of { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.ax-pv-break { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-pv-break:empty { display: none; }
.ax-pv-list { display: grid; gap: 8px; }
.ax-pv-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ax-pv-person { width: 100%; display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; border: 1px solid transparent; background: transparent; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ax-pv-person > .ax-person { flex: 1; }
.ax-pv-person:hover { background: var(--surface-2); border-color: var(--border); }
.ax-pv-person.on { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ax-pv-why-l { display: inline-flex; gap: 2px; align-items: center; font-size: 12px; font-weight: 650; color: var(--accent); opacity: 0; }
.ax-pv-person:hover .ax-pv-why-l, .ax-pv-person.on .ax-pv-why-l, .ax-pv-person:focus-visible .ax-pv-why-l { opacity: 1; }
.ax-pv-more { margin: 0; font-size: 12.5px; padding-left: 8px; }
.ax-pv-empty { display: flex; gap: 10px; align-items: center; padding: 14px; border-radius: 12px; border: 1px dashed var(--border-strong); color: var(--text-dim); font-size: 13.5px; }
.ax-pv-why { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 10px; }
.ax-pv-why-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ax-pv-check { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 8px; }
.ax-why { display: grid; gap: 10px; }
.ax-why-head { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; }
.ax-why-head > div { display: grid; gap: 2px; } .ax-why-head b { font-size: 14px; } .ax-why-head span { font-size: 12.5px; color: var(--text-dim); }
.ax-why-head.ok { background: var(--success-soft); } .ax-why-head.ok .ax-why-big { color: var(--success); }
.ax-why-head.no { background: var(--danger-soft); } .ax-why-head.no .ax-why-big { color: var(--danger); }
.ax-why-list { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 6px; border-left: 2px solid var(--border); }
.ax-why-list.root { padding-left: 0; border-left: 0; }
.ax-why-group { display: grid; gap: 6px; }
.ax-why-gh { display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.ax-why-leaf { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.ax-why-leaf.ok { border-color: color-mix(in srgb, var(--success) 32%, var(--border)); }
.ax-why-leaf.no { border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); }
.ax-why-mark { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; }
.ax-why-leaf.ok .ax-why-mark, .ax-why-mark.ok { color: var(--success); background: var(--success-soft); }
.ax-why-leaf.no .ax-why-mark, .ax-why-mark.no { color: var(--danger); background: var(--danger-soft); }
.ax-why-t { display: grid; gap: 2px; min-width: 0; }
.ax-why-act { font-size: 12px; color: var(--text-dim); } .ax-why-act b { color: var(--text); font-weight: 650; }
.ax-why-ex { display: grid; gap: 6px; margin-top: 4px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 4%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--danger) 30%, var(--border)); }
/* ---- permissions picker ------------------------------------------------------------------------------------- */
.ax-pp { display: grid; gap: 14px; }
.ax-pp-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ax-pp-sum { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-dim); }
.ax-pp-sum svg { color: var(--accent); }
.ax-pp-areas, .ax-cat-list { display: grid; gap: 18px; }
.ax-pp-area { display: grid; gap: 8px; }
.ax-pp-areah { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.ax-pp-areah svg { color: var(--accent); }
.ax-pp-areah .ax-faint { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.ax-pp-apps { display: grid; gap: 8px; }
.ax-pp-app, .ax-cat-app { border-radius: 14px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; min-width: 0; }
.ax-pp-app.has-sel { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ax-pp-app.is-open, .ax-cat-app.is-open { box-shadow: var(--shadow-md); }
.ax-pp-apph, .ax-cat-h { width: 100%; display: flex; gap: 12px; align-items: center; padding: 11px 14px; border: 0; background: transparent; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ax-pp-apph:hover, .ax-cat-h:hover { background: var(--surface-2); }
.ax-appic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--text-dim); background: var(--surface-3); }
.ax-appic.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.ax-appic.sm { width: 28px; height: 28px; border-radius: 9px; }
.ax-pp-appt { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.ax-pp-appt b { font-size: 14.5px; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ax-pp-appt > span { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-pp-lvl { display: inline-flex; gap: 5px; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; color: var(--text-faint); background: var(--surface-2); }
.ax-pp-lvl.on { color: var(--success); background: var(--success-soft); }
.ax-pp-cnt { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-inverse); background: var(--accent); }
.ax-pp-chev { color: var(--text-faint); }
.ax-pp-appb { padding: 4px 14px 14px 62px; display: grid; gap: 8px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 2%, var(--surface)); }
.ax-pp-auto { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45;
color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.ax-pp-auto svg { color: var(--accent); margin-top: 2px; }
.ax-pp-acth { margin: 10px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.ax-pp-key { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.ax-pp-key.on { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.ax-pp-key.is-view { margin-top: 10px; }
.ax-pp-key.is-locked { background: var(--surface-2); border-style: dashed; }
.ax-pp-keyt { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; cursor: pointer; min-width: 0; }
.ax-pp-key.is-locked .ax-pp-keyt { cursor: default; }
.ax-pp-keyl { display: inline-flex; gap: 6px; align-items: center; font-weight: 650; font-size: 14px; }
.ax-pp-code { font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text-dim); overflow-wrap: anywhere; }
.ax-pp-code.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ax-pp-keyd { grid-column: 2; margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.ax-pp-keyd:empty { display: none; }
.ax-pp-notes { grid-column: 2; display: flex; gap: 6px 12px; flex-wrap: wrap; margin-top: 4px; }
.ax-pp-lock, .ax-pp-req, .ax-pp-inc { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 600; margin: 0; }
.ax-pp-lock { color: var(--warn); } .ax-pp-req { color: var(--accent); } .ax-pp-inc { color: var(--text-dim); font-weight: 550; }
.ax-pp-scope { margin-top: 10px; display: grid; gap: 8px; }
.ax-pp-scopeh { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ax-pp-scopeh b { font-size: 13.5px; } .ax-pp-scopeh span { font-size: 12.5px; color: var(--text-dim); }
.ax-rungs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.ax-rung { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; min-width: 0; }
.ax-rung:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ax-rung.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.ax-rung.is-dis { cursor: default; opacity: .62; }
.ax-rung.is-locked { border-style: dashed; }
.ax-rung-input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.ax-rung-ic { color: var(--text-faint); margin-top: 2px; } .ax-rung.on .ax-rung-ic { color: var(--accent); }
.ax-rung-t { display: grid; gap: 3px; min-width: 0; }
.ax-rung-t b { font-size: 13.5px; } .ax-rung-t > span { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.ax-rung-t .ax-pp-code { justify-self: start; }
/* ---- diff dialog -------------------------------------------------------------------------------------------- */
.ax-diff { display: grid; gap: 14px; }
.ax-diff-members { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.ax-diff-stat { display: grid; gap: 2px; } .ax-diff-stat span { font-size: 12px; color: var(--text-dim); font-weight: 650; } .ax-diff-stat b { font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ax-diff-arrow { color: var(--text-faint); }
.ax-diff-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ax-diff-lists { display: grid; gap: 8px; }
.ax-diff-more { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ax-diff-more > summary { list-style: none; display: flex; gap: 6px; align-items: center; padding: 9px 12px; cursor: pointer; font-size: 13px; font-weight: 650; }
.ax-diff-more > summary::-webkit-details-marker { display: none; }
.ax-diff-more[open] > summary svg { transform: rotate(180deg); }
.ax-diff-names { list-style: none; margin: 0; padding: 4px 12px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; max-height: 220px; overflow: auto; }
.ax-diff-names li { font-size: 13px; padding: 4px 6px; border-radius: 8px; }
.ax-diff-names.ok li { background: var(--success-soft); } .ax-diff-names.danger li { background: var(--danger-soft); }
.ax-diff-h { display: flex; gap: 8px; align-items: center; margin: 4px 0 0; font-size: 14px; }
.ax-diff-h svg { color: var(--accent); }
.ax-diff-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ax-diff-key { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.ax-diff-key.loses { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
.ax-diff-keyt { display: grid; gap: 3px; min-width: 0; } .ax-diff-keyt b { font-size: 13.5px; } .ax-diff-keyt code { justify-self: start; }
.ax-diff-keyn { display: flex; gap: 6px; }
.ax-diff-key > .ax-diff-more { grid-column: 1 / -1; }
.ax-diff-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 0 12px 12px; }
.ax-diff-two .ax-diff-names { padding: 4px 0 0; }
.ax-diff-confirm { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border)); }
.ax-diff-confirm p { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 650; font-size: 13.5px; color: var(--warn); }
.ax-diff-tick { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; cursor: pointer; }
/* ---- dialog ------------------------------------------------------------------------------------------------- */
.ax-dlg-back { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: var(--overlay); backdrop-filter: blur(3px); animation: axFade .14s ease-out; }
@keyframes axFade { from { opacity: 0; } to { opacity: 1; } }
.ax-dlg { width: 560px; max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; border-radius: 20px; background: var(--surface-solid); color: var(--text);
border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); overflow: hidden; animation: axUp .18s var(--ease); }
@keyframes axUp { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.ax-dlg.sm { width: 440px; } .ax-dlg.md { width: 620px; } .ax-dlg.lg { width: 860px; }
.ax-dlg-h { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ax-dlg.tone-warn .ax-dlg-h { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.ax-dlg.tone-danger .ax-dlg-h { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.ax-dlg-ht { flex: 1; min-width: 0; }
.ax-dlg-h h2 { margin: 3px 0 0; font-size: 17px; line-height: 1.3; }
.ax-dlg-h p { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.ax-dlg-b { padding: 16px 18px; overflow: auto; flex: 1 1 auto; }
.ax-dlg-f { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.ax-dlg-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
/* ---- tables, pager, timeline -------------------------------------------------------------------------------- */
.ax-table-w { overflow-x: auto; max-width: 100%; }
.ax-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ax-table th { text-align: left; font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.ax-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ax-table tbody tr:last-child td { border-bottom: 0; }
.ax-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.ax-table tr.click { cursor: pointer; }
.ax-table tr.is-off td { opacity: .62; }
.ax-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding: 12px 0 0; }
.ax-pager > span { margin-right: auto; font-size: 13px; }
.ax-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ax-tl { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 16px; }
.ax-tl::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; border-left: 2px solid var(--border); }
.ax-tl:last-child::before { display: none; }
.ax-tl-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--text-dim); background: var(--surface-3); position: relative; z-index: 1; }
.ax-tl.ok .ax-tl-dot { color: var(--success); background: var(--success-soft); } .ax-tl.danger .ax-tl-dot { color: var(--danger); background: var(--danger-soft); }
.ax-tl.accent .ax-tl-dot { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.ax-tl-b { display: grid; gap: 4px; padding: 3px 0 0; min-width: 0; }
.ax-tl-h { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; } .ax-tl-h b { font-size: 14px; } .ax-tl-h span { font-size: 12.5px; }
.ax-tl-l { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); line-height: 1.5; overflow-wrap: anywhere; }
/* ---- catalogue ---------------------------------------------------------------------------------------------- */
.ax-cat-meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ax-cat-b { border-top: 1px solid var(--border); }
.ax-cat-t td { vertical-align: top; }
.ax-cat-k { min-width: 220px; } .ax-cat-k > * { margin: 0 6px 4px 0; } .ax-cat-k b { display: block; font-size: 14px; }
.ax-cat-d { color: var(--text-dim); min-width: 220px; line-height: 1.45; }
.ax-cat-g { min-width: 180px; } .ax-cat-p { white-space: nowrap; }
.ax-none { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; }
.ax-implies { display: flex !important; gap: 4px; align-items: center; font-size: 11.5px; margin-top: 4px !important; }
.ax-cat-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; }
/* ---- person ------------------------------------------------------------------------------------------------- */
.ax-person-search { display: flex; gap: 12px; align-items: flex-end; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ax-person-search .ax-label { margin-bottom: 8px; }
.ax-person-page > * + * { margin-top: 16px; }
.ax-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ax-recent-p { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); color: var(--text); text-decoration: none; background: var(--surface-2); }
.ax-recent-p:hover { border-color: var(--accent); }
.ax-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px; border-radius: 18px; background: linear-gradient(118deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ax-who-id { display: flex; gap: 16px; align-items: center; min-width: 0; }
.ax-who-id h2 { margin: 0; font-size: 21px; } .ax-who-id p { margin: 2px 0 0; color: var(--text-dim); font-size: 14px; overflow-wrap: anywhere; } .ax-who-id .ax-ed-pills { margin-top: 8px; }
.ax-attrs { display: grid; gap: 16px; }
.ax-ext { padding-top: 14px; border-top: 1px dashed var(--border); display: grid; gap: 10px; }
.ax-pglist { display: grid; gap: 8px; }
.ax-pg { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.ax-pg > summary { list-style: none; display: flex; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; }
.ax-pg > summary::-webkit-details-marker { display: none; }
.ax-pg[open] > summary .ax-pp-chev { transform: rotate(180deg); }
.ax-pg.yes { border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.ax-pg-t { display: grid; gap: 2px; flex: 1; min-width: 0; } .ax-pg-t b { font-size: 14px; } .ax-pg-t span { font-size: 12.5px; color: var(--text-dim); }
.ax-pg-mark { display: inline-flex; } .ax-pg.yes .ax-pg-mark { color: var(--success); } .ax-pg.no .ax-pg-mark { color: var(--text-faint); }
.ax-pg .ax-gtile { width: 34px; height: 34px; border-radius: 10px; }
.ax-pg-b { padding: 0 12px 12px; display: grid; gap: 10px; }
.ax-more-groups { border-top: 1px dashed var(--border); padding-top: 8px; }
.ax-more-groups > summary { list-style: none; display: flex; gap: 6px; align-items: center; cursor: pointer; font-size: 13px; font-weight: 650; color: var(--text-dim); padding: 6px 2px; }
.ax-more-groups > summary::-webkit-details-marker { display: none; }
.ax-legacy-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ax-legacy-l li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.ax-legacy-l .ax-gtile { width: 34px; height: 34px; border-radius: 10px; }
.ax-appcell { display: flex; gap: 10px; align-items: center; } .ax-appcell > span:last-child { display: grid; } .ax-appcell .ax-faint { font-size: 12px; }
.ax-lvl { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; background: var(--surface-3); color: var(--text-dim); }
.ax-lvl.all { color: var(--success); background: var(--success-soft); }
.ax-lvl.area, .ax-lvl.region { color: var(--info); background: var(--info-soft); }
.ax-lvl.store { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.ax-noapps { display: grid; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
/* ---- directory ---------------------------------------------------------------------------------------------- */
.ax-dir > * + * { margin-top: 16px; }
.ax-census { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ax-census-run { display: flex; gap: 10px; align-items: flex-start; } .ax-census-run > div { display: grid; gap: 2px; } .ax-census-run b { font-size: 14.5px; } .ax-census-run span { font-size: 12.5px; color: var(--text-dim); }
.ax-census-run.ok > svg { color: var(--success); } .ax-census-run.warn > svg { color: var(--warn); }
.ax-census-run .ax-census-err { color: var(--warn); font-weight: 600; }
.ax-census-next { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.ax-dir-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.ax-explorer { position: sticky; top: 76px; }
.ax-vals { display: grid; gap: 8px; }
.ax-vals-sum { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.ax-vals-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 60vh; overflow: auto; }
.ax-val { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 10px; border: 1px solid transparent; background: transparent; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.ax-val:hover { background: var(--surface-2); border-color: var(--border); }
.ax-val.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ax-val-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ax-val-bar { height: 6px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.ax-val-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.ax-val.empty .ax-val-bar i { background: var(--text-faint); }
.ax-val-n { font-size: 13px; font-variant-numeric: tabular-nums; }
.ax-dir-filter:empty { display: none; }
.ax-dir-filter { margin: 10px 0 0; }
.ax-dir-t td { white-space: nowrap; }
.ax-dir-t td:first-child, .ax-mem-t td:first-child { min-width: 220px; }
.ax-colpick { display: grid; gap: 10px; }
/* ---- legacy + settings -------------------------------------------------------------------------------------- */
.ax-legacy > * + * { margin-top: 16px; }
.ax-leg-list { display: grid; gap: 12px; }
.ax-leg.is-off { opacity: .78; }
.ax-leg-b { display: grid; gap: 14px; }
.ax-conv { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.ax-conv-col { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.ax-conv-col b { font-size: 15px; } .ax-conv-col p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.ax-conv-col.new { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ax-conv-col.new p:not(.ax-faint) { color: var(--text); }
.ax-conv .ax-diff-arrow { align-self: center; }
.ax-settings > * + * { margin-top: 16px; }
.ax-ext-t td:first-child { white-space: nowrap; color: var(--text-dim); }
.ax-ext-t td:nth-child(2) { min-width: 200px; }
.ax-ext-t .ax-input { padding: 7px 10px; font-size: 13.5px; }
/* ---- narrower screens --------------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
.ax-ruleg { grid-template-columns: minmax(0, 1fr) 330px; }
.ax-dir-grid { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 1000px) {
.ax-ruleg, .ax-grid2, .ax-grid2.even, .ax-grid3, .ax-dir-grid, .ax-who { grid-template-columns: minmax(0, 1fr); }
.ax-ed-side, .ax-explorer { position: static; }
.ax-head:not(.compact) .ax-head-t { padding-right: 0; }
.ax-head:not(.compact) .ax-head-a { position: static; }
.ax-head-art { display: none; }
}
@media (max-width: 760px) {
.ax { padding-bottom: 120px; }
.ax-head { padding: 16px; border-radius: 18px; gap: 12px; }
.ax-head h1 { font-size: 22px; }
.ax-head-sub { font-size: 13.5px; }
.ax-head-a { width: 100%; }
.ax-head-a .ax-btn { flex: 1 1 auto; }
.ax-ed-title { align-items: flex-start; }
.ax-gtile.lg { width: 44px; height: 44px; }
.ax-tabs, .ax-subtabs { margin-left: -2px; margin-right: -2px; border-radius: 12px; }
.ax-tab, .ax-subtab { padding: 8px 10px; font-size: 13px; }
.ax-card-h { padding: 12px 14px; }
.ax-card-b { padding: 14px; }
.ax-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ax-stat { padding: 11px 12px; gap: 10px; }
.ax-stat .ax-ic { width: 28px; height: 28px; }
.ax-stat-v { font-size: 18px; }
.ax-toolbar { align-items: stretch; }
.ax-search { max-width: none; flex-basis: 100%; }
.ax-toolbar > .ax-seg { max-width: 100%; }
.ax-grow { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 12px 12px 12px 14px; }
.ax-grow-n { grid-column: 2; justify-items: start; text-align: left; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.ax-grow-n b { font-size: 17px; }
.ax-grow-chev { display: none; }
.ax-rb-block { padding: 10px; }
.ax-rb-cond { grid-template-columns: minmax(0, 1fr) auto; padding: 10px; }
.ax-rb-ic { display: none; }
.ax-rb-cond-main { grid-template-columns: minmax(0, 1fr); }
.ax-rb-hint, .ax-rb-err { grid-column: 1 / -1; }
.ax-rb-join { padding-left: 12px; } .ax-rb-join::before { left: 20px; }
.ax-rb-sub { padding: 8px; }
.ax-rb-num { width: 100%; }
.ax-pp-apph, .ax-cat-h { flex-wrap: wrap; gap: 8px 10px; }
.ax-pp-appt { flex-basis: calc(100% - 100px); }
.ax-pp-appt > span { white-space: normal; }
.ax-pp-lvl { order: 3; }
.ax-pp-appb { padding: 4px 10px 12px; }
.ax-rungs { grid-template-columns: minmax(0, 1fr); }
.ax-cat-meta { justify-content: flex-start; order: 3; width: 100%; }
.ax-diff-members { gap: 10px; }
.ax-diff-chips { margin-left: 0; width: 100%; }
.ax-conv { grid-template-columns: minmax(0, 1fr); }
.ax-conv .ax-diff-arrow { transform: rotate(90deg); justify-self: center; }
.ax-dlg-back { padding: 0; place-items: end stretch; }
.ax-dlg, .ax-dlg.sm, .ax-dlg.md, .ax-dlg.lg { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
.ax-dlg-f { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.ax-dlg-f .ax-btn { flex: 1 1 auto; }
.ax-savebar { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
.ax-savebar-in { padding: 10px; }
.ax-savebar-t { flex-basis: 100%; }
.ax-savebar-in .ax-btn { flex: 1 1 auto; }
.ax-who { padding: 14px; }
.ax-who-id { align-items: flex-start; }
.ax-pg > summary { flex-wrap: wrap; }
.ax-pg-t { flex-basis: calc(100% - 60px); }
.ax-av.lg { width: 52px; height: 52px; font-size: 18px; }
.ax-person-search { padding: 12px; }
.ax-person-search > .ax-ic { display: none; }
.ax-kvgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ax-leg .ax-kvgrid { grid-template-columns: minmax(0, 1fr); }
.ax-leg-b .ax-chips, .ax-kv .v { min-width: 0; max-width: 100%; }
.ax-table th, .ax-table td { padding: 9px 10px; }
.ax-val { grid-template-columns: minmax(0, 1fr) 50px auto; }
.ax-banner { flex-wrap: wrap; }
.ax-banner-t { flex: 1 1 0; }
.ax-banner-a { flex-basis: 100%; padding-left: 28px; }
.ax-ext-t thead { display: none; }
.ax-ext-t, .ax-ext-t tbody, .ax-ext-t tr, .ax-ext-t td { display: block; width: 100%; }
.ax-ext-t tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ax-ext-t td { border: 0; padding: 4px 0; }
.ax-extnames { min-width: 0; }
}
/* follow-up round: census notes, safety nets, not-evaluable, misc */
.ax-runnotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.ax-runnote { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: 4px; }
.ax-runnote.warn { background: color-mix(in srgb, var(--warn) 7%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 28%, var(--border)); }
.ax-ren-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; overflow-wrap: anywhere; }
.ax-safe-h { display: flex; gap: 8px; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 13.5px; }
.ax-safe-h svg { color: var(--accent); }
.ax-num { width: 96px; }
.ax-block { display: block; margin-top: 3px; }
.ax-chip.new { border-style: dashed; }
.ax-pop-state.hidden-vals { color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); border-radius: 10px; margin-bottom: 4px; line-height: 1.4; }
.ax-noteval .ax-banner-t { display: grid; gap: 4px; }
.ax-ed-notes > * + * { margin-top: 10px; }
.ax-rb-cond.is-locked { background: var(--surface-2); border-style: dashed; }
.ax-rb-cond.is-locked .ax-rb-ic { color: var(--warn); background: var(--warn-soft); }
.ax-ed-notes:not(:empty) { margin-bottom: 16px; }
/* «Επιλογή όλων» (8.1.3) */
.ax-pp-bulk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); border: 1px solid var(--border); }
.ax-pp-bulknote:empty { display: none; }
.ax-pp-approw { display: flex; align-items: center; min-width: 0; }
.ax-pp-approw > .ax-pp-apph { flex: 1 1 auto; min-width: 0; }
.ax-pp-appacts { display: inline-flex; gap: 2px; padding-right: 8px; flex: none; }
.ax-pp-areab { display: inline-flex; gap: 2px; text-transform: none; letter-spacing: 0; font-weight: 600; }
@media (max-width: 760px) {
.ax-pp-approw { flex-wrap: wrap; }
.ax-pp-appacts { padding: 0 10px 8px 56px; }
.ax-pp-areah { flex-wrap: wrap; }
}
/* settings: EL / EN friendly names side by side */
.ax-extnames { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; align-items: center; min-width: 220px; }
.ax-lang { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: var(--text-faint); }
/* ---- access: esl-fix (design/access/css/esl-fix.css) ---- */
/* ESL-FIX — «Διόρθωση ESL σε timeout» (fe/src/modules/esl/fix.js, FE 8.1.0). Tokens only; light + dark come from the
tokens. Prefix ef-. Phone (390) first: one column, 52–60 px touch targets, the answer buttons at the bottom of the
card where a thumb reaches; desktop centres the guide at 680 px. Merged into main.css by .e2e/css-access.mjs. */
.ef-page { max-width: 1080px; margin: 0 auto; }
.ef-wiz { max-width: 680px; }
.ef-loading { color: var(--text-faint); padding: 2rem 0; text-align: center; }
.ef-muted { color: var(--text-dim); }
.ef-small { font-size: var(--text-sm); }
.ef-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ef-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .75rem; }
.ef-row.is-stack { flex-direction: column; align-items: stretch; }
.ef-empty { color: var(--text-dim); text-align: center; padding: 2rem 1rem; }
.ef-empty .ef-art { width: 140px; margin: 0 auto .5rem; display: block; opacity: .8; }
.ef-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); padding: 1rem; margin-bottom: 1rem;
}
/* ── buttons ── */
.ef-btn { min-height: 48px; padding: .7rem 1.1rem; font-size: var(--text-md); font-weight: 600; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none; }
.ef-btn-xl { min-height: 58px; font-size: var(--text-lg); width: 100%; }
.ef-btn-soft { background: var(--accent-soft); border: 1px solid transparent; color: var(--accent); }
.ef-btn-soft:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ef-btn-quiet { background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim); min-height: 46px; }
.ef-btn.is-busy { opacity: .6; pointer-events: none; }
.ef-btn.is-nudge { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
/* ── pills / chips ── */
.ef-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ef-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: var(--text-xs);
font-weight: 600; letter-spacing: .01em; background: var(--surface-3, var(--surface-2)); color: var(--text-dim); white-space: nowrap; }
.ef-pill.is-ok { background: var(--success-soft); color: var(--success); }
.ef-pill.is-bad { background: var(--danger-soft); color: var(--danger); }
.ef-pill.is-warn { background: var(--warn-soft); color: var(--warn); }
.ef-pill.is-info { background: var(--info-soft); color: var(--info); }
.ef-pill.is-accent { background: var(--accent-soft); color: var(--accent); }
.ef-prog { height: 8px; border-radius: 999px; background: var(--chart-track, var(--surface-2)); overflow: hidden; }
.ef-prog-fill { display: block; height: 100%; border-radius: inherit; background: var(--gradient-accent, var(--accent)); transition: width var(--dur-mid) var(--ease); }
/* ── the queue hero ── */
.ef-hero { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); background: var(--surface);
box-shadow: var(--shadow-md); margin-bottom: 1rem; }
.ef-hero-band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem .9rem;
background: linear-gradient(135deg, var(--danger-soft), var(--warn-soft)); border-bottom: 1px solid var(--border); }
.ef-hero.is-clear .ef-hero-band { background: linear-gradient(135deg, var(--success-soft), var(--info-soft)); }
.ef-hero-n { display: flex; flex-direction: column; }
.ef-hero-n strong { font-size: 3.2rem; line-height: 1; font-weight: 800; color: var(--danger); font-feature-settings: "tnum"; }
.ef-hero.is-clear .ef-hero-n strong { color: var(--success); }
.ef-hero-n span { color: var(--text-dim); font-weight: 600; margin-top: .2rem; }
.ef-hero-band .ef-art { width: 132px; flex: 0 0 auto; filter: drop-shadow(0 6px 14px var(--accent-glow)); }
.ef-hero-b { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .8rem; }
.ef-hero-prog { display: grid; gap: .35rem; font-size: var(--text-sm); color: var(--text-dim); font-weight: 600; }
.ef-hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.ef-allclear { padding: .9rem 1rem; border-radius: var(--radius-md); background: var(--success-soft); color: var(--success); font-weight: 700; text-align: center; }
.ef-how { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.ef-how li { flex: 1 0 auto; display: flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 999px;
background: var(--surface); border: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; }
.ef-how-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft);
color: var(--accent); font-weight: 800; font-size: 11px; }
.ef-sec { margin-bottom: 1.25rem; }
.ef-h2 { display: flex; align-items: center; gap: .5rem; font-size: var(--text-lg); margin: 0 0 .6rem; }
.ef-count { font-size: var(--text-xs); font-weight: 800; padding: .1rem .55rem; border-radius: 999px; background: var(--danger-soft); color: var(--danger); }
.ef-count.is-ok { background: var(--success-soft); color: var(--success); }
.ef-list { display: grid; gap: .55rem; }
.ef-item { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; padding: .8rem .9rem; min-height: 72px;
border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast), transform var(--dur-fast); font: inherit; }
.ef-item:hover { border-color: var(--border-hover); }
.ef-item:active { transform: scale(.99); }
.ef-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ef-item.is-busy { opacity: .7; }
.ef-item.is-skipped { background: var(--surface-2); }
.ef-item.is-ok { cursor: default; background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.ef-item-i { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800;
background: var(--danger-soft); color: var(--danger); }
.ef-item.is-ok .ef-item-i { background: var(--success-soft); color: var(--success); }
.ef-item-b { flex: 1 1 auto; min-width: 0; display: grid; gap: .2rem; }
.ef-item-code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-weight: 700; letter-spacing: .03em; font-size: var(--text-md); }
.ef-item-name { color: var(--text); font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-item-meta { color: var(--text-faint); font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: .3rem; }
.ef-item-go { flex: 0 0 auto; font-size: 1.6rem; color: var(--text-faint); }
.ef-decom-note { margin-top: -.25rem; }
/* resume */
.ef-resume { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .9rem 1rem; margin-bottom: 1rem;
border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ef-resume-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; font-weight: 800;
background: var(--accent); color: var(--text-inverse); }
.ef-resume-b { flex: 1 1 200px; display: grid; gap: .15rem; }
.ef-resume-b span { color: var(--text-dim); font-size: var(--text-sm); }
.ef-resume-a { display: flex; gap: .5rem; flex-wrap: wrap; }
/* store picker */
.ef-search input { width: 100%; min-height: 48px; padding: .6rem .9rem; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
background: var(--surface-2); color: var(--text); font-size: var(--text-md); margin-bottom: .8rem; }
.ef-stores { display: grid; gap: .45rem; grid-template-columns: 1fr; }
.ef-store { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "code name n" "pill pill pill"; gap: .2rem .7rem;
align-items: center; padding: .7rem .85rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface);
color: var(--text); text-decoration: none; min-height: 56px; }
.ef-store:hover { border-color: var(--border-hover); }
.ef-store.is-zero { opacity: .65; }
.ef-store-code { grid-area: code; font-weight: 800; font-family: var(--font-mono, ui-monospace, monospace); color: var(--accent); }
.ef-store-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-store-n { grid-area: n; display: flex; align-items: baseline; gap: .25rem; }
.ef-store-n strong { font-size: var(--text-lg); color: var(--danger); }
.ef-store.is-zero .ef-store-n strong { color: var(--text-faint); }
.ef-store-n small { color: var(--text-faint); font-size: var(--text-xs); }
.ef-store .ef-pill { grid-area: pill; justify-self: start; }
/* Yodiwo settings */
.ef-settings summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: .5rem; list-style: none; }
.ef-settings summary::-webkit-details-marker { display: none; }
.ef-settings-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); }
.ef-settings-b { margin-top: .8rem; display: grid; gap: .6rem; }
.ef-field { display: grid; gap: .3rem; font-size: var(--text-sm); color: var(--text-dim); font-weight: 600; }
.ef-input { width: 100%; min-height: 44px; padding: .55rem .8rem; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--text-md); box-sizing: border-box; }
textarea.ef-input { min-height: 64px; resize: vertical; }
/* ── the guide ── */
.ef-wtop { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 .6rem; }
.ef-back { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.7rem; text-decoration: none;
color: var(--text); background: var(--surface); border: 1px solid var(--border); flex: 0 0 auto; }
.ef-wtop-b { flex: 1 1 auto; display: grid; line-height: 1.25; min-width: 0; }
.ef-wtop-b strong { font-size: var(--text-lg); }
.ef-wtop-b span { color: var(--text-dim); font-size: var(--text-sm); font-weight: 600; }
.ef-more { position: relative; }
.ef-more summary { list-style: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
font-size: 1.4rem; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }
.ef-more summary::-webkit-details-marker { display: none; }
.ef-more-m { position: absolute; right: 0; top: 50px; z-index: 30; min-width: 230px; padding: .35rem; border-radius: var(--radius-md);
background: var(--surface-solid, var(--surface)); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); display: grid; }
.ef-more-m button { text-align: left; padding: .8rem .9rem; min-height: 48px; border: 0; background: transparent; color: var(--text);
border-radius: var(--radius-sm); font: inherit; cursor: pointer; }
.ef-more-m button:hover { background: var(--surface-hover); }
.ef-more-m button.is-bad { color: var(--danger); }
.ef-wiz > .ef-prog { margin-bottom: .8rem; }
.ef-rail { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; counter-reset: none; }
.ef-rail-i { display: grid; justify-items: center; gap: .25rem; position: relative; }
.ef-rail-i::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--border-strong); z-index: 0; }
.ef-rail-i:first-child::before { display: none; }
.ef-rail-i.is-done::before, .ef-rail-i.is-on::before { background: var(--accent); }
.ef-rail-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
font-weight: 800; background: var(--surface); border: 2px solid var(--border-strong); color: var(--text-faint); }
.ef-rail-i.is-done .ef-rail-dot { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.ef-rail-i.is-on .ef-rail-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ef-rail-t { font-size: 10.5px; font-weight: 700; color: var(--text-faint); text-align: center; letter-spacing: .01em; }
.ef-rail-i.is-on .ef-rail-t { color: var(--accent); }
/* the label card — a "paper" ESL with a tinted band */
.ef-tag { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
margin-bottom: .9rem; }
.ef-tag-band { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; background: var(--danger-soft); border-bottom: 1px solid var(--border); }
.ef-tag-k { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--danger); }
.ef-tag-code { flex: 1 1 auto; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 1.2rem; font-weight: 800;
letter-spacing: .06em; overflow-wrap: anywhere; }
.ef-copy { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-dim);
font-size: 1.05rem; cursor: pointer; flex: 0 0 auto; }
.ef-tag-b { padding: .75rem .9rem .9rem; display: grid; gap: .55rem; }
.ef-tag-name { font-weight: 700; font-size: var(--text-md); }
.ef-tag-zone { font-weight: 600; color: var(--text-dim); }
.ef-tag.is-compact .ef-tag-band { padding: .5rem .8rem; }
.ef-tag.is-compact .ef-tag-code { font-size: 1.05rem; }
.ef-tag.is-compact .ef-copy { width: 36px; height: 36px; }
.ef-tag.is-compact .ef-tag-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-tag.is-compact .ef-tag-b { padding: .6rem .9rem .7rem; gap: .4rem; }
.ef-dl { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: .35rem .8rem; margin: .2rem 0 0; font-size: var(--text-sm); }
.ef-dl dt { color: var(--text-faint); font-weight: 600; }
.ef-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ef-prev { display: grid; gap: .35rem; padding-top: .55rem; border-top: 1px dashed var(--border-strong); font-size: var(--text-sm); }
.ef-prev-i { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--text-dim); }
/* the step card */
.ef-step { position: relative; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface);
box-shadow: var(--shadow-md); padding: 1rem 1.1rem 1.1rem; margin-bottom: .9rem; overflow: hidden; }
.ef-step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient-accent, var(--accent)); }
.ef-step.is-decommission::before, .ef-step.is-r-bad::before { background: var(--danger); }
.ef-step.is-r-ok::before { background: var(--success); }
.ef-step-art { display: grid; place-items: center; padding: .6rem 0 .3rem; margin: 0 -1.1rem .4rem;
background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 70%); }
.ef-step-art .ef-art { width: 170px; height: auto; max-height: 120px; }
.ef-step-h { font-size: 1.3rem; line-height: 1.25; margin: .2rem 0 .5rem; text-align: center; }
.ef-step-b { display: grid; gap: .5rem; font-size: var(--text-md); line-height: 1.5; }
.ef-step-b p { margin: 0; }
.ef-steps { margin: .1rem 0; padding-left: 1.4rem; display: grid; gap: .45rem; }
.ef-steps li::marker { color: var(--accent); font-weight: 800; }
.ef-sub { padding: .7rem .8rem; border-radius: var(--radius-md); background: var(--surface-2); display: grid; gap: .35rem; }
.ef-q { font-weight: 800; font-size: var(--text-lg); text-align: center; margin-top: .35rem !important; }
.ef-remedy { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: -.1rem auto .6rem; padding: .3rem .8rem; width: fit-content;
border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: var(--text-sm); }
.ef-remedy-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: var(--text-inverse); font-size: 11px; }
/* the answers — at the bottom, thumb-reachable, sticky above the phone tab bar */
.ef-actions { display: grid; gap: .55rem; position: sticky; bottom: calc(var(--ro-tabs-h, 0px) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 5;
padding: .7rem; margin: 0 -.25rem 1rem; border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface) 88%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.ef-actions > .btn { width: 100%; }
.ef-actions > p { margin: 0; text-align: center; }
.ef-actions > .ef-q { margin: 0 0 .1rem !important; font-size: var(--text-lg); }
/* scan */
.ef-scan { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.ef-scan-in { min-height: 56px; padding: .6rem .9rem; border-radius: var(--radius-md); border: 2px solid var(--border-strong); background: var(--surface-2);
color: var(--text); font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase;
min-width: 0; box-sizing: border-box; }
.ef-scan-in::placeholder { text-transform: none; letter-spacing: normal; font-family: inherit; font-size: var(--text-md); color: var(--text-faint); }
.ef-scan-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ef-scan .btn { min-height: 56px; }
.ef-wrong { border-radius: var(--radius-lg); padding: .9rem; background: var(--danger-soft); border: 2px solid var(--danger); display: grid; gap: .4rem; }
.ef-wrong-h { font-weight: 800; font-size: var(--text-lg); color: var(--danger); }
.ef-wrong p { margin: 0; }
.ef-wrong .ef-btn { width: 100%; }
/* countdown ring */
.ef-ico { display: inline-grid; place-items: center; }
.ef-art-pair { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.ef-art-pair .ef-art { width: 140px; }
.ef-art-pair .ef-ring { margin: 0; flex: 0 0 auto; }
.ef-ring { --ef-p: 0; width: 168px; height: 168px; margin: .5rem auto 0; border-radius: 50%; display: grid; place-content: center; text-align: center;
background: radial-gradient(closest-side, var(--surface) 78%, transparent 79% 100%),
conic-gradient(var(--accent) calc(var(--ef-p) * 360deg), var(--chart-track, var(--surface-2)) 0); }
.ef-ring-n { font-size: 3.4rem; line-height: 1; font-weight: 800; font-feature-settings: "tnum"; color: var(--accent); }
.ef-ring span { color: var(--text-faint); font-size: var(--text-sm); font-weight: 600; }
.ef-ring.is-done { background: radial-gradient(closest-side, var(--surface) 78%, transparent 79% 100%), conic-gradient(var(--success) 360deg, var(--success) 0); }
.ef-ring.is-done .ef-ring-n { color: var(--success); }
/* wait timer */
.ef-timer-row { display: grid; gap: .35rem; }
.ef-timer-n { font-size: 1.6rem; font-weight: 800; text-align: center; font-feature-settings: "tnum"; }
.ef-timer { height: 12px; border-radius: 999px; background: var(--chart-track, var(--surface-2)); overflow: hidden; }
.ef-timer-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gradient-accent, var(--accent)); transition: width .5s linear; }
.ef-timer.is-over .ef-timer-fill { background: var(--warn); }
.ef-live { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-radius: var(--radius-md); background: var(--surface-2);
color: var(--text-dim); font-size: var(--text-sm); }
.ef-live.is-ok { background: var(--success-soft); color: var(--success); }
.ef-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--info); flex: 0 0 auto; animation: efPulse 1.6s ease-in-out infinite; }
.ef-live.is-ok .ef-live-dot { background: var(--success); }
@keyframes efPulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
/* timeline (done + history) */
.ef-timeline { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: 0; }
.ef-timeline li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t s" "o s"; gap: 0 .6rem; padding: .45rem 0 .45rem 1.3rem;
position: relative; border-left: 2px solid var(--border-strong); margin-left: .4rem; }
.ef-timeline li::before { content: ""; position: absolute; left: -7px; top: .7rem; width: 12px; height: 12px; border-radius: 50%; background: var(--surface);
border: 2px solid var(--text-faint); }
.ef-timeline li.is-ok::before { border-color: var(--success); background: var(--success-soft); }
.ef-timeline li.is-warn::before { border-color: var(--warn); background: var(--warn-soft); }
.ef-tl-t { grid-area: t; font-weight: 700; font-size: var(--text-sm); }
.ef-tl-o { grid-area: o; color: var(--text-dim); font-size: var(--text-sm); }
.ef-tl-s { grid-area: s; color: var(--text-faint); font-size: var(--text-xs); font-feature-settings: "tnum"; align-self: center; }
/* history */
.ef-seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: .9rem; }
.ef-seg button { border: 0; background: transparent; color: var(--text-dim); padding: .5rem .95rem; min-height: 40px; border-radius: 999px; font: inherit;
font-weight: 700; cursor: pointer; }
.ef-seg button.is-on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.ef-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: .8rem; }
.ef-tile { display: grid; gap: .1rem; text-align: left; padding: .8rem .9rem; border-radius: var(--radius-lg); border: 1px solid var(--border);
background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; font: inherit; color: var(--text); position: relative; overflow: hidden; }
.ef-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--text-faint); }
.ef-tile strong { font-size: 1.8rem; line-height: 1.1; font-feature-settings: "tnum"; }
.ef-tile span { color: var(--text-dim); font-size: var(--text-sm); font-weight: 600; }
.ef-tile.is-ok::before { background: var(--success); } .ef-tile.is-ok strong { color: var(--success); }
.ef-tile.is-bad::before { background: var(--danger); } .ef-tile.is-bad strong { color: var(--danger); }
.ef-tile.is-warn::before { background: var(--warn); } .ef-tile.is-warn strong { color: var(--warn); }
.ef-tile.is-info::before { background: var(--info); } .ef-tile.is-info strong { color: var(--info); }
.ef-tile.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ef-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ef-split { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 1rem; font-size: var(--text-sm); color: var(--text-dim); }
.ef-split-i { display: inline-flex; align-items: center; gap: .4rem; }
.ef-split-i i { width: 12px; height: 12px; border-radius: 4px; background: var(--success); }
.ef-split-i i.is-save { background: var(--info); } .ef-split-i i.is-batteries { background: var(--accent); }
.ef-hlist { display: grid; gap: .5rem; }
.ef-hrow { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.ef-hrow summary { list-style: none; cursor: pointer; display: grid; gap: .25rem .6rem; padding: .75rem .9rem;
grid-template-columns: 1fr auto; grid-template-areas: "code pill" "name name" "when by" "dots min"; align-items: center; }
.ef-hrow summary::-webkit-details-marker { display: none; }
.ef-hrow-when { grid-area: when; color: var(--text-faint); font-size: var(--text-xs); }
.ef-hrow-code { grid-area: code; font-family: var(--font-mono, ui-monospace, monospace); font-weight: 800; letter-spacing: .03em; }
.ef-hrow-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.ef-hrow-by { grid-area: by; justify-self: end; color: var(--text-dim); font-size: var(--text-xs); }
.ef-hrow .ef-pill { grid-area: pill; justify-self: end; }
.ef-hrow-dots { grid-area: dots; display: flex; gap: 4px; }
.ef-hrow-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.ef-hrow-dots i.is-warn { background: var(--warn); }
.ef-hrow-dots i.is-bad { background: var(--danger); }
.ef-timeline li.is-bad::before { border-color: var(--danger); background: var(--danger-soft); }
.ef-hrow-min { grid-area: min; justify-self: end; color: var(--text-faint); font-size: var(--text-xs); font-feature-settings: "tnum"; }
.ef-hrow[open] summary { border-bottom: 1px dashed var(--border-strong); }
.ef-hrow > .ef-timeline { padding: .6rem .9rem .8rem; }
/* store-page banner */
.ef-banner { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "art b" "a a"; gap: .6rem .9rem; align-items: center;
padding: .9rem 1rem; margin-bottom: 1.1rem; border-radius: var(--radius-lg); border: 1px solid var(--border);
background: linear-gradient(120deg, var(--accent-soft), var(--surface) 60%); box-shadow: var(--shadow-sm); }
.ef-banner-art { grid-area: art; width: 64px; height: 64px; border-radius: 18px; background: var(--surface); display: grid; place-items: center;
border: 1px solid var(--border); }
.ef-banner-art .ef-art { width: 58px; }
.ef-banner-n.is-ok { color: var(--success); }
.ef-banner-b { grid-area: b; display: grid; gap: .2rem; min-width: 0; }
.ef-banner-b strong { font-size: var(--text-lg); }
.ef-banner-s { color: var(--text-dim); font-size: var(--text-sm); }
.ef-banner-n { font-weight: 800; color: var(--text); }
.ef-banner-n.is-bad { color: var(--danger); }
.ef-banner-a { grid-area: a; display: flex; flex-wrap: wrap; gap: .5rem; }
.ef-banner-a .ef-btn { flex: 1 1 180px; }
/* camera overlay */
.ef-cam { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: grid; }
.ef-cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ef-cam-frame { position: absolute; left: 8%; right: 8%; top: 32%; height: 22%; border-radius: 18px; border: 3px solid var(--accent);
box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--bg) 55%, transparent); overflow: hidden; }
.ef-cam-laser { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--danger); box-shadow: 0 0 12px var(--danger); animation: efLaser 1.8s ease-in-out infinite; }
@keyframes efLaser { 0%, 100% { transform: translateY(-28px); } 50% { transform: translateY(28px); } }
.ef-cam-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px; color: var(--text); background: linear-gradient(var(--overlay), transparent); }
.ef-cam-close { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--surface); color: var(--text); font-size: 1.2rem; cursor: pointer; }
.ef-cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px)); text-align: center;
background: linear-gradient(transparent, var(--overlay)); }
.ef-cam-status { display: inline-block; padding: .6rem 1rem; border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; }
.ef-cam-status.is-bad { color: var(--danger); }
/* ── illustrations ── */
.ef-art { display: block; }
.ef-a-case { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 2; }
.ef-a-paper { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.ef-a-paper.is-target { stroke: var(--danger); stroke-width: 2.5; }
.ef-a-ink { fill: var(--text); opacity: .85; }
.ef-a-ink2 { fill: var(--text-faint); }
.ef-a-ink2s { stroke: var(--text-faint); stroke-width: 3; stroke-linecap: round; fill: none; }
.ef-a-red { fill: var(--danger); }
.ef-a-bad { stroke: var(--danger); stroke-width: 4; stroke-linecap: round; fill: none; }
.ef-a-code { fill: var(--text-dim); font: 700 8px var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; }
.ef-a-cell { fill: var(--surface); stroke: var(--text-dim); stroke-width: 2.5; }
.ef-a-cell.is-new { fill: var(--success-soft); stroke: var(--success); }
.ef-a-cap { fill: var(--text-faint); }
.ef-a-sign { fill: var(--accent); font: 800 15px system-ui, sans-serif; }
.ef-a-arrow { stroke: var(--warn); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ef-a-spark { stroke: var(--success); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ef-a-bar { fill: var(--accent-soft); }
.ef-a-btn { fill: var(--accent); }
.ef-a-btntext { fill: var(--text-inverse); font: 800 10px system-ui, sans-serif; }
.ef-a-shelf { fill: var(--text-faint); opacity: .55; }
.ef-a-ring { fill: none; stroke: var(--accent); stroke-width: 3.5; }
.ef-a-handle { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.ef-a-bars { stroke: var(--text); stroke-width: 2.2; }
.ef-a-beam { stroke: var(--danger); stroke-width: 2.5; stroke-linecap: round; animation: efBeam 1.8s ease-in-out infinite; }
@keyframes efBeam { 0%, 100% { transform: translateY(-14px); } 50% { transform: translateY(14px); } }
.ef-a-corner { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; }
.ef-a-okc { fill: var(--success-soft); stroke: var(--success); stroke-width: 4; }
.ef-a-okm { fill: none; stroke: var(--success); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ef-a-badc { fill: var(--danger-soft); stroke: var(--danger); stroke-width: 4; }
.ef-a-badm { fill: none; stroke: var(--danger); stroke-width: 9; stroke-linecap: round; }
.ef-a-mutc { fill: var(--surface-2); stroke: var(--text-faint); stroke-width: 4; }
.ef-a-mutm { fill: none; stroke: var(--text-faint); stroke-width: 9; stroke-linecap: round; }
.ef-a-blink { animation: efFade 2.4s ease-in-out infinite; }
.ef-a-blink2 { animation: efFade 2.4s .4s ease-in-out infinite; }
.ef-a-blink3 { animation: efFade 2.4s .8s ease-in-out infinite; }
@keyframes efFade { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.ef-a-beam, .ef-a-blink, .ef-a-blink2, .ef-a-blink3, .ef-cam-laser, .ef-live-dot { animation: none; }
}
/* ── phone: answers fixed above the bottom tabs, always in reach; smaller art so the step fits the first screen ── */
@media (max-width: 759px) {
.ef-wiz { padding-bottom: 210px; }
.ef-actions { position: fixed; left: 8px; right: 8px; margin: 0; bottom: calc(var(--ro-tabs-h, 64px) + 8px + env(safe-area-inset-bottom, 0px));
max-height: 46vh; overflow-y: auto; }
.ef-step-art { padding: .35rem 0 .15rem; }
.ef-step-art .ef-art { width: 132px; max-height: 84px; }
.ef-step-h { font-size: 1.15rem; }
.ef-step { padding: .85rem .95rem 1rem; }
.ef-ring { width: 116px; height: 116px; }
.ef-ring-n { font-size: 2.5rem; }
.ef-art-pair .ef-art { width: 112px; }
.ef-wtop { scroll-margin-top: calc(var(--ro-top-h, 64px) + 6px); }
.ef-rail { margin-bottom: .6rem; }
.ef-rail-dot { width: 26px; height: 26px; }
.ef-rail-i::before { top: 12px; }
.ef-tag { margin-bottom: .6rem; }
.ef-tl-s { font-size: 10px; }
}
/* ── wider screens ── */
@media (min-width: 760px) {
.ef-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ef-list.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ef-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ef-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ef-hero { display: grid; grid-template-columns: minmax(280px, 1fr) 1.4fr; }
.ef-hero-band { border-bottom: 0; border-right: 1px solid var(--border); flex-direction: column; align-items: flex-start; justify-content: center; }
.ef-hero-band .ef-art { width: 170px; align-self: center; }
.ef-hero-b { align-content: center; padding: 1.4rem 1.6rem; }
.ef-hero-b .ef-btn-xl { width: auto; justify-self: start; padding-inline: 2rem; }
.ef-actions { position: static; background: transparent; box-shadow: none; border: 0; padding: 0; margin: 0 0 1rem;
-webkit-backdrop-filter: none; backdrop-filter: none; grid-template-columns: 1fr 1fr; }
.ef-actions > .btn-primary, .ef-actions > .btn-danger { grid-column: 1 / -1; }
.ef-actions > p { grid-column: 1 / -1; }
.ef-rail-t { font-size: var(--text-xs); }
.ef-banner { grid-template-columns: auto 1fr auto; grid-template-areas: "art b a"; }
.ef-banner-a .ef-btn { flex: 0 0 auto; }
.ef-hrow summary { grid-template-columns: 9.5rem 10rem minmax(0, 1fr) 9rem auto auto 4rem; grid-template-areas: "when code name by dots pill min"; }
.ef-hrow-by { justify-self: start; }
}
/* ---- access: gk-auto (design/access/css/gk-auto.css) ---- */
/* GK-AUTO — GateKeeper morning automation (fe/src/modules/gatekeeper/automation.js). Tokens only; light + dark come
from the tokens. Prefix gka-. Merged into main.css by .e2e/css-access.mjs. */
/* ── the status card ───────────────────────────────────────────────── */
.gka-card {
position: relative; margin: 0 0 1rem; padding: 1rem 1.1rem 1.05rem;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); overflow: hidden;
}
.gka-card::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: var(--gradient-accent, var(--accent));
}
.gka-card.is-off::before { background: var(--border-strong); }
.gka-card.is-stop::before { background: var(--warn); }
.gka-card.is-off { background: var(--surface-2); }
.gka-loading { color: var(--text-faint); font-size: var(--text-sm); padding: .4rem 0; }
.gka-head { display: flex; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.gka-ico {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--accent); background: var(--accent-soft);
}
.gka-card.is-off .gka-ico { color: var(--text-faint); background: var(--surface-3); }
.gka-card.is-stop .gka-ico { color: var(--warn); background: var(--warn-soft); }
.gka-title { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.gka-title b { font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; }
.gka-sub { color: var(--text-dim); font-size: var(--text-sm); line-height: 1.4; max-width: 70ch; }
.gka-pill {
display: inline-flex; align-items: center; gap: .4rem; align-self: center;
font-size: var(--text-xs); font-weight: 650; letter-spacing: .02em; text-transform: uppercase;
padding: .25rem .6rem; border-radius: 999px; white-space: nowrap;
}
.gka-pill.is-on { color: var(--success); background: var(--success-soft); }
.gka-pill.is-off { color: var(--text-faint); background: var(--surface-3); }
.gka-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gka-pill.is-on .gka-dot { box-shadow: 0 0 0 3px var(--success-soft); }
.gka-actions { display: flex; gap: .45rem; flex-wrap: wrap; align-self: center; }
.gka-actions .btn { display: inline-flex; align-items: center; gap: .35rem; }
.gka-facts {
display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 1.6fr) minmax(10rem, 1fr) minmax(11rem, 1fr);
gap: .2rem 0; margin-top: .9rem; border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--surface-2);
}
.gka-fact { display: flex; flex-direction: column; gap: .25rem; padding: .65rem .85rem; min-width: 0; }
.gka-fact + .gka-fact { border-left: 1px solid var(--border); }
.gka-fact b { font-size: var(--text-base); font-weight: 600; font-feature-settings: 'tnum'; }
.gka-fact-sub { font-size: var(--text-sm); color: var(--text-dim); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.gka-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.gka-counts { display: flex; gap: .35rem; flex-wrap: wrap; }
.gka-count {
display: inline-flex; align-items: baseline; gap: .25rem; font-size: var(--text-sm);
padding: .15rem .5rem; border-radius: 999px; background: var(--surface-3); color: var(--text-dim);
}
.gka-count b { font-size: var(--text-base); font-weight: 700; font-feature-settings: 'tnum'; color: var(--text); }
.gka-count.is-bad { background: var(--danger-soft); color: var(--danger); }
.gka-count.is-bad b { color: var(--danger); }
.gka-count.is-warn { background: var(--warn-soft); color: var(--warn); }
.gka-count.is-warn b { color: var(--warn); }
.gka-count.is-accent { background: var(--accent-soft); color: var(--accent); }
.gka-count.is-accent b { color: var(--accent); }
.gka-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; align-items: center; max-width: 13rem; }
.gka-day { height: 14px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--border); }
.gka-day.is-good { background: var(--success); border-color: transparent; }
.gka-day.is-warn { background: var(--warn); border-color: transparent; }
.gka-day.is-bad { background: var(--danger); border-color: transparent; }
.gka-day.is-accent, .gka-day.is-pending { background: var(--accent-soft); border-color: var(--accent); }
.gka-day.is-muted { background: var(--border-strong); border-color: transparent; }
/* chips */
.gka-chip {
display: inline-flex; align-items: center; font-size: 11px; font-weight: 650; line-height: 1.5;
border-radius: 999px; padding: .05rem .55rem; white-space: nowrap;
}
.gka-chip.is-good { color: var(--success); background: var(--success-soft); }
.gka-chip.is-warn { color: var(--warn); background: var(--warn-soft); }
.gka-chip.is-bad { color: var(--danger); background: var(--danger-soft); }
.gka-chip.is-accent { color: var(--accent); background: var(--accent-soft); }
.gka-chip.is-muted { color: var(--text-dim); background: var(--surface-3); }
.gka-how { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.gka-by { font-size: 11px; color: var(--text-faint); word-break: break-all; }
/* banners inside the card */
.gka-banner {
display: flex; gap: .75rem; align-items: flex-start; margin-top: .8rem; padding: .75rem .9rem;
border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); line-height: 1.45;
font-size: var(--text-sm);
}
.gka-banner > svg, .gka-banner > span:first-child { flex: 0 0 auto; margin-top: 1px; }
.gka-banner strong { display: block; font-size: var(--text-base); margin-bottom: .15rem; }
.gka-banner.is-bad { background: var(--danger-soft); border-color: transparent; }
.gka-banner.is-bad > span:first-child { color: var(--danger); }
.gka-banner.is-info { background: var(--info-soft); border-color: transparent; }
.gka-banner.is-info > span:first-child { color: var(--info); }
.gka-banner.is-muted > span:first-child { color: var(--text-faint); }
.gka-banner.is-setup {
background: var(--accent-soft); border-color: transparent; box-shadow: inset 4px 0 0 var(--accent);
}
.gka-banner.is-setup > span:first-child { color: var(--accent); }
.gka-banner .gku-link { display: inline-block; margin-top: .3rem; }
.gka-verdict { display: flex; align-items: center; gap: .3rem; margin-top: .3rem; font-size: 11px; line-height: 1.35; }
.gka-verdict.is-yes { color: var(--danger); }
.gka-verdict.is-no { color: var(--text-dim); }
.gka-run-act { margin-top: .5rem; }
.gka-run-act .btn { display: inline-flex; align-items: center; gap: .35rem; }
.gka-confirm-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.gka-mini-scroll.is-all { max-height: 52vh; }
.gka-banner.is-stop {
background: var(--warn-soft); border-color: transparent; align-items: center; flex-wrap: wrap;
box-shadow: inset 4px 0 0 var(--warn);
}
.gka-banner.is-stop > span:first-child { color: var(--warn); align-self: flex-start; }
.gka-stop-main { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.gka-stop-act { flex: 0 0 auto; }
.gka-stop-act .btn { display: inline-flex; align-items: center; gap: .35rem; }
.gka-names { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.gka-msg { word-break: break-word; }
/* step (c), expired temporary access: one line on the Find leavers card and in the settings */
.gka-temp {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; padding: .55rem .8rem;
border-radius: var(--radius-md); background: var(--surface-2); border: 1px dashed var(--border);
font-size: var(--text-sm); color: var(--text-dim); line-height: 1.45;
}
.gka-temp > span:first-child { color: var(--accent); }
.gka-temp b { color: var(--text); font-weight: 600; }
.gka-temp > span:nth-child(2) { flex: 1 1 18rem; min-width: 0; }
.gka-temp .gku-link { white-space: nowrap; }
.gka-temp-set { margin: .2rem 0 .5rem; }
/* ── sections: disabled list, logs, runs, settings ─────────────────── */
.gka-section { margin-bottom: 1rem; }
.gka-sec-head { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem; }
.gka-sec-head > div:nth-child(2) { flex: 1 1 18rem; min-width: 0; }
.gka-sec-head h3 { margin: 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; }
.gka-sec-head p { margin: .2rem 0 0; font-size: var(--text-sm); line-height: 1.45; max-width: 75ch; }
.gka-sec-ico {
flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-dim);
}
.gka-sec-ico.is-warn { color: var(--warn); background: var(--warn-soft); }
.gka-sec-ico.is-bad { color: var(--danger); background: var(--danger-soft); }
.gka-sec-ico.is-accent { color: var(--accent); background: var(--accent-soft); }
.gka-tally { display: flex; gap: .35rem; flex-wrap: wrap; align-self: center; }
.gka-csv { align-self: center; display: inline-flex; align-items: center; gap: .35rem; }
.gka-faint { color: var(--text-faint); font-size: var(--text-sm); }
.gka-strong { font-weight: 600; color: var(--text); }
.gka-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--text-sm); }
.gka-id { font-size: 11px; word-break: break-all; }
.gka-empty {
display: flex; align-items: center; justify-content: center; gap: .55rem; padding: 1.6rem 1rem;
color: var(--text-faint); border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-2);
}
.gka-empty svg { color: var(--success); }
.gka-dis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gka-dis li {
display: grid; grid-template-columns: minmax(12rem, 1.4fr) minmax(12rem, 1.2fr) auto; gap: .5rem 1rem; align-items: center;
padding: .7rem .2rem; border-top: 1px solid var(--border);
}
.gka-dis li:first-child { border-top: 0; }
.gka-dis-bar { display: flex; flex-direction: column; gap: .3rem; }
.gka-bar { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.gka-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--warn); }
.gka-dis-when { justify-self: end; }
.gka-filters {
display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-end; padding: .75rem .85rem; margin-bottom: .8rem;
background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.gka-f { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.gka-f-grow { flex: 1 1 14rem; }
.gka-f-grow .input { width: 100%; }
.gka-dates { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-faint); }
.gka-date { width: 9.5rem; }
.gka-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface); flex-wrap: wrap; }
.gka-seg-b {
border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: var(--text-sm);
padding: .25rem .7rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.gka-seg-b:hover { color: var(--text); background: var(--surface-hover); }
.gka-seg-b.is-on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.gka-seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gka-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.gka-table { margin: 0; width: 100%; }
.gka-table th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.gka-table td { vertical-align: top; }
.gka-cell { min-width: 0; }
.gka-when { white-space: nowrap; font-feature-settings: 'tnum'; }
.gka-fields { display: flex; flex-direction: column; gap: .25rem; }
.gka-flbl { font-size: 11px; color: var(--text-faint); min-width: 5.5rem; }
.gka-err { max-width: 28ch; word-break: break-word; }
.gka-note { font-style: italic; margin-top: .2rem; }
.gka-retention { margin: .7rem 0 0; }
.gka-run-row { cursor: pointer; }
.gka-kind { display: inline-block; }
.gka-kind::first-letter { text-transform: uppercase; }
.gka-run-row:hover td { background: var(--surface-hover); }
.gka-run-row:focus-visible td { outline: 2px solid var(--accent); outline-offset: -2px; }
/* two cards side by side on the automation page */
.gka-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 1rem; }
.gka-cards .gka-card { margin: 0 0 1rem; }
.gka-cards .gka-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gka-cards .gka-fact:nth-child(3) { border-left: 0; }
.gka-cards .gka-fact:nth-child(n+3) { border-top: 1px solid var(--border); }
/* run details (modal) */
.gka-run { display: flex; flex-direction: column; gap: .9rem; }
.gka-run-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.gka-run-step { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem .9rem; background: var(--surface-2); }
.gka-run-step h4 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; font-size: var(--text-base); }
.gka-lines { margin: .2rem 0 .4rem 1.1rem; padding: 0; font-size: var(--text-sm); line-height: 1.5; }
.gka-errors { margin: .4rem 0 0 1.1rem; padding: 0; font-size: var(--text-sm); color: var(--danger); }
.gka-mini-scroll { max-height: 18rem; margin-top: .35rem; }
.gka-mini td, .gka-mini th { font-size: var(--text-sm); }
.gka-confirm { display: flex; flex-direction: column; gap: .7rem; }
.gka-check { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
.gka-check input { margin-top: .2rem; accent-color: var(--accent); }
/* settings */
.gka-group { border-top: 1px solid var(--border); padding: .9rem 0 .4rem; }
.gka-group h4 { margin: 0 0 .6rem; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.gka-row { display: grid; grid-template-columns: minmax(12rem, 22rem) 1fr; gap: .4rem 1.2rem; align-items: start; padding: .45rem 0; }
.gka-row-l { display: flex; flex-direction: column; gap: .15rem; }
.gka-row-l b { font-weight: 600; }
.gka-row-c { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.gka-row-c .input { max-width: 32rem; }
.gka-area { width: 100%; min-height: 5.5rem; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--text-sm); }
.gka-time { width: 8rem; }
.gka-num { text-align: right; }
.gka-unit { color: var(--text-faint); font-size: var(--text-sm); }
.gka-example { margin: .3rem 0 0; }
.gka-save { display: flex; justify-content: flex-end; padding-top: .8rem; border-top: 1px solid var(--border); }
.gka-save .btn { display: inline-flex; align-items: center; gap: .35rem; }
.gka-toggle { display: flex; gap: .8rem; align-items: flex-start; padding: .55rem 0; cursor: pointer; }
.gka-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gka-switch {
flex: 0 0 auto; position: relative; width: 40px; height: 22px; margin-top: 1px; border-radius: 999px;
background: var(--border-strong); transition: background var(--dur-fast, .15s) var(--ease, ease);
}
.gka-switch::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
background: var(--surface-solid, var(--surface)); box-shadow: var(--shadow-sm);
transition: transform var(--dur-fast, .15s) var(--ease, ease);
}
.gka-toggle input:checked + .gka-switch { background: var(--success); }
.gka-toggle input:checked + .gka-switch::after { transform: translateX(18px); }
.gka-toggle input:focus-visible + .gka-switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.gka-toggle input:disabled + .gka-switch { opacity: .55; }
.gka-toggle-txt { display: flex; flex-direction: column; gap: .15rem; }
/* ── phone ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.gka-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gka-fact:nth-child(3) { border-left: 0; }
.gka-fact:nth-child(n+3) { border-top: 1px solid var(--border); }
.gka-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.gka-card { padding: .9rem .85rem; }
.gka-actions { width: 100%; }
.gka-actions .btn { flex: 1 1 auto; justify-content: center; }
.gka-facts, .gka-cards .gka-facts { grid-template-columns: 1fr; }
.gka-fact + .gka-fact { border-left: 0; border-top: 1px solid var(--border); }
.gka-days { max-width: none; }
.gka-dis li { grid-template-columns: 1fr; }
.gka-dis-when { justify-self: start; }
.gka-row { grid-template-columns: 1fr; }
.gka-filters { flex-direction: column; align-items: stretch; }
.gka-seg { align-self: flex-start; }
/* the log tables become stacked cards: one row = one card, each cell labelled */
.gka-table-wrap { border: 0; overflow: visible; }
.gka-table thead { display: none; }
.gka-table, .gka-table tbody, .gka-table tr, .gka-table td { display: block; width: 100%; }
.gka-table tr { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: .6rem; padding: .35rem .2rem; background: var(--surface); }
.gka-table td { border: 0; padding: .3rem .6rem; display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; }
.gka-table td::before { content: attr(data-l); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); padding-top: .15rem; }
.gka-err { max-width: none; }
.gka-date { width: 100%; }
.gka-dates { display: grid; grid-template-columns: 1fr auto 1fr; }
}
/* 6.80.1: why the Hub refused an update (run details, change log, «Ενημέρωση GateKeeper» results). */
.gka-hint {
margin-top: .3rem; padding: .4rem .6rem; border-radius: var(--radius-sm, 6px); background: var(--warn-soft);
color: var(--text); font-size: var(--text-sm); line-height: 1.4; max-width: 60ch;
}
.gka-errors li { margin-bottom: .55rem; }
/* 6.80.3: a run in progress — «Βήμα α: 12 από 71» + «Διακοπή εκτέλεσης». */
.gka-run-live { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .5rem 0; padding: .5rem .7rem;
border-radius: var(--radius-sm, 6px); background: var(--info-soft); }
.gka-progress { display: inline-flex; gap: .35rem; align-items: center; font-size: var(--text-sm); }
.gka-stop { margin-top: .3rem; }
/* 6.80.4: «Διάγνωση» result */
.gkc-diag { display: grid; gap: .6rem; }
.gkc-diag-ok { background: var(--success-soft); }
.gkc-diag-res > div { margin: .15rem 0; }
.gkc-diag-table td.mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-xs, .75rem); white-space: nowrap; }
.gkc-diag-table tr.is-bad td { color: var(--danger); }
/* ---- access: mentions (design/access/css/mentions.css) ---- */
/* MENTIONS (6.80.5 / 8.1.5) — @chips, the person card and the @ composer with atomic chips (comms mention-ui.js).
Tokens only, both themes; phones at 390 px (the card keeps a 8 px gutter, JS-positioned). */
/* chips in text: a person chip is a button (opens the card) that still reads as part of the sentence */
button.cm-mention-chip {
font: inherit; font-weight: 600; line-height: inherit; color: var(--cm-accent-text); background: var(--accent-soft);
border: 0; border-radius: var(--radius-xs); padding: 0 .2rem; margin: 0; cursor: pointer; display: inline; text-align: inherit;
}
button.cm-mention-chip:hover { text-decoration: underline; text-underline-offset: 2px; }
button.cm-mention-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.cm-mention-chip[aria-expanded="true"] { text-decoration: underline; }
/* the person card */
.cm-mcard {
position: fixed; z-index: 1200; width: max-content; max-width: min(320px, calc(100vw - 16px)); min-width: 220px;
padding: .75rem .85rem; display: flex; flex-direction: column; gap: .6rem;
background: var(--surface-solid); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.cm-mcard[hidden] { display: none; }
.cm-mcard-head { display: flex; gap: .7rem; align-items: center; min-width: 0; }
.cm-mcard-who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cm-mcard-name { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.cm-mcard-title { font-size: var(--cm-fs-meta, 13px); color: var(--text-dim); line-height: 1.35; overflow-wrap: anywhere; }
.cm-mcard-store { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--cm-fs-meta, 13px); color: var(--text-dim); }
.cm-mcard-store svg { flex: 0 0 auto; }
.cm-mcard-link {
align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; font-size: var(--cm-fs-meta, 13px); font-weight: 600;
color: var(--cm-accent-text); text-decoration: none; padding: .2rem 0;
}
.cm-mcard-link:hover { text-decoration: underline; }
/* the composer: a contenteditable box that looks and sizes like the textarea it replaced */
.cm-mention-rich { resize: none; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; cursor: text; outline: none; max-height: 420px; }
.cm-mention-rich:focus-visible, .cm-mention-rich:focus { border-color: var(--accent); }
.cm-mention-rich.is-empty::before { content: attr(data-placeholder); color: var(--text-dim); pointer-events: none; }
.cm-mention-chip.is-token { user-select: all; white-space: nowrap; }
.cm-mention-text { display: flex; flex-direction: column; min-width: 0; }
.cm-mention-text .cm-mention-name, .cm-mention-text .cm-mention-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-mention-item { min-width: 0; }
/* 8.2.1 — the @ list floats on while open (mention-ui.js floatList): cards with overflow hidden clipped it */
.cm-mention-list.cm-mention-list--float { position: fixed; right: auto; margin: 0; z-index: 1600; }
/* ---- access: post-page (design/access/css/post-page.css) ---- */
/* Single-post page — design A "Paper" (FE 8.2.0, fe/src/modules/comms/post-page.js). Prefix cmp-. Tokens only.
Spec: retailops-wip/post-mockups/BUILD.md §2–§3 (A). Grid 236 | 820 | 340 at ≥ 1600 (max 1520, centred), 1fr | 340 below
(max 1240), one column under 1100. ≥ 1900: the grid starts at the shell gutter (the breadcrumb's left edge) and spans the
content area — the post grows to 1320, the right rail to 460 (one column), the rest stays on the far right — so a 2560 px
window never shows the post floating in the middle. */
.cmp { --cmp-r: var(--radius-xl); --cmp-gap: var(--cm-s-5); --cmp-read: 17px; color: var(--text); min-width: 0; padding: var(--cm-s-2) 0 var(--cm-s-8); }
.cmp *, .cmp-pop * { box-sizing: border-box; }
.cmp :where(button), .cmp-pop :where(button) { font: inherit; }
.cmp :where(a) { color: inherit; }
/* the shell's .main scrolls sideways (overflow-x:auto) and would swallow every position:sticky on this page — as Daily info */
body:has(.cm-post-page) .main { overflow-x: clip; }
.cmp-grow { flex: 1 1 auto; }
/* avatar stacks: a small overlap and a ring, so two-letter initials («ΣΝ», «ΓΠ») are never cut; "+N" is its own pill */
.cmp .cm-ui-avstack > .cm-ui-avatar + .cm-ui-avatar { margin-left: -4px; }
.cmp .cm-ui-avstack > .cm-ui-avatar { box-shadow: 0 0 0 2px var(--surface); letter-spacing: -.02em; }
.cmp .cm-ui-avstack--sm > .cm-ui-avatar { width: 30px; height: 30px; font-size: 10.5px; }
.cmp .cm-ui-avstack--xs > .cm-ui-avatar { width: 24px; height: 24px; font-size: 9px; }
.cmp .cm-ui-avstack > .cm-ui-avstack-more { margin-left: 6px; box-shadow: none; width: auto; min-width: 0; height: 22px; padding: 0 8px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); font-size: var(--text-xs); font-weight: 700; }
.cmp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; }
.cmp-dot[hidden] { display: none; }
.cmp-sticky { position: sticky; top: var(--cm-s-4); display: flex; flex-direction: column; gap: var(--cm-s-4); }
/* surfaces */
.cmp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--cmp-r); min-width: 0; }
[data-theme="light"] .cmp-card { box-shadow: var(--shadow-sm), 0 12px 32px -18px color-mix(in srgb, var(--accent-strong) 18%, transparent); }
[data-theme="dark"] .cmp-card { border-color: var(--border-strong); }
.cmp-tile { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); }
.cmp-tile--accent { background: var(--accent-soft); color: var(--cm-accent-text); }
.cmp-tile--info { background: var(--info-soft); color: color-mix(in srgb, var(--info) 75%, var(--text)); }
.cmp-tile--success { background: var(--success-soft); color: color-mix(in srgb, var(--success) 75%, var(--text)); }
.cmp-tile--danger { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 75%, var(--text)); }
.cmp-tile--neutral { background: var(--surface-3); color: var(--text-dim); }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-chips--col { flex-direction: column; align-items: flex-start; }
.cmp-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
font-size: var(--text-sm); font-weight: 600; color: var(--text-dim); max-width: 100%; text-decoration: none; }
.cmp-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cmp-chip:hover { border-color: var(--border-hover); color: var(--text); }
.cmp-chip[hidden] { display: none; }
.cmp-chip.is-accent { background: var(--accent-soft); border-color: transparent; color: var(--cm-accent-text); }
.cmp-chip.is-success { background: var(--success-soft); border-color: transparent; color: color-mix(in srgb, var(--success) 72%, var(--text)); }
.cmp-chip.is-warn { background: var(--warn-soft); border-color: transparent; color: color-mix(in srgb, var(--warn) 72%, var(--text)); }
.cmp-chip.is-danger { background: var(--danger-soft); border-color: transparent; color: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.cmp-chip.is-neutral { background: var(--surface-3); border-color: transparent; }
.cmp-pills { display: inline-flex; gap: 6px; }
.cmp-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: var(--text-xs); font-weight: 600; color: var(--text-dim); font-feature-settings: 'tnum'; }
.cmp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--cm-accent-text); font-size: var(--text-sm); font-weight: 700; font-feature-settings: 'tnum'; }
.cmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; font-size: var(--text-md); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; background: none; color: var(--text); }
.cmp-btn--sm { min-height: 30px; padding: 0 12px; font-size: var(--text-sm); }
.cmp-btn--primary { background: var(--accent-strong); color: var(--text-inverse); }
[data-theme="dark"] .cmp-btn--primary { background: var(--accent); }
.cmp-btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.cmp-btn--secondary:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.cmp-btn--ghost { color: var(--text-dim); }
.cmp-btn--ghost:hover { background: var(--surface-hover); color: var(--text); }
.cmp-btn--glass { background: color-mix(in srgb, var(--surface) 82%, transparent); border-color: color-mix(in srgb, var(--surface) 40%, transparent); color: var(--text); backdrop-filter: blur(8px); }
.cmp-icbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--text-dim); cursor: pointer; flex: 0 0 auto; }
.cmp-icbtn:hover, .cmp-icbtn[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }
.cmp-linkbtn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: var(--cm-accent-text); font-weight: 600; font-size: var(--text-base); cursor: pointer; text-decoration: none; }
.cmp-linkbtn:hover { text-decoration: underline; }
.cmp-name { border: 0; background: none; padding: 0; font-weight: 650; color: var(--text); cursor: pointer; text-align: left; font-size: inherit; }
.cmp-name:hover { text-decoration: underline; text-decoration-color: var(--border-hover); text-underline-offset: 3px; }
.cmp-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: var(--text-md); font-weight: 600; color: var(--text-dim) !important; text-decoration: none; padding: 6px 10px 6px 6px; border-radius: 999px; }
.cmp-back:hover { background: var(--surface-hover); color: var(--text) !important; }
.cmp-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.cmp-seg button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font-size: var(--text-sm); font-weight: 600; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.cmp-seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .cmp-seg button.is-on { background: var(--surface-3); }
.cmp-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-md); color: var(--text-dim); }
/* author + meta */
.cmp-author { display: flex; align-items: center; gap: var(--cm-s-3); min-width: 0; }
.cmp-author-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-author-n { display: flex; align-items: center; gap: 8px; font-size: var(--text-lg); }
.cmp-author-m { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--text-base); color: var(--text-dim); }
.cmp-author-m .cm-ui-time { color: inherit; }
.cmp-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cmp-lang { margin-left: auto; }
.cmp-title { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 750; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cmp-lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--text-dim); }
/* body (the sanitised server HTML) */
.cmp .cmp-body { font-size: var(--cmp-read); line-height: 1.7; color: var(--text); overflow-wrap: anywhere; max-width: none; display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cmp .cmp-body p { margin: 0; }
.cmp .cmp-body > *, .cmp .cmp-body > .cm-doc > * { margin-top: 0; margin-bottom: 0; }
.cmp .cmp-body > .cm-doc { display: flex; flex-direction: column; gap: var(--cm-s-4); min-width: 0; }
.cmp .cmp-body.is-short p { font-size: 30px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; padding: 6px 0 2px; }
.cmp .cmp-body h2 { margin: var(--cm-s-3) 0 0; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; scroll-margin-top: var(--cm-s-6); }
.cmp .cmp-body h3 { margin: var(--cm-s-2) 0 0; font-size: 19px; line-height: 1.35; font-weight: 700; }
.cmp .cmp-body ul, .cmp .cmp-body ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.cmp .cmp-body li::marker { color: var(--accent); }
.cmp .cmp-body table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cmp .cmp-body th, .cmp .cmp-body td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp .cmp-body tr:last-child > th, .cmp .cmp-body tr:last-child > td { border-bottom: 0; }
.cmp .cmp-body th, .cmp .cmp-body td:first-child { font-weight: 600; color: var(--text-dim); background: var(--surface-2); }
.cmp .cmp-body figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-3); }
.cmp .cmp-body figure img, .cmp .cmp-body > img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.cmp .cmp-body figure img { border-radius: 0; }
.cmp .cmp-body figcaption { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: var(--text-sm); color: var(--text-dim); background: var(--surface-2); }
.cmp .cmp-body blockquote { margin: 0; padding: 10px 16px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.cmp .cmp-body .cm-mention-chip { line-height: 1.5; }
.cmp-files { display: flex; flex-direction: column; gap: 8px; }
.cmp-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); text-decoration: none; min-width: 0; color: var(--text); }
a.cmp-file:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.cmp-file.is-blocked { opacity: .7; }
.cmp-file-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text-dim); }
.cmp-file-ic.is-pdf { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 75%, var(--text)); }
.cmp-file-ic.is-sheet, .cmp-file-ic.is-xls, .cmp-file-ic.is-spreadsheet { background: var(--success-soft); color: color-mix(in srgb, var(--success) 75%, var(--text)); }
.cmp-file-ic.is-image { background: var(--info-soft); color: color-mix(in srgb, var(--info) 75%, var(--text)); }
.cmp-file-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cmp-file-t b { font-size: var(--text-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-file-t small { font-size: var(--text-sm); color: var(--text-dim); }
.cmp .cm-read-state:empty { display: none; }
.cmp .cm-read-mark { border-radius: var(--radius-md); background: var(--success-soft); padding: 10px 14px; }
.cmp .cm-art-banners { display: flex; flex-direction: column; gap: var(--cm-s-3); }
.cmp .cm-art-extras:empty { display: none; }
.cmp .cm-art-extras { display: flex; flex-direction: column; gap: var(--cm-s-4); }
.cmp .cm-widget-card { border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: none; }
/* reactions summary, counts, action bar */
.cmp-engage { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: var(--cm-s-2); }
.cmp-rxsum { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 6px 4px 2px; border-radius: 999px; cursor: pointer; color: var(--text-dim); font-size: var(--text-md); min-width: 0; }
.cmp-rxsum:hover .cmp-rxsum-text { text-decoration: underline; color: var(--text); }
.cmp-rxsum-icons { display: inline-flex; }
.cmp-rxsum-icons > .cm-rx { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--surface); }
.cmp-rxsum-icons > .cm-rx + .cm-rx { margin-left: -6px; }
.cmp-rxsum.is-empty { cursor: default; color: var(--text-faint); }
.cmp-rxsum.is-empty .cm-rx { filter: grayscale(1); opacity: .45; }
.cmp-rxsum-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-counts { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-md); color: var(--text-dim); white-space: nowrap; }
.cmp-counts .cmp-linkbtn { color: var(--text-dim); font-weight: 500; font-size: var(--text-md); }
.cmp-actbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0 -16px; padding-top: 6px; border-top: 1px solid var(--border); }
.cmp-act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text-dim);
font-size: var(--text-md); font-weight: 600; cursor: pointer; white-space: nowrap; min-width: 0; text-decoration: none; }
.cmp-act:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.cmp-act:disabled { opacity: .55; cursor: default; }
.cmp-act.is-on { color: var(--cm-accent-text); }
.cmp-act-l { overflow: hidden; text-overflow: ellipsis; }
.cmp-act > .cm-rx { width: 22px; height: 22px; box-shadow: none; }
.cmp-react.is-love { color: color-mix(in srgb, var(--danger) 78%, var(--text)); }
.cmp-react.is-celebrate { color: color-mix(in srgb, var(--c-2) 78%, var(--text)); }
.cmp-react.is-support { color: color-mix(in srgb, var(--success) 78%, var(--text)); }
.cmp-react.is-insightful { color: color-mix(in srgb, var(--c-5) 78%, var(--text)); }
.cmp-react.is-funny { color: color-mix(in srgb, var(--c-7) 78%, var(--text)); }
.cmp-act--icon { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.cmp-act--icon .cmp-act-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cmp-act--icon.is-on { color: var(--accent-strong); }
/* community band (tinted identity) and the cover */
.cmp-bandart { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmp-band-wash { fill: color-mix(in srgb, var(--cm-acc) 16%, var(--surface)); }
.cmp-pat { fill: color-mix(in srgb, var(--cm-acc) 34%, var(--surface)); }
.cmp-band-o1 { fill: color-mix(in srgb, var(--cm-acc) 26%, var(--surface)); opacity: .8; }
.cmp-band-o2 { fill: color-mix(in srgb, var(--accent-2) 22%, var(--surface)); opacity: .7; }
.cmp-band { position: relative; height: 128px; overflow: hidden; }
.cmp-band-in { position: absolute; left: 32px; right: 24px; bottom: 18px; display: flex; align-items: center; gap: 14px; }
.cmp-band-in .cm-cm-logo { box-shadow: 0 0 0 4px var(--surface); }
.cmp-band-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cmp-band-n { font-size: var(--text-xl); font-weight: 750; text-decoration: none; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-band-n:hover { text-decoration: underline; }
.cmp-band-sub { font-size: var(--text-base); color: var(--text-dim); font-weight: 600; min-height: 1.2em; }
.cmp-cover { position: relative; aspect-ratio: 21 / 8; overflow: hidden; background: var(--surface-3); }
.cmp-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cmp-cover.is-art { --cm-acc: var(--accent); aspect-ratio: auto; height: 168px; }
.cmp-cover-ghost { position: absolute; right: 7%; top: 50%; transform: translateY(-50%) rotate(-8deg); color: color-mix(in srgb, var(--cm-acc) 45%, var(--surface)); }
.cmp-pintag { margin-right: 4px; }
/* the paper card */
.cmp-paper { overflow: hidden; }
.cmp-paper-in { --cmp-pgap: var(--cm-s-5); display: flex; flex-direction: column; gap: var(--cmp-pgap); padding: 24px 32px 12px; }
.cmp.is-article .cmp-paper-in { --cmp-pgap: var(--cm-s-4); padding-top: 28px; }
/* the end-of-article marker (tracking) is an empty box: it must not add a gap of its own */
.cmp-paper-in > .cm-article-end { margin-top: calc(-1 * var(--cmp-pgap)); height: 1px; }
.cmp-paper-in > .cm-art-extras:empty, .cmp-paper-in > .cm-art-banners:empty { display: none; }
/* a one-line post: a calm gap under the text, not a stranded line */
.cmp.is-short-post .cmp-paper-in { --cmp-pgap: 16px; }
.cmp.is-short-post .cmp-engage { padding-top: 4px; }
.cmp-paper-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmp-paper-tools { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
/* comments */
.cmp-discuss { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: var(--cm-s-4); }
.cmp-discuss-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-discuss-h h2 { margin: 0; font-size: var(--text-xl); font-weight: 700; }
.cmp-people:empty { display: none; }
.cmp-thread { min-width: 0; }
.cmp-clist, .cmp-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cmp-clist { gap: 2px; }
.cmp-c { position: relative; display: flex; gap: 10px; padding: 10px; border-radius: var(--radius-md); min-width: 0; }
.cmp-c:hover { background: var(--surface-2); }
.cmp-c-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cmp-c-bub { position: relative; align-self: flex-start; max-width: 100%; background: var(--surface-2); border-radius: 4px 18px 18px 18px; padding: 8px 14px 10px; }
.cmp-c:hover > .cmp-c-main > .cmp-c-bub { background: var(--surface-3); }
.cmp-c-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-size: var(--text-md); }
.cmp-c-time, .cmp-c-ed { font-size: var(--text-sm); color: var(--text-faint); }
.cmp-c-time .cm-ui-time { color: inherit; }
.cmp-c-text { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.cmp-c-heldnote { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: var(--text-sm); color: color-mix(in srgb, var(--warn) 72%, var(--text)); }
.cmp-c.is-held > .cmp-c-main > .cmp-c-bub { background: none; border: 1px dashed var(--border-strong); }
.cmp-c-rx { position: absolute; right: -10px; bottom: -11px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 2px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); font-size: var(--text-xs); font-weight: 700; color: var(--text-dim); }
.cmp-c-rx .cm-rx { width: 16px; height: 16px; box-shadow: none; }
.cmp-c-rx .cm-rx + .cm-rx { margin-left: -4px; box-shadow: 0 0 0 1px var(--surface); }
.cmp-c-foot { display: flex; align-items: center; gap: 2px; margin-top: 2px; min-height: 26px; }
.cmp-c-foot[hidden] { display: none; }
.cmp-c-a { border: 0; background: none; padding: 3px 8px; border-radius: 999px; font-size: var(--text-sm); font-weight: 650; color: var(--text-dim); cursor: pointer; }
.cmp-c-a[hidden] { display: none; }
.cmp-c-a:hover { background: var(--surface-hover); color: var(--text); }
.cmp-c-a.is-on { color: var(--cm-accent-text); }
.cmp-c-a.is-love { color: color-mix(in srgb, var(--danger) 78%, var(--text)); }
.cmp-c-a.is-celebrate { color: color-mix(in srgb, var(--c-2) 78%, var(--text)); }
.cmp-c-a.is-support { color: color-mix(in srgb, var(--success) 78%, var(--text)); }
.cmp-c-more { margin-left: 2px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.cmp-c-more .cm-ui-icon { width: 16px !important; height: 16px !important; }
.cmp-c:hover > .cmp-c-main > .cmp-c-foot .cmp-c-more, .cmp-c-more:focus-visible, .cmp-c-more[aria-expanded="true"] { opacity: 1; }
.cmp-c-more:hover { background: var(--surface-hover); color: var(--text); }
@media (hover: none) { .cmp-c-more { opacity: 1; } }
.cmp-repwrap { display: flex; flex-direction: column; }
.cmp-replies { gap: 0; margin-top: 2px; position: relative; padding-left: 4px; }
.cmp-replies:not(:empty)::before { content: ""; position: absolute; left: -27px; top: -4px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--border-strong); }
.cmp-c.is-reply { padding: 8px 6px; }
.cmp-c.is-gone .cmp-c-goneic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--text-faint); }
.cmp-c-gonet { margin: 4px 0 0; font-size: var(--text-md); font-style: italic; color: var(--text-faint); }
.cmp-c.is-new { animation: cmp-new 1.6s var(--ease); }
@keyframes cmp-new { from { background: var(--accent-soft); } to { background: transparent; } }
.cmp-morereplies { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0 4px; padding: 5px 10px 5px 8px; border: 0; border-radius: 999px; background: none; color: var(--cm-accent-text); font-size: var(--text-sm); font-weight: 650; cursor: pointer; }
.cmp-morereplies:hover { background: var(--accent-soft); }
.cmp-morereplies.is-hide { color: var(--text-dim); }
.cmp-morecomments { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; min-height: 40px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: none; color: var(--cm-accent-text); font-weight: 650; font-size: var(--text-md); cursor: pointer; }
.cmp-morecomments:hover { background: var(--accent-soft); border-style: solid; }
.cmp-c-edit { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: 4px; }
.cmp-c-editrow { display: flex; justify-content: flex-end; gap: 6px; }
.cmp-err { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--text-md); color: var(--text-dim); }
.cmp-err p { margin: 0; }
/* composer (the @ box comes from mention-ui.js; its own border is dropped inside ours) */
.cmp-compose { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.cmp-compose > .cm-ui-avatar { margin-top: 6px; }
.cmp-compose-box { position: relative; flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.cmp-compose-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cmp-compose-box .cm-mention { position: relative; }
.cmp-compose-box .cm-mention-input { border: 0 !important; box-shadow: none !important; background: none !important; outline: none; min-height: 0; padding: 10px 14px 4px; font-size: 15px; line-height: 1.55; resize: none; width: 100%; max-height: 220px; overflow-y: auto; border-radius: 20px 20px 0 0; }
.cmp-compose-box .cm-mention-count:empty { display: none; }
.cmp-compose-box .cm-mention-count { display: block; padding: 0 14px; font-size: var(--text-xs); color: var(--text-faint); }
.cmp-compose-ctx { display: flex; align-items: center; gap: 6px; padding: 8px 12px 0; font-size: var(--text-sm); color: var(--text-dim); }
.cmp-compose-ctx button { margin-left: auto; border: 0; background: none; color: var(--text-faint); cursor: pointer; display: inline-flex; }
.cmp-compose-tools { display: flex; align-items: center; gap: 2px; padding: 2px 6px 6px; }
.cmp-tool { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--text-faint); cursor: pointer; }
.cmp-tool:hover, .cmp-tool[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }
.cmp-tools-hint { flex: 1 1 auto; font-size: var(--text-xs); color: var(--text-faint); padding-left: 4px; }
.cmp-send { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--text-faint); font-weight: 650; font-size: var(--text-base); cursor: pointer; }
.cmp-compose.has-text .cmp-send { background: var(--accent-strong); color: var(--text-inverse); }
[data-theme="dark"] .cmp-compose.has-text .cmp-send { background: var(--accent); }
.cmp-compose.is-reply { margin: 6px 0 4px; }
.cmp-form-err:empty { display: none; }
.cmp-form-err { margin: 0; padding: 0 14px 8px; font-size: var(--text-sm); color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
/* popovers: menus, who reacted, emoji */
.cmp-pop { position: fixed; z-index: 1400; background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: cm-pop var(--cm-t-mid) var(--ease); color: var(--text); }
.cmp-menu { display: flex; flex-direction: column; padding: 6px; min-width: 240px; }
.cmp-menu-i { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font-size: var(--text-md); cursor: pointer; text-align: left; text-decoration: none; }
.cmp-menu-i:hover, .cmp-menu-i:focus-visible { background: var(--surface-hover); outline: none; }
.cmp-menu-i .cm-ui-icon { color: var(--text-dim); }
.cmp-menu-i.is-danger, .cmp-menu-i.is-danger .cm-ui-icon { color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.cmp-menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.cmp-menu-h { padding: 4px 10px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.cmp-who { width: 340px; padding: 8px; }
.cmp-who-tabs { display: flex; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cmp-who-tabs button { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 5px 10px; border-radius: 999px; background: none; color: var(--text-dim); font-size: var(--text-sm); font-weight: 650; cursor: pointer; }
.cmp-who-tabs button.is-on { background: var(--accent-soft); color: var(--cm-accent-text); }
.cmp-who-tabs .cm-rx { width: 18px; height: 18px; box-shadow: none; }
.cmp-who-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 300px; overflow: auto; }
.cmp-who-list li { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm); }
.cmp-who-av { position: relative; display: inline-flex; }
.cmp-who-av .cm-rx { position: absolute; right: -4px; bottom: -3px; width: 16px; height: 16px; }
.cmp-who-t { display: flex; flex-direction: column; min-width: 0; }
.cmp-who-t b { font-size: var(--text-md); font-weight: 600; }
.cmp-who-t span { font-size: var(--text-sm); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-who-more { display: flex; justify-content: center; padding: 6px 0 2px; }
.cmp-who-more:empty { display: none; }
.cmp-who-err { margin: 0; font-size: var(--text-sm); color: var(--text-dim); }
.cmp-emoji { display: grid; grid-template-columns: repeat(6, 36px); gap: 2px; padding: 6px; }
.cmp-emoji button { width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: none; font-size: 20px; cursor: pointer; }
.cmp-emoji button:hover, .cmp-emoji button:focus-visible { background: var(--surface-hover); outline: none; }
/* rail cards */
.cmp-rcard { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cmp-rcard-h { display: flex; align-items: center; gap: 10px; }
.cmp-rcard-h h3 { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.cmp-ccard { overflow: hidden; }
.cmp-ccard-cover { position: relative; height: 72px; overflow: hidden; }
.cmp-ccard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-ccard-in { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.cmp-ccard-in > .cm-cm-logo { position: relative; margin-top: -26px; box-shadow: 0 0 0 4px var(--surface); }
.cmp-ccard-in h3 { margin: 4px 0 0; font-size: var(--text-lg); font-weight: 700; }
.cmp-ccard-in h3 a { text-decoration: none; }
.cmp-ccard-in h3 a:hover { text-decoration: underline; }
.cmp-ccard-in p { margin: 0; font-size: var(--text-md); line-height: 1.5; color: var(--text-dim); }
.cmp-ccard-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cmp-acard { display: flex; align-items: center; gap: 12px; }
.cmp-acard-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-acard-n { font-size: var(--text-lg); }
.cmp-acard-t > span { font-size: var(--text-md); color: var(--text-dim); }
.cmp-acard-b { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-acard-b .cmp-btn { flex: 1 1 auto; }
.cmp-mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-mitem { display: flex; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: var(--radius-md); text-decoration: none; }
.cmp-mitem:hover { background: var(--surface-hover); }
.cmp-mitem-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmp-mitem-t b { font-size: var(--text-md); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmp-mitem-t > span:not(.cmp-pills) { font-size: var(--text-sm); color: var(--text-dim); }
.cmp-reads { position: relative; display: flex; align-items: center; gap: 14px; }
.cmp-ring { width: 80px; height: 80px; transform: rotate(-90deg); flex: 0 0 auto; }
.cmp-ring-t { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.cmp-ring-v { fill: none; stroke: var(--success); stroke-width: 9; stroke-linecap: round; }
.cmp-reads-p { position: absolute; left: 0; width: 80px; text-align: center; font-size: 19px; font-weight: 750; }
.cmp-reads-t { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cmp-reads-t b { font-size: var(--text-lg); }
.cmp-reads-t > span:not(.cmp-chip) { font-size: var(--text-md); color: var(--text-dim); }
.cmp-rgroups { display: flex; flex-direction: column; gap: 8px; }
.cmp-rgroup { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: var(--text-base); color: var(--text-dim); }
.cmp-rgroup-t { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.cmp-rgroup-t > span { display: block; height: 100%; background: var(--success); border-radius: 999px; }
.cmp-rgroup b { text-align: right; color: var(--text); }
.cmp-seen { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.cmp-seen-l { font-size: var(--text-sm); font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.cmp-seen .cmp-linkbtn { margin-left: auto; }
.cmp-seen.is-plain { padding-top: 8px; }
.cmp-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-toc a { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: var(--radius-md); text-decoration: none; font-size: var(--text-md); color: var(--text-dim); }
.cmp-toc a:hover { background: var(--surface-hover); color: var(--text); }
.cmp-toc a span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: var(--text-xs); font-weight: 700; flex: 0 0 auto; }
.cmp-toc li.is-on a { color: var(--cm-accent-text); background: var(--accent-soft); font-weight: 600; }
.cmp-toc li.is-on a span { background: var(--accent-strong); color: var(--text-inverse); }
.cmp-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp-pn.is-stack { grid-template-columns: 1fr; gap: 8px; }
.cmp-pn-i { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); text-decoration: none; min-width: 0; color: var(--text-dim) !important; }
.cmp-pn-i:hover { border-color: var(--border-hover); color: var(--text) !important; }
.cmp-pn-i.is-next { justify-content: flex-end; text-align: right; }
.cmp-pn-i.is-empty { visibility: hidden; }
.cmp-pn.is-stack .cmp-pn-i.is-empty { display: none; }
.cmp-pn-t { display: flex; flex-direction: column; min-width: 0; }
.cmp-pn-t small { font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.cmp-pn-t b { font-size: var(--text-md); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-pn.is-stack .cmp-pn-i { background: var(--surface-2); }
.cmp-pn.is-stack .cmp-pn-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* empty discussion */
.cmp-cmore { display: flex; flex-direction: column; }
.cmp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 16px 20px; }
.cmp-empty-art { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 24px; background: var(--accent-soft); color: var(--cm-accent-text); transform: rotate(-6deg); }
.cmp-empty h3 { margin: 6px 0 0; font-size: var(--text-xl); }
.cmp-empty p { margin: 0; max-width: 380px; color: var(--text-dim); font-size: var(--text-md); line-height: 1.5; }
.cmp-empty-rx { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.cmp-empty-rxb { border: 0; background: var(--surface-2); padding: 6px; border-radius: 50%; cursor: pointer; transition: transform var(--dur-fast) var(--ease); }
.cmp-empty-rxb:hover { transform: translateY(-3px) scale(1.06); }
.cmp-empty-rxb .cm-rx { width: 30px; height: 30px; box-shadow: none; }
/* skeleton */
.cmp-sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: cmp-sh 1.3s ease infinite; }
@keyframes cmp-sh { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .cmp-sk { animation: none; } }
.cmp-sk-line { height: 12px; margin: 6px 0; }
.cmp-sk-big { height: 34px; margin: 10px 0; }
.cmp-sk-av { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
.cmp-sk-av--lg { width: 48px; height: 48px; }
.cmp-sk-tile { width: 36px; height: 36px; border-radius: var(--radius-md); flex: 0 0 auto; }
.cmp-sk-band { height: 120px; border-radius: 0; }
.cmp-sk-pill { height: 36px; width: 110px; border-radius: 999px; }
.cmp-skrow { display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-skc { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.cmp-skc-t { flex: 1 1 auto; }
.cmp-clist > li > .cmp-skc { padding: 10px; }
/* ═══ A · Paper grid ═══ */
.cmp-grid { display: grid; grid-template-columns: 236px minmax(0, 820px) 340px; gap: var(--cmp-gap); justify-content: center; align-items: start; margin: 0 auto; max-width: 1520px; }
.cmp-left { min-width: 0; align-self: stretch; }
.cmp-main { min-width: 0; display: flex; flex-direction: column; gap: var(--cmp-gap); }
.cmp-rail { min-width: 0; display: flex; flex-direction: column; gap: var(--cm-s-4); position: sticky; top: var(--cm-s-4); }
.cmp-rail.is-tall { position: static; }
.cmp-backm { display: none; }
.cmp-pn-host:empty { display: none; }
.cmp-pn--main { display: none; }
/* ≥ 1900: start at the shell gutter and grow the post, not the rail (the owner's window is ~2560): left 300 · main up to
1320 · right rail ONE column 340 → 460 (Reads → Author → Community → More). Whatever is left stays on the far right.
Running text keeps a ~72ch measure inside the card; covers, blocks, images and comments use the full width.
A short text-only member post caps the main column at 1040 so a one-line post never sits in a vast card. */
@media (min-width: 1900px) {
.cmp { --cmp-read: 18px; }
.cmp-grid { grid-template-columns: 300px minmax(0, 1320px) minmax(340px, 460px); justify-content: start; max-width: none; margin: 0; }
.cmp.is-short-post .cmp-grid { grid-template-columns: 300px minmax(0, 1040px) minmax(340px, 460px); }
.cmp .cmp-body :is(p, ul, ol, h2, h3, blockquote, aside, .cm-callout):not(figure *, td *, th *, li *) { max-width: 72ch; }
.cmp-lead { max-width: 90ch; }
}
@media (max-width: 1599.98px) {
.cmp-grid { grid-template-columns: minmax(0, 1fr) 340px; max-width: 1240px; }
.cmp-left { display: none; }
.cmp-backm { display: block; margin-bottom: calc(var(--cmp-gap) * -.5); }
.cmp-pn--main { display: grid; }
}
@media (max-width: 1099.98px) {
.cmp-grid { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.cmp-rail { position: static; }
}
/* phone (< 760, D shell with bottom tabs) */
@media (max-width: 759.98px) {
.cmp { --cmp-r: var(--radius-lg); --cmp-gap: 12px; padding-top: 0; }
.cmp-title { font-size: 26px; }
.cmp-lead { font-size: 16px; }
.cmp .cmp-body { font-size: 16px; }
.cmp .cmp-body.is-short p { font-size: 22px; }
.cmp-paper-in { padding: 16px 16px 6px; gap: 14px; }
.cmp.is-article .cmp-paper-in { padding-top: 18px; }
.cmp-band { height: 96px; }
.cmp-band-in { left: 16px; right: 12px; bottom: 12px; gap: 10px; }
.cmp-band-in .cmp-btn { display: none; }
.cmp-band-n { font-size: var(--text-lg); }
.cmp-paper-top { align-items: flex-start; }
.cmp-author-n { font-size: var(--text-md); }
.cmp-author-m { font-size: var(--text-sm); gap: 2px 8px; }
.cmp-author-m .cmp-dot { display: none; }
.cmp-author-m .cmp-author-role { flex: 1 1 100%; }
.cmp-actbar { margin: 0 -8px; }
.cmp-actbar .cmp-act { flex-direction: column; gap: 2px; min-height: 52px; font-size: var(--text-xs); padding: 0 4px; }
.cmp-discuss { padding: 14px 12px; }
.cmp-discuss-h .cmp-sorthost { flex: 1 1 100%; overflow-x: auto; }
.cmp-c { padding: 8px 4px; }
.cmp-c-a { padding: 3px 6px; }
.cmp-tools-hint { display: none; }
.cmp-pn { grid-template-columns: 1fr; }
.cmp-pn-i.is-empty { display: none; }
.cmp-pop.cmp-who { width: calc(100vw - 16px); }
.cmp-rgroup { grid-template-columns: 96px minmax(0, 1fr) 40px; }
.cmp-acard-b .cmp-btn { flex: 1 1 0; }
.cmp-chips--col { flex-direction: row; }
}
/* ---- access: shell-home (design/access/css/shell-home.css) ---- */
/* FE-SHELL — Home, the intranet front page (fe/src/modules/dashboard/home.js). After the approved prototype
(retailops-wip/intranet-prototype: hero, today, pinned, posts, side cards). Prefix .ro-. Tokens only. */
.ro-homepage { display: flex; flex-direction: column; gap: 20px; padding: 6px 0 28px; }
.ro-homepage > .ro-home { margin: 0; }
.ro-hi { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ro-faint { color: var(--text-faint); }
.ro-grow { flex: 1 1 auto; }
/* ---- skeletons ---------------------------------------------------------------------------------------------------- */
.ro-sk { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.ro-sk-card { min-height: 112px; }
.ro-sk-line, .ro-hs.is-loading b, .ro-hs.is-loading span {
display: block; height: 12px; border-radius: 6px; color: transparent;
background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%;
animation: roShimmer 1.3s ease-in-out infinite;
}
.ro-sk-line:first-child { height: 14px; }
.ro-sk-inline { display: inline-block; height: 14px; vertical-align: middle; max-width: 420px; }
@keyframes roShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.ro-slot { display: block; }
/* ---- hero --------------------------------------------------------------------------------------------------------- */
.ro-hero {
position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
padding: 26px 28px; border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-md);
background:
radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-2) 20%, transparent) 0%, transparent 55%),
radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--c-3) 12%, transparent) 0%, transparent 60%),
linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 7%, var(--surface)) 100%);
}
.ro-hero::after {
content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
box-shadow: 0 0 0 40px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 80px color-mix(in srgb, var(--accent) 3%, transparent);
}
.ro-hero-txt { position: relative; z-index: 1; min-width: 0; }
.ro-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); text-transform: none; }
.ro-eyebrow .ro-hi { color: var(--c-5); }
.ro-eyebrow-where { display: inline-flex; gap: 6px; color: var(--text-dim); }
.ro-hero h1 { margin: 6px 0 6px; font-size: 30px; line-height: 1.15; font-weight: 750; letter-spacing: -.02em; color: var(--text); }
.ro-hero-sum { margin: 0; color: var(--text-dim); max-width: 600px; font-size: 14.5px; line-height: 1.5; min-height: 1.5em; }
.ro-hero-stats { position: relative; z-index: 1; display: flex; gap: 10px; flex: 0 0 auto; }
.ro-hs {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 84px; padding: 10px 12px;
border-radius: 14px; background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ro-hs b { font-size: 22px; line-height: 1.1; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.ro-hs span { font-size: 12px; color: var(--text-dim); text-align: center; }
.ro-hs[hidden] { display: none; }
.ro-hs.is-loading b { width: 30px; height: 20px; }
.ro-hs.is-loading span { width: 52px; margin-top: 6px; }
/* ---- grid --------------------------------------------------------------------------------------------------------- */
.ro-hgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.ro-hgrid.is-side-only { grid-template-columns: minmax(0, 1fr); }
.ro-hgrid.is-side-only .ro-hmain { display: none; }
.ro-hgrid.is-side-only .ro-hside { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ro-hmain { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ro-hside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ro-hgrid > *, .ro-hmain > * { min-width: 0; }
/* ---- chips & buttons ---------------------------------------------------------------------------------------------- */
.ro-chip {
display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
line-height: 1.6; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ro-chip-acc { color: var(--accent-strong); background: var(--accent-soft); border-color: transparent; }
.ro-chip-warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.ro-chip-mini { padding: 0 7px; font-size: 11px; }
.ro-btn-soft, .ro-btn-acc {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: 10px;
font-size: 13px; font-weight: 650; white-space: nowrap;
}
.ro-btn-soft { color: var(--accent-strong); background: var(--accent-soft); }
.ro-btn-acc { color: var(--text-inverse); background: var(--accent); box-shadow: var(--shadow-sm); }
.ro-linkbtn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
/* ---- «Σήμερα στο κατάστημα» --------------------------------------------------------------------------------------- */
.ro-today {
display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--border);
box-shadow: var(--shadow-md); color: var(--text); text-decoration: none;
background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%), var(--surface);
transition: border-color var(--dur-fast) var(--ease);
}
.ro-today:hover { border-color: var(--border-hover); }
.ro-today-ic {
display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
color: var(--text-inverse); background: linear-gradient(135deg, var(--c-4), var(--c-3));
}
.ro-today-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ro-today small { font-size: 12px; color: var(--text-faint); }
.ro-today b { font-size: 20px; line-height: 1.2; }
.ro-today .ro-warn-t { color: var(--danger); font-weight: 600; }
.ro-today .ro-good-t { color: var(--success); font-weight: 600; }
.ro-bar { display: block; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; max-width: 420px; }
.ro-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
/* ---- the pinned Daily info item ----------------------------------------------------------------------------------- */
.ro-daily { display: flex; flex-direction: column; gap: 6px; }
.ro-pinned {
position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 20px;
border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); box-shadow: var(--shadow-md);
background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 5%, var(--surface)) 100%);
color: var(--text); text-decoration: none;
}
.ro-pinned::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--accent), var(--accent-2)); }
.ro-pinned:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ro-pin-ic {
display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
background: var(--accent-soft); color: var(--accent-strong);
}
.ro-pin-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ro-pin-body b { font-size: 15px; line-height: 1.35; }
.ro-pin-body small { color: var(--text-faint); font-size: 12px; }
.ro-daily-more { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ro-daily-more:hover { text-decoration: underline; }
/* ---- News --------------------------------------------------------------------------------------------------------- */
.ro-news { display: flex; flex-direction: column; gap: 12px; }
.ro-sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.ro-sec-head h2 { margin: 0; font-size: 19px; letter-spacing: -.015em; }
.ro-sec-head .ro-more { text-decoration: none; }
.ro-ntabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ro-ntab {
flex: 0 0 auto; border: 0; background: none; padding: 5px 11px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600;
color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.ro-ntab:hover { color: var(--text); }
.ro-ntab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ro-news-body { display: flex; flex-direction: column; gap: 16px; }
.ro-post-feat, .ro-post-sm {
display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
box-shadow: var(--shadow-md); color: var(--text); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ro-post-feat:hover, .ro-post-sm:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.ro-cover { position: relative; height: 150px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ro-cover.ro-cover-media:not(.ro-cover-sm) { height: 220px; }
.ro-cover-sm { height: 104px; }
.ro-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ro-cover.has-img .ro-cover-ic { display: none; }
.ro-cover-ic { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; color: var(--text-inverse);
background: color-mix(in srgb, var(--text-inverse) 16%, transparent); border: 1px solid color-mix(in srgb, var(--text-inverse) 28%, transparent); }
.ro-cover-ic .ro-ic { width: 30px; height: 30px; }
.ro-cover-sm .ro-cover-ic { width: 44px; height: 44px; border-radius: 14px; }
.ro-cover-sm .ro-cover-ic .ro-ic { width: 22px; height: 22px; }
.ro-ck-1 { background: radial-gradient(90% 120% at 85% 10%, color-mix(in srgb, var(--c-2) 70%, transparent), transparent 60%), linear-gradient(135deg, var(--c-1), var(--c-3)); }
.ro-ck-2 { background: radial-gradient(90% 120% at 85% 10%, color-mix(in srgb, var(--c-8) 60%, transparent), transparent 60%), linear-gradient(135deg, var(--c-2), var(--c-1)); }
.ro-ck-3 { background: radial-gradient(90% 120% at 85% 10%, color-mix(in srgb, var(--c-7) 60%, transparent), transparent 60%), linear-gradient(135deg, var(--c-3), var(--c-1)); }
.ro-ck-4 { background: radial-gradient(90% 120% at 85% 10%, color-mix(in srgb, var(--c-7) 55%, transparent), transparent 60%), linear-gradient(135deg, var(--c-4), var(--c-3)); }
.ro-ck-5 { background: radial-gradient(90% 120% at 85% 10%, color-mix(in srgb, var(--c-6) 55%, transparent), transparent 60%), linear-gradient(135deg, var(--c-5), var(--c-6)); }
.ro-ck-6 { background: linear-gradient(135deg, var(--danger), var(--c-6)); }
.ro-post-body { display: flex; flex-direction: column; padding: 16px 18px; min-width: 0; }
.ro-post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--text-dim); }
.ro-post-who { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ro-post-who b { color: var(--text); font-weight: 650; }
.ro-av {
display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.ro-post-feat h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.ro-post-feat p { margin: 0; color: var(--text-dim); line-height: 1.5; }
.ro-post-foot {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
font-size: 12.5px; color: var(--text-dim);
}
.ro-post-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.ro-post-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ro-post-sm .ro-post-body { padding: 12px 14px 14px; gap: 6px; align-items: flex-start; }
.ro-post-chips { display: flex; flex-wrap: wrap; gap: 5px; max-width: 100%; }
.ro-post-sm h4 { margin: 0; font-size: 15px; line-height: 1.35; }
.ro-post-sm small { font-size: 12px; }
.ro-empty {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface);
border: 1px dashed var(--border-strong); color: var(--text-dim); font-size: 13.5px;
}
.ro-empty a { margin-left: auto; font-weight: 600; color: var(--accent); text-decoration: none; }
/* ---- side cards --------------------------------------------------------------------------------------------------- */
.ro-side-card { position: relative; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.ro-sc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text-dim); padding-right: 56px; }
.ro-sc-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.ro-att-chip { position: absolute; top: 14px; right: 14px; }
.ro-day-date { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--text-faint); }
.ro-evs { display: flex; flex-direction: column; }
.ro-ev { display: flex; gap: 12px; padding: 8px 6px; margin: 0 -6px; border-top: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; }
.ro-ev:first-child { border-top: 0; }
.ro-ev:hover { background: var(--surface-hover); }
.ro-ev-t { width: 66px; flex: 0 0 auto; }
.ro-ev-t b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ro-ev-t small { font-size: 11px; color: var(--text-faint); }
.ro-ev-b { min-width: 0; }
.ro-ev-b b { display: block; font-size: 13px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.ro-ev-b small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-faint); }
.ro-day-empty { margin: 4px 0 2px; font-size: 13px; }
.ro-day-more { margin: 4px 0 0; font-size: 12px; }
.ro-sc-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.ro-sc-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--accent-strong); text-decoration: none; }
.ro-sc-link:hover { text-decoration: underline; }
.ro-atts { display: flex; flex-direction: column; }
.ro-att { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -6px; border-radius: 10px; color: var(--text-faint); text-decoration: none; }
.ro-att:hover { background: var(--surface-hover); }
.ro-att > div { flex: 1 1 auto; min-width: 0; }
.ro-att b { display: block; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.ro-att small { font-size: 11.5px; }
.ro-dot { display: block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--info); }
.ro-dot-danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.ro-dot-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.ro-dot-info { background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.ro-att-ok { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-size: 13px; color: var(--success); font-weight: 600; }
.ro-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ro-links a {
display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); text-decoration: none;
}
.ro-links a:hover { color: var(--text); border-color: var(--border-hover); }
/* ---- operations (the live board, below) --------------------------------------------------------------------------- */
.ro-ops { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--ro-top-h) + 12px); }
/* ---- tablet / phone ----------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
.ro-hgrid { grid-template-columns: minmax(0, 1fr); }
.ro-hside { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 759.98px) {
.ro-homepage { gap: 16px; padding-top: 2px; }
.ro-hero { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
.ro-hero::after { width: 180px; height: 180px; right: -50px; top: -60px; }
.ro-hero h1 { font-size: 23px; }
.ro-eyebrow { row-gap: 2px; }
.ro-eyebrow-where { flex-basis: 100%; padding-left: 23px; }
.ro-eyebrow-sep { display: none; }
/* The board's incidents table becomes a list on a phone: store and status on top, system and issue below. */
.ro-ops .ops-table, .ro-ops .ops-table tbody { display: block; width: 100%; }
.ro-ops .ops-table colgroup, .ro-ops .ops-table thead { display: none; }
.ro-ops .ops-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding: 10px 14px; border-top: 1px solid var(--border); }
.ro-ops .ops-table td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
.ro-ops .ops-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
.ro-ops .ops-table td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--text-faint); }
.ro-ops .ops-table td:nth-child(3) { grid-column: 1; grid-row: 3; }
.ro-ops .ops-table td:nth-child(4) { grid-column: 2; grid-row: 1 / 4; align-self: center; }
.ro-hero-sum { font-size: 13.5px; }
.ro-hero-stats { width: 100%; }
.ro-hs { flex: 1 1 0; min-width: 0; padding: 8px 6px; }
.ro-hs b { font-size: 19px; }
.ro-hs span { font-size: 11px; }
.ro-today { padding: 14px; gap: 12px; }
.ro-today b { font-size: 17px; }
.ro-today .ro-btn-acc, .ro-pinned .ro-btn-soft { display: none; }
.ro-today-ic { width: 38px; height: 38px; }
.ro-pinned { padding: 12px 12px 12px 16px; gap: 12px; }
.ro-pin-ic { width: 36px; height: 36px; }
.ro-sec-head .ro-ntabs { order: 3; flex-basis: 100%; }
.ro-cover { height: 120px; }
.ro-cover.ro-cover-media:not(.ro-cover-sm) { height: 170px; }
.ro-post-row { grid-template-columns: minmax(0, 1fr); }
.ro-post-sm { flex-direction: row; }
.ro-post-sm .ro-cover-sm { width: 96px; height: auto; min-height: 96px; flex: 0 0 auto; }
.ro-post-feat h3 { font-size: 18px; }
.ro-hside { grid-template-columns: minmax(0, 1fr); }
.ro-post-feat:hover, .ro-post-sm:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ro-sk-line, .ro-hs.is-loading b, .ro-hs.is-loading span { animation: none; }
.ro-post-feat, .ro-post-sm, .ro-today { transition: none; }
}
/* ==== END access block ==== */