comes from the Icon child component. */
.cm-item--active[b-0xyr7rk590] .icon {
color: var(--clr-blue-500);
}
.cm-separator[b-0xyr7rk590] {
height: 1px;
background: var(--clr-slate-100);
margin: 0.25rem 0.15rem;
}
/* /Components/Shared/ControlNodeContent.razor.rz.scp.css */
/* The inside of a Steuerknoten's shape — see ControlNodeContent.razor. The shape itself and its states are
FlowCanvas'; this file holds what stands in it and what hangs off it. Blazor scopes only the last compound
of a selector, so `.flow-node:hover .ctrl-actions` reaches this component's bar from the canvas' box. */
.ctrl-node[b-yynat5a4v3] {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ctrl-glyph[b-yynat5a4v3] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}
.ctrl-glyph.is-warning[b-yynat5a4v3] {
color: var(--clr-amber-600);
}
.ctrl-op[b-yynat5a4v3] {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: var(--tracking-label);
color: var(--text);
}
/* Beneath the shape, outside the edge geometry. One line, cut with an ellipsis; the whole name is its tooltip. */
.ctrl-label[b-yynat5a4v3] {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
pointer-events: none;
}
.ctrl-label.is-struck[b-yynat5a4v3] {
text-decoration: line-through;
}
.ctrl-warning[b-yynat5a4v3] {
position: absolute;
top: -2px;
right: -2px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: var(--radius-circle);
background: var(--surface);
box-shadow: var(--shadow-xs);
color: var(--clr-amber-600);
}
/* A step carries these in its footer; a shape has no room, so they appear above it while it is pointed at
or selected — buttons, which the canvas' drag script leaves alone. */
.ctrl-actions[b-yynat5a4v3] {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: none;
gap: 0.15rem;
padding: 0.15rem;
border-radius: var(--radius-sm);
background: var(--surface);
box-shadow: var(--shadow-md);
}
/* An invisible strip over the 6px gap, part of the bar: the pointer travelling up to it never leaves the
node, so the hover that shows the bar holds until it arrives. */
.ctrl-actions[b-yynat5a4v3]::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 6px;
}
.flow-node:hover .ctrl-actions[b-yynat5a4v3],
.flow-node.selected .ctrl-actions[b-yynat5a4v3] {
display: flex;
}
/* /Components/Shared/ControlNodeSettings.razor.rz.scp.css */
/* A Steuerknoten's settings — see ControlNodeSettings.razor. */
/* A Bedingung's Eingänge in words, each with its current value on a running project. */
.cns-inputs[b-qayaoyr46c] {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0;
padding-left: 1.1rem;
font-size: 0.85rem;
color: var(--text-secondary);
}
.cns-value[b-qayaoyr46c] {
color: var(--text-muted);
}
/* A Warten's duration: the number beside its unit. */
.cns-duration[b-qayaoyr46c] {
display: flex;
gap: 0.5rem;
}
.cns-duration input[b-qayaoyr46c] {
flex: none;
width: 6rem;
}
/* A Wert prüfen's comparison value takes what is left beside the operator. */
.cns-duration .cns-compare[b-qayaoyr46c] {
flex: 1;
width: auto;
min-width: 0;
}
/* A Wert prüfen's Fälle: each its comparison, and from two on a label beneath; "Sonst" closes the list. */
.cns-case + .cns-case[b-qayaoyr46c] {
margin-top: 0.6rem;
}
.cns-case-label[b-qayaoyr46c] {
margin-top: 0.3rem;
}
.cns-case-else[b-qayaoyr46c] {
display: block;
margin-top: 0.6rem;
}
.cns-case-actions[b-qayaoyr46c] {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-top: 0.4rem;
}
/* A KI-Entscheidung's sources, each with its remove button, and the row that adds one. */
.cns-sources[b-qayaoyr46c] {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0 0 0.4rem;
padding: 0;
list-style: none;
font-size: 0.85rem;
}
.cns-sources li[b-qayaoyr46c] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.cns-source-add[b-qayaoyr46c] {
align-items: center;
}
.cns-source-add select:first-child[b-qayaoyr46c] {
flex: none;
width: 7.5rem;
}
/* A Probelauf: the spread first, then one line per project with its answer and why. */
.cns-trial-summary[b-qayaoyr46c] {
margin-top: 0.5rem;
}
.cns-trial[b-qayaoyr46c] {
display: flex;
flex-direction: column;
gap: 0.35rem;
max-height: 18rem;
overflow-y: auto;
margin: 0.4rem 0 0;
padding: 0;
list-style: none;
font-size: 0.8rem;
}
.cns-trial li[b-qayaoyr46c] {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.1rem 0.5rem;
}
.cns-trial-project[b-qayaoyr46c] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-secondary);
}
.cns-trial-answer[b-qayaoyr46c] {
font-weight: 600;
}
.cns-trial-why[b-qayaoyr46c] {
grid-column: 1 / -1;
color: var(--text-muted);
}
.cns-number[b-qayaoyr46c] {
width: 6rem;
}
/* An Ändern's date or assignees: what the mode asks for sits under its select, each part with a quieter label. */
.cns-date-amount[b-qayaoyr46c] {
margin-top: 0.4rem;
}
.cns-sublabel[b-qayaoyr46c] {
display: block;
margin: 0.5rem 0 0.2rem;
font-size: 0.8rem;
font-weight: 500;
color: var(--text-secondary);
}
.cns-text[b-qayaoyr46c] {
resize: vertical;
}
/* The checkbox beside its label, not above it like the other fields. */
.cns-check[b-qayaoyr46c] {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.cns-warning[b-qayaoyr46c] {
display: flex;
align-items: center;
gap: 0.3rem;
color: var(--clr-amber-700);
}
/* "So kommt es an" under a Kontaktieren (docs/OUTREACH.md §3): the contact as it goes out on the chosen channel. */
.cns-preview summary[b-qayaoyr46c] {
cursor: pointer;
font-weight: 600;
color: var(--text-secondary);
}
.cns-preview-text[b-qayaoyr46c] {
margin: 0.5rem 0;
padding: 0.75rem;
max-height: 18rem;
overflow: auto;
border-radius: var(--radius-md, 8px);
background: var(--surface-hover);
font-family: inherit;
font-size: 0.8125rem;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* A Kontaktieren's calling days: the seven boxes in a row that wraps. */
.cns-days[b-qayaoyr46c] {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.75rem;
margin-bottom: 0.5rem;
}
/* /Components/Shared/ConversationFileLink.razor.rz.scp.css */
/* A picture in a message: its place reserved at its own proportions (width and aspect-ratio come inline, from the size
read when it was stored), never wider than the column. The skeleton shimmers in it until the picture covers it. */
.cfl-picture[b-bzxcrmfhmy] {
position: relative;
display: block;
max-width: 100%;
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
line-height: 0;
background: linear-gradient(100deg, var(--surface-sunken) 30%, var(--surface-hover) 50%, var(--surface-sunken) 70%);
background-size: 200% 100%;
animation: cfl-shimmer-b-bzxcrmfhmy 1.4s ease-in-out infinite;
}
@keyframes cfl-shimmer-b-bzxcrmfhmy {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.cfl-picture[b-bzxcrmfhmy] {
animation: none;
}
}
.cfl-picture-open[b-bzxcrmfhmy] {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: none;
cursor: zoom-in;
}
/* Fills its place; a picture from before, whose size is not known, is cut to the 4:3 place rather than distorted. */
.cfl-picture-open img[b-bzxcrmfhmy] {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cfl-picture-open:focus-visible[b-bzxcrmfhmy] {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
/* Name and size in the bottom right corner, on a blurred dark glass — over a photo, so it reads alike in both themes. */
.cfl-caption[b-bzxcrmfhmy] {
position: absolute;
right: 0.45rem;
bottom: 0.45rem;
max-width: calc(100% - 0.9rem);
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
color: var(--text-on-inverse);
font-size: 0.72rem;
line-height: 1.4;
}
.cfl-caption a[b-bzxcrmfhmy] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
text-decoration: none;
}
.cfl-caption a:hover[b-bzxcrmfhmy] {
text-decoration: underline;
}
.cfl-size[b-bzxcrmfhmy] {
flex-shrink: 0;
opacity: 0.8;
}
/* /Components/Shared/ConversationFilesCard.razor.rz.scp.css */
/* The table sits inside the section's card: no second card around it. */
.pfc-table[b-qy2vlzv2nh] .table-container {
background: none;
box-shadow: none;
padding: 0;
}
.pfc-table[b-qy2vlzv2nh] .data-table {
white-space: nowrap;
}
/* The trash can and the way back sit at the row's far end. */
.pfc-actions[b-qy2vlzv2nh] {
text-align: right;
}
/* The name, with a picture's own small copy in front of it — the tile a work order's attachment row shows. */
.pfc-name[b-qy2vlzv2nh] {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.pfc-thumb[b-qy2vlzv2nh] {
flex-shrink: 0;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
background: var(--surface-sunken);
transition: box-shadow 0.2s, transform 0.2s;
}
.pfc-thumb img[b-qy2vlzv2nh] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pfc-thumb:hover[b-qy2vlzv2nh] {
box-shadow: var(--shadow-md);
transform: scale(1.06);
}
.pfc-thumb:focus-visible[b-qy2vlzv2nh] {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.pfc-actions[b-qy2vlzv2nh] {
white-space: nowrap;
}
/* /Components/Shared/DataTable.razor.rz.scp.css */
/* ── Mobile cards ─────────────────────────────────────── */
.dt-cards[b-6adrhcomgl] {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.dt-empty[b-6adrhcomgl] {
text-align: center;
padding: 2rem 1rem;
color: var(--clr-slate-400);
font-size: 0.88rem;
}
/* When no mobile cards are provided, always show the table */
.dt-no-cards[b-6adrhcomgl] {
display: block !important;
}
/* -- Container & Table ---------------------------------------------
The reference's list frame: one soft card holding the rows, no outline,
header reduced to an uppercase micro label with no fill of its own. */
.table-container[b-6adrhcomgl] {
background: var(--surface);
border-radius: var(--radius-2xl);
border: 1px solid transparent;
box-shadow: var(--shadow-md);
/* The frame scrolls, not the page: as an item of the page's flex column with an overflow of its own
it may shrink to the height left below the filters, and the pager stays in view underneath. The
header row sticks to its top (below). */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
display: none;
padding: 0.5rem;
}
.data-table[b-6adrhcomgl] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 560px;
}
/* The header row stays at the top of the frame while the rows scroll under it. It sticks half a rem above
the content edge — over the frame's top padding, where the rows would otherwise show through a strip.
One pixel more than the padding, so rounding never leaves a hairline of rows above it; the frame clips
what reaches past its edge. Its cells carry the fill (below), which at rest reads as no fill at all. */
.data-table thead[b-6adrhcomgl] {
position: sticky;
top: calc(-0.5rem - 1px);
z-index: 2;
container-type: scroll-state;
}
/* Once stuck, a hairline parts it from the row passing underneath. Where scroll-state queries are not
supported the header simply covers the row without one. */
@container scroll-state(stuck: top) {
.data-table thead th[b-6adrhcomgl] {
box-shadow: 0 1px 0 var(--border);
}
}
.data-table th[b-6adrhcomgl] {
text-align: left;
padding: 0.5rem 1rem 0.75rem;
/* The surface, not none: the sticky header covers the rows scrolling under it. */
background: var(--surface);
font-size: var(--text-label-size);
font-weight: 600;
color: var(--text-label);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
white-space: nowrap;
}
/* See-through, the rows blurred behind it, like the top bar's search panel: the header reads as lying
over the list. Only where the blur exists — a see-through header without it would be text on text. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.data-table th[b-6adrhcomgl] {
background: color-mix(in srgb, var(--surface) 72%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
backdrop-filter: blur(14px) saturate(1.2);
}
}
/* td is inside the Row RenderFragment (rendered by parent).
Rows carry no rules: separation comes from the hover tint and spacing. */
.data-table[b-6adrhcomgl] td {
padding: 0.95rem 1rem;
font-size: 0.88rem;
}
.data-table[b-6adrhcomgl] tr:hover td {
background: var(--surface-hover);
}
/* Round the hover tint on the outer cells so a hovered row reads as a
rounded band rather than a full-bleed stripe. */
.data-table[b-6adrhcomgl] tr:hover td:first-child {
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
.data-table[b-6adrhcomgl] tr:hover td:last-child {
border-top-right-radius: var(--radius-lg);
border-bottom-right-radius: var(--radius-lg);
}
/* -- Name link (inside Row RenderFragment) -------------------------- */
.data-table[b-6adrhcomgl] .table-name-link {
color: var(--text);
text-decoration: none;
font-weight: 600;
position: relative;
display: inline-block;
transition: color 0.15s;
padding: 10px;
cursor: pointer;
}
.data-table[b-6adrhcomgl] .table-name-link:hover {
color: var(--clr-blue-600);
}
/* -- Number cell (V-0042, P-0042) ------------------------------------ */
.data-table[b-6adrhcomgl] .table-id {
font-family: 'Courier New', monospace;
font-size: 0.8rem;
color: var(--text-faint);
white-space: nowrap;
}
/* -- Empty state ---------------------------------------------------- */
.table-empty[b-6adrhcomgl] {
text-align: center;
padding: 2rem 1rem !important;
color: var(--clr-slate-400);
font-size: 0.88rem;
}
/* -- Sortable headers ----------------------------------------------- */
/* The cell gives up its padding to the button so the whole header stays clickable. */
.data-table th.sortable-header[b-6adrhcomgl] {
padding: 0;
user-select: none;
white-space: nowrap;
}
/* The clickable area is a real button so sorting is reachable by keyboard; it inherits the
cell's typography, so the column still looks like a plain table header. */
.sort-button[b-6adrhcomgl] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
width: 100%;
padding: 0.65rem 0.85rem;
background: none;
border: none;
font: inherit;
color: inherit;
text-transform: inherit;
letter-spacing: inherit;
text-align: left;
cursor: pointer;
}
.sort-button:hover[b-6adrhcomgl] {
color: var(--clr-blue-600);
}
[b-6adrhcomgl] .sort-indicator {
opacity: 0.35;
flex-shrink: 0;
}
/* The sorted column keeps its arrow at full strength – unsorted ones stay faint but visible,
which is what tells the user a column can be sorted at all. */
[b-6adrhcomgl] .sort-indicator.is-active {
opacity: 1;
color: var(--clr-blue-600);
}
.dt-page-summary[b-6adrhcomgl] {
font-size: 0.85rem;
color: var(--text-faint);
flex-shrink: 0;
white-space: nowrap;
}
/* -- Column filters (docs/COLUMN-FILTERS.md §5) ---------------------- */
/* The header's title or sort button and its filter icon side by side, the icon right after the
sort arrow rather than pushed to the cell's far edge. */
.th-inner[b-6adrhcomgl] {
display: flex;
align-items: center;
}
.data-table th.filterable-header[b-6adrhcomgl] {
padding-top: 0;
padding-bottom: 0;
}
.th-title[b-6adrhcomgl] {
padding: 0.65rem 0;
}
.th-inner .sort-button[b-6adrhcomgl] {
width: auto;
}
.sort-button:has(+ .dt-filter-btn)[b-6adrhcomgl] {
padding-right: 0.2rem;
}
/* Faint while idle, like the unsorted arrow — enough to say the column can be filtered. */
.dt-filter-btn[b-6adrhcomgl] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
margin-left: 0.15rem;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: none;
color: inherit;
opacity: 0.35;
cursor: pointer;
transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.dt-filter-btn:hover[b-6adrhcomgl],
.dt-filter-btn:focus-visible[b-6adrhcomgl],
.dt-filter-btn[aria-expanded="true"][b-6adrhcomgl] {
opacity: 1;
color: var(--clr-blue-600);
background: var(--surface-hover);
}
.dt-filter-btn:focus-visible[b-6adrhcomgl] {
outline: 2px solid var(--primary);
outline-offset: 1px;
}
.dt-filter-btn.is-active[b-6adrhcomgl] {
opacity: 1;
color: var(--primary);
background: var(--primary-soft);
}
/* What is filtered, above the table: one chip per column, removable, reopening its popover. */
.dt-filter-bar[b-6adrhcomgl] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.75rem;
}
.dt-filter-chip[b-6adrhcomgl] {
display: inline-flex;
}
.dt-filter-chip-title[b-6adrhcomgl] {
color: var(--text-muted);
}
.dt-empty-reset[b-6adrhcomgl] {
margin-left: 0.5rem;
}
/* The phone's way in: a list of the filterable columns, each opening its controls. */
.dt-filter-list[b-6adrhcomgl] {
display: flex;
flex-direction: column;
gap: 0.05rem;
margin: -0.35rem;
}
/* The page's own groups above the columns. FilterChoiceBar and TagFilterBar bring no stylesheet — in
the Expander they get it from there — so the few rules they need are repeated here. */
.dt-page-filters[b-6adrhcomgl] {
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 0.35rem 0.65rem 0.85rem;
margin-bottom: 0.35rem;
border-bottom: 1px solid var(--border);
}
.dt-page-filters[b-6adrhcomgl] .filter-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.dt-page-filters[b-6adrhcomgl] .filter-group-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-slate-400);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dt-page-filters[b-6adrhcomgl] .filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.dt-filter-list-item[b-6adrhcomgl] {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.6rem 0.65rem;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--text-body);
font-family: inherit;
font-size: 0.88rem;
text-align: left;
cursor: pointer;
}
.dt-filter-list-item:hover[b-6adrhcomgl] {
background: var(--surface-hover);
}
.dt-filter-list-title[b-6adrhcomgl] {
flex: 1;
min-width: 0;
}
.dt-filter-list-value[b-6adrhcomgl] {
max-width: 55%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--primary);
font-size: 0.8rem;
font-weight: 600;
}
.dt-filter-list-item[b-6adrhcomgl] .icon {
color: var(--text-faint);
flex-shrink: 0;
}
/* Hide cards on desktop, show table */
@media (min-width: 640px) {
.dt-cards[b-6adrhcomgl] {
display: none;
}
.table-container[b-6adrhcomgl] {
display: block;
}
.dt-filter-mobile[b-6adrhcomgl],
.dt-filter-bar--idle[b-6adrhcomgl] {
display: none;
}
}
/* ── Pagination ────────────────────────────────────────
Three zones on one line: range read-out, page buttons, page size. The
outer two are pushed apart so the buttons stay optically centred. */
/* Three columns, the outer two of equal share: the page numbers sit in the middle of the table
whatever the summary and the tools on either side measure. */
.dt-pagination[b-6adrhcomgl] {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding: 1.25rem 0.25rem 0;
}
.dt-page-summary[b-6adrhcomgl] {
grid-column: 1;
justify-self: start;
}
.dt-page-nav[b-6adrhcomgl] {
grid-column: 2;
display: flex;
align-items: center;
gap: 0.4rem;
}
/* Right zone: export and page size — in its column also when a single page leaves only the export
button in the bar. */
.dt-page-tools[b-6adrhcomgl] {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Phone: no room for three columns — one under the other, centred. */
@media (max-width: 639px) {
.dt-pagination[b-6adrhcomgl] {
grid-template-columns: 1fr;
justify-items: center;
}
.dt-page-summary[b-6adrhcomgl],
.dt-page-nav[b-6adrhcomgl],
.dt-page-tools[b-6adrhcomgl] {
grid-column: 1;
justify-self: center;
}
}
/* Each page is its own small floating tile, the active one filled navy. */
.dt-page-btn[b-6adrhcomgl] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.6rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-sm);
color: var(--text-secondary);
font-size: 0.88rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.15s, box-shadow 0.2s, color 0.15s;
}
.dt-page-btn:hover:not(:disabled):not(.active)[b-6adrhcomgl] {
box-shadow: var(--shadow-md);
color: var(--text);
}
.dt-page-btn.active[b-6adrhcomgl] {
background: var(--surface-inverse);
color: var(--text-on-inverse);
box-shadow: var(--shadow-btn);
}
/* The step arrows are quieter than the numbers — they carry no label. */
.dt-page-step[b-6adrhcomgl] {
background: none;
box-shadow: none;
color: var(--text-faint);
min-width: 2.1rem;
}
.dt-page-step:hover:not(:disabled)[b-6adrhcomgl] {
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.dt-page-btn:disabled[b-6adrhcomgl] {
opacity: 0.35;
cursor: not-allowed;
box-shadow: none;
}
.dt-page-ellipsis[b-6adrhcomgl] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 2.5rem;
color: var(--text-faint);
font-size: 0.9rem;
}
/* ── Page size picker ────────────────────────────────── */
.dt-page-size[b-6adrhcomgl] {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.dt-page-size-select[b-6adrhcomgl] {
appearance: none;
-webkit-appearance: none;
padding: 0.6rem 2.1rem 0.6rem 1rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-sm);
color: var(--text-secondary);
font-size: 0.85rem;
font-family: inherit;
cursor: pointer;
transition: box-shadow 0.2s;
}
.dt-page-size-select:hover[b-6adrhcomgl] {
box-shadow: var(--shadow-md);
}
.dt-page-size-select:focus-visible[b-6adrhcomgl] {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Sits over the select, so the native arrow can stay hidden. ::deep, because the arrow is Icon's
element: scoped to this file alone it never matched, and the arrow stood beside the box. */
.dt-page-size[b-6adrhcomgl] .dt-page-size-arrow {
position: absolute;
right: 0.75rem;
color: var(--text-faint);
pointer-events: none;
}
@media (min-width: 1024px) {
.data-table th[b-6adrhcomgl] {
padding: 1rem 1rem;
}
/* Sortable headers keep their padding on the button, not the cell. */
.data-table th.sortable-header[b-6adrhcomgl] {
padding: 0;
}
.data-table th.filterable-header[b-6adrhcomgl] {
padding-top: 0;
padding-bottom: 0;
}
.th-title[b-6adrhcomgl] {
padding: 1rem 0;
}
.sort-button[b-6adrhcomgl] {
padding: 1rem 1rem;
}
.data-table[b-6adrhcomgl] td {
padding: 0.25rem 1rem;
}
}
/* -- A row that unfolds (Detail) --------------------------------------
The chevron sits in a column of the table's own at the row's right end. The open row and the row it unfolds
share one tint, rounded as one piece: the row on top, its detail at the bottom. */
.data-table .dt-detail-col[b-6adrhcomgl],
.data-table .dt-detail-cell[b-6adrhcomgl] {
width: 1%;
padding-left: 0;
padding-right: 0.5rem;
text-align: right;
white-space: nowrap;
}
/* An inline icon button: on hover only the glyph takes the colour, never a fill. */
.dt-detail-toggle[b-6adrhcomgl] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: var(--radius-md);
background: none;
color: var(--text-muted);
cursor: pointer;
}
.dt-detail-toggle:hover[b-6adrhcomgl] {
color: var(--primary);
}
.dt-detail-toggle:focus-visible[b-6adrhcomgl] {
outline: 2px solid var(--clr-blue-500);
outline-offset: 2px;
}
.dt-detail-toggle[b-6adrhcomgl] svg {
transition: transform 0.25s ease;
}
.dt-detail-toggle[b-6adrhcomgl] .is-open {
transform: rotate(180deg);
}
.data-table[b-6adrhcomgl] tr.dt-row-open td,
.data-table[b-6adrhcomgl] tr.dt-row-open:hover td {
background: var(--surface-hover);
}
.data-table[b-6adrhcomgl] tr.dt-row-open td:first-child,
.data-table[b-6adrhcomgl] tr.dt-row-open:hover td:first-child {
border-radius: var(--radius-lg) 0 0 0;
}
.data-table[b-6adrhcomgl] tr.dt-row-open td:last-child,
.data-table[b-6adrhcomgl] tr.dt-row-open:hover td:last-child {
border-radius: 0 var(--radius-lg) 0 0;
}
/* No padding on the cell: the slot has to be able to close to nothing. The room goes on its content. */
.data-table .dt-detail-row td[b-6adrhcomgl],
.data-table .dt-detail-row:hover td:first-child[b-6adrhcomgl] {
padding: 0;
background: var(--surface-hover);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Closed until detail-slot.js opens it — from nothing, to its content's height, which it follows as the content loads. */
.dt-detail-slot[b-6adrhcomgl] {
height: 0;
overflow: hidden;
}
/* Held to the cell's width: a wide chart scrolls inside itself instead of widening the table. Size containment only
— layout or paint containment would make it the containing block of a fixed bubble inside it. */
.dt-detail[b-6adrhcomgl] {
contain: inline-size;
padding: 0.25rem 0.75rem 0.85rem;
}
@media (prefers-reduced-motion: reduce) {
.dt-detail-toggle[b-6adrhcomgl] svg {
transition: none;
}
}
/* /Components/Shared/DeletedBanner.razor.rz.scp.css */
.deleted-banner[b-lhpjv6y3sp] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.1rem;
background: var(--clr-red-50);
border: 1px solid var(--clr-red-200);
border-radius: var(--radius-lg);
margin-bottom: 1.25rem;
color: var(--danger-text);
}
.deleted-banner-content[b-lhpjv6y3sp] {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.83rem;
}
.deleted-banner-content strong[b-lhpjv6y3sp] {
font-size: 0.88rem;
font-weight: 600;
}
.deleted-banner-content span[b-lhpjv6y3sp] {
color: var(--clr-red-600);
}
@media (max-width: 640px) {
.deleted-banner[b-lhpjv6y3sp] {
align-items: flex-start;
flex-wrap: wrap;
}
}
/* /Components/Shared/DeletedMarker.razor.rz.scp.css */
/* The badge on an object in its grace period (docs/SOFT-DELETE.md). Inside a dimmed, read-only
.is-deleted object it stays hoverable: its tooltip carries the "deleted by X on Y" line. */
.status-deleted[b-y2tv8sjgph] {
background: var(--clr-red-100);
color: var(--danger-text);
}
.is-deleted .status-deleted[b-y2tv8sjgph] {
pointer-events: auto;
}
/* /Components/Shared/DialogField.razor.rz.scp.css */
/* The box is .form-control's, so the field lines up with the inputs around it. */
.dialog-field[b-dkas4rswk8] {
width: 100%;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 0.85rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text-body);
font-family: inherit;
font-size: 0.88rem;
line-height: 1.4;
text-align: left;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.dialog-field:hover:not(:disabled)[b-dkas4rswk8] {
border-color: var(--clr-slate-300);
box-shadow: var(--shadow-xs);
}
.dialog-field:focus-visible[b-dkas4rswk8] {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.14);
}
.dialog-field:disabled[b-dkas4rswk8] {
cursor: default;
background: var(--surface-sunken);
}
.dialog-field-text[b-dkas4rswk8] {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dialog-field.is-default .dialog-field-text[b-dkas4rswk8] {
color: var(--clr-slate-500);
}
.dialog-field[b-dkas4rswk8] .dialog-field-icon {
color: var(--clr-slate-400);
flex-shrink: 0;
}
.dialog-field[b-dkas4rswk8] .dialog-field-edit {
color: var(--clr-slate-400);
flex-shrink: 0;
transition: color 0.15s;
}
.dialog-field:hover:not(:disabled)[b-dkas4rswk8] .dialog-field-edit {
color: var(--primary);
}
/* /Components/Shared/DictationRecovery.razor.rz.scp.css */
.dictation-recovery[b-uxqkei9btk] {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0.25rem 0 0.75rem;
}
.dictation-recovery-text[b-uxqkei9btk] {
font-size: 0.85rem;
line-height: 1.5;
resize: vertical;
}
.dictation-recovery-actions[b-uxqkei9btk] {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* /Components/Shared/Disclosure.razor.rz.scp.css */
.disclosure[b-ebx2923njk] {
padding-top: 1rem;
}
.disclosure-divider[b-ebx2923njk] {
border-top: 1px dashed var(--clr-slate-200);
}
.disclosure-toggle[b-ebx2923njk] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0;
border: none;
background: none;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
font: inherit;
font-size: 0.82rem;
font-weight: 500;
color: var(--clr-slate-500);
transition: color 0.12s;
}
.disclosure-toggle:hover[b-ebx2923njk] {
color: var(--clr-slate-700);
}
/* A triangle of its own, so it can turn with the block. */
.disclosure-toggle[b-ebx2923njk]::before {
content: '';
width: 0.45rem;
height: 0.45rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform 0.25s ease;
}
.disclosure.is-open > .disclosure-toggle[b-ebx2923njk]::before {
transform: rotate(45deg);
}
/* The gap under the toggle belongs to the content, so it opens and closes with it — a shut block
stays a single compact line. */
.disclosure-content[b-ebx2923njk] {
padding-top: 1rem;
}
@media (prefers-reduced-motion: reduce) {
.disclosure-toggle[b-ebx2923njk]::before {
transition: none;
}
}
/* /Components/Shared/DropdownSelect.razor.rz.scp.css */
/* ── Container / trigger ──────────────────────────────── */
.dds-container[b-sfx66d7htr] {
position: relative;
display: inline-flex;
user-select: none;
}
.dds-trigger[b-sfx66d7htr] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.55rem;
border: 1.5px solid var(--clr-slate-200);
border-radius: var(--radius-md);
background: var(--surface);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
min-width: 0;
font-family: inherit;
font-size: 0.8rem;
color: var(--clr-slate-700);
line-height: 1.3;
text-align: left;
}
.dds-trigger:hover[b-sfx66d7htr] {
border-color: var(--clr-slate-300);
box-shadow: var(--shadow-xs);
}
.dds-trigger:focus-visible[b-sfx66d7htr] {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.dds-trigger-text[b-sfx66d7htr] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* ── Arrow ───────────────────────────────────────────── */
.dds-arrow[b-sfx66d7htr] {
color: var(--clr-slate-400);
flex-shrink: 0;
transition: transform 0.2s;
}
.dds-arrow--open[b-sfx66d7htr] {
transform: rotate(180deg);
}
/* ── Options ─────────────────────────────────────────── */
/* The list is PopupListbox's; an option here is plain text in the field's own size, and the chosen one
is set in bold. */
.dds-container[b-sfx66d7htr] .popup-option {
font-size: 0.8rem;
color: var(--clr-slate-700);
white-space: nowrap;
}
.dds-container[b-sfx66d7htr] .popup-option--selected {
font-weight: 600;
color: var(--clr-slate-800);
}
/* /Components/Shared/EntityAuditLog.razor.rz.scp.css */
/* The same look as the global /audit-log page (Components/Pages/AuditLog.razor.css) – the two show
the same rows, so they must not drift apart visually. Kept as its own copy rather than shared
globals: both are scoped stylesheets, and neither owns the other's markup. */
/* ── Mobile card ─────────────────────────────────────── */
.audit-card[b-3h7qzkurck] {
background: var(--surface);
border: 1px solid transparent;
box-shadow: var(--shadow-md);
border-radius: var(--radius-xl);
padding: 0.7rem 0.9rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.audit-card-top[b-3h7qzkurck] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
min-width: 0;
}
.audit-card-time[b-3h7qzkurck] {
font-size: 0.72rem;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.audit-card-meta-row[b-3h7qzkurck] {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.audit-card-entity[b-3h7qzkurck] {
font-size: 0.73rem;
padding: 0.1rem 0.45rem;
border-radius: var(--radius-xs);
background: var(--clr-slate-100);
color: var(--text-secondary);
white-space: nowrap;
}
.audit-card-user[b-3h7qzkurck] {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.78rem;
color: var(--text-secondary);
}
.audit-card-user--system[b-3h7qzkurck] {
color: var(--text-muted);
font-style: italic;
}
.audit-card-details[b-3h7qzkurck] {
font-size: 0.82rem;
color: var(--text-secondary);
word-break: break-word;
line-height: 1.4;
padding-top: 0.35rem;
margin-top: 0.05rem;
border-top: 1px solid var(--clr-slate-100);
}
/* ── Table (desktop) ─────────────────────────────────── */
.audit-action-badge[b-3h7qzkurck] {
display: inline-block;
font-size: 0.85rem;
font-weight: 500;
color: var(--primary);
}
.audit-details-cell[b-3h7qzkurck] {
font-size: 0.85rem;
color: var(--text-secondary);
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Where a foreign entry came from – a work order of this project, linked to its page. */
.audit-origin-link[b-3h7qzkurck] {
color: var(--text-secondary);
text-decoration: none;
border-bottom: 1px solid var(--border);
}
.audit-origin-link:hover[b-3h7qzkurck] {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* Says the history is longer than what is shown – the query stops at EntryLimit rows. */
.audit-tab-capped[b-3h7qzkurck] {
margin: 0.75rem 0 0;
font-size: 0.8rem;
color: var(--text-muted);
text-align: center;
}
/* /Components/Shared/EntityFormModal.razor.rz.scp.css */
/* The rule the shell's markup needs and no caller can write.
A `.razor.css` only reaches elements its own component renders, and the shell renders
the scroll region and the footer. A dialog that styles `.modal-body` or `.modal-footer`
in its own stylesheet styles nothing – the scope attribute on the element belongs to
the shell. The rule lives here for that reason.
ModalContainer owns the shared half (the scroll region, the footer row, its alignment
and its hairline); this only fills in what it leaves to the dialog. */
/* Sections that run to the dialog edges. The negative margin has to sit on the scroll
region itself, because that is the element that clips: `.modal-body` scrolls, so its
computed overflow-x is `auto`, and a wrapper bleeding inside it turns the right edge
into a horizontal scrollbar and clips the left one off. The sections keep their own
`1.5rem` of horizontal padding at the call site, so the fields stay where they are and
only the dividers between them reach the edges. */
.modal-body.full-bleed[b-k2nuntpy86] {
display: flex;
flex-direction: column;
margin: 0 -1.5rem;
}
/* /Components/Shared/EntityRow.razor.rz.scp.css */
/* ── Desktop cells ───────────────────────────────────────
DataTable already gives every td its padding and its 0.88rem type, so these rules
only carry the emphasis a cell can have inside that: the name, its sub-line, and the
muted look of a secondary fact. */
.dt-cell-head[b-ecfhu5pged] {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Greys out when the row is deleted inside the grace period. The transition belongs on the name and
not on .is-deleted-title, which the element only gains together with its new colour. */
.dt-cell-name[b-ecfhu5pged] {
font-weight: 500;
color: var(--text);
transition: color 0.3s ease;
}
.dt-cell-sub[b-ecfhu5pged] {
font-size: 0.82rem;
color: var(--text-muted);
}
.dt-cell-meta[b-ecfhu5pged] {
font-size: 0.85rem;
color: var(--text-muted);
}
/* ── Mobile card ─────────────────────────────────────────
The same anatomy the eight hand-written *-card blocks all had: a surface defined by
its shadow rather than an outline (docs/DESIGN-SYSTEM.md §8). The spacing between
cards belongs to DataTable's .dt-cards, so the card carries no margin of its own —
the old blocks each added one on top of that gap. */
.dt-card[b-ecfhu5pged] {
background: var(--surface);
border: 1px solid transparent;
box-shadow: var(--shadow-md);
border-radius: var(--radius-xl);
padding: 0.75rem 1rem;
}
/* Name left, status right: a status reads as a property of the name it sits beside,
not as one more line of the body. */
.dt-card-head[b-ecfhu5pged] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.dt-card-headings[b-ecfhu5pged] {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.dt-card-name[b-ecfhu5pged] {
font-weight: 600;
font-size: 0.92rem;
color: var(--text);
transition: color 0.3s ease;
}
.dt-card-sub[b-ecfhu5pged] {
display: block;
font-size: 0.8rem;
color: var(--text-muted);
}
.dt-card-text[b-ecfhu5pged] {
font-size: 0.85rem;
color: var(--text-secondary);
}
.dt-card-meta[b-ecfhu5pged] {
font-size: 0.78rem;
color: var(--text-muted);
}
/* Content that brings its own layout gets air instead of typography. */
.dt-card-badge[b-ecfhu5pged],
.dt-card-block[b-ecfhu5pged] {
margin-top: 0.25rem;
}
/* On the desktop the column header carries this word; stacked in a card the value
needs it back in front of it. */
.dt-card-label[b-ecfhu5pged] {
margin-right: 0.3rem;
}
/* Only for a group the page brought itself: RowActions gives its own the same air
through its Stacked parameter, and one spelling of that spacing is enough. */
.dt-card-actions[b-ecfhu5pged] {
margin-top: 0.5rem;
}
/* /Components/Shared/Expander.razor.rz.scp.css */
/* Closed, only the toggle row: what follows sits right under it. */
.expander[b-emgt38e8ma] {
margin-bottom: 0.5rem;
}
.expander-toggle[b-emgt38e8ma] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem 0.5rem 0;
background-color: transparent;
border: none;
cursor: pointer;
font-size: 0.9rem;
font-family: inherit;
color: var(--clr-slate-500);
transition: color 0.2s ease;
text-align: left;
}
.expander-toggle:hover[b-emgt38e8ma] {
color: var(--clr-slate-700);
}
.expander-active[b-emgt38e8ma] {
padding: 0.1rem 0.55rem;
border-radius: var(--radius-pill);
background: var(--primary-soft);
color: var(--primary);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
/* The height is animated by the .reveal-slot wrapper in app.css, which interpolates grid tracks and
so lands on the content's real height. The old keyframe animated max-height to a guessed 500px:
a taller filter row was clipped, and a short one spent most of the duration travelling past the
end of itself. */
.expander-content[b-emgt38e8ma] {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding: 0.75rem 0;
}
[b-emgt38e8ma] .filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
[b-emgt38e8ma] .filter-group-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--clr-slate-400);
text-transform: uppercase;
letter-spacing: 0.5px;
}
[b-emgt38e8ma] .filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
[b-emgt38e8ma] .filter-empty {
margin: 0;
font-size: 0.875rem;
color: var(--clr-slate-400);
}
@media (max-width: 768px) {
.expander-content[b-emgt38e8ma] {
flex-direction: column;
gap: 1rem;
}
[b-emgt38e8ma] .filter-buttons {
flex-direction: column;
}
[b-emgt38e8ma] .filter-buttons .btn {
width: 100%;
}
}
/* DataTable's breakpoint for its cards and its "Filter" button. */
@media (max-width: 639.98px) {
.expander--hide-phone[b-emgt38e8ma] {
display: none;
}
}
/* /Components/Shared/FavoriteButton.razor.rz.scp.css */
.favorite-btn[b-pfpyjv0zix] {
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
border-radius: var(--radius-xs);
/* A surrounding dark surface (a picture card) lightens the outline by setting the property. */
color: var(--favorite-idle, var(--clr-slate-400));
transition: color 0.15s, transform 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.favorite-btn:hover[b-pfpyjv0zix] {
color: var(--clr-amber-500);
transform: scale(1.15);
}
.favorite-btn.active[b-pfpyjv0zix] {
color: var(--clr-amber-500);
}
/* Switched on right here. The star overshoots and settles — the same easing the flow canvas catches
a node with, because it is the same kind of answer: something was put somewhere on purpose.
It rides over the hover scale below on purpose: while the animation runs it owns the transform,
and afterwards the rule underneath takes the pointer back. */
.favorite-btn.just-set[b-pfpyjv0zix] {
animation: favorite-pop-b-pfpyjv0zix 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes favorite-pop-b-pfpyjv0zix {
0% { transform: scale(1) rotate(0); }
40% { transform: scale(1.4) rotate(-14deg); }
70% { transform: scale(0.96) rotate(4deg); }
100% { transform: scale(1) rotate(0); }
}
/* The fill says it is a favourite; the bounce is the flourish. */
@media (prefers-reduced-motion: reduce) {
.favorite-btn.just-set[b-pfpyjv0zix] {
animation: none;
}
}
.favorite-btn.active :deep(polygon)[b-pfpyjv0zix],
.favorite-btn.active :deep(path)[b-pfpyjv0zix] {
fill: currentColor;
}
.favorite-btn.active:hover[b-pfpyjv0zix] {
transform: scale(1.05);
}
/* /Components/Shared/FlowCanvas.razor.rz.scp.css */
/* The one flow canvas — see FlowCanvas.razor. This file holds every rule whose subject is an element
FlowCanvas renders: the scrolling frame, the content plane, the edge layer and the node box with all
of its state modifiers. Scoped CSS attaches to the component that *writes* the markup, so a page's
own stylesheet can no longer reach the node box — a page rule like `.flow-node.node-completed`
compiles to `.flow-node.node-completed[b-thatpage]` and stops matching. Rules whose subject sits
*inside* the box (the header, the name, a status pill) stay with the page: that markup comes from its
NodeTemplate and still carries the page's scope. */
/* ── Frame ──────────────────────────────────────────────────────────────
The height is 100 % of whatever the page wraps this in: the wrapper is the page's positioning
context for the zoom control and the only place that knows how tall the diagram may be.
No outline: the dot grid is what marks the working surface, and the nodes floating on it are
defined by their shadow (see docs/DESIGN-SYSTEM.md §1). The surface deliberately reads as the
page itself, so a node's --surface sits above it in both themes. */
.flow-canvas[b-knswkoaw5i] {
position: relative;
width: 100%;
height: 100%;
background: var(--surface-page);
border-radius: var(--radius-lg);
overflow: auto;
cursor: grab;
/* Nothing on the surface is text to copy, and a drag that turns into a selection paints the edge
labels blue. Once here for everything, the SVG labels included; inputs stay selectable. */
-webkit-user-select: none;
user-select: none;
}
.flow-canvas:active[b-knswkoaw5i] {
cursor: grabbing;
}
/* No scrollbars on the working surface. The canvas is panned by dragging and moved by the zoom
control, so the bars only ever drew two grey rails across the diagram. Scrolling itself stays
intact — this hides the bar, it does not clip the overflow. */
.flow-canvas[b-knswkoaw5i] {
scrollbar-width: none;
}
.flow-canvas[b-knswkoaw5i]::-webkit-scrollbar {
display: none;
}
/* The content plane. Fixed size and unscaled: the zoom script scales this element and grows it so the
dot grid keeps covering the view, while node positions stay in these coordinates.
The transparent border is the room a node's shadow needs at the origin corner. Node positions
start at 0 and the canvas clips what leaves it, so the first node's glow was cut off flat against
the left edge. Absolutely positioned children measure from the *padding* box, which a border moves
inwards — a margin or padding here would not — so every node shifts by this much on screen while
its stored position stays untouched. Two consequences: the dot grid still covers the strip
(background-clip is border-box), and screen ↔ content conversions have to subtract it — both
scripts read it back off the element as clientLeft/clientTop rather than hardcoding the number.
The border also carries the overscroll room: native scrolling stops at 0, so the only way to push
the diagram past its origin is real space ahead of it. The canvas opens past that room
(canvas-zoom.js), where it opened before. The size grows by the room, so the drawing area does not
shrink by it. */
.flow-canvas-inner[b-knswkoaw5i] {
position: relative;
width: calc(3000px + var(--canvas-overscroll));
height: calc(2000px + var(--canvas-overscroll));
border-top: calc(48px + var(--canvas-overscroll)) solid transparent;
border-left: calc(48px + var(--canvas-overscroll)) solid transparent;
background-image: radial-gradient(circle, var(--clr-slate-200) 1px, transparent 1px);
background-size: 20px 20px;
}
.flow-canvas-edges[b-knswkoaw5i] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* The layer covers the whole content plane, so it has to be transparent to the pointer — otherwise
nothing behind it could be dragged or panned. pointer-events is inherited, so the two groups
below have to hand it back for the parts that are meant to be hit. */
pointer-events: none;
z-index: 1;
}
/* Took over from the global .wf-edge-group/.wf-edge-label pair in app.css, which is gone now that both
pages render through this component. The cursor sits on the label whether or not the diagram is
interactive, exactly as it did there. */
.flow-edge[b-knswkoaw5i],
.flow-edge-label[b-knswkoaw5i] {
pointer-events: all;
cursor: pointer;
}
/* ── The pill's triangle and its menu ───────────────────────────────────
What an edge can fire on instead, without the sidebar: a Steuerknoten's results, a step's statuses
(docs/CONTROL-RESULTS.md §7). The menu hangs centred under the pill and looks like ContextMenu's. */
.flow-edge-caret:hover polygon[b-knswkoaw5i] {
fill: var(--primary);
}
.flow-edge-menu[b-knswkoaw5i] {
position: absolute;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 160px;
max-height: 280px;
overflow-y: auto;
padding: 0.3rem;
background: var(--surface);
background: var(--surface-menu);
-webkit-backdrop-filter: var(--menu-blur);
backdrop-filter: var(--menu-blur);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
animation: flow-edge-menu-in-b-knswkoaw5i 0.12s ease-out;
}
@keyframes flow-edge-menu-in-b-knswkoaw5i {
from { opacity: 0; transform: translate(-50%, -4px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.flow-edge-menu-group[b-knswkoaw5i] {
padding: 0.4rem 0.65rem 0.15rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--text-muted);
}
.flow-edge-menu-item[b-knswkoaw5i] {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.65rem 0.45rem 0.4rem;
border: none;
background: none;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.83rem;
color: var(--clr-slate-700);
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.flow-edge-menu-item:hover[b-knswkoaw5i],
.flow-edge-menu-item:focus-visible[b-knswkoaw5i] {
background: var(--surface-hover);
color: var(--clr-slate-900);
outline: none;
}
.flow-edge-menu-item.current[b-knswkoaw5i] {
font-weight: 600;
}
.flow-edge-menu-check[b-knswkoaw5i] {
display: inline-flex;
width: 14px;
flex: none;
}
@media (prefers-reduced-motion: reduce) {
.flow-edge-menu[b-knswkoaw5i] {
animation: none;
}
}
/* ── An edge that has just been made ────────────────────────────────────
It draws itself from its start node to its target, and the condition appears once the line has
arrived — the same order in which the connection was made. Only edges FlowCanvas saw appear carry
the class, so opening a diagram does not replay the whole graph.
pathLength normalises every curve to a length of 1, which is what lets the dash run without
measuring anything in JS. The arrow head would otherwise sit at the target from the first frame:
marker-end animates discretely, so a keyframe just before the end keeps it away until the line is
actually there. */
.flow-edge.is-drawing .flow-edge-line[b-knswkoaw5i] {
stroke-dasharray: 1;
animation: flow-edge-draw-b-knswkoaw5i 0.5s ease-out;
}
@keyframes flow-edge-draw-b-knswkoaw5i {
from { stroke-dashoffset: 1; marker-end: none; }
90% { marker-end: none; }
to { stroke-dashoffset: 0; }
}
/* fill-box so the pill grows out of its own middle rather than the canvas' origin. */
.flow-edge-label.is-drawing[b-knswkoaw5i] {
transform-box: fill-box;
transform-origin: center;
animation: flow-edge-label-in-b-knswkoaw5i 0.25s ease 0.45s both;
}
@keyframes flow-edge-label-in-b-knswkoaw5i {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: none; }
}
/* The edge is there either way; only the arriving is dropped. */
@media (prefers-reduced-motion: reduce) {
.flow-edge.is-drawing .flow-edge-line[b-knswkoaw5i],
.flow-edge-label.is-drawing[b-knswkoaw5i] {
animation: none;
}
}
/* ── Frame ──────────────────────────────────────────────────────────────
A group: a soft wash of colour lying under the diagram, with its title above it. It is drawn, not
built — nothing is attached to it, whatever lies inside belongs to it — so it has no outline at
all. An edge would draw a container where there is none, and this house does not draw containers:
depth is a wash and a shadow (docs/DESIGN-SYSTEM.md §1). What marks the frame out is the tint
itself, which deepens on hover, while dragging over it and selecting it, so it stays legible
without ever becoming a box.
The body takes no pointer events, which is what keeps a frame from swallowing the canvas: dragging
inside one still pans, and a node on top is still hit first. The title and the resize dot hand them
back — they are the only two places a frame can be grabbed, so panning never fights dragging.
--flow-group-accent comes in inline; it is the group's own colour, or slate when it has none. */
.flow-group[b-knswkoaw5i] {
position: absolute;
z-index: 0;
pointer-events: none;
border-radius: var(--radius-2xl);
background: color-mix(in srgb, var(--flow-group-accent) 8%, transparent);
transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}
/* The title rides above the wash, so a node placed at the frame's top edge never collides with it.
Where the frame can be moved this is the only grip it has, so it is a filled chip and carries a
grip mark: the wash has no edges to grab and the body passes the pointer through, which left the
move gesture with nothing to advertise it. A frame that cannot be moved keeps the plain caption. */
.flow-group-bar[b-knswkoaw5i] {
position: absolute;
left: 0.4rem;
bottom: 100%;
max-width: 100%;
display: flex;
align-items: center;
gap: 0.2rem;
padding: 0.1rem 0.45rem;
margin-bottom: 0.3rem;
border-radius: var(--radius-pill);
background: transparent;
color: color-mix(in srgb, var(--flow-group-accent) 70%, var(--text));
pointer-events: all;
touch-action: none;
transition: background 0.15s, box-shadow 0.15s;
}
/* The four-arrow move cursor, not grab/grabbing: it names the gesture outright, and it is what the
nodes on this canvas already use for the same thing. */
.flow-group-bar.movable[b-knswkoaw5i] {
padding: 0.15rem 0.6rem 0.15rem 0.35rem;
background: color-mix(in srgb, var(--flow-group-accent) 20%, var(--surface));
box-shadow: var(--shadow-xs);
cursor: move;
}
.flow-group-bar.movable:hover[b-knswkoaw5i] {
background: color-mix(in srgb, var(--flow-group-accent) 32%, var(--surface));
box-shadow: var(--shadow-sm);
}
/* The grip mark. Quieter than the title — it says how, the title says what. */
.flow-group-grip[b-knswkoaw5i] {
display: inline-flex;
opacity: 0.55;
}
.flow-group-title[b-knswkoaw5i] {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* A frame without a title still says what it is, just without claiming to be named. */
.flow-group-title.untitled[b-knswkoaw5i] {
font-weight: 500;
opacity: 0.6;
}
/* The only other grip: a dot, not a corner bracket — a bracket would put a line back on a shape that
deliberately has none. It stays faintly there rather than appearing on hover, because the frame
itself cannot be hovered: its body takes no pointer events, so a rule on `.flow-group:hover` would
never fire. Hence the two rules below, which hang the frame's feedback off the title instead. */
.flow-group-resize[b-knswkoaw5i] {
position: absolute;
right: 0.4rem;
bottom: 0.4rem;
width: 12px;
height: 12px;
border-radius: var(--radius-circle);
background: color-mix(in srgb, var(--flow-group-accent) 60%, transparent);
opacity: 0.4;
pointer-events: all;
cursor: nwse-resize;
touch-action: none;
transition: opacity 0.15s, transform 0.15s;
}
.flow-group-resize:hover[b-knswkoaw5i] {
opacity: 1;
transform: scale(1.2);
}
.flow-group:has(.flow-group-bar:hover)[b-knswkoaw5i] {
background: color-mix(in srgb, var(--flow-group-accent) 13%, transparent);
}
.flow-group:has(.flow-group-bar:hover) .flow-group-resize[b-knswkoaw5i] {
opacity: 0.8;
}
/* Duplicate and delete, above the top right corner — the bar a Steuerknoten carries over its shape
(ControlNodeContent), level with the title chip on the other side. Shown while the frame is pointed at
or selected. Its body takes no pointer, so hovering it cannot be a :hover: the drag script marks the
frame under the pointer (data-hovered), and the chip and the bar themselves answer for their own. */
.flow-group-actions[b-knswkoaw5i] {
position: absolute;
right: 0.4rem;
bottom: calc(100% + 0.3rem);
z-index: 3;
display: none;
gap: 0.15rem;
padding: 0.15rem;
border-radius: var(--radius-sm);
background: var(--surface);
box-shadow: var(--shadow-md);
pointer-events: all;
}
/* An invisible strip over the gap, part of the bar: the pointer travelling up from the frame to it
leaves the frame's rectangle, and without this the bar would be gone before it arrived. */
.flow-group-actions[b-knswkoaw5i]::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 0.4rem;
}
.flow-group[data-hovered] .flow-group-actions[b-knswkoaw5i],
.flow-group:has(.flow-group-bar:hover) .flow-group-actions[b-knswkoaw5i],
.flow-group:has(.flow-group-actions:hover) .flow-group-actions[b-knswkoaw5i],
.flow-group.selected .flow-group-actions[b-knswkoaw5i] {
display: flex;
}
/* Selected frames deepen rather than outline: a soft halo in the frame's own colour, which reads at
any size and does not compete with the node selection's ring. */
.flow-group.selected[b-knswkoaw5i] {
background: color-mix(in srgb, var(--flow-group-accent) 16%, transparent);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--flow-group-accent) 16%, transparent);
}
/* Stated against .movable so it raises the chip's own fill rather than replacing it with a wash —
the plain caption of an unmovable frame has no chip to raise. */
.flow-group.selected .flow-group-bar.movable[b-knswkoaw5i] {
background: color-mix(in srgb, var(--flow-group-accent) 32%, var(--surface));
}
.flow-group.selected .flow-group-resize[b-knswkoaw5i] {
opacity: 1;
}
/* A node is being dragged over this frame: letting go here joins it, and the frame says so before the
pointer is released. It opens — a short scale with a little overshoot, as if catching the node —
deepens its wash and lifts on a shadow in its own colour. Purely visual: `transform` moves no
layout box, so the rectangle membership is worked out from stays exactly where it was.
Last of the frame's states, and deliberately so: it outranks the selection, which sets the same two
properties at the same specificity. A selected frame being dragged into has to answer as a drop
target, not as a selection.
The animation ends on the same value the rule declares, so it holds afterwards without `forwards` —
and switching the class off transitions back down rather than snapping. */
@keyframes flow-group-catch-b-knswkoaw5i {
0% { transform: scale(1); }
55% { transform: scale(1.035); }
100% { transform: scale(1.02); }
}
.flow-group.drop-target[b-knswkoaw5i] {
background: color-mix(in srgb, var(--flow-group-accent) 20%, transparent);
transform: scale(1.02);
animation: flow-group-catch-b-knswkoaw5i 0.3s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow:
0 0 0 12px color-mix(in srgb, var(--flow-group-accent) 13%, transparent),
0 20px 45px -16px color-mix(in srgb, var(--flow-group-accent) 65%, transparent);
}
/* The lift alone carries the message; the bounce is what goes. */
@media (prefers-reduced-motion: reduce) {
.flow-group.drop-target[b-knswkoaw5i] {
animation: none;
}
}
/* ── Node box ───────────────────────────────────────────────────────────
A card, so it follows the card rules: shadow instead of an outline. Its state colour is the
glow around it — --flow-accent names the hue, --flow-glow turns it into two blurred layers that
sit under the neutral shadow. Custom properties resolve where they are used, so a modifier below
only has to restate --flow-accent and the glow follows. Depth and meaning stay on separate
channels — how raised the box is versus what it is and how far the run got — where the old 2 px
border had to carry both and let the selection and the status fight over one property.
Width and padding come in inline, from NodeWidth and NodePadding: the geometry has to agree with
the width, and a page may pad tighter than the shared default. Both NodeHeight functions count
this box term by term and add no border — see defect 3.4 in docs/COMPONENTS.md. */
.flow-node[b-knswkoaw5i] {
--flow-accent: transparent;
--flow-glow:
0 0 12px 1px color-mix(in srgb, var(--flow-accent) 28%, transparent),
0 8px 24px -8px color-mix(in srgb, var(--flow-accent) 55%, transparent);
position: absolute;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--flow-glow), var(--shadow-sm);
cursor: pointer;
z-index: 2;
transition: box-shadow 0.15s, opacity 0.15s, transform 0.15s;
touch-action: none;
}
/* A node that has just been placed. It grows out of the spot it was dropped on, with the same little
overshoot the form editor lands a field with — the two canvases answer a drop the same way.
Scale only, and deliberately no slide: the node did not come from anywhere, it was put down at a
point the pointer chose, and a translate would claim a direction it never travelled. The canvas
plane carries its own zoom transform, which this one simply multiplies into. */
.flow-node.is-landing[b-knswkoaw5i] {
animation: flow-node-land-b-knswkoaw5i 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes flow-node-land-b-knswkoaw5i {
from { opacity: 0; transform: scale(0.94); }
60% { opacity: 1; }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.flow-node.is-landing[b-knswkoaw5i] {
animation: none;
}
}
/* Draggable. Every node of an editor is; a project's nodes only while it is in edit mode. */
.flow-node.editable[b-knswkoaw5i] {
cursor: move;
}
/* Nothing behind this node to open yet. */
.flow-node.not-clickable[b-knswkoaw5i] {
cursor: default;
}
/* ── Kind ───────────────────────────────────────────────────────────────
What the node *is*. Listed before the status modifiers on purpose: both groups set the same
custom property at the same specificity, so the later rule wins and a form node that has been
submitted shows the run's green rather than its own violet — which is what the old
`.form-node.node-completed` exception had to say by hand. */
/* Nothing points at this node (template editor only — the project diagram says so with a badge). */
.flow-node.start-node[b-knswkoaw5i] {
--flow-accent: var(--clr-emerald-500);
}
/* Form node accent: violet, like a document. */
.flow-node.form-node[b-knswkoaw5i] {
--flow-accent: var(--clr-violet-500);
}
/* The building block "Kommunikation": teal, the colour of talking outside (docs/COMMUNICATION.md §9). */
.flow-node.communication-node[b-knswkoaw5i] {
--flow-accent: var(--clr-teal-500);
}
/* ── Status ─────────────────────────────────────────────────────────────
Work-order status of the node's step (project diagram only). */
.flow-node.node-open[b-knswkoaw5i] {
--flow-accent: var(--clr-amber-400);
}
.flow-node.node-inprogress[b-knswkoaw5i] {
--flow-accent: var(--clr-progress-500);
}
.flow-node.node-completed[b-knswkoaw5i] {
--flow-accent: var(--clr-emerald-500);
}
.flow-node.node-cancelled[b-knswkoaw5i] {
--flow-accent: var(--clr-slate-400);
opacity: 0.7;
}
/* Not reached yet: unlit and barely off the grid, so a plan reads differently from a run. Fading
the whole box works in both themes — the node moves towards whatever is behind it. Clearing the
accent takes the glow with it, whatever kind of node it is. */
.flow-node.node-pending[b-knswkoaw5i] {
--flow-accent: transparent;
box-shadow: var(--shadow-xs);
opacity: 0.6;
}
/* ── Depth ──────────────────────────────────────────────────────────────
Last in the file so hovering lifts even a pending node, and one step stronger at every level
(docs/DESIGN-SYSTEM.md §5) — the glow brightens with it. The selection is a ring rather than a
border: it no longer competes with the status, which is the glow now. */
.flow-node:hover[b-knswkoaw5i] {
--flow-glow:
0 0 18px 2px color-mix(in srgb, var(--flow-accent) 40%, transparent),
0 10px 30px -8px color-mix(in srgb, var(--flow-accent) 70%, transparent);
box-shadow: var(--flow-glow), var(--shadow-md);
}
.flow-node.selected[b-knswkoaw5i] {
box-shadow: var(--flow-glow), var(--shadow-md), 0 0 0 2px var(--primary);
}
/* --flow-glow is not restated here, so the brighter value declared on :hover carries over. */
.flow-node.selected:hover[b-knswkoaw5i] {
box-shadow: var(--flow-glow), var(--shadow-lg), 0 0 0 2px var(--primary);
}
/* ── Steuerknoten: a shape instead of a card ────────────────────────────
docs/CONTROL-NODES.md §3. The box stays the square the geometry measures, but draws nothing of its own:
the outline is .flow-shape inside it — a diamond as a rotated square, so it keeps the card's shadow (a
clip-path would cut that off), or a circle. The states still speak through --flow-accent and --flow-glow,
which the shape inherits; everything the box itself would have drawn is switched off here. Last in the
file and one class more specific than the depth rules above, so a hovered or selected shape stays a
shape. */
.flow-node.is-shape[b-knswkoaw5i],
.flow-node.is-shape:hover[b-knswkoaw5i],
.flow-node.is-shape.selected[b-knswkoaw5i],
.flow-node.is-shape.selected:hover[b-knswkoaw5i],
.flow-node.is-shape.node-pending[b-knswkoaw5i] {
background: transparent;
box-shadow: none;
border-radius: 0;
}
.flow-shape[b-knswkoaw5i] {
position: absolute;
inset: 0;
background: var(--surface);
box-shadow: var(--flow-glow), var(--shadow-sm);
transition: box-shadow 0.15s;
pointer-events: none;
}
/* A square of side 72/√2 ≈ 51 px, centred and turned: its corners land on the midpoints of the box's sides,
which is exactly where FlowNodeGeometry ends the edges. */
.shape-diamond .flow-shape[b-knswkoaw5i] {
inset: 10.5px;
transform: rotate(45deg);
border-radius: var(--radius-sm);
}
.shape-circle .flow-shape[b-knswkoaw5i] {
border-radius: var(--radius-circle);
}
.flow-node.is-shape:hover .flow-shape[b-knswkoaw5i] {
box-shadow: var(--flow-glow), var(--shadow-md);
}
.flow-node.is-shape.selected .flow-shape[b-knswkoaw5i] {
box-shadow: var(--flow-glow), var(--shadow-md), 0 0 0 2px var(--primary);
}
/* ── Where a connection being drawn would land ──────────────────────────
The node under the pointer while an edge is drawn (workflow-editor.js, markConnectTarget): the pointer is captured
then, so :hover never fires and the class stands in for it. Lifted by its shadow, one step above a hover and with
the hover's brighter glow, and grown a little, so it is plain what letting go connects to; no ring, which is the
selection's. After the shape rules, so a shape lifts its outline and a card its box.
The growth is a `transform`, which moves no layout box: the neighbours stay put, and the node's own place — which
the edges are drawn to and the drop is asked of — does not change either. Only here, never on a plain hover: a
drag measures the grab point on the node's screen rectangle (workflow-editor.js), and a grown one would make the
node jump as it is picked up. */
.flow-node.connect-target[b-knswkoaw5i] {
--flow-glow:
0 0 18px 2px color-mix(in srgb, var(--flow-accent) 40%, transparent),
0 10px 30px -8px color-mix(in srgb, var(--flow-accent) 70%, transparent);
transform: scale(1.03);
}
/* The growth snaps instead of easing, both ways; the shadow still eases. */
@media (prefers-reduced-motion: reduce) {
.flow-node[b-knswkoaw5i] {
transition: box-shadow 0.15s, opacity 0.15s;
}
}
.flow-node.connect-target:not(.is-shape)[b-knswkoaw5i] {
box-shadow: var(--flow-glow), var(--shadow-lg);
}
.flow-node.is-shape.connect-target .flow-shape[b-knswkoaw5i] {
box-shadow: var(--flow-glow), var(--shadow-lg);
}
.flow-node.is-shape.node-pending .flow-shape[b-knswkoaw5i] {
box-shadow: var(--shadow-xs);
}
/* A Status ändern on the project ends the run, like BPMN's end event: a thick rim. */
.flow-node.is-end .flow-shape[b-knswkoaw5i] {
border: 4px solid var(--clr-slate-400);
}
/* A Steuerknoten that can no longer act — a Bedingung ausgeschlossen, a Warten whose step finished in
time: muted, like a branch not taken. */
.flow-node.node-skipped[b-knswkoaw5i] {
--flow-accent: transparent;
opacity: 0.45;
}
/* /Components/Shared/FocusButton.razor.rz.scp.css */
/* The button itself is the bar's .tb-btn (app.css); only the focus name is this component's. Cut
short, so a long name does not push the rest of the actions out of the bar. */
.focus-pill-name[b-g0i1o6b0df] {
max-width: 14ch;
overflow: hidden;
text-overflow: ellipsis;
}
/* Phone: the pill stays a disc — there is no room for the name, and the tint already says a focus is
active. */
@media (max-width: 767px) {
.focus-pill-name[b-g0i1o6b0df] {
display: none;
}
}
/* ── The menu under the button ───────────────────────────────────────────
The panel's frame is TopBarPopover's and the rows are the bar's .tb-menu-item (app.css), as in the
account menu; what is this menu's own is the section names, the tick and the row's tools. */
.focus-menu-list[b-g0i1o6b0df] {
display: flex;
flex-direction: column;
padding: 0 0.35rem;
}
.focus-menu-list:first-child[b-g0i1o6b0df] {
padding-top: 0.35rem;
}
.focus-menu-list:last-child[b-g0i1o6b0df] {
padding-bottom: 0.35rem;
}
/* A quiet overline over each set: "Meine", then each of the user's groups. */
.focus-menu-section[b-g0i1o6b0df] {
padding: 0.3rem 1.1rem 0.15rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-faint);
}
/* The active focus is ticked at the row's end, in the row's own active colour. Icon's element, so
reached with ::deep. */
.focus-menu-list[b-g0i1o6b0df] .focus-menu-check {
margin-left: auto;
color: var(--primary);
}
/* A row with tools: they sit over its right end and show on hover or keyboard focus, so the row reads
as a plain entry until the pointer is on it. The row as a whole lights up, the tools included. */
.focus-menu-row[b-g0i1o6b0df] {
position: relative;
}
.focus-menu-row:hover .tb-menu-item[b-g0i1o6b0df],
.focus-menu-row:focus-within .tb-menu-item[b-g0i1o6b0df] {
background: var(--surface-hover);
}
.focus-menu-actions[b-g0i1o6b0df] {
position: absolute;
top: 50%;
right: 0.3rem;
translate: 0 -50%;
display: none;
gap: 0.1rem;
padding-left: 0.5rem;
border-radius: var(--radius-md);
background: var(--surface-hover);
}
.focus-menu-row:hover .focus-menu-actions[b-g0i1o6b0df],
.focus-menu-row:focus-within .focus-menu-actions[b-g0i1o6b0df],
.focus-menu-actions.is-shown[b-g0i1o6b0df] {
display: flex;
}
.focus-menu-act[b-g0i1o6b0df] {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--text-muted);
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.focus-menu-act:hover[b-g0i1o6b0df],
.focus-menu-act:focus-visible[b-g0i1o6b0df] {
background: var(--btn-fill);
color: var(--text);
outline: none;
}
.focus-menu-act--danger:hover[b-g0i1o6b0df],
.focus-menu-act--danger:focus-visible[b-g0i1o6b0df] {
background: var(--clr-red-50);
color: var(--clr-red-600);
}
/* A focus in its grace period: struck through, not pickable — only its restore button answers. */
.focus-menu-dead[b-g0i1o6b0df] {
cursor: default;
color: var(--text-faint);
}
.focus-menu-row.is-deleted .focus-menu-actions[b-g0i1o6b0df] {
background: none;
}
.focus-menu-row.is-deleted:hover .tb-menu-item[b-g0i1o6b0df] {
background: none;
}
/* /Components/Shared/FormFieldCanvas.razor.rz.scp.css */
/* ── Editor layout: canvas and sidebar ────────────────── */
/* The page body is a flex column (.main-content). An explicit min-height overrides a flex
item's automatic minimum size, so without flex-shrink: 0 the editor would be squeezed down
to exactly that min-height while its field list spills out below the box – the page then
stops growing and anything after the editor (the SaveBar) is stranded mid-screen. */
.fe-editor[b-5rhizoh1iz] {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 1rem;
min-height: calc(100dvh - 240px - var(--top-bar-height));
flex-shrink: 0;
align-items: start;
}
/* Folded, the sidebar is a rail and the form takes the room. */
.fe-editor.sidebar-collapsed[b-5rhizoh1iz] {
grid-template-columns: minmax(0, 1fr) 56px;
}
/* ── Sidebar (right) ──────────────────────────────────── */
/* The CanvasSidebar, docked: it travels with the page while the form scrolls past. Its height is fixed rather
than capped, so switching between palette and properties does not make it jump; the cap matters, because a
sticky box taller than the viewport cannot stick at all – it just scrolls away. */
.fe-sidebar[b-5rhizoh1iz] {
position: sticky;
top: 1rem;
height: calc(100dvh - 240px - var(--top-bar-height));
min-height: 420px;
}
.fe-editor.sidebar-collapsed .fe-sidebar[b-5rhizoh1iz] {
height: auto;
min-height: 0;
}
/* The properties of the selected field, as one column. */
.fe-props[b-5rhizoh1iz] {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
/* ── Canvas (center) ──────────────────────────────────── */
/* Positioned for the page ends drawn over it (.fe-page-guide). */
.fe-canvas[b-5rhizoh1iz] {
position: relative;
background: var(--clr-slate-50);
border: 2px dashed var(--clr-slate-200);
border-radius: var(--radius-lg);
min-height: 400px;
padding: 1rem;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
/* ── The design around the fields (docs/FORMS.md §14) ────
The template's design as the filled-in sheet wears it, with the fields in its {{FORM_CONTENT}}: a
sheet of paper on the canvas, white in dark mode too. Only the fields take a pointer — a press on
the letterhead falls through to the canvas and lets go of the selection, as on its background. The
cards keep the editor's text colour: the design's ink is meant for white paper, not for a card. */
.fe-design[b-5rhizoh1iz] {
pointer-events: none;
}
/* The design's frame (DesignFrame) without the clip a public page puts on it: here only the template's authors
look, and the editor's own handles reach past the sheet's edge. */
.fe-design.design-frame[b-5rhizoh1iz] {
overflow: visible;
}
.fe-design-content[b-5rhizoh1iz] {
pointer-events: auto;
}
.fe-design .fe-design-content[b-5rhizoh1iz] {
color: var(--text-body);
}
/* ── Page ends (docs/FORMS.md §14) ───────────────────────
Where the form's PDF turns the page, over the cards: across a card when the page end cuts that
field, in the gap when it falls between two; a page break the author set needs none.
js/form-page-guide.js places the lines and the sheets' feet; the lines take no pointer, so the drag
and the clicks go through. Every label stands at the canvas's left edge — beside a design's sheet,
or over a card's handle — where it covers no field's content. No z-index anywhere: the layer comes
after the cards and the feet after the layer, so the order alone stacks them, and the paper menus
stack over the page as every other menu on the canvas does. */
.fe-page-guide[b-5rhizoh1iz] {
position: absolute;
inset: 0;
pointer-events: none;
}
.fe-page-guide[b-5rhizoh1iz] .fe-page-end {
position: absolute;
left: 0;
right: 0;
border-top: 1.5px dashed var(--accent);
}
.fe-page-guide[b-5rhizoh1iz] .fe-page-end.is-fitted {
border-top-style: dotted;
}
.fe-page-guide[b-5rhizoh1iz] .fe-page-end > span {
position: absolute;
left: 0.5rem;
top: 0;
transform: translateY(-50%);
padding: 0.1rem 0.6rem;
border-radius: var(--radius-pill);
background: var(--surface);
box-shadow: var(--shadow-sm);
color: var(--text-secondary);
font-size: var(--text-label-size);
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
white-space: nowrap;
}
.fe-page-guide[b-5rhizoh1iz] .fe-page-end.is-fitted > span {
color: var(--text-muted);
}
/* A sheet's foot under its last field: the room left on its last page and the form's paper as one pill,
so the two share one line. The script sets its top; without a field the first sits at the bottom. */
.fe-page-foot[b-5rhizoh1iz] {
position: absolute;
left: 0.5rem;
bottom: 0.4rem;
display: inline-flex;
align-items: center;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
font-size: 0.7rem;
line-height: 1.6;
white-space: nowrap;
}
.fe-page-foot-room[b-5rhizoh1iz] {
padding: 0.1rem 0.6rem;
color: var(--text-muted);
font-weight: 600;
}
.fe-page-foot-room:empty[b-5rhizoh1iz] {
display: none;
}
.fe-page-format-btn[b-5rhizoh1iz] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.1rem 0.6rem;
border: none;
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-secondary);
font: inherit;
font-weight: 700;
cursor: pointer;
}
/* Beside the room left, the button is the pill's second half, behind a hairline. */
.fe-page-foot-room:not(:empty) + .cm-trigger .fe-page-format-btn[b-5rhizoh1iz] {
border-left: 1px solid var(--border);
border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}
.fe-page-format-btn:hover:not(:disabled)[b-5rhizoh1iz] {
background: var(--btn-fill-hover);
color: var(--text);
}
.fe-page-format-btn:disabled[b-5rhizoh1iz] {
cursor: default;
}
/* The canvas's own PDF and a printout of the editor are the editor, not the form. */
body.pdf-exporting .fe-page-guide[b-5rhizoh1iz],
body.pdf-exporting .fe-page-foot[b-5rhizoh1iz] {
display: none;
}
@media print {
.fe-page-guide[b-5rhizoh1iz],
.fe-page-foot[b-5rhizoh1iz] {
display: none;
}
}
/* The copy that is measured: a sheet as wide as the PDF export lays one out (210 mm), clipped to
nothing, so it takes no room and adds no scrolling; contain keeps its layout from the page's. */
.fe-paper[b-5rhizoh1iz] {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
contain: strict;
}
.fe-paper-sheet[b-5rhizoh1iz] {
width: 210mm;
}
.fe-canvas.drag-over[b-5rhizoh1iz] {
border-color: var(--clr-blue-400);
background: rgba(42, 86, 214, 0.04);
box-shadow: inset 0 0 0 2px rgba(42, 86, 214, 0.08);
}
.fe-canvas.drag-over .fe-empty-canvas[b-5rhizoh1iz] {
color: var(--clr-blue-400);
}
.fe-canvas.fe-drop-success[b-5rhizoh1iz] {
animation: fe-drop-flash-b-5rhizoh1iz 0.4s ease-out;
}
@keyframes fe-drop-flash-b-5rhizoh1iz {
0% { border-color: var(--clr-green-500); background: rgba(34, 197, 94, 0.08); }
100% { border-color: var(--clr-slate-200); background: var(--clr-slate-50); }
}
/* ── Field landed animation ───────────────────────────── */
.fe-field-item.fe-just-landed[b-5rhizoh1iz] {
animation: fe-field-land-b-5rhizoh1iz 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fe-field-land-b-5rhizoh1iz {
0% { opacity: 0; transform: translateY(-8px) scale(0.97); }
60% { opacity: 1; transform: translateY(1px) scale(1.005); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fe-empty-canvas[b-5rhizoh1iz] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 4rem 1rem;
color: var(--clr-slate-400);
text-align: center;
transition: color 0.2s;
}
.fe-empty-canvas p[b-5rhizoh1iz] {
margin: 0;
font-size: 0.92rem;
}
/* ── Fields list – 12-column grid for width preview ───── */
.fe-fields-list[b-5rhizoh1iz] {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.5rem;
position: relative;
}
/* ── Field item ───────────────────────────────────────── */
.fe-field-item[b-5rhizoh1iz] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 0.75rem;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.15s;
position: relative;
min-width: 0;
}
.fe-field-item:hover[b-5rhizoh1iz] {
border-color: var(--clr-slate-300);
box-shadow: var(--shadow-sm);
}
.fe-field-item.selected[b-5rhizoh1iz] {
border-color: var(--clr-blue-500);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.15);
}
.fe-field-item.fe-dragging[b-5rhizoh1iz] {
opacity: 0.25;
transform: scale(0.97);
box-shadow: none;
pointer-events: none;
}
/* ── Layout field items – distinct dashed border ──────── */
.fe-field-item.fe-layout-item[b-5rhizoh1iz] {
background: var(--clr-slate-50);
border-style: dashed;
border-color: var(--clr-slate-300);
}
.fe-field-item.fe-layout-item:hover[b-5rhizoh1iz] {
border-color: var(--clr-slate-400);
}
.fe-field-item.fe-layout-item.selected[b-5rhizoh1iz] {
border-color: var(--clr-blue-500);
border-style: solid;
}
/* ── Drag handle ──────────────────────────────────────── */
.fe-drag-handle[b-5rhizoh1iz] {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-top: 2px;
color: var(--clr-slate-300);
cursor: grab;
border-radius: var(--radius-xs);
transition: color 0.15s, background 0.15s;
touch-action: none;
}
.fe-drag-handle:hover[b-5rhizoh1iz] {
color: var(--clr-slate-700);
background: var(--surface-hover);
}
.fe-drag-handle:active[b-5rhizoh1iz] {
cursor: grabbing;
color: var(--clr-blue-600);
background: var(--clr-blue-50);
}
/* ── Field content ────────────────────────────────────── */
.fe-field-content[b-5rhizoh1iz] {
flex: 1;
min-width: 0;
}
.fe-field-label-row[b-5rhizoh1iz] {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.35rem;
flex-wrap: wrap;
}
.fe-field-type-badge[b-5rhizoh1iz] {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
padding: 0.1rem 0.4rem;
border-radius: var(--radius-xs);
background: var(--clr-slate-100);
color: var(--clr-slate-500);
white-space: nowrap;
}
/* Truncates instead of pushing the badges out of the card – a quarter-width column
cannot hold a long label and the type badge side by side. */
.fe-field-label[b-5rhizoh1iz] {
font-weight: 600;
font-size: 0.88em;
color: var(--clr-slate-800);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fe-required[b-5rhizoh1iz] {
color: var(--clr-red-500);
font-weight: 700;
font-size: 1rem;
}
/* ── Width badge ──────────────────────────────────────── */
.fe-width-badge[b-5rhizoh1iz] {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.65rem;
font-weight: 600;
padding: 0.1rem 0.35rem;
border-radius: var(--radius-xs);
background: var(--clr-blue-50);
color: var(--clr-blue-600);
border: 1px solid var(--clr-blue-200);
white-space: nowrap;
}
/* ── Field preview ────────────────────────────────────── */
.fe-field-preview[b-5rhizoh1iz] {
margin-top: 0.25rem;
}
.fe-field-preview :deep(input)[b-5rhizoh1iz],
.fe-field-preview :deep(textarea)[b-5rhizoh1iz],
.fe-field-preview :deep(select)[b-5rhizoh1iz] {
max-width: 100%;
pointer-events: none;
opacity: 0.7;
font-size: 0.82rem;
}
.fe-field-help[b-5rhizoh1iz] {
font-size: 0.76rem;
color: var(--clr-slate-400);
margin-top: 0.3rem;
font-style: italic;
}
/* ── Field actions (right side) ───────────────────────── */
/* Always visible (no hover required), slightly dimmed until the field is hovered. */
.fe-field-actions[b-5rhizoh1iz] {
flex-shrink: 0;
display: flex;
/* A container's rail mixes plain buttons with a menu trigger (its own wrapper element) –
centring keeps the two the same height. */
align-items: center;
gap: 0.15rem;
opacity: 0.7;
transition: opacity 0.15s;
}
.fe-field-item:hover .fe-field-actions[b-5rhizoh1iz] {
opacity: 1;
}
/* Inside a field card the rail floats at the content's top right: the label row sits beside
it, and the preview below takes the card's full width instead of a column the rail's width
narrower all the way down. The content is a flex item, so it contains the float. */
.fe-field-content > .fe-field-actions[b-5rhizoh1iz] {
float: right;
margin-left: 0.5rem;
}
/* Square icon buttons rather than .btn .btn-sm: the button padding of a text button
is dead weight here, and four of them would claim ~190px of a card that may only
be 250px wide. */
.fe-act[b-5rhizoh1iz] {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.fe-act:hover:not(:disabled)[b-5rhizoh1iz] {
background: var(--surface-sunken);
color: var(--text);
}
.fe-act:disabled[b-5rhizoh1iz] {
opacity: 0.3;
cursor: default;
}
.fe-delete-btn:hover:not(:disabled)[b-5rhizoh1iz] {
color: var(--clr-red-600);
background: var(--clr-red-100);
}
/* ── Properties (in the sidebar) ──────────────────────────
The sidebar sets the inspector's density for every field, label and control (CanvasSidebar.razor.css);
what is left here are the pieces only a form field has. */
/* Inside a Disclosure the flex gap of the properties does not reach – this restores it. */
.fe-props-stack[b-5rhizoh1iz] {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
/* Short, related controls sit side by side – auto-fit so a row with only one
visible child (the colour picker drops out for layout fields) still fills. */
.fe-props-row[b-5rhizoh1iz] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr));
gap: 0.5rem;
}
.fe-props-hint[b-5rhizoh1iz] {
margin: 0.25rem 0 0;
font-size: 0.72rem;
line-height: 1.45;
color: var(--text-muted);
}
/* A hint that is reporting a failure — the plugin test that did not come back. */
.fe-props-hint-error[b-5rhizoh1iz] {
color: var(--clr-red-600);
}
/* Boolean properties read as a switch row: name on the left, Toggle on the right. */
.fe-props-switch[b-5rhizoh1iz] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
padding: 0.35rem 0.5rem 0.35rem 0.65rem;
border-radius: var(--radius-md);
background: var(--surface-sunken);
font-size: 0.82rem;
font-weight: 500;
color: var(--text-body);
}
/* Text format: alignment and emphasis as two sunken strips of icon buttons, the active one raised. */
.fe-format-bar[b-5rhizoh1iz] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.fe-format-group[b-5rhizoh1iz] {
display: inline-flex;
gap: 0.15rem;
padding: 0.2rem;
border-radius: var(--radius-md);
background: var(--surface-sunken);
}
.fe-format-btn[b-5rhizoh1iz] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 28px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fe-format-btn:hover[b-5rhizoh1iz] {
color: var(--text);
}
.fe-format-btn.active[b-5rhizoh1iz] {
background: var(--surface);
color: var(--primary);
box-shadow: var(--shadow-xs);
}
/* ── Layout field previews ────────────────────────────── */
.fe-preview-heading[b-5rhizoh1iz] {
margin: 0;
font-weight: 700;
color: var(--clr-slate-800);
line-height: 1.3;
}
.fe-preview-heading[data-level="h2"][b-5rhizoh1iz] {
font-size: 1.3em;
}
.fe-preview-heading[data-level="h3"][b-5rhizoh1iz] {
font-size: 1.1em;
}
.fe-preview-heading[data-level="h4"][b-5rhizoh1iz] {
font-size: 0.95em;
}
.fe-preview-paragraph[b-5rhizoh1iz] {
margin: 0;
font-size: 0.85em;
color: var(--clr-slate-500);
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
}
.fe-preview-separator[b-5rhizoh1iz] {
/* Its own formatting context, so the line stops at the floated action rail instead of
running underneath it. */
display: flow-root;
border: none;
border-top: 2px solid var(--clr-slate-200);
margin: 0.25rem 0;
}
.fe-preview-pagebreak[b-5rhizoh1iz] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.6rem 0.8rem;
border-top: 2px dashed var(--clr-blue-400);
border-bottom: 2px dashed var(--clr-blue-400);
background: repeating-linear-gradient(
45deg,
var(--clr-blue-50),
var(--clr-blue-50) 6px,
transparent 6px,
transparent 12px
);
color: var(--clr-blue-700);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
margin: 0.25rem 0;
}
/* ── Columns layout preview ──────────────────────────── */
.fe-preview-columns[b-5rhizoh1iz] {
display: grid;
gap: 0.5rem;
margin: 0.25rem 0;
}
.fe-preview-columns[data-cols="2"][b-5rhizoh1iz] {
grid-template-columns: 1fr 1fr;
}
.fe-preview-columns[data-cols="3"][b-5rhizoh1iz] {
grid-template-columns: 1fr 1fr 1fr;
}
.fe-preview-columns[data-cols="4"][b-5rhizoh1iz] {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.fe-preview-col[b-5rhizoh1iz] {
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 0.5rem;
border: 2px dashed var(--clr-violet-200);
border-radius: var(--radius-sm);
background: var(--clr-violet-50);
color: var(--clr-violet-400);
font-size: 0.75rem;
font-weight: 500;
min-height: 48px;
}
/* ── Columns / group container (editor) ──────────────── */
.fe-columns-wrapper[b-5rhizoh1iz],
.fe-group-wrapper[b-5rhizoh1iz] {
flex-direction: column;
}
.fe-columns-wrapper > .fe-drag-handle[b-5rhizoh1iz],
.fe-group-wrapper > .fe-drag-handle[b-5rhizoh1iz] {
position: absolute;
top: 0.5rem;
left: 0.5rem;
}
.fe-columns-wrapper > .fe-field-actions[b-5rhizoh1iz],
.fe-group-wrapper > .fe-field-actions[b-5rhizoh1iz] {
position: absolute;
top: 0.5rem;
right: 0.5rem;
opacity: 0.7;
transition: opacity 0.15s;
}
.fe-columns-wrapper:hover > .fe-field-actions[b-5rhizoh1iz],
.fe-group-wrapper:hover > .fe-field-actions[b-5rhizoh1iz] {
opacity: 1;
}
.fe-columns-header[b-5rhizoh1iz] {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.5rem;
padding-left: 2rem;
}
.fe-columns-grid[b-5rhizoh1iz] {
display: grid;
gap: 0.5rem;
}
.fe-columns-grid[data-cols="2"][b-5rhizoh1iz] {
grid-template-columns: 1fr 1fr;
}
.fe-columns-grid[data-cols="3"][b-5rhizoh1iz] {
grid-template-columns: 1fr 1fr 1fr;
}
.fe-columns-grid[data-cols="4"][b-5rhizoh1iz] {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* The group's single zone lays its children out in the same 12-column grid the form uses, so a
50 % field looks like half a row here too. */
.fe-group-grid[b-5rhizoh1iz] {
display: block;
}
.fe-column-zone.fe-group-zone[b-5rhizoh1iz] {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: start;
gap: 0.5rem;
}
.fe-column-zone.fe-group-zone > .fe-column-empty[b-5rhizoh1iz] {
grid-column: 1 / -1;
}
.fe-preview-group[b-5rhizoh1iz] {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.5rem;
border: 1px dashed var(--clr-violet-200);
border-radius: var(--radius-sm);
background: var(--clr-violet-50);
color: var(--clr-violet-400);
font-size: 0.75rem;
font-weight: 500;
}
.fe-column-zone[b-5rhizoh1iz] {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-height: 60px;
padding: 0.5rem;
border: 2px dashed var(--clr-slate-200);
border-radius: var(--radius-md);
background: var(--clr-slate-50);
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.fe-column-zone.fe-zone-active[b-5rhizoh1iz] {
border-color: var(--clr-blue-400);
background: rgba(42, 86, 214, 0.06);
box-shadow: inset 0 0 0 1px rgba(42, 86, 214, 0.15);
}
.fe-column-zone.fe-zone-active .fe-column-empty[b-5rhizoh1iz] {
display: none;
}
.fe-column-empty[b-5rhizoh1iz] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 1rem 0.5rem;
color: var(--clr-slate-400);
font-size: 0.75rem;
font-weight: 500;
}
/* ── Column child field items ────────────────────────── */
.fe-column-child[b-5rhizoh1iz] {
font-size: 0.85rem;
padding: 0.5rem;
border-radius: var(--radius-sm);
}
.fe-column-child .fe-drag-handle[b-5rhizoh1iz] {
width: 20px;
height: 20px;
}
.fe-column-child .fe-field-type-badge[b-5rhizoh1iz] {
font-size: 0.62rem;
}
.fe-column-child .fe-field-label[b-5rhizoh1iz] {
font-size: 0.8rem;
}
.fe-column-child .fe-field-preview[b-5rhizoh1iz] {
margin-top: 0.15rem;
}
.fe-column-child .fe-field-preview :deep(input)[b-5rhizoh1iz],
.fe-column-child .fe-field-preview :deep(textarea)[b-5rhizoh1iz],
.fe-column-child .fe-field-preview :deep(select)[b-5rhizoh1iz] {
font-size: 0.75rem;
padding: 0.25rem 0.4rem;
}
/* ── Input field preview helpers ──────────────────────── */
.fe-preview-checkbox-wrapper[b-5rhizoh1iz] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.fe-preview-checkbox[b-5rhizoh1iz] {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: var(--clr-slate-600);
}
.fe-checkbox-content[b-5rhizoh1iz] {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.fe-checkbox-label[b-5rhizoh1iz] {
font-weight: 500;
}
.fe-checkbox-description[b-5rhizoh1iz] {
font-size: 0.75rem;
color: var(--clr-slate-500);
}
.fe-preview-rating[b-5rhizoh1iz] {
display: flex;
gap: 0.15rem;
color: var(--clr-amber-400);
}
.fe-preview-signature[b-5rhizoh1iz] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border: 2px dashed var(--clr-slate-200);
border-radius: var(--radius-md);
color: var(--clr-slate-400);
font-size: 0.82rem;
}
.fe-preview-multiselect[b-5rhizoh1iz] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
/* Sits inside flex rows (.fs-segmented, the radio group) whose other items are taller –
without align-self it stretches to the row height and the text rides along the top edge. */
.fe-preview-more[b-5rhizoh1iz] {
font-size: 0.76rem;
color: var(--clr-slate-400);
margin-left: 1.25rem;
align-self: center;
}
/* ── Linked block ─────────────────────────────────────── */
/* One card for the whole block, tinted so it reads as "belongs elsewhere" at a glance. Nothing
inside it reacts to the pointer — the block is edited on its own page. */
.fe-field-item.fe-block-instance[b-5rhizoh1iz] {
background: var(--primary-soft);
border-color: var(--clr-blue-200);
border-style: dashed;
cursor: default;
}
.fe-field-item.fe-block-instance:hover[b-5rhizoh1iz] {
border-color: var(--clr-blue-300);
}
/* A drag over the card: nothing can land in it, and it says so before the pointer lets go. */
.fe-field-item.fe-block-instance.fe-drop-refused[b-5rhizoh1iz] {
border-color: var(--danger);
background: var(--clr-red-50);
}
.fe-block-instance-header[b-5rhizoh1iz] {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.5rem;
}
.fe-block-instance-name[b-5rhizoh1iz] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--primary);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fe-block-instance-lock[b-5rhizoh1iz],
.fe-block-instance-gone[b-5rhizoh1iz] {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.1rem 0.4rem;
border-radius: var(--radius-xs);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
background: var(--surface);
color: var(--text-muted);
}
.fe-block-instance-gone[b-5rhizoh1iz] {
background: var(--clr-amber-100);
color: var(--clr-amber-700);
}
.fe-block-instance-body[b-5rhizoh1iz] {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.4rem;
}
.fe-locked-field[b-5rhizoh1iz] {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.5rem 0.6rem;
min-width: 0;
/* Reading matter, not a control: no pointer target, no text selection to fight with the drag. */
pointer-events: none;
user-select: none;
}
.fe-locked-container[b-5rhizoh1iz] {
background: transparent;
border-style: dashed;
}
/* The header's indent makes room for a drag handle. There is none in here. */
.fe-locked-field .fe-columns-header[b-5rhizoh1iz] {
padding-left: 0;
margin-bottom: 0.35rem;
}
.fe-locked-field .fe-column-zone[b-5rhizoh1iz] {
min-height: 0;
}
/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 960px) {
.fe-editor[b-5rhizoh1iz],
.fe-editor.sidebar-collapsed[b-5rhizoh1iz] {
grid-template-columns: minmax(0, 1fr);
}
/* One column: the sidebar comes first, above the form — the palette is where building starts, and a
field's properties should not sit below a long form. As tall as it needs, up to half the screen. */
.fe-sidebar[b-5rhizoh1iz] {
order: -1;
position: static;
height: auto;
min-height: 0;
}
.fe-sidebar[b-5rhizoh1iz] .canvas-sidebar {
max-height: 55dvh;
}
.fe-sidebar[b-5rhizoh1iz] .cs-scroll {
flex: 0 1 auto;
}
.fe-sidebar[b-5rhizoh1iz] .palette-grid {
grid-template-columns: repeat(auto-fill, minmax(min(90px, 100%), 1fr));
}
.fe-fields-list[b-5rhizoh1iz] {
grid-template-columns: 1fr;
}
.fe-field-item[b-5rhizoh1iz] {
grid-column: span 1 !important;
}
}
/* ── Image areas (docs/FORM-IMAGE-AREAS.md) ───────────────
The picture and its boxes are drawn by the global .fs-area rules (app.css), so the editor shows the
very sizes the sheet prints; what is here is the editing on top: numbered boxes that move under the
pointer, a corner to resize them, and the area lit up as a target while something is dragged onto it. */
.fe-area-wrapper[b-5rhizoh1iz] {
flex-direction: column;
}
.fe-area-wrapper > .fe-drag-handle[b-5rhizoh1iz] {
position: absolute;
top: 0.5rem;
left: 0.5rem;
}
.fe-area-wrapper > .fe-field-actions[b-5rhizoh1iz] {
position: absolute;
top: 0.5rem;
right: 0.5rem;
opacity: 0.7;
transition: opacity 0.15s;
}
.fe-area-wrapper:hover > .fe-field-actions[b-5rhizoh1iz] {
opacity: 1;
}
.fe-area-wrapper > .fe-field-content[b-5rhizoh1iz] {
width: 100%;
}
/* Room on the right for the action rail, which sits over the header's end. */
.fe-area-header[b-5rhizoh1iz] {
flex-wrap: wrap;
padding-right: 9rem;
}
/* How the area prints, as a quiet fact beside its name — the place the width badge has on a field. */
.fe-area-format[b-5rhizoh1iz] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.1rem 0.45rem;
border-radius: var(--radius-xs);
background: var(--surface-sunken);
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 500;
white-space: nowrap;
}
/* The diagrams' zoom control (CanvasZoomControl) in small: a white pill with round buttons. */
.fe-area-zoom[b-5rhizoh1iz] {
display: inline-flex;
align-items: center;
gap: 0.1rem;
margin-left: auto;
padding: 0.15rem 0.25rem;
border-radius: var(--radius-pill);
background: var(--surface);
box-shadow: var(--shadow-xs);
}
.fe-area-zoom .fe-act[b-5rhizoh1iz] {
width: 22px;
height: 22px;
border-radius: var(--radius-circle);
}
.fe-area-zoom-value[b-5rhizoh1iz] {
min-width: 2.8rem;
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
text-align: center;
color: var(--text-muted);
}
/* Zoomed in, the picture is wider than the card and scrolls sideways inside it. The padding keeps the
numbers over the boxes of the first row inside the scroll region, which clips whatever leaves it. */
.fe-area-stage[b-5rhizoh1iz] {
overflow-x: auto;
padding: 1.4rem 0.75rem 1.25rem;
}
/* The sheet lies on the card like paper: soft corners and a shadow, no edge. */
.fe-area[b-5rhizoh1iz] {
max-width: none;
user-select: none;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
transition: box-shadow 0.2s;
}
.fe-area > .fs-area-image[b-5rhizoh1iz] {
border-radius: inherit;
}
/* Something is dragged over the sheet: lit the way a column takes a field. */
.fe-area.fe-area-target[b-5rhizoh1iz] {
box-shadow: 0 0 0 2px var(--clr-blue-400), 0 0 0 6px rgba(42, 86, 214, 0.12);
}
.fe-area-empty[b-5rhizoh1iz] {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: 2px dashed var(--clr-slate-200);
border-radius: inherit;
background: var(--clr-slate-50);
color: var(--clr-slate-400);
font-size: 0.85rem;
font-weight: 500;
cursor: default;
}
/* A box on the picture: a wash of the primary colour, no edge — the frames on the diagrams are drawn the
same way. It deepens under the pointer; selected it gains the edge and soft ring of a selected field
card. The sheet stays white in dark mode, so the tints are mixed against white, not --primary-soft.
Under the wash the drawing is blurred, so a line crossing the box does not run through its name.
Grabbed anywhere, resized by its corner; no touch scrolling while it is held — the finger moves the
field, not the page. */
.fe-area-item[b-5rhizoh1iz] {
border-radius: min(var(--radius-xs), 0.3em);
background: color-mix(in srgb, var(--primary) 10%, transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
cursor: move;
touch-action: none;
transition: background 0.15s, box-shadow 0.15s;
}
.fe-area-item:hover[b-5rhizoh1iz] {
background: color-mix(in srgb, var(--primary) 16%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}
.fe-area-item.selected[b-5rhizoh1iz] {
z-index: 2;
background: color-mix(in srgb, var(--primary) 14%, transparent);
box-shadow: 0 0 0 1px var(--primary), 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.fe-area-item.fe-area-dragging[b-5rhizoh1iz] {
z-index: 3;
background: color-mix(in srgb, var(--primary) 18%, transparent);
box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
}
/* The preview inside is never the pointer's target: a press goes to the box, which it moves. */
.fe-area-item .fs-area-input[b-5rhizoh1iz],
.fe-area-item .fs-area-sign-box[b-5rhizoh1iz],
.fe-area-item .fs-area-text[b-5rhizoh1iz] {
pointer-events: none;
}
/* Inside the wash the field shows its name, not an empty input: the box is the field, a second frame
in it would only be noise. */
.fe-area-item .form-control[b-5rhizoh1iz],
.fe-area-item .fs-area-sign[b-5rhizoh1iz] {
border-color: transparent;
background: transparent;
box-shadow: none;
}
.fe-area-item .form-control[b-5rhizoh1iz]::placeholder,
.fe-area-item select.form-control[b-5rhizoh1iz],
.fe-area-item .fs-area-sign[b-5rhizoh1iz] {
color: color-mix(in srgb, var(--primary) 80%, #0f1b3d);
opacity: 1;
}
/* A disabled checkbox is the browser's grey; drawn here in the names' colour instead, and see-through,
so the box printed on the sheet under it stays visible. */
.fe-area-item .fs-area-check[b-5rhizoh1iz] {
appearance: none;
-webkit-appearance: none;
flex: none;
border: 1.5px solid color-mix(in srgb, var(--primary) 80%, #0f1b3d);
border-radius: 0.15em;
background: transparent;
}
/* The tab order, over the box's corner rather than on it: on the box it covered the start of what the
box shows. Quiet at rest, primary for the selected box — colour only for state. */
.fe-area-num[b-5rhizoh1iz] {
position: absolute;
bottom: calc(100% + 3px);
left: 0;
min-width: 1.05rem;
height: 1.05rem;
padding: 0 0.3rem;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--primary) 16%, var(--clr-always-white));
color: var(--primary);
box-shadow: var(--shadow-xs);
font: 700 0.64rem/1.05rem var(--font-sans, inherit);
font-variant-numeric: tabular-nums;
text-align: center;
pointer-events: none;
flex: none !important;
}
.fe-area-item.selected .fe-area-num[b-5rhizoh1iz] {
background: var(--primary);
color: var(--clr-always-white);
}
/* The name of a field that shows none of its own (a checkbox), under it while it is pointed at or
selected — a tooltip, so the tooltip's inverse surface. */
.fe-area-tag[b-5rhizoh1iz] {
position: absolute;
left: 0;
top: calc(100% + 0.3rem);
display: none;
max-width: 16rem;
padding: 0.15rem 0.45rem;
border-radius: var(--radius-sm);
background: var(--surface-inverse);
color: var(--text-on-inverse);
box-shadow: var(--shadow-sm);
font: 500 0.7rem/1.4 var(--font-sans, inherit);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
flex: none !important;
}
.fe-area-item:hover .fe-area-tag[b-5rhizoh1iz],
.fe-area-item.selected .fe-area-tag[b-5rhizoh1iz] {
display: block;
}
/* The corner grip: a dot, as on the diagrams' frames — a square handle is a drawing program's, not
this house's. */
.fe-area-resize[b-5rhizoh1iz] {
position: absolute;
right: -5px;
bottom: -5px;
width: 10px;
height: 10px;
border-radius: var(--radius-circle);
background: var(--primary);
box-shadow: 0 0 0 2px var(--clr-always-white), var(--shadow-xs);
cursor: nwse-resize;
opacity: 0;
transition: opacity 0.15s, transform 0.15s;
flex: none !important;
}
.fe-area-resize:hover[b-5rhizoh1iz] {
transform: scale(1.2);
}
.fe-area-item:hover .fe-area-resize[b-5rhizoh1iz],
.fe-area-item.selected .fe-area-resize[b-5rhizoh1iz] {
opacity: 1;
}
@media (hover: none) {
.fe-area-resize[b-5rhizoh1iz] {
opacity: 1;
width: 14px;
height: 14px;
right: -7px;
bottom: -7px;
}
}
/* The sidebar: the picture's thumbnail beside its button, and the four numbers of a field's box. */
.fe-area-picture[b-5rhizoh1iz] {
display: flex;
align-items: center;
gap: 0.6rem;
}
.fe-area-thumb[b-5rhizoh1iz] {
width: 3.2rem;
height: 4.2rem;
object-fit: contain;
border-radius: var(--radius-xs);
background: #fff;
box-shadow: var(--shadow-sm);
}
.fe-area-coords[b-5rhizoh1iz] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4rem 0.5rem;
}
.fe-area-coord[b-5rhizoh1iz] {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0;
}
.fe-area-coord > span[b-5rhizoh1iz] {
font-size: 0.7rem;
color: var(--text-muted);
}
/* /Components/Shared/FormFillSheet.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
FormFillSheet – the form as it is filled in, on both fill-in pages
══════════════════════════════════════════════════════════
Scoped, because this component now renders every element below itself. What stays global in
app.css is what the template editor preview (FormFieldCanvas) draws as well: the segmented control
and the radio group of a choice field. The page chrome around the sheet — the scaffold, the public
page's header card and footer — is styled by the page that renders it. */
/* ── Sheets and tabs ───────────────────────────────────── */
.fs-pages-container[b-qxziqnipks] {
display: block;
}
.fs-page-wrapper[b-qxziqnipks] {
display: block;
}
/* In tabbed mode (several tabs) only the sheets of the open tab are shown on screen */
.fs-page-wrapper.fs-multi[b-qxziqnipks] {
display: none;
}
.fs-page-wrapper.fs-multi.active[b-qxziqnipks] {
display: block;
}
/* Between sheets stacked on screen. Only an active sheet after an active one: the hidden sheets of
the other tabs sit in between, and a plain sibling rule would start every tab but the first lower. */
.fs-page-wrapper.active + .fs-page-wrapper.active[b-qxziqnipks] {
margin-top: 1.5rem;
}
.fs-page-inner[b-qxziqnipks] {
display: block;
}
/* The card around one sheet: its QR strip, the tabs and the fields. The public page frames it like
its own header card (PublicFormSubmission.razor.css). */
.fs-form[b-qxziqnipks] {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem;
}
/* Inside a design there is no card: the design frames the sheet, on screen as on paper. Its lines are
the design's too — the --form-* variables below come from its markup (docs/FORMS.md §11.5). */
.fs-form.fs-designed[b-qxziqnipks] {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
.fs-tabs[b-qxziqnipks] {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
border-bottom: 2px solid var(--form-line-color, var(--clr-slate-200));
margin: 0 0 1rem;
}
.fs-tab[b-qxziqnipks] {
padding: 0.55rem 1rem;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
font-size: 0.88rem;
font-weight: 500;
color: var(--clr-slate-500);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
border-radius: 6px 6px 0 0;
}
.fs-tab:hover[b-qxziqnipks] {
color: var(--clr-slate-700);
background: var(--surface-hover);
}
.fs-tab.active[b-qxziqnipks] {
color: var(--form-accent, var(--clr-blue-600));
border-bottom-color: var(--form-accent, var(--clr-blue-500));
font-weight: 600;
}
/* ── QR strip (a sheet without a design) ───────────────── */
/* White on the white card, set apart by its shadow (docs/DESIGN-SYSTEM.md §1); on paper, where a shadow does not
print, the hairline comes back (below). */
.fs-qr-strip[b-qxziqnipks] {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
background: var(--surface);
border: 1px solid transparent;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
/* The size has to match QrStripPixels in FormFillSheet.razor. */
.fs-qr-code[b-qxziqnipks] {
flex-shrink: 0;
width: 80px;
height: 80px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.fs-qr-code[b-qxziqnipks] svg {
display: block;
width: 80px;
height: 80px;
flex-shrink: 0;
}
.fs-qr-info[b-qxziqnipks] {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.fs-qr-id[b-qxziqnipks] {
font-family: 'Courier New', monospace;
font-weight: 700;
font-size: 1rem;
color: var(--clr-slate-800);
}
/* The form's name: on paper, and on the public page, it is the only title the sheet has. */
.fs-qr-label[b-qxziqnipks] {
font-size: 0.95rem;
font-weight: 600;
color: var(--clr-slate-800);
}
.fs-qr-date[b-qxziqnipks] {
font-size: 0.78rem;
color: var(--clr-slate-400);
}
.fs-qr-page[b-qxziqnipks] {
font-size: 0.78rem;
color: var(--clr-slate-500);
font-weight: 500;
}
/* ── The fields ────────────────────────────────────────── */
/* Field widths are a 12-column grid; every field carries its own grid-column span. A design sets the
distance between rows with --form-gap (docs/FORMS.md §11.5); the columns keep theirs. */
.fs-fields[b-qxziqnipks] {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--form-gap, 1.25rem) 1.25rem;
}
.fs-field-wrapper[b-qxziqnipks] {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.fs-label[b-qxziqnipks] {
font-weight: 500;
font-size: 0.88em;
color: var(--clr-slate-700);
}
.fs-required[b-qxziqnipks] {
color: var(--clr-red-500);
margin-left: 0.15rem;
}
.fs-description[b-qxziqnipks] {
font-size: 0.82rem;
color: var(--clr-slate-500);
margin: 0;
}
.fs-help[b-qxziqnipks] {
font-size: 0.78rem;
color: var(--clr-slate-400);
margin: 0;
}
.fs-error[b-qxziqnipks] {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
color: var(--clr-red-600);
margin: 0.15rem 0 0;
}
/* A choice whose plugin could not be reached: the field still works on its stored list, so this
warns rather than alarms — red would say "you did something wrong", and nobody did. */
.fs-options-stale[b-qxziqnipks] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
color: var(--clr-amber-700);
}
.fs-options-stale-reason[b-qxziqnipks] {
opacity: 0.75;
}
.fs-layout-field[b-qxziqnipks] {
min-width: 0;
}
.fs-layout-field h2[b-qxziqnipks],
.fs-layout-field h3[b-qxziqnipks],
.fs-layout-field h4[b-qxziqnipks] {
margin-bottom: 0;
}
.fs-layout-field h2[b-qxziqnipks] { font-size: 1.4em; }
.fs-layout-field h3[b-qxziqnipks] { font-size: 1.15em; }
.fs-layout-field h4[b-qxziqnipks] { font-size: 1em; }
.fs-layout-field hr[b-qxziqnipks] {
border: none;
border-top: 1px solid var(--form-line-color, var(--clr-slate-200));
margin: 0.25rem 0;
}
.fs-paragraph[b-qxziqnipks] {
color: var(--clr-slate-600);
font-size: 0.92em;
margin: 0;
white-space: pre-wrap;
}
.fs-columns[b-qxziqnipks] {
display: grid;
/* Split gaps: the columns keep their airy distance, while the optional caption stays close to the
row it names – the same tight rhythm the group's caption has. Without a caption there is only
one row, so the row gap never shows. */
column-gap: 1.25rem;
row-gap: 0.55rem;
}
.fs-columns[data-cols="2"][b-qxziqnipks] { grid-template-columns: 1fr 1fr; }
.fs-columns[data-cols="3"][b-qxziqnipks] { grid-template-columns: 1fr 1fr 1fr; }
.fs-columns[data-cols="4"][b-qxziqnipks] { grid-template-columns: 1fr 1fr 1fr 1fr; }
/* The caption spans the whole block so the columns underneath keep their own grid. */
.fs-columns-caption[b-qxziqnipks] {
grid-column: 1 / -1;
}
.fs-column[b-qxziqnipks] {
display: flex;
flex-direction: column;
gap: var(--form-gap, 1rem);
}
/* A group says "these belong together" and nothing else: a barely-there tinted panel and a tighter
rhythm inside than the form's own. Proximity does most of the work – anything louder would compete
with the headings that actually structure the form. */
.fs-group[b-qxziqnipks] {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0.9rem 1rem;
border-radius: var(--form-radius, var(--radius-md));
/* The inset-fill token, not a raw slate: the group sits on the form's own surface and has to
stay a shade darker than it in dark mode too, where the slate scale flips. */
background: var(--surface-sunken);
min-width: 0;
}
.fs-group[data-style="outline"][b-qxziqnipks] {
background: transparent;
border: 1px solid var(--form-line-color, var(--border));
}
.fs-group[data-style="plain"][b-qxziqnipks] {
background: transparent;
padding: 0.15rem 0;
}
.fs-group-caption[b-qxziqnipks],
.fs-columns-caption[b-qxziqnipks] {
font-size: var(--text-label-size);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-label);
}
/* The group's own 12-column grid: a 50 % field inside a group is half the group, not half a form. */
.fs-group-fields[b-qxziqnipks] {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: start;
gap: var(--form-gap, 0.9rem) 0.9rem;
}
.fs-rating[b-qxziqnipks] {
display: flex;
gap: 0.15rem;
}
.fs-star[b-qxziqnipks] {
background: none;
border: none;
cursor: pointer;
color: var(--clr-slate-300);
padding: 0.1rem;
transition: color 0.15s;
display: flex;
align-items: center;
}
.fs-star.filled[b-qxziqnipks] {
color: var(--clr-amber-400);
}
.fs-star:not(:disabled):hover[b-qxziqnipks] {
color: var(--clr-amber-500);
}
.fs-star:disabled[b-qxziqnipks] {
cursor: default;
}
.fs-multiselect[b-qxziqnipks] {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.fs-checkbox-option[b-qxziqnipks] {
display: inline-flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.88rem;
cursor: pointer;
}
.fs-checkbox-option input[type="checkbox"][b-qxziqnipks] {
accent-color: var(--clr-slate-800);
width: 1rem;
height: 1rem;
margin-top: 0.1rem;
flex-shrink: 0;
}
.fs-checkbox-content[b-qxziqnipks] {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.fs-checkbox-description[b-qxziqnipks] {
font-size: 0.8rem;
color: var(--clr-slate-500);
font-weight: normal;
}
.fs-placeholder[b-qxziqnipks] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
border: 1px dashed var(--form-line-color, var(--clr-slate-300));
border-radius: var(--form-radius, var(--radius-md));
color: var(--clr-slate-400);
font-size: 0.85rem;
}
/* What went wrong on an image area, listed under the picture rather than under each field: a line of
text between the boxes would push the drawing out of shape (docs/FORM-IMAGE-AREAS.md §6). */
.fs-area-problems[b-qxziqnipks] {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin: 0.6rem 0 0;
padding: 0;
list-style: none;
}
@media (max-width: 639px) {
.fs-columns[data-cols="2"][b-qxziqnipks],
.fs-columns[data-cols="3"][b-qxziqnipks],
.fs-columns[data-cols="4"][b-qxziqnipks] {
grid-template-columns: 1fr;
/* Stacked columns are rows now, so they need the full gap back – except under the caption,
which keeps its tight spacing through its own margin. */
row-gap: var(--form-gap, 1.25rem);
}
.fs-columns-caption[b-qxziqnipks] {
margin-bottom: calc(0.55rem - var(--form-gap, 1.25rem));
}
.fs-fields[b-qxziqnipks],
.fs-group-fields[b-qxziqnipks] {
display: flex;
flex-direction: column;
gap: var(--form-gap, 1rem);
}
}
/* ── Print and PDF ─────────────────────────────────────────
Every sheet prints, the open tab or not, each starting a page of its own; the tabs and the card
go. The PDF export does the same: pdf-export.js puts body.pdf-exporting on while it renders each
.fs-page-wrapper — a class set from script, which is why those rules repeat the print ones
instead of sharing a media query with them. .pdf-layout gives a sheet inside it the same rules
without the body class: the template editor's copy that it measures for page ends
(docs/FORMS.md §14). */
@media print {
@page {
margin: 1cm;
}
.fs-tabs[b-qxziqnipks] {
display: none !important;
}
.fs-qr-strip[b-qxziqnipks] {
border: 1px solid #ccc !important;
box-shadow: none !important;
break-inside: avoid;
}
/* Reset any spacing that bloats the printable area */
.fs-pages-container[b-qxziqnipks],
.fs-page-wrapper[b-qxziqnipks],
.fs-page-inner[b-qxziqnipks] {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
}
.fs-form[b-qxziqnipks] {
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
page-break-inside: auto;
}
.fs-page-wrapper[b-qxziqnipks] {
display: block !important;
}
.fs-page-wrapper.fs-page-break[b-qxziqnipks] {
break-after: page;
page-break-after: always;
}
.fs-page-wrapper:last-child[b-qxziqnipks] {
break-after: auto !important;
page-break-after: auto !important;
}
.fs-field-wrapper[b-qxziqnipks] {
page-break-inside: avoid;
}
/* A group's tint is a screen device – on paper a hairline says the same thing without
swallowing a page's worth of toner, and the group should not be torn across sheets. */
.fs-group[b-qxziqnipks] {
background: transparent !important;
break-inside: avoid;
}
.fs-group:not([data-style="plain"])[b-qxziqnipks] {
border: 1px solid var(--form-line-color, #d4d4d4) !important;
}
}
body.pdf-exporting .fs-tabs[b-qxziqnipks],
.pdf-layout .fs-tabs[b-qxziqnipks] {
display: none !important;
}
body.pdf-exporting .fs-qr-strip[b-qxziqnipks],
.pdf-layout .fs-qr-strip[b-qxziqnipks] {
border: 1px solid #ccc !important;
box-shadow: none !important;
break-inside: avoid;
}
body.pdf-exporting .fs-pages-container[b-qxziqnipks],
body.pdf-exporting .fs-page-wrapper[b-qxziqnipks],
body.pdf-exporting .fs-page-inner[b-qxziqnipks],
.pdf-layout .fs-pages-container[b-qxziqnipks],
.pdf-layout .fs-page-wrapper[b-qxziqnipks],
.pdf-layout .fs-page-inner[b-qxziqnipks] {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.pdf-exporting .fs-form[b-qxziqnipks],
.pdf-layout .fs-form[b-qxziqnipks] {
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.pdf-exporting .fs-page-wrapper[b-qxziqnipks],
.pdf-layout .fs-page-wrapper[b-qxziqnipks] {
display: block !important;
}
body.pdf-exporting .fs-page-wrapper.fs-page-break[b-qxziqnipks],
.pdf-layout .fs-page-wrapper.fs-page-break[b-qxziqnipks] {
break-after: page;
page-break-after: always;
}
body.pdf-exporting .fs-page-wrapper:last-child[b-qxziqnipks],
.pdf-layout .fs-page-wrapper:last-child[b-qxziqnipks] {
break-after: auto !important;
page-break-after: auto !important;
}
/* /Components/Shared/FormSubmissionTable.razor.rz.scp.css */
/* One column per form field, so the table is wider than most: the rows must not wrap and the
container scrolls sideways. Everything else — frame, sorting, paging — comes from DataTable. */
.fst-table[b-zin83ol8zj] .data-table {
white-space: nowrap;
}
/* The row's action ("Verwenden", "Dokument öffnen") is what the page is for, so it stays pinned to
the right edge while the field columns scroll underneath — at the end of a wide row it would be
out of sight on any screen narrower than the form. Its header cell is pinned with it, or the
headings of the passing columns would show above the button. */
.fst-table[b-zin83ol8zj] .data-table .col-action,
.fst-table[b-zin83ol8zj] .data-table th:last-child {
position: sticky;
/* Sticky holds to the inside of the scroll container's padding (DataTable's 0.5rem), and the
columns went on scrolling visibly through that strip right of the button. Pinned to the outer
edge instead, with the strip added to the cell's own padding so the button keeps its distance. */
right: -0.5rem;
padding-right: 1.5rem;
z-index: 1;
background: var(--surface);
}
.fst-table[b-zin83ol8zj] .data-table .col-action {
width: 1%;
text-align: center;
}
.fst-table[b-zin83ol8zj] .data-table tr:hover .col-action {
background: var(--surface-hover);
}
/* A short fade instead of a rule — the table carries none — so a column sliding under the pinned
cell does not end in a hard cut. In the surface colour, so it holds in both themes. */
.fst-table[b-zin83ol8zj] .data-table .col-action::before,
.fst-table[b-zin83ol8zj] .data-table th:last-child::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 100%;
width: 1rem;
background: linear-gradient(to right, transparent, var(--surface));
pointer-events: none;
}
.fst-table[b-zin83ol8zj] .data-table tr:hover .col-action::before {
background: linear-gradient(to right, transparent, var(--surface-hover));
}
/* /Components/Shared/HoverCard.razor.rz.scp.css */
/* The trigger's wrapper adds nothing to the layout: the caller's class sizes and places it. */
.hover-card-trigger[b-1m8irrj3vl] {
display: block;
cursor: pointer;
}
.hover-card-trigger:focus[b-1m8irrj3vl] {
outline: none;
}
.hover-card-trigger:focus-visible[b-1m8irrj3vl] {
outline: 2px solid var(--clr-blue-500);
outline-offset: 2px;
}
/* The glass of the context menu and the top bar's search panel — slightly see-through, the page blurred behind it, so
the bubble reads as lying over the chart — with a tail towards the spot the pointer rested on. The solid surface
stays the fallback where backdrop-filter is missing. Hidden until hover-card.js has placed it, so it never shows
for a frame at the top left. */
.hover-card[b-1m8irrj3vl] {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
box-sizing: border-box;
width: max-content;
min-width: 13rem;
max-width: min(380px, calc(100vw - 16px));
font-size: 13px;
line-height: 1.45;
color: var(--text);
background: var(--surface);
background: var(--surface-menu);
-webkit-backdrop-filter: var(--menu-blur);
backdrop-filter: var(--menu-blur);
border: 1px solid transparent;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
visibility: hidden;
}
.hover-card:focus[b-1m8irrj3vl] {
outline: none;
}
.hover-card-body[b-1m8irrj3vl] {
box-sizing: border-box;
max-height: calc(100vh - 16px);
overflow-y: auto;
padding: 12px 14px;
border-radius: inherit;
scrollbar-width: thin;
}
.hover-card.is-placed[b-1m8irrj3vl] {
visibility: visible;
animation: hover-card-rise-b-1m8irrj3vl 0.14s ease-out;
}
.hover-card--above.is-placed[b-1m8irrj3vl] {
animation-name: hover-card-sink-b-1m8irrj3vl;
}
/* A square turned by 45° at the card's edge, cut to the half that stands out: on a see-through card the half
underneath would show as a darker patch. The card's blur ends at its own edge (it is the backdrop root of
anything inside it), so the tail is a little denser instead of blurred. */
.hover-card--above[b-1m8irrj3vl]::before,
.hover-card--below[b-1m8irrj3vl]::before {
content: "";
position: absolute;
left: var(--hover-card-tail, 50%);
width: 10px;
height: 10px;
margin-left: -5px;
background: var(--surface);
background: color-mix(in srgb, var(--surface) 88%, transparent);
transform: rotate(45deg);
pointer-events: none;
}
.hover-card--below[b-1m8irrj3vl]::before {
top: -5px;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.hover-card--above[b-1m8irrj3vl]::before {
bottom: -5px;
clip-path: polygon(100% 100%, 100% 0, 0 100%);
}
/* A phone: a sheet across the bottom of the screen, no tail. */
.hover-card--sheet[b-1m8irrj3vl] {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: auto;
min-width: 0;
max-width: none;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.hover-card--sheet .hover-card-body[b-1m8irrj3vl] {
max-height: 70vh;
padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
@keyframes hover-card-rise-b-1m8irrj3vl {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hover-card-sink-b-1m8irrj3vl {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hover-card.is-placed[b-1m8irrj3vl] {
animation: none;
}
}
/* /Components/Shared/IdBadge.razor.rz.scp.css */
.id-badge[b-t7jtyki3d1] {
font-size: 0.78rem;
font-weight: 600;
font-family: 'Courier New', monospace;
padding: 0.15rem 0.55rem;
border-radius: var(--radius-sm);
background: var(--clr-slate-100);
color: var(--clr-slate-600);
white-space: nowrap;
}
/* /Components/Shared/LegalFooter.razor.rz.scp.css */
.legal-footer[b-jquipp4nrp] {
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid var(--clr-slate-100);
display: flex;
flex-direction: column;
gap: 0.2rem;
text-align: center;
}
.legal-footer-app[b-jquipp4nrp] {
font-size: 0.82rem;
font-weight: 600;
color: var(--clr-slate-500);
}
/* The whole "Ein Produkt von … © Jahr" line is one clickable badge. */
.legal-footer-meta[b-jquipp4nrp] {
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.3rem 0.5rem;
background: none;
border: 0;
border-radius: var(--radius-sm);
font: inherit;
font-size: 0.78rem;
color: var(--clr-slate-400);
cursor: pointer;
opacity: 0.85;
transition: opacity 0.15s ease;
}
.legal-footer-meta:hover[b-jquipp4nrp] {
opacity: 1;
}
.legal-footer-meta .brand-badge img[b-jquipp4nrp] {
height: 24px;
}
/* /Components/Shared/LicenseGate.razor.rz.scp.css */
/* One line in the warn card's colours: it names what is missing, it is not a card of its own. A shadow,
not a border, as everywhere (docs/DESIGN-SYSTEM.md). */
.license-gate-notice[b-gmfom4b39r] {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1rem;
padding: 0.55rem 0.8rem;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
background: var(--clr-amber-50);
color: var(--clr-amber-800);
font-size: 0.88rem;
}
.license-gate-notice[b-gmfom4b39r] .icon {
flex: none;
}
/* Visible enough to read what the module would bring, plainly not usable. */
.license-gate-locked[b-gmfom4b39r] {
opacity: 0.5;
filter: grayscale(1);
user-select: none;
}
/* In a header's action row: no box of its own, so the buttons keep the row's layout. */
.license-gate-locked--quiet[b-gmfom4b39r] {
display: contents;
}
.license-gate-locked--quiet[b-gmfom4b39r] > * {
opacity: 0.5;
filter: grayscale(1);
}
/* /Components/Shared/LiveEditBar.razor.rz.scp.css */
/* The text's save state, the small line centred under the SaveBar (the bar sets its size and colour).
Both lines sit in one grid cell, so the cell is as wide as the longer one and nothing jumps when
they swap. */
.live-bar-state[b-0g46izd5lh] {
display: inline-grid;
}
.live-bar-line[b-0g46izd5lh] {
grid-area: 1 / 1;
display: inline-flex;
align-items: center;
gap: 0.3rem;
opacity: 0;
transition: opacity 0.3s ease;
}
/* Back to "gespeichert": straight away, softly. */
.live-bar-state.is-saved .live-bar-line--saved[b-0g46izd5lh] {
opacity: 1;
}
/* To "wird gespeichert": only after half a second. A save that is done before that never shows — the
transition back cancels this one before anything moved — and typing no longer blinks the line. */
.live-bar-state.is-saving .live-bar-line--saving[b-0g46izd5lh] {
opacity: 1;
transition-delay: 0.5s;
}
.live-bar-state.is-saving .live-bar-line--saved[b-0g46izd5lh] {
transition-delay: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
.live-bar-line[b-0g46izd5lh] {
transition-duration: 0.01ms;
}
}
/* A save that keeps failing is the one state that has to be seen. */
.live-bar-failed[b-0g46izd5lh] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--clr-red-600);
}
/* /Components/Shared/LivePresenceStrip.razor.rz.scp.css */
.live-presence[b-1uw3fl6s21] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
font-size: 0.82rem;
color: var(--text-muted);
}
/* The "live" light: a small pulse, the one thing on the strip that moves. */
.live-presence-dot[b-1uw3fl6s21] {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--clr-green-500);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--clr-green-500) 50%, transparent);
animation: live-presence-pulse-b-1uw3fl6s21 2s ease-out infinite;
}
@keyframes live-presence-pulse-b-1uw3fl6s21 {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--clr-green-500) 45%, transparent); }
70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--clr-green-500) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--clr-green-500) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.live-presence-dot[b-1uw3fl6s21] { animation: none; }
}
.live-presence-label[b-1uw3fl6s21] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-presence-avatars[b-1uw3fl6s21] {
display: inline-flex;
align-items: center;
}
/* Overlapping discs, each ringed in its person's cursor colour. */
.live-presence-person[b-1uw3fl6s21] {
display: inline-flex;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--live-color);
margin-left: -2px;
}
.live-presence-person:first-child[b-1uw3fl6s21] {
margin-left: 4px;
}
.live-presence-person + .live-presence-person[b-1uw3fl6s21] {
margin-left: 6px;
}
.live-presence-person.is-away[b-1uw3fl6s21] {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--clr-slate-300);
opacity: 0.6;
}
/* /Components/Shared/LogoSpinner.razor.rz.scp.css */
.fk-spinner[b-fb3435gimx] {
display: inline-block;
vertical-align: middle;
flex: none;
}
/* Same easing/feel as the logo orbit in ReconnectModal, a touch faster for an
"active" indicator. */
.fk-spinner-orbit[b-fb3435gimx] {
transform-origin: 32px 32px;
animation: fk-spinner-orbit-b-fb3435gimx 1.9s cubic-bezier(.65, .05, .36, 1) infinite;
}
@keyframes fk-spinner-orbit-b-fb3435gimx {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.fk-spinner-orbit[b-fb3435gimx] { animation: none; }
}
/* /Components/Shared/LunchBreakGame.razor.rz.scp.css */
/* Everything the mini-game looks like. Deliberately self-contained: nothing
here belongs in app.css, and the pixel font is registered from JavaScript
rather than through an @font-face rule, so no part of the game leaks into
the rest of the app. */
.lb[b-ojpixjib65] {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-top: 0.75rem;
}
/* The menu bar above the stage. The game's own top-right corner is taken by
the score and the floor number, so anything the page adds goes above it. */
.lb-bar[b-ojpixjib65] {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.35rem;
margin-bottom: -0.5rem;
}
/* ── Stage ──────────────────────────────────────────────────────────── */
/* The frame hugs the picture instead of the column: the canvas is only ever
sized to a whole multiple of its backbuffer in screen pixels — which
backbuffer, and how many, is fitCanvas in game.js — so letting the stage
stretch would leave a band of empty surface beside it. */
.lb-stage[b-ojpixjib65] {
position: relative;
width: fit-content;
max-width: 100%;
margin: 0 auto;
border-radius: var(--radius-2xl);
overflow: hidden;
background: var(--surface-sunken);
box-shadow: var(--shadow-sm);
}
/* The office. Stretched over the whole stage and drawn at the display's own
resolution, because there is no pixel grid left to respect: it is geometry,
and a diagonal edge wants every pixel it can get. */
.lb-scene[b-ojpixjib65] {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
/* Never the click target: the HUD canvas on top of it takes the input, so
there is one element holding focus rather than two fighting over it. */
pointer-events: none;
}
/* The HUD, on a transparent sheet over the office. This one is still a fixed
pixel buffer scaled up whole — the bitmap font is why — and it is also what
sizes the stage, since the office behind it is absolutely positioned and
contributes no height of its own. */
.lb-canvas[b-ojpixjib65] {
position: relative;
display: block;
/* Starting size and the fallback if the script never runs; game.js
replaces it with the largest whole-number scale that fits. */
width: 100%;
height: auto;
max-width: 100%;
/* Nearest-neighbour on the way up: the whole point of a pixel buffer. */
image-rendering: pixelated;
outline: none;
touch-action: none;
}
.lb-overlay[b-ojpixjib65] {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.5rem;
text-align: center;
/* Readable over the running office underneath without hiding it. */
background: color-mix(in srgb, var(--surface-page) 82%, transparent);
backdrop-filter: blur(2px);
}
/* The end of a round rains confetti in the canvas, and a wash that hides it
would be throwing the celebration away. So this one barely tints the stage
and gives the figures a card of their own to stay legible on. */
.lb-overlay-over[b-ojpixjib65] {
background: color-mix(in srgb, var(--surface-page) 28%, transparent);
backdrop-filter: none;
}
.lb-panel[b-ojpixjib65] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
min-width: min(24rem, 100%);
padding: 1.25rem 1.75rem 1.5rem;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface-page) 94%, transparent);
box-shadow: var(--shadow-lg);
}
/* A record earns a gold edge and nothing else — the wording above it already
says so, and two announcements of the same thing read as one shouted. */
.lb-panel.is-record[b-ojpixjib65] {
box-shadow: var(--shadow-lg), inset 0 0 0 2px var(--accent);
}
.lb-flag[b-ojpixjib65] {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
/* The debug jump marks its round. Muted rather than alarming: nothing is
wrong, the round simply does not count. */
.lb-flag.is-warning[b-ojpixjib65] {
color: var(--text-muted);
}
/* Development only, and it should look like it — a tool sitting in the toolbar,
not a feature. */
.lb-cheat[b-ojpixjib65] {
color: var(--text-muted);
border-style: dashed;
}
/* The number is the reason this panel exists, so it is the only thing on it
at this size. */
.lb-rank[b-ojpixjib65] {
margin: -0.4rem 0 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-muted);
}
.lb-figures[b-ojpixjib65] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.5rem 1rem;
width: 100%;
margin: 0.25rem 0 0;
padding: 0.7rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.lb-figures div[b-ojpixjib65] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
}
.lb-figures dt[b-ojpixjib65] {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.lb-figures dd[b-ojpixjib65] {
margin: 0;
font-size: 0.7rem;
color: var(--text-muted);
}
/* The board. Three columns, the same shape as the leaderboard modal, so the
two do not have to be learned separately. */
.lb-board[b-ojpixjib65] {
width: 100%;
}
.lb-board-head[b-ojpixjib65] {
margin: 0 0 0.3rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.lb-board-list[b-ojpixjib65] {
display: flex;
flex-direction: column;
gap: 0.1rem;
margin: 0;
padding: 0;
list-style: none;
}
.lb-board-list li[b-ojpixjib65] {
display: grid;
grid-template-columns: 1.4rem 1fr auto;
align-items: center;
gap: 0.5rem;
padding: 0.22rem 0.4rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
}
.lb-board-list .is-me[b-ojpixjib65] {
background: var(--surface-hover);
font-weight: 600;
}
.lb-place[b-ojpixjib65] {
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.lb-who[b-ojpixjib65] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lb-points[b-ojpixjib65] {
font-variant-numeric: tabular-nums;
}
.lb-gap[b-ojpixjib65] {
justify-items: center;
padding: 0 0.4rem;
color: var(--text-muted);
line-height: 1;
}
.lb-actions[b-ojpixjib65] {
display: flex;
gap: 0.5rem;
margin-top: 0.35rem;
}
.lb-title[b-ojpixjib65] {
margin: 0;
font-size: 1.5rem;
color: var(--text);
}
.lb-score[b-ojpixjib65] {
margin: 0;
font-size: 2rem;
font-weight: 700;
color: var(--primary);
}
.lb-text[b-ojpixjib65] {
margin: 0;
max-width: 46ch;
color: var(--text-secondary);
}
.lb-loading[b-ojpixjib65] {
margin: 0;
font-size: 0.8rem;
color: var(--text-muted);
max-width: 52ch;
}
/* The controls, one key per row. Left column hugs its keys, right column takes
the rest, so every description starts on the same edge. */
.lb-keys[b-ojpixjib65] {
display: grid;
gap: 0.3rem;
margin: 0.25rem 0 0;
text-align: left;
font-size: 0.8rem;
color: var(--text-muted);
}
.lb-keys > div[b-ojpixjib65] {
display: grid;
grid-template-columns: 7.5rem 1fr;
align-items: center;
gap: 0.75rem;
}
.lb-keys dt[b-ojpixjib65] {
display: flex;
gap: 0.15rem;
justify-content: flex-end;
}
.lb-keys dd[b-ojpixjib65] {
margin: 0;
}
.lb-keys kbd[b-ojpixjib65] {
font-family: inherit;
font-size: 0.68rem;
line-height: 1.5;
min-width: 1.3rem;
padding: 0.05rem 0.35rem;
text-align: center;
color: var(--text-secondary);
background: var(--surface-sunken);
border: 1px solid var(--border-strong);
border-bottom-width: 2px;
border-radius: var(--radius-xs);
}
/* /Components/Shared/ModalContainer.razor.rz.scp.css */
/* A modal is the topmost surface: it must cover the mobile sidebar (10000), the
legal overlay (9999) and the AI chat panel (1001). Only toasts sit above it. */
/* Navy-tinted scrim rather than neutral black, so the dimmed page keeps the
same colour temperature as the rest of the language. */
.dialog-backdrop[b-lezcm8pore] {
position: fixed;
inset: 0;
background: rgba(15, 27, 61, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 10050;
padding: 1rem;
animation: fadeIn-b-lezcm8pore 0.15s ease;
}
/* Touch devices: centre the dialog in the area that is actually visible. `inset: 0` spans the
layout viewport, which the on-screen keyboard does not shrink on every engine — a dialog
centred in it lands half behind the keyboard, and its fields are exactly what the keyboard
was opened for. js/viewport.js publishes the visible box. */
@media (hover: none) and (pointer: coarse) {
.dialog-backdrop[b-lezcm8pore] {
bottom: auto;
top: var(--visual-top, 0px);
height: var(--visual-vh, 100dvh);
}
}
/* The shell is capped at the viewport, so anything taller has to scroll somewhere.
A dialog that marks its own scroll region (see .modal-body) keeps header and
footer pinned; every other one scrolls as a whole rather than clipping its lower
half — which is what happens with overflow:hidden and no scroll region at all. */
.dialog[b-lezcm8pore] {
background: var(--surface);
border-radius: var(--radius-2xl);
border: 1px solid transparent;
padding: 1.75rem;
width: 100%;
max-width: 420px;
/* The backdrop is the viewport minus its own 1rem padding, so 100% is that same
`viewport - 2rem` — but it follows the backdrop when the keyboard shortens it,
which a 100vh figure does not. */
max-height: 100%;
box-shadow: var(--shadow-xl);
animation: scaleIn-b-lezcm8pore 0.15s ease;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--clr-slate-200) transparent;
}
/* Nothing in a dialog gets squeezed to fit: a title, a tab bar or a list keeps its
natural height and the dialog scrolls instead. Only .modal-body gives way. */
.dialog[b-lezcm8pore] > * {
flex-shrink: 0;
}
/* Set by modal.js while the dialog slides from one content height to the next (switching a
tab is the usual reason). Mid-slide the content does not match the box — clipping it for
those ~200 ms beats flashing a scrollbar in the dialog and in its scroll region. */
.dialog.is-resizing[b-lezcm8pore],
.dialog.is-resizing[b-lezcm8pore] .modal-body {
overflow: hidden;
}
/* The shared scroll region: takes whatever height is left over and scrolls, which
pins everything above and below it. Add it to the wrapper around a dialog's
content instead of writing the same four declarations per modal. */
[b-lezcm8pore] .modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* Room for a focus ring. A field draws its 3 px halo outside its border box, and a scroll region
clips at its own edge — so the ring of the first field, which sits flush against the top, came
off shaved. All four sides, because a region that scrolls in one axis clips in both. The padding
is taken straight back by the margin: the region still begins and ends exactly where it did, and
so does everything in it. */
padding: 3px;
margin: -3px;
scrollbar-width: thin;
scrollbar-color: var(--clr-slate-200) transparent;
}
[b-lezcm8pore] .dialog-header {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.85rem;
flex-shrink: 0;
}
[b-lezcm8pore] .dialog-header h3 {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.02em;
}
[b-lezcm8pore] .dialog-icon-danger {
color: var(--clr-red-600);
flex-shrink: 0;
}
[b-lezcm8pore] .dialog-body {
font-size: 0.88rem;
color: var(--clr-slate-600);
margin: 0 0 1.25rem;
line-height: 1.6;
}
/* Quoted content inside a dialog body (e.g. the criteria a user has to confirm).
Inline element so it stays valid markup inside the . */
[b-lezcm8pore] .dialog-callout {
display: block;
margin-top: 0.9rem;
padding: 0.8rem 1rem;
background: var(--primary-soft);
border-left: 3px solid var(--primary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
color: var(--text-body);
font-weight: 500;
}
/* Wrapping, because a footer that does not fit must not be clipped. The dialog is 420 px wide and a
.btn does not shrink (nowrap label, fixed padding), so a third button — a destructive one beside the
usual pair — overflowed to the left, where justify-content:flex-end sends the surplus, and the
dialog's own overflow:hidden cut it off the screen. A dialog with three buttons is rare enough that
it may take a second row; a button nobody can reach is never right. */
[b-lezcm8pore] .dialog-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-end;
flex-shrink: 0;
}
/* A save bar closing a dialog is a footer like any other and must not be squeezed
out by a long body. */
[b-lezcm8pore] .save-bar-host {
flex-shrink: 0;
}
/* Right-aligned, like .dialog-actions: one footer layout for every dialog, the way out first and the
action last ("Abbrechen | Speichern", REV-U6). A footer with something of its own on the left —
a file size, a tally, an extra button group — pushes it there with margin-right:auto. */
[b-lezcm8pore] .modal-footer {
display: flex;
flex-direction: row;
gap: 10px;
flex-shrink: 0;
justify-content: flex-end;
}
/* Only a scrolling body needs its buttons set apart — the rule sits above content
that can slide underneath it. */
[b-lezcm8pore] .modal-body + .modal-footer,
[b-lezcm8pore] .modal-body + .dialog-actions {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--clr-slate-200);
}
/* The way out, the way in reversed. The container keeps a popped frame rendered for the length of
this (ModalContainer.LeaveMs) — a dialog that is simply removed has nothing left to close on.
Shorter than the opening: a surface on its way out must not hold up what is behind it. Clicks go
straight through it to the dialog underneath, which may already be answering. */
.dialog-backdrop.is-leaving[b-lezcm8pore] {
animation: fadeOut-b-lezcm8pore 0.14s ease-in both;
pointer-events: none;
}
.dialog-backdrop.is-leaving .dialog[b-lezcm8pore] {
animation: scaleOut-b-lezcm8pore 0.14s ease-in both;
}
@keyframes fadeIn-b-lezcm8pore {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn-b-lezcm8pore {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes fadeOut-b-lezcm8pore {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes scaleOut-b-lezcm8pore {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95); }
}
/* The dialog still arrives and still goes — what goes is the travel. A leaving frame keeps its
opacity at zero, so the hold before it is removed stays invisible. */
@media (prefers-reduced-motion: reduce) {
.dialog-backdrop[b-lezcm8pore],
.dialog[b-lezcm8pore] {
animation: none;
}
.dialog-backdrop.is-leaving[b-lezcm8pore] {
opacity: 0;
}
}
/* /Components/Shared/Modals/AboutSchottlerBuhlModal.razor.rz.scp.css */
/* ===========================================================
About Schottler & Buhl — the agency's own design language
===========================================================
Ported from schottler-buhl.de: ink/paper palette, copper accent, Manrope in
light weights, Instrument Serif italic for emphasis, JetBrains Mono for the
uppercase labels. Hairline rules instead of cards, pill buttons.
This is deliberately NOT the FlowKlar design system. Everything below is
Blazor-scoped to this component and prefixed `sb-`, and the tokens are local
custom properties on `.sb` — nothing leaks into the app, and no app token is
read here, so a theme change cannot drag this modal along with it.
The fonts are self-hosted latin subsets under /branding/fonts.
=========================================================== */
@font-face {
font-family: 'SB Manrope';
font-style: normal;
font-weight: 200 700;
font-display: swap;
src: url(/branding/fonts/manrope-latin.woff2) format('woff2');
}
@font-face {
font-family: 'SB Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/branding/fonts/instrument-serif-italic-latin.woff2) format('woff2');
}
@font-face {
font-family: 'SB JetBrains Mono';
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url(/branding/fonts/jetbrains-mono-latin.woff2) format('woff2');
}
.sb[b-cn2u5j1slc] {
/* ── Brand tokens (local; intentionally not the app's) ── */
--ink: #0e0f10;
--paper: #f4f1ec;
--paper-2: #ebe6dd;
--line-l: #d8d3c8;
--line-d: #26282b;
--muted-l: #76726a;
--muted-d: #8a8a8e;
--body: #3a3a3c;
--copper: oklch(0.62 0.13 35);
--sans: 'SB Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--serif: 'SB Instrument Serif', 'Iowan Old Style', Georgia, serif;
--mono: 'SB JetBrains Mono', ui-monospace, Consolas, monospace;
/* Bleed past the ModalContainer's 1.5rem padding to the dialog's edges. */
position: relative;
margin: -1.5rem;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-weight: 400;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
/* As tall as the dialog lets it be, not a height of its own: the dialog follows the visible viewport, and the
content below scrolls — never the dialog as well. */
flex: 1 1 auto;
min-height: 0;
}
.sb-scroll[b-cn2u5j1slc] {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* Scroll shadow hints there is more below without adding chrome. */
overscroll-behavior: contain;
}
/* ── Close ───────────────────────────────────────────── */
.sb-close[b-cn2u5j1slc] {
position: absolute;
top: 18px;
right: 18px;
z-index: 3;
width: 34px;
height: 34px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--line-l);
border-radius: var(--radius-pill);
background: rgba(244, 241, 236, 0.75);
backdrop-filter: blur(4px);
color: var(--muted-l);
font-family: var(--sans);
font-size: 13px;
line-height: 1;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sb-close:hover[b-cn2u5j1slc] {
color: var(--ink);
border-color: var(--copper);
background: var(--paper);
}
/* ── Shared label / eyebrow ──────────────────────────── */
/* The site's signature: uppercase mono, wide tracking, copper hairline. */
.sb-eyebrow[b-cn2u5j1slc],
.sb-label[b-cn2u5j1slc] {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--mono);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted-l);
}
.sb-eyebrow[b-cn2u5j1slc]::before {
content: '';
width: 32px;
height: 1px;
background: var(--copper);
flex-shrink: 0;
}
/* ── Hero ────────────────────────────────────────────── */
/* Dot grid behind the headline, masked to fade toward the edges — the site's
hero motif, scaled down to modal size. */
.sb-hero[b-cn2u5j1slc] {
position: relative;
padding: 44px 40px 40px;
border-bottom: 1px solid var(--line-l);
}
.sb-hero[b-cn2u5j1slc]::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image: radial-gradient(circle, rgba(14, 15, 16, 0.14) 1px, transparent 1.6px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(120% 100% at 30% 20%, #000 0%, #000 18%, transparent 70%);
mask-image: radial-gradient(120% 100% at 30% 20%, #000 0%, #000 18%, transparent 70%);
pointer-events: none;
}
.sb-hero > *[b-cn2u5j1slc] {
position: relative;
z-index: 1;
}
.sb-hero > .sb-logo[b-cn2u5j1slc] {
display: block;
width: auto;
height: 40px;
margin-bottom: 22px;
}
.sb-headline[b-cn2u5j1slc] {
margin: 26px 0 0;
font-family: var(--sans);
font-weight: 200;
font-size: clamp(34px, 6.2vw, 46px);
letter-spacing: -0.045em;
line-height: 1.0;
color: var(--ink);
text-wrap: balance;
}
.sb-headline em[b-cn2u5j1slc] {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 1.05em;
color: var(--copper);
}
.sb-lead[b-cn2u5j1slc] {
margin: 24px 0 0;
max-width: 52ch;
font-weight: 300;
font-size: 16px;
line-height: 1.55;
letter-spacing: -0.01em;
color: var(--body);
text-wrap: pretty;
}
.sb-lead em[b-cn2u5j1slc] {
font-family: var(--serif);
font-style: italic;
font-size: 1.1em;
color: var(--copper);
}
/* ── Services — hairline grid, no cards ──────────────── */
.sb-services[b-cn2u5j1slc] {
padding: 34px 40px 36px;
border-bottom: 1px solid var(--line-l);
}
.sb-services ul[b-cn2u5j1slc] {
list-style: none;
margin: 26px 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.sb-services li[b-cn2u5j1slc] {
padding: 22px 24px 22px 0;
border-top: 1px solid var(--line-l);
}
/* Second column gets the vertical rule + a gutter, mirroring the site's
border-left divider system. */
.sb-services li:nth-child(even)[b-cn2u5j1slc] {
border-left: 1px solid var(--line-l);
padding-left: 24px;
padding-right: 0;
}
.sb-services h3[b-cn2u5j1slc] {
margin: 0;
font-family: var(--sans);
font-weight: 400;
font-size: 19px;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--ink);
}
.sb-services p[b-cn2u5j1slc] {
margin: 10px 0 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--body);
text-wrap: pretty;
}
/* ── CTA — the site's dark contact block, "&" watermark ── */
.sb-cta[b-cn2u5j1slc] {
position: relative;
overflow: hidden;
padding: 38px 40px 40px;
background: var(--ink);
color: var(--paper);
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: start;
}
.sb-cta[b-cn2u5j1slc]::before {
content: '&';
position: absolute;
right: -34px;
bottom: -96px;
font-family: var(--serif);
font-style: italic;
font-size: 300px;
line-height: 0.7;
color: var(--copper);
opacity: 0.18;
pointer-events: none;
}
.sb-cta-main[b-cn2u5j1slc] {
position: relative;
z-index: 1;
min-width: 0;
}
.sb-cta-label[b-cn2u5j1slc] {
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted-d);
}
.sb-cta-main p[b-cn2u5j1slc] {
margin: 16px 0 26px;
max-width: 44ch;
font-size: 14.5px;
line-height: 1.6;
color: #c8c6c2;
}
.sb-btn[b-cn2u5j1slc] {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 24px;
border-radius: var(--radius-pill);
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-weight: 500;
font-size: 14.5px;
letter-spacing: -0.005em;
text-decoration: none;
box-shadow: 0 2px 6px -1px rgba(40, 32, 22, 0.11), 0 7px 20px -4px rgba(40, 32, 22, 0.13);
transition: transform 0.2s, box-shadow 0.2s;
}
.sb-btn:hover[b-cn2u5j1slc] {
transform: translateY(-2px);
box-shadow: 0 10px 22px -5px rgba(40, 32, 22, 0.17), 0 22px 46px -12px rgba(40, 32, 22, 0.17);
}
.sb-arr[b-cn2u5j1slc] {
font-family: var(--serif);
font-style: italic;
color: var(--copper);
font-size: 18px;
line-height: 1;
transition: transform 0.2s;
}
.sb-btn:hover .sb-arr[b-cn2u5j1slc] {
transform: translate(3px, -3px);
}
.sb-facts[b-cn2u5j1slc] {
position: relative;
z-index: 1;
margin: 0;
display: grid;
gap: 18px;
min-width: 190px;
}
.sb-facts dt[b-cn2u5j1slc] {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--muted-d);
padding-top: 16px;
border-top: 1px solid var(--line-d);
}
.sb-facts dd[b-cn2u5j1slc] {
margin: 7px 0 0;
font-size: 14px;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--paper);
}
/* ── Narrow modal / small screens ────────────────────── */
@media (max-width: 560px) {
.sb-hero[b-cn2u5j1slc],
.sb-services[b-cn2u5j1slc],
.sb-cta[b-cn2u5j1slc] {
padding-left: 26px;
padding-right: 26px;
}
/* Single column: the vertical rule and its gutter would strand the text. */
.sb-services ul[b-cn2u5j1slc] {
grid-template-columns: 1fr;
}
.sb-services li[b-cn2u5j1slc],
.sb-services li:nth-child(even)[b-cn2u5j1slc] {
border-left: 0;
padding-left: 0;
padding-right: 0;
}
.sb-cta[b-cn2u5j1slc] {
grid-template-columns: 1fr;
gap: 30px;
}
}
@media (prefers-reduced-motion: reduce) {
.sb-btn[b-cn2u5j1slc],
.sb-arr[b-cn2u5j1slc] {
transition: none;
}
.sb-btn:hover[b-cn2u5j1slc] {
transform: none;
}
.sb-btn:hover .sb-arr[b-cn2u5j1slc] {
transform: none;
}
}
/* /Components/Shared/Modals/AddParticipantModal.razor.rz.scp.css */
/* The two role checkboxes on one line — they belong together and are short. */
.ap-roles[b-gwux5pko1v] {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.85rem;
}
.ap-roles label[b-gwux5pko1v] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
cursor: pointer;
}
/* /Components/Shared/Modals/AddressPickerModal.razor.rz.scp.css */
/* ::deep — the class sits on the Icon component's own element, which this stylesheet does not reach. */
.dialog-header[b-uxm6a12qik] .apm-header-icon {
color: var(--primary);
flex-shrink: 0;
}
/* The field the address goes into, beside the title. */
.apm-field[b-uxm6a12qik] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.88rem;
color: var(--text-muted);
}
.apm-body[b-uxm6a12qik] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* ── Map ─────────────────────────────────────────────── */
/* The map's own height, not a scroll limit: Leaflet needs a box with a size, and on a short phone screen
the map gives way first so search and address stay in view. */
.apm-map-wrap[b-uxm6a12qik] {
position: relative;
height: clamp(240px, 52vh, 460px);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--surface-sunken);
box-shadow: var(--shadow-xs);
}
.apm-map[b-uxm6a12qik] {
position: absolute;
inset: 0;
/* Leaflet's panes sit at z-index 400 and up; the dialog's own controls below are put above them. */
z-index: 0;
}
.apm-map-failed[b-uxm6a12qik] {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.9rem;
}
/* Named, not an icon alone: a crosshair in a map's corner is easily taken for part of the map. */
.apm-locate[b-uxm6a12qik] {
position: absolute;
top: 0.6rem;
right: 0.6rem;
z-index: 1000;
display: inline-flex;
align-items: center;
gap: 0.4rem;
height: 2.25rem;
padding: 0 0.75rem;
border: none;
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text-secondary);
box-shadow: var(--shadow-md);
font: inherit;
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
/* Only the icon answers the pointer: a second background on the button's own would read as a box. */
.apm-locate:hover:not(:disabled)[b-uxm6a12qik] {
color: var(--primary);
}
.apm-locate:disabled[b-uxm6a12qik] {
cursor: default;
}
/* The tiles' credit, which their licence asks to be visible. Text, not Leaflet's control: it is a setting,
and Leaflet would put it on the page as markup. */
.apm-attribution[b-uxm6a12qik] {
position: absolute;
right: 0;
bottom: 0;
z-index: 1000;
max-width: 100%;
padding: 0.1rem 0.4rem;
border-top-left-radius: var(--radius-xs);
background: rgba(255, 255, 255, 0.8);
color: #333;
font-size: 0.7rem;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The pin: Leaflet builds it inside the map, outside this component's scope. */
.apm-map-wrap[b-uxm6a12qik] .apm-pin {
background: none;
border: none;
}
.apm-map-wrap[b-uxm6a12qik] .apm-pin svg {
display: block;
fill: var(--primary);
stroke: var(--surface);
stroke-width: 1.5;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
.apm-map-wrap[b-uxm6a12qik] .apm-pin svg circle {
fill: var(--surface);
stroke: none;
}
/* The ring around the device's position. CSS over the attributes Leaflet writes, so the colours follow the theme. */
.apm-map-wrap[b-uxm6a12qik] .apm-accuracy {
stroke: var(--primary);
stroke-opacity: 0.5;
fill: var(--primary);
fill-opacity: 0.12;
}
/* Leaflet's zoom buttons in the app's shape. */
.apm-map-wrap[b-uxm6a12qik] .leaflet-bar {
border: none;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
}
.apm-map-wrap[b-uxm6a12qik] .leaflet-bar a {
background: var(--surface);
color: var(--text-secondary);
border-bottom-color: var(--border);
}
.apm-map-wrap[b-uxm6a12qik] .leaflet-bar a:hover {
background: var(--surface);
color: var(--primary);
}
/* ── The address under the pin ───────────────────────── */
.apm-picked[b-uxm6a12qik] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
min-height: 1.5rem;
font-size: 0.95rem;
color: var(--text);
}
.apm-picked[b-uxm6a12qik] svg {
margin-top: 0.15rem;
flex-shrink: 0;
}
.apm-picked[b-uxm6a12qik] .apm-picked-icon {
color: var(--primary);
}
.apm-muted[b-uxm6a12qik] {
color: var(--text-muted);
}
/* Why "Mein Standort" found nothing. */
.apm-locate-note[b-uxm6a12qik] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.88rem;
color: var(--text-muted);
}
.apm-locate-note[b-uxm6a12qik] svg {
margin-top: 0.1rem;
flex-shrink: 0;
color: var(--clr-amber-500);
}
/* /Components/Shared/Modals/AiPrivacyConsentModal.razor.rz.scp.css */
.ai-consent-link[b-ruf8nwxibj] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0.25rem 0 0.75rem;
padding: 0.55rem 0.85rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-weight: 600;
color: var(--primary);
text-decoration: none;
background: var(--surface-sunken);
transition: background 0.15s ease, border-color 0.15s ease;
}
.ai-consent-link:hover[b-ruf8nwxibj] {
background: var(--surface-hover);
border-color: var(--primary);
}
.ai-consent-note[b-ruf8nwxibj] {
margin: -0.4rem 0 0.85rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.ai-consent-check[b-ruf8nwxibj] {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin-top: 0.5rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-sunken);
cursor: pointer;
line-height: 1.4;
}
.ai-consent-check input[type="checkbox"][b-ruf8nwxibj] {
margin-top: 0.15rem;
flex-shrink: 0;
}
/* /Components/Shared/Modals/ApplyStatusToWorkOrdersModal.razor.rz.scp.css */
/* ::deep – the icon markup comes from the Icon component, so the scope attribute
sits on the header, not on the svg. */
.dialog-header[b-eojzr5cc8u] .asw-header-icon {
color: var(--clr-green-600);
flex-shrink: 0;
}
.modal-body p[b-eojzr5cc8u] {
margin: 0 0 1rem;
}
/* One bordered block with hairline separators, matching the status picker. No height of its own: the
body is the house scroll region (.modal-body, see ModalContainer), so a long list scrolls there with
the header and the buttons pinned — a 45dvh box inside it scrolled on top of that. */
.asw-list[b-eojzr5cc8u] {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.asw-row[b-eojzr5cc8u] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
background: var(--surface);
cursor: pointer;
transition: background 0.15s;
}
.asw-row:not(:last-child)[b-eojzr5cc8u] {
border-bottom: 1px solid var(--border);
}
.asw-row:hover[b-eojzr5cc8u] {
background: var(--surface-hover);
}
/* The "select all" row heads the list and stays put while the rest scrolls. */
.asw-row--all[b-eojzr5cc8u] {
position: sticky;
top: 0;
z-index: 1;
background: var(--surface-hover);
font-weight: 600;
}
.asw-row input[type="checkbox"][b-eojzr5cc8u] {
flex-shrink: 0;
cursor: pointer;
}
.asw-info[b-eojzr5cc8u] {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
min-width: 0;
}
.asw-title[b-eojzr5cc8u] {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asw-sub[b-eojzr5cc8u] {
font-size: 0.75rem;
color: var(--text-muted);
}
.asw-count[b-eojzr5cc8u] {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-muted);
}
/* /Components/Shared/Modals/ArticleHistoryModal.razor.rz.scp.css */
.rev-detail-summary[b-mdw8ej5hln] {
font-size: 0.82rem;
color: var(--clr-slate-600);
margin: 0.35rem 0 0;
font-style: italic;
}
/* .rev-detail-content is in app.css: FormSubmissionHistoryModal draws it too, and the scoped rule here never
reached it. */
/* ── Comparing a revision with today ──────────────────────────────────────
A quiet switch above the text, not a second tab: the comparison is a way of reading this revision,
not another thing to look at. */
.rev-compare[b-mdw8ej5hln] {
margin: 0 0 0.75rem;
}
.rev-compare-toggle[b-mdw8ej5hln] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
color: var(--text-label);
cursor: pointer;
}
.rev-head-change[b-mdw8ej5hln] {
display: flex;
align-items: center;
gap: 0.35rem;
}
/* The plain-text diff keeps the paragraph breaks the conversion left behind, so pre-wrap rather than
markup. Inserted and deleted are told apart twice — colour and decoration — because colour alone is
not a distinction for everyone. */
.rev-diff[b-mdw8ej5hln] {
white-space: pre-wrap;
}
.rev-diff ins[b-mdw8ej5hln] {
background: var(--clr-emerald-100);
color: var(--clr-emerald-800);
text-decoration: none;
border-radius: var(--radius-xs);
}
.rev-diff del[b-mdw8ej5hln] {
background: var(--clr-red-100);
color: var(--danger-text);
text-decoration: line-through;
border-radius: var(--radius-xs);
}
/* /Components/Shared/Modals/ArticleViewModal.razor.rz.scp.css */
/* The values are HandbookArticleViewModal.razor.css and TipArticleViewModal.razor.css merged onto
one prefix, with the raw slate steps swapped for the semantic tokens that resolve to the same
colours (docs/DESIGN-SYSTEM.md, §1). Two rules are new, both explained where they stand. */
.article-modal-title[b-jtdpnxw7bt] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
/* The wrapper is what makes the tint work. Handing a class to styles nothing: the svg is
markup that component renders, and a scoped sheet only reaches its own – which is why the Tipps
lightbulb has been drawing in the title's colour. The svg strokes in currentColor, so it takes
this colour by inheritance. */
.article-modal-title-icon[b-jtdpnxw7bt] {
display: inline-flex;
color: var(--article-modal-accent, var(--primary));
}
.article-modal-title-icon--blue[b-jtdpnxw7bt] { --article-modal-accent: var(--clr-blue-500); }
.article-modal-title-icon--amber[b-jtdpnxw7bt] { --article-modal-accent: var(--clr-amber-500); }
.article-modal-summary[b-jtdpnxw7bt] {
color: var(--text-muted);
font-size: 0.85rem;
margin-bottom: 1rem;
}
/* No max-height and no overflow here: the body sits in the shell's .modal-body, which owns the
scrolling (docs/DESIGN-SYSTEM.md, §9). Both dialogs this replaces carried a `max-height: 60vh`
guess at the height left over. */
.article-modal-content[b-jtdpnxw7bt] {
padding: 0.75rem;
background: var(--article-modal-surface, var(--surface-sunken));
border: 1px solid var(--article-modal-border, var(--border));
border-radius: var(--radius-sm);
font-size: 0.9rem;
line-height: 1.6;
}
/* "blue" is the Handbuch tone, and its dialog has always shown the body on a neutral inset rather
than a blue one – only the tile in the page hero carries the blue. The tone is mapped to the
surface here instead of being renamed, so both article components speak one vocabulary. */
.article-modal-content--blue[b-jtdpnxw7bt] { --article-modal-surface: var(--surface-sunken); --article-modal-border: var(--border); }
.article-modal-content--amber[b-jtdpnxw7bt] { --article-modal-surface: var(--clr-amber-50); --article-modal-border: var(--clr-amber-200); }
/* The body is injected as a raw MarkupString, so ::deep is required to reach its children. Embedded
media must not push the modal wider than the viewport. */
.article-modal-content[b-jtdpnxw7bt] img,
.article-modal-content[b-jtdpnxw7bt] iframe,
.article-modal-content[b-jtdpnxw7bt] video {
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
}
.article-modal-content[b-jtdpnxw7bt] figure {
display: table;
margin: 0.75rem auto;
max-width: 100%;
}
.article-modal-content[b-jtdpnxw7bt] figcaption {
display: table-caption;
caption-side: bottom;
text-align: center;
font-size: 0.8rem;
color: var(--text-muted);
padding-top: 0.3rem;
}
.article-modal-attachments[b-jtdpnxw7bt] {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.article-modal-attachments-label[b-jtdpnxw7bt] {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
margin-bottom: 0.5rem;
}
/* ModalContainer supplies the footer row and, after a .modal-body, its hairline – but deliberately
no alignment, so the one button has to be pushed right from here. Same split as
EntityFormModal.razor.css; a rule the caller writes for .modal-footer would style nothing. */
.modal-footer[b-jtdpnxw7bt] {
justify-content: flex-end;
}
/* /Components/Shared/Modals/AssigneeListModal.razor.rz.scp.css */
/* The search and the list are AccessListEditor. */
/* The count beside the title, as the "Zugriff" dialog has it. */
.alm-header-count[b-gd454nij3l] {
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-slate-500);
background: var(--clr-slate-100);
padding: 0.15rem 0.55rem;
border-radius: var(--radius-pill);
margin-left: auto;
align-self: center;
}
/* /Components/Shared/Modals/AssignModal.razor.rz.scp.css */
/* The candidate rows. They are written in AssignModal.razor, so they carry this component's scope
even though ListSelectModal renders them — which is why nothing here uses ::deep: that would put the
scope on an ancestor, and there is none carrying it. The heading and the create row are PickerHead's. */
/* ── List rows ───────────────────────────────────── */
.select-item-header[b-1c2tgf2q8e] {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--text-body);
}
.select-item-title[b-1c2tgf2q8e] {
font-weight: 600;
font-size: 0.92rem;
}
.select-item-meta[b-1c2tgf2q8e] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.35rem;
}
.meta-chip[b-1c2tgf2q8e] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.73rem;
color: var(--text-faint);
background: var(--surface-sunken);
padding: 0.15rem 0.45rem;
border-radius: var(--radius-xs);
font-weight: 500;
}
/* /Components/Shared/Modals/AttachmentPreviewModal.razor.rz.scp.css */
/* The dialog is opened at a fixed height (see the dialogStyle at the call site), so .modal-body is
the space left between header and footer. Everything below fills that instead of guessing a vh of
its own — the viewer is the one dialog whose content should take the room it is given. */
.apv-header[b-iw6cewotta] {
gap: 0.7rem;
min-width: 0;
}
/* Same tinted tile as an attachment row's icon, so the dialog reads as that row enlarged. */
.apv-icon[b-iw6cewotta] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-lg);
background: var(--surface-sunken);
color: var(--text-secondary);
flex-shrink: 0;
}
.apv-icon[data-kind="image"][b-iw6cewotta] {
background: var(--clr-blue-50);
color: var(--clr-blue-600);
}
.apv-icon[data-kind="pdf"][b-iw6cewotta] {
background: var(--clr-red-50);
color: var(--clr-red-600);
}
/* One line with an ellipsis: a file name can be 260 characters and must not push the dialog wider
or wrap the header into three rows. The full name stays reachable through the title attribute. */
.apv-title[b-iw6cewotta] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.apv-body[b-iw6cewotta] {
display: flex;
flex-direction: column;
}
/* The checkerboard is what makes a transparent PNG readable in both themes — a logo on a white page
and a white logo on a dark one both need something behind them. */
.apv-stage[b-iw6cewotta] {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
padding: 0.5rem;
border-radius: var(--radius-xl);
background-color: var(--surface-sunken);
background-image:
linear-gradient(45deg, var(--surface-track) 25%, transparent 25%),
linear-gradient(-45deg, var(--surface-track) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--surface-track) 75%),
linear-gradient(-45deg, transparent 75%, var(--surface-track) 75%);
background-size: 18px 18px;
background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
/* Contained rather than scrolled: the whole picture at once is what a preview is for, and the
original is one click away in the footer. */
.apv-image[b-iw6cewotta] {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--radius-md);
}
/* The viewer brings its own chrome and its own scrollbar, so this only supplies the box. */
.apv-frame[b-iw6cewotta] {
flex: 1 1 auto;
width: 100%;
min-height: 0;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--surface-sunken);
}
.apv-text[b-iw6cewotta] {
margin: 0;
padding: 0.9rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--surface-sunken);
color: var(--text-body);
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.55;
/* Wrapped, including inside a long unbroken token: a CSV row or a minified JSON line would
otherwise scroll the dialog sideways. */
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.apv-note[b-iw6cewotta] {
margin: 0.75rem 0 0;
font-size: 0.82rem;
color: var(--text-muted);
}
/* Doubled class: ModalContainer's ::deep .modal-footer sets flex-end at the same specificity, and which
of two scoped rules wins then depends on their order in the bundle. */
.modal-footer.apv-footer[b-iw6cewotta] {
align-items: center;
justify-content: space-between;
}
.apv-meta[b-iw6cewotta] {
font-size: 0.82rem;
color: var(--text-muted);
}
.apv-actions[b-iw6cewotta] {
display: flex;
gap: 0.5rem;
}
/* A recording. Full width and centred in the stage — a player has no aspect ratio to preserve, and
the controls are the whole content. */
.apv-audio[b-iw6cewotta] {
width: 100%;
max-width: 32rem;
}
/* A video keeps its aspect ratio inside the stage, the way a picture does; the stage's checkerboard
shows through the letterbox rather than a black bar. */
.apv-video[b-iw6cewotta] {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--radius-md);
background: var(--surface-sunken);
}
/* /Components/Shared/Modals/ChecklistCommentsModal.razor.rz.scp.css */
/* Everything the stream itself looks like now lives in CommentThread.razor.css — one appearance for the
tab and the modal. What is left here is the dialog frame around it. */
.ccm-header-icon[b-6rlnf4bub2] {
color: var(--clr-blue-500);
flex-shrink: 0;
}
.ccm-subtitle[b-6rlnf4bub2] {
font-size: 0.8rem;
color: var(--clr-slate-500);
margin: 0.1rem 0 0;
font-weight: 400;
}
/* Scrolling comes from .modal-body, which takes the leftover height instead of
guessing at what header and comment box occupy. */
.ccm-body[b-6rlnf4bub2] {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 -1.5rem;
padding: 0.75rem 1.5rem 0;
}
/* /Components/Shared/Modals/ConfirmOption.razor.rz.scp.css */
.confirm-option[b-bkwp7ejme2] {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.7rem 0.85rem;
margin-top: 0.4rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--clr-slate-50);
cursor: pointer;
font-size: 0.88rem;
color: var(--clr-slate-700);
}
.confirm-option input[type="checkbox"][b-bkwp7ejme2] {
margin-top: 0.18rem;
cursor: pointer;
}
.confirm-option-hint[b-bkwp7ejme2] {
color: var(--clr-slate-500);
font-size: 0.82rem;
}
/* /Components/Shared/Modals/ConversationFilesModal.razor.rz.scp.css */
/* The field files are dropped on: a tinted area, no outline (docs/DESIGN-SYSTEM.md §1); a file held over it turns it
primary with the soft glow of a selected state (§5a). */
.cfm-drop[b-a0pqkjxcba] {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 2rem 1.5rem;
border-radius: var(--radius-xl);
background: var(--surface-sunken);
color: var(--text-muted);
text-align: center;
transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.cfm-drop:hover[b-a0pqkjxcba] {
background: var(--surface-track);
}
.cfm-drop.is-over[b-a0pqkjxcba] {
background: var(--primary-soft);
color: var(--primary);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.16);
}
.cfm-drop.is-busy[b-a0pqkjxcba] {
opacity: 0.7;
}
/* The field reached with the keyboard: the ring goes on the area it lies over. */
.cfm-drop:has(:focus-visible)[b-a0pqkjxcba] {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.cfm-drop-title[b-a0pqkjxcba] {
margin-top: 0.35rem;
font-weight: 600;
color: var(--text);
}
.cfm-drop-or[b-a0pqkjxcba] {
font-size: 0.82rem;
}
.cfm-drop-pick[b-a0pqkjxcba] {
margin-top: 0.25rem;
pointer-events: none;
}
/* InputFile renders the element, so the rule reaches it through ::deep: the whole area is the field. */
.cfm-drop[b-a0pqkjxcba] .cfm-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.cfm-drop[b-a0pqkjxcba] .cfm-input:disabled {
cursor: progress;
}
.cfm-types[b-a0pqkjxcba] {
margin: 0.75rem 0 0;
font-size: 0.82rem;
line-height: 1.5;
color: var(--text-muted);
}
.cfm-progress[b-a0pqkjxcba] {
margin-top: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.cfm-progress-line[b-a0pqkjxcba] {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: 0.85rem;
color: var(--text-secondary);
}
.cfm-progress-track[b-a0pqkjxcba] {
height: 7px;
border-radius: var(--radius-xs);
background: var(--surface-track);
overflow: hidden;
}
.cfm-progress-fill[b-a0pqkjxcba] {
height: 100%;
border-radius: var(--radius-xs);
background: var(--primary);
transition: width 0.2s ease;
}
.cfm-refused[b-a0pqkjxcba] {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 0.85rem;
color: var(--danger-text);
}
.cfm-refused li[b-a0pqkjxcba] {
display: flex;
align-items: flex-start;
gap: 0.4rem;
}
.cfm-files[b-a0pqkjxcba] {
margin-top: 1.25rem;
}
@media (prefers-reduced-motion: reduce) {
.cfm-progress-fill[b-a0pqkjxcba] {
transition: none;
}
}
/* /Components/Shared/Modals/CreateApiTokenModal.razor.rz.scp.css */
.apit-hint[b-99meoj40pu] {
font-weight: 400;
color: var(--clr-slate-400);
font-size: 0.78rem;
}
/* ── Reveal header ───────────────────────────────────────── */
.apit-reveal-header[b-99meoj40pu] {
display: flex;
align-items: flex-start;
gap: 0.85rem;
margin-bottom: 1.25rem;
}
.apit-reveal-icon[b-99meoj40pu] {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--clr-green-50);
color: var(--clr-green-600);
display: flex;
align-items: center;
justify-content: center;
}
.apit-reveal-header-text[b-99meoj40pu] {
flex: 1;
min-width: 0;
}
.apit-reveal-header-text h3[b-99meoj40pu] {
margin: 0 0 0.25rem 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--clr-slate-900);
}
.apit-reveal-header-text p[b-99meoj40pu] {
margin: 0;
font-size: 0.85rem;
line-height: 1.45;
color: var(--clr-slate-600);
}
.apit-reveal-header-text p strong[b-99meoj40pu] {
color: var(--clr-slate-800);
font-weight: 600;
}
/* ── Token field ─────────────────────────────────────────── */
.apit-reveal-label[b-99meoj40pu] {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: var(--clr-slate-700);
margin-bottom: 0.4rem;
}
.apit-token-field[b-99meoj40pu] {
display: flex;
align-items: stretch;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--surface);
overflow: hidden;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.apit-token-field:focus-within[b-99meoj40pu] {
border-color: var(--clr-blue-400);
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
.apit-token-input[b-99meoj40pu] {
flex: 1;
min-width: 0;
padding: 0.65rem 0.85rem;
border: 0;
outline: 0;
background: transparent;
color: var(--clr-slate-900);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85rem;
line-height: 1.4;
-webkit-user-select: all;
user-select: all;
}
.apit-token-copy[b-99meoj40pu] {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0 0.85rem;
border: 0;
border-left: 1px solid var(--clr-slate-200);
background: var(--clr-slate-50);
color: var(--clr-slate-700);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.apit-token-copy:hover[b-99meoj40pu] {
background: var(--surface-hover);
color: var(--clr-slate-900);
}
.apit-token-copy:active[b-99meoj40pu] {
background: var(--clr-slate-200);
}
.apit-token-copy.is-copied[b-99meoj40pu] {
background: var(--clr-green-50);
color: var(--clr-green-700);
}
.apit-token-copy:focus-visible[b-99meoj40pu] {
outline: 2px solid var(--clr-blue-400);
outline-offset: -2px;
}
/* /Components/Shared/Modals/CreateUserModal.razor.rz.scp.css */
.cum-toggle-hint[b-4fu813wtug] {
display: block;
margin-bottom: 0.6rem;
}
/* /Components/Shared/Modals/DangerZoneModal.razor.rz.scp.css */
.dz-hint[b-8gx8e1c0jy] {
margin: 0 0 1rem;
}
.dz-extra[b-8gx8e1c0jy] {
margin-bottom: 1rem;
}
.dz-actions[b-8gx8e1c0jy] {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.dz-action[b-8gx8e1c0jy] {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.dz-action .btn[b-8gx8e1c0jy] {
width: 100%;
justify-content: center;
}
.dz-action-desc[b-8gx8e1c0jy] {
font-size: 0.8rem;
color: var(--clr-slate-500);
}
/* /Components/Shared/Modals/DefinitionOfDoneModal.razor.rz.scp.css */
.dod-modal-title[b-5mfkwg91gd] {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.35rem;
font-size: 1.05rem;
color: var(--clr-slate-800);
}
.dod-modal-title-icon[b-5mfkwg91gd] {
color: var(--clr-amber-700);
flex-shrink: 0;
}
.dod-modal-task[b-5mfkwg91gd] {
margin: 0 0 0.9rem;
font-size: 0.85rem;
color: var(--clr-slate-500);
}
/* Keep the line breaks the author typed – criteria are often a small list. */
.dod-modal-criteria[b-5mfkwg91gd] {
white-space: pre-wrap;
padding: 0.7rem 0.85rem;
background: var(--clr-amber-50);
border-left: 3px solid var(--clr-amber-500);
border-radius: 0 8px 8px 0;
color: var(--clr-slate-800);
font-size: 0.88rem;
line-height: 1.6;
}
.dod-modal-footer[b-5mfkwg91gd] {
display: flex;
justify-content: flex-end;
margin-top: 1.25rem;
}
/* /Components/Shared/Modals/DeleteConfirmModal.razor.rz.scp.css */
.delete-lifecycle[b-b6f39p12si] {
margin-top: 0.9rem;
font-size: 0.82rem;
color: var(--clr-slate-500);
}
/* /Components/Shared/Modals/DraftDepthModal.razor.rz.scp.css */
/* The draft's depth: three tiles, the chosen one on the primary tint, each with its time on the right. */
.dd-body[b-20zhkr3q1v] {
width: min(32rem, 100%);
}
/* Speakers nobody named yet: the transcript's own amber note, so it reads as the same kind of fact. */
.dd-note[b-20zhkr3q1v] {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 0.7rem;
padding: 0.45rem 0.7rem;
border-radius: var(--radius-md);
background: var(--clr-amber-50);
color: var(--clr-amber-800);
font-size: 0.82rem;
line-height: 1.4;
}
.dd-options[b-20zhkr3q1v] {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.dd-option[b-20zhkr3q1v] {
display: flex;
align-items: center;
gap: 0.7rem;
width: 100%;
padding: 0.65rem 0.8rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-xs);
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
transition: background 0.12s ease, box-shadow 0.12s ease;
}
.dd-option:hover[b-20zhkr3q1v] {
background: var(--surface-hover);
box-shadow: var(--shadow-sm);
}
.dd-option:focus-visible[b-20zhkr3q1v] {
outline: 2px solid var(--primary);
outline-offset: 1px;
}
.dd-option--picked[b-20zhkr3q1v],
.dd-option--picked:hover[b-20zhkr3q1v] {
background: var(--primary-soft);
}
.dd-option--picked[b-20zhkr3q1v] svg {
color: var(--primary);
}
.dd-text[b-20zhkr3q1v] {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.dd-label[b-20zhkr3q1v] {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
}
.dd-hint[b-20zhkr3q1v] {
color: var(--text-muted);
font-size: 0.82rem;
line-height: 1.3;
}
.dd-badge[b-20zhkr3q1v] {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.72rem;
font-weight: 600;
color: var(--primary);
}
.dd-time[b-20zhkr3q1v] {
flex-shrink: 0;
color: var(--text-muted);
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
}
/* /Components/Shared/Modals/EditCalendarEntryModal.razor.rz.scp.css */
/* ── Sections ────────────────────────────────────────── */
/* The edge-to-edge dividers come from EntityFormModal's FullBleed; the padding here is what
keeps the fields off the dialog edge. */
.cem-section[b-v8g7cjn99a] {
padding: 0.875rem 1.5rem;
}
.cem-section-label[b-v8g7cjn99a] {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--clr-slate-400);
margin: 0 0 0.65rem 0;
}
.cem-divider[b-v8g7cjn99a] {
height: 1px;
background: var(--clr-slate-100);
margin: 0;
}
/* ── Recurrence row (type + interval side by side) ───── */
.cem-recurrence-row[b-v8g7cjn99a] {
display: flex;
gap: 1rem;
align-items: flex-end;
}
/* ── Inline rows (Jede X Tage / Wochen …) ────────────── */
.cem-inline-row[b-v8g7cjn99a] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.cem-num-input[b-v8g7cjn99a] {
width: 72px;
text-align: center;
}
/* ── Date row (date + time) ──────────────────────────── */
.cem-date-row[b-v8g7cjn99a] {
display: flex;
gap: 1rem;
}
.cem-date-row .form-group[b-v8g7cjn99a] {
flex: 1;
margin-bottom: 0;
}
/* ── Toggle row (label + switch) ─────────────────────── */
.cem-toggle-row[b-v8g7cjn99a] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.75rem;
}
.cem-toggle-hint[b-v8g7cjn99a] {
font-size: 0.82rem;
color: var(--clr-slate-500);
margin: 0;
line-height: 1.45;
}
/* ── Formerly inline; after the rules they adjust ── */
.cem-last[b-v8g7cjn99a] {
margin-bottom: 0;
}
.cem-toggle-label[b-v8g7cjn99a] {
margin-bottom: 0.2rem;
}
.cem-below[b-v8g7cjn99a] {
margin-top: 0.75rem;
}
.cem-grow[b-v8g7cjn99a] {
flex: 1;
min-width: 0;
}
/* ── People ──────────────────────────────────────────── */
.cem-people[b-v8g7cjn99a] {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.cem-people-edit[b-v8g7cjn99a] {
margin-bottom: 0.6rem;
}
/* ── Tabs ────────────────────────────────────────────── */
/* A section of another tab stays in the page, hidden — the live editor must not be built anew on every switch. */
.cem-hidden[b-v8g7cjn99a] {
display: none;
}
/* ── The free text ───────────────────────────────────── */
/* The editor is built in the browser, so its parts are reached through ::deep. It has its tab to itself:
tall enough to write in from the start, about as tall as the "Termin" tab so the dialog does not jump;
it grows with what is written, and the dialog's scroll region carries the rest. */
.cem-text[b-v8g7cjn99a] .ql-editor {
min-height: 16rem;
}
.cem-text-state[b-v8g7cjn99a] {
margin: 0.4rem 0 0;
font-size: 0.72rem;
color: var(--clr-slate-400);
text-align: right;
}
.cem-text-state.is-failed[b-v8g7cjn99a] {
color: var(--clr-red-600);
}
/* Who else has the entry open, at the far end of the heading. */
.cem-presence[b-v8g7cjn99a] {
margin-left: auto;
}
/* ── Reading ─────────────────────────────────────────── */
.cem-read[b-v8g7cjn99a] {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.cem-read-row[b-v8g7cjn99a] {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.9rem;
color: var(--clr-slate-700);
}
.cem-read-row > :first-child[b-v8g7cjn99a] {
flex-shrink: 0;
color: var(--clr-slate-400);
}
.cem-read-people[b-v8g7cjn99a] {
align-items: flex-start;
}
.cem-read-dot[b-v8g7cjn99a] {
width: 10px;
height: 10px;
margin: 0 3px;
border-radius: 50%;
}
.cem-read-text[b-v8g7cjn99a] {
margin-top: 0.4rem;
padding-top: 0.8rem;
border-top: 1px solid var(--clr-slate-100);
font-size: 0.9rem;
line-height: 1.55;
color: var(--clr-slate-800);
overflow-wrap: anywhere;
}
.cem-read-text[b-v8g7cjn99a] p,
.cem-read-text[b-v8g7cjn99a] ul,
.cem-read-text[b-v8g7cjn99a] ol,
.cem-read-text[b-v8g7cjn99a] blockquote {
margin: 0 0 0.5rem;
}
.cem-read-text[b-v8g7cjn99a] > :last-child {
margin-bottom: 0;
}
/* /Components/Shared/Modals/EditChecklistItemModal.razor.rz.scp.css */
/* ── Header icon ──────────────────────────────────────── */
.ecim-header-icon[b-bi2yo5epbh] {
color: var(--clr-blue-500);
flex-shrink: 0;
}
/* ── Body ─────────────────────────────────────────────── */
/* Scrolling comes from .modal-body, which takes the leftover height instead of
guessing at what header and footer occupy. */
.ecim-body[b-bi2yo5epbh] {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0 -1.5rem;
padding: 0.5rem 1.5rem 0;
}
/* ── Field groups ─────────────────────────────────────── */
.ecim-field[b-bi2yo5epbh] {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-bottom: 0.5rem;
}
.ecim-label[b-bi2yo5epbh] {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--clr-slate-600);
margin: 0;
}
.ecim-required[b-bi2yo5epbh] {
color: var(--clr-red-500);
font-weight: 700;
}
.ecim-label-icon[b-bi2yo5epbh] {
flex-shrink: 0;
}
.ecim-label-icon--amber[b-bi2yo5epbh] {
color: var(--clr-amber-500);
}
.ecim-label-icon--blue[b-bi2yo5epbh] {
color: var(--clr-blue-500);
}
/* ── Decorated input (Bezeichnung) ────────────────────── */
.ecim-input-wrap[b-bi2yo5epbh] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
border: 1.5px solid var(--clr-slate-200);
border-radius: var(--radius-md);
background: var(--clr-slate-50);
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ecim-input-wrap.focused[b-bi2yo5epbh] {
border-color: var(--clr-blue-500);
background: var(--surface);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.1);
}
.ecim-input-icon[b-bi2yo5epbh] {
color: var(--clr-slate-400);
flex-shrink: 0;
}
.ecim-input[b-bi2yo5epbh] {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 0.88rem;
color: var(--clr-slate-800);
font-family: inherit;
min-width: 0;
}
.ecim-input[b-bi2yo5epbh]::placeholder {
color: var(--clr-slate-400);
}
/* ── Article chip (selected state) ────────────────────── */
.ecim-article-chip[b-bi2yo5epbh] {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.6rem 0.75rem;
background: var(--clr-blue-50);
border: 1px solid var(--clr-blue-200);
border-radius: var(--radius-md);
transition: background 0.15s;
}
.ecim-article-chip--tip[b-bi2yo5epbh] {
background: var(--clr-amber-50);
border-color: var(--clr-amber-200);
}
.ecim-article-chip-icon[b-bi2yo5epbh] {
color: var(--clr-blue-500);
flex-shrink: 0;
margin-top: 0.1rem;
}
.ecim-article-chip--tip .ecim-article-chip-icon[b-bi2yo5epbh] {
color: var(--clr-amber-500);
}
.ecim-article-chip-text[b-bi2yo5epbh] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.ecim-article-chip-title[b-bi2yo5epbh] {
font-size: 0.85rem;
font-weight: 500;
color: var(--clr-slate-800);
line-height: 1.35;
}
.ecim-article-chip-summary[b-bi2yo5epbh] {
font-size: 0.78rem;
color: var(--clr-slate-500);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ecim-article-chip-remove[b-bi2yo5epbh] {
flex-shrink: 0;
margin-left: auto;
}
/* The field that links an article or a tip, with its list, is SearchCombobox. */
/* /Components/Shared/Modals/EditDelegationModal.razor.rz.scp.css */
.edm-dates[b-3btontxwwj] {
display: flex;
gap: 0.6rem;
}
.edm-date[b-3btontxwwj] {
flex: 1;
}
/* /Components/Shared/Modals/EditFileSlotModal.razor.rz.scp.css */
/* No width of its own: .dialog is 420px wide with 1.5rem padding, and anything wider than the
remaining 372px is simply clipped by its overflow: hidden. Heading and buttons are
EntityFormModal's. */
.slot-modal-check[b-6re5kig1gs] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-sunken);
cursor: pointer;
line-height: 1.4;
}
.slot-modal-check input[type="checkbox"][b-6re5kig1gs] {
flex-shrink: 0;
}
.slot-modal-error[b-6re5kig1gs] {
display: block;
margin-top: 0.3rem;
font-size: 0.8rem;
color: var(--clr-red-600);
}
/* /Components/Shared/Modals/EditFormDesignModal.razor.rz.scp.css */
/* The QR block: a framed group inside the form, with three columns that wrap on a narrow dialog. */
.efd-qr[b-wvsdd85adf] {
border: 1px solid var(--clr-slate-200);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
}
.efd-qr-legend[b-wvsdd85adf] {
font-size: 0.85rem;
font-weight: 600;
padding: 0 0.4rem;
}
.efd-qr-toggle[b-wvsdd85adf] {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.efd-hint[b-wvsdd85adf] {
font-size: 0.8rem;
color: var(--clr-slate-500);
margin: 0 0 0.75rem;
}
.efd-qr-grid[b-wvsdd85adf] {
display: flex;
gap: 1rem;
align-items: flex-start;
flex-wrap: wrap;
}
.efd-qr-size[b-wvsdd85adf] {
min-width: 160px;
}
.efd-qr-col[b-wvsdd85adf] {
flex: 1;
min-width: 220px;
}
.efd-sub-label[b-wvsdd85adf] {
display: block;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.efd-size-buttons[b-wvsdd85adf] {
display: flex;
gap: 0.4rem;
}
.efd-size-buttons .btn[b-wvsdd85adf] {
flex: 1;
}
.efd-check[b-wvsdd85adf] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 400;
margin-bottom: 0.2rem;
}
.efd-custom[b-wvsdd85adf] {
margin-top: 0.4rem;
font-size: 0.85rem;
}
.efd-vars[b-wvsdd85adf] {
font-size: 0.7rem;
color: var(--clr-slate-400);
}
/* ── HTML ── */
.efd-html-label[b-wvsdd85adf] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.efd-html-load[b-wvsdd85adf] {
font-weight: 400;
}
.efd-file-button[b-wvsdd85adf] {
cursor: pointer;
margin: 0;
}
.efd-html[b-wvsdd85adf] {
font-family: monospace;
font-size: 0.85rem;
}
.efd-warning[b-wvsdd85adf] {
font-size: 0.8rem;
color: var(--clr-orange-700);
margin-top: 0.4rem;
}
/* /Components/Shared/Modals/EditRoleModal.razor.rz.scp.css */
/* ── System-role note ─────────────────────────────────── */
/* Sits above the form, outside the scroll region, so it stays in view. */
.erm-system-note[b-y8d0f4hqkj] {
flex-shrink: 0;
}
.erm-system-note[b-y8d0f4hqkj] svg {
flex-shrink: 0;
margin-top: 0.1rem;
}
/* ── Sections ─────────────────────────────────────────── */
/* The edge-to-edge dividers come from EntityFormModal's FullBleed; the padding here is what
keeps the fields off the dialog edge. */
.erm-section[b-y8d0f4hqkj] {
padding: 0.875rem 1.5rem;
}
.erm-section--perms[b-y8d0f4hqkj] {
padding-bottom: 0.25rem;
}
.erm-section-label[b-y8d0f4hqkj] {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--clr-slate-400);
margin: 0 0 0.65rem 0;
}
.erm-divider[b-y8d0f4hqkj] {
height: 1px;
background: var(--clr-slate-100);
margin: 0;
}
/* ── Permission list ─────────────────────────────────── */
/* No scroll region of its own – the body scrolls, so both lists stay whole and the
dialog has a single scrollbar instead of nested ones. */
.perm-list[b-y8d0f4hqkj] {
display: flex;
flex-direction: column;
border: 1px solid var(--clr-slate-100);
border-radius: var(--radius-md);
overflow: hidden;
}
.perm-row[b-y8d0f4hqkj] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--clr-slate-100);
transition: background 0.1s;
}
.perm-row:last-child[b-y8d0f4hqkj] {
border-bottom: none;
}
.perm-row:hover[b-y8d0f4hqkj] {
background: var(--surface-hover);
}
.perm-label[b-y8d0f4hqkj] {
font-size: 0.875rem;
font-weight: 500;
color: var(--clr-slate-700);
white-space: nowrap;
}
/* Special rights carry an explanation, so the row stacks label over hint and the toggle sits apart. */
.perm-row--special[b-y8d0f4hqkj] {
align-items: flex-start;
}
/* "Alle Inhalte sehen" is an option of the administrator right, so it hangs below it. */
.perm-row--sub[b-y8d0f4hqkj] {
padding-left: 1.75rem;
}
.perm-special-text[b-y8d0f4hqkj] {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.perm-row--special .perm-label[b-y8d0f4hqkj] {
white-space: normal;
}
.perm-hint[b-y8d0f4hqkj] {
font-size: 0.78rem;
line-height: 1.35;
color: var(--clr-slate-500);
margin: 0.4rem 0 0;
}
.perm-special-text .perm-hint[b-y8d0f4hqkj] {
margin: 0;
}
/* /Components/Shared/Modals/EditSeriesModal.razor.rz.scp.css */
/* ── Sections ────────────────────────────────────────── */
/* The edge-to-edge dividers come from EntityFormModal's FullBleed; the padding here is what
keeps the fields off the dialog edge. */
.esm-section[b-l53s8cwe5e] {
padding: 0.875rem 1.5rem;
}
.esm-section-label[b-l53s8cwe5e] {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--clr-slate-400);
margin: 0 0 0.65rem 0;
}
.esm-divider[b-l53s8cwe5e] {
height: 1px;
background: var(--clr-slate-100);
margin: 0;
}
/* ── Recurrence row (type + interval side by side) ───── */
.esm-recurrence-row[b-l53s8cwe5e] {
display: flex;
gap: 1rem;
align-items: flex-end;
}
/* ── Inline rows (Alle X Tage / Wochen …) ────────────── */
.esm-inline-row[b-l53s8cwe5e] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.esm-num-input[b-l53s8cwe5e] {
width: 72px;
text-align: center;
}
/* ── Date row (start + time) ─────────────────────────── */
.esm-date-row[b-l53s8cwe5e] {
display: flex;
gap: 1rem;
margin-bottom: 0.75rem;
}
.esm-date-row .form-group[b-l53s8cwe5e] {
flex: 1;
}
/* ── Formerly inline ── */
.esm-last[b-l53s8cwe5e] {
margin-bottom: 0;
}
.esm-grow[b-l53s8cwe5e] {
flex: 1;
min-width: 0;
}
/* /Components/Shared/Modals/EditTagModal.razor.rz.scp.css */
/* Live preview of the tag as it will appear once saved. */
.tag-color-preview[b-jnnpprt1st] {
margin-top: 0.6rem;
}
/* /Components/Shared/Modals/EditUserModal.razor.rz.scp.css */
/* The role and group toggles of the Rollen and Gruppen tabs: one per line. Wrapped side by side, a
toggle's knob sat against the previous label and the list read as one run of text. */
.role-checkbox-list[b-3am8ld3htm] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
}
.eum-title[b-3am8ld3htm] {
margin-bottom: 0.75rem;
}
.eum-locked[b-3am8ld3htm] {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.eum-locked-text[b-3am8ld3htm] {
flex: 1;
}
/* The gap under the tab strip, on each tab's scroll region. Qualified by .modal-body so it outranks the
region's own -3px margin (ModalContainer), which gives back the room kept for focus rings. */
.modal-body.eum-tab[b-3am8ld3htm] {
margin-top: 0.75rem;
}
/* Profil tab: the picture in its own column left of all fields, so every field and hint shares one
left edge. */
.eum-identity[b-3am8ld3htm] {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.eum-identity-fields[b-3am8ld3htm] {
flex: 1;
min-width: 0;
}
/* The picture's top edge on the name field's, not on its label: pushed down by one label line
(0.88rem at the body's 1.6 line height) plus the label's 0.3rem gap — both from .form-group label. */
.eum-identity[b-3am8ld3htm] .avatar-editor {
flex-shrink: 0;
margin-top: calc(0.88rem * 1.6 + 0.3rem);
}
.eum-note[b-3am8ld3htm] {
font-size: 0.78rem;
color: var(--clr-slate-500);
}
.eum-groups-note[b-3am8ld3htm] {
display: block;
font-size: 0.82rem;
margin: 0.5rem 0 0;
}
.eum-empty[b-3am8ld3htm] {
font-size: 0.85rem;
color: var(--text-muted);
}
.eum-role[b-3am8ld3htm] {
display: flex;
align-items: center;
gap: 0.35rem;
}
.eum-role-source[b-3am8ld3htm] {
font-size: 0.7rem;
color: var(--clr-slate-500);
}
/* /Components/Shared/Modals/EditWebhookConnectionModal.razor.rz.scp.css */
/* Heading, scroll region and footer all belong to EntityFormModal now – what is left here
styles the fields inside it. */
.ewc-validation[b-saf3l8f7ql] {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--clr-red-600);
font-size: 0.82rem;
line-height: 1.4;
}
.ewc-required[b-saf3l8f7ql] {
color: var(--clr-red-500);
font-weight: 700;
}
.ewc-invalid[b-saf3l8f7ql] {
border-color: var(--clr-red-400) !important;
background: var(--clr-red-50);
}
.ewc-invalid:focus[b-saf3l8f7ql] {
box-shadow: 0 0 0 3px rgba(224, 90, 84, 0.12);
outline: none;
}
.ewc-mono[b-saf3l8f7ql] {
font-family: monospace;
font-size: 0.82rem;
}
.ewc-hint[b-saf3l8f7ql] {
font-size: 0.78rem;
color: var(--clr-slate-400);
font-weight: 400;
}
/* Hints that follow a field describe it, so they sit below with a little air. */
.form-group input + .ewc-hint[b-saf3l8f7ql],
.form-group textarea + .ewc-hint[b-saf3l8f7ql] {
display: block;
margin-top: 0.25rem;
line-height: 1.35;
}
/* /Components/Shared/Modals/FinalizeProtocolModal.razor.rz.scp.css */
.fz-intro[b-lm51j0teag] {
margin: 0;
}
/* The question, how many have answered it, and the way to add who is missing — one line. */
.fz-head[b-lm51j0teag] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1.25rem 0 0.6rem;
}
.fz-head h4[b-lm51j0teag] {
margin: 0;
font-size: 0.92rem;
font-weight: 600;
color: var(--text);
}
.fz-add[b-lm51j0teag] {
margin-left: auto;
}
.fz-empty[b-lm51j0teag] {
margin: 0;
color: var(--text-muted);
font-size: 0.88rem;
}
/* The attendance list as the paper one is read: a name, and beside it the signature or the place
for one. */
.fz-list[b-lm51j0teag] {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.fz-row[b-lm51j0teag] {
display: grid;
grid-template-columns: minmax(0, 1fr) 9.5rem 9.5rem;
align-items: center;
gap: 0.75rem;
min-height: 3.2rem;
padding: 0.35rem 0.35rem 0.35rem 0.75rem;
border-radius: var(--radius-md);
background: var(--surface-raised);
box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.fz-name[b-lm51j0teag] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
font-weight: 600;
}
.fz-name span[b-lm51j0teag] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The same slot the attendance list on the page has: dashed, inviting a signature. */
.fz-slot[b-lm51j0teag] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
min-height: 2.5rem;
padding: 0 0.6rem;
border: 1px dashed var(--border);
border-radius: var(--radius-md);
background: none;
color: var(--text-muted);
font-family: inherit;
font-size: 0.8rem;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.fz-slot:hover:not(:disabled)[b-lm51j0teag] {
border-color: var(--clr-royal-400, var(--clr-slate-400));
color: var(--text);
}
.fz-slot:disabled[b-lm51j0teag] {
cursor: default;
opacity: 0.6;
}
.fz-slot.is-disabled[b-lm51j0teag] {
cursor: default;
color: var(--text-faint);
font-size: 0.75rem;
}
.fz-sig[b-lm51j0teag] {
margin: 0;
}
.fz-sig img[b-lm51j0teag] {
display: block;
width: 100%;
height: 2.3rem;
object-fit: contain;
/* The pad draws dark ink; it needs a light ground to stay legible in dark mode. */
background: #fff;
border-radius: var(--radius-sm);
}
.fz-sig figcaption[b-lm51j0teag] {
margin-top: 0.15rem;
font-size: 0.7rem;
color: var(--text-muted);
text-align: right;
}
/* Somebody not present has no fields to sign; the status says why, across both columns. */
.fz-absent[b-lm51j0teag] {
grid-column: 2 / -1;
justify-self: end;
}
/* The column labels above the list — the rows themselves carry no headings. */
.fz-columns[b-lm51j0teag] {
min-height: 0;
padding-top: 0;
padding-bottom: 0.25rem;
background: none;
box-shadow: none;
font-size: var(--text-label-size);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--text-label);
}
.fz-cell[b-lm51j0teag] {
display: block;
min-width: 0;
}
/* On a phone the name takes its own line and the two fields sit side by side under it. */
@media (max-width: 520px) {
.fz-row[b-lm51j0teag] {
grid-template-columns: 1fr 1fr;
}
.fz-name[b-lm51j0teag] {
grid-column: 1 / -1;
}
.fz-absent[b-lm51j0teag] {
grid-column: 1 / -1;
justify-self: start;
}
.fz-columns > span:first-child[b-lm51j0teag] {
display: none;
}
}
/* /Components/Shared/Modals/FlowNoticeModal.razor.rz.scp.css */
/* ::deep – the icon markup comes from the Icon component, so the scope attribute sits on the header. */
.dialog-header[b-b8tntgkdt3] .fn-icon-warning {
color: var(--clr-amber-600);
flex-shrink: 0;
}
.dialog-header[b-b8tntgkdt3] .fn-icon-approval {
color: var(--clr-blue-500);
flex-shrink: 0;
}
.fn-body[b-b8tntgkdt3] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.fn-project[b-b8tntgkdt3] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--text-muted);
}
/* The author's text as they wrote it: line breaks are part of a message. */
.fn-text[b-b8tntgkdt3] {
margin: 0;
padding: 0.8rem 1rem;
background: var(--clr-amber-50);
border-radius: var(--radius-md);
color: var(--text-body);
font-weight: 500;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.fn-text.is-approval[b-b8tntgkdt3] {
background: var(--surface-sunken);
}
.fn-comment-label[b-b8tntgkdt3] {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
}
.fn-comment[b-b8tntgkdt3] {
resize: vertical;
}
.fn-later[b-b8tntgkdt3] {
margin-right: auto;
}
/* /Components/Shared/Modals/FocusEditForm.razor.rz.scp.css */
.fokus-no-tags[b-ysgkpamk7e] {
font-size: 0.82rem;
color: var(--clr-slate-400);
}
.fokus-tag-grid[b-ysgkpamk7e] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
max-height: 160px;
overflow-y: auto;
padding: 0.6rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--clr-slate-50);
}
/* /Components/Shared/Modals/FocusList.razor.rz.scp.css */
.fokus-list[b-0tjv1sxa2w] {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 320px;
overflow-y: auto;
margin-bottom: 0.75rem;
}
.fokus-create-btn[b-0tjv1sxa2w] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
padding: 0.55rem;
border-radius: var(--radius-md);
border: 1.5px solid transparent;
background: var(--btn-fill);
color: var(--clr-slate-500);
font-size: 0.85rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.fokus-create-btn:hover[b-0tjv1sxa2w] {
color: var(--clr-blue-600);
background: var(--clr-blue-50);
}
/* /Components/Shared/Modals/FocusRow.razor.rz.scp.css */
.fokus-item[b-yyaxt89i8h] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: var(--radius-md);
border: 1.5px solid var(--clr-slate-200);
user-select: none;
}
/* A row that picks itself: the radio sits at the top of a two-line row. */
.fokus-item--selectable[b-yyaxt89i8h] {
align-items: flex-start;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.fokus-item--selectable:hover[b-yyaxt89i8h] {
border-color: var(--clr-blue-300);
background: var(--surface-hover);
}
.fokus-item.selected[b-yyaxt89i8h] {
border-color: var(--clr-blue-500);
background: var(--clr-blue-50);
}
.fokus-radio[b-yyaxt89i8h] {
flex-shrink: 0;
margin-top: 2px;
}
.radio-dot[b-yyaxt89i8h] {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--clr-slate-300);
/* The surface token: a white dot stood out of the dark rows. */
background: var(--surface);
transition: border-color 0.15s, background 0.15s;
position: relative;
}
.radio-dot.active[b-yyaxt89i8h] {
border-color: var(--clr-blue-500);
background: var(--clr-blue-500);
}
.radio-dot.active[b-yyaxt89i8h]::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: white;
}
.fokus-item-content[b-yyaxt89i8h] {
flex: 1;
min-width: 0;
}
.fokus-item-name[b-yyaxt89i8h] {
font-size: 0.9rem;
font-weight: 600;
color: var(--clr-slate-800);
display: block;
margin-bottom: 0.3rem;
}
.fokus-item-sub[b-yyaxt89i8h] {
font-size: 0.8rem;
color: var(--clr-slate-400);
}
.fokus-item-tags[b-yyaxt89i8h] {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.fokus-item-actions[b-yyaxt89i8h] {
display: flex;
gap: 0.2rem;
flex-shrink: 0;
align-self: center;
}
/* The action buttons are written by the calling dialog, so they carry its scope — reached with ::deep. */
.fokus-item-actions[b-yyaxt89i8h] .btn-icon-small {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
border: none;
background: none;
color: var(--clr-slate-400);
cursor: pointer;
transition: background 0.15s, color 0.15s;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.fokus-item-actions[b-yyaxt89i8h] .btn-icon-small:hover,
.fokus-item-actions[b-yyaxt89i8h] .btn-icon-small:focus-visible {
background: var(--surface-hover);
color: var(--clr-slate-700);
outline: none;
}
.fokus-item-actions[b-yyaxt89i8h] .btn-icon-danger {
color: var(--clr-red-400);
}
.fokus-item-actions[b-yyaxt89i8h] .btn-icon-danger:hover,
.fokus-item-actions[b-yyaxt89i8h] .btn-icon-danger:focus-visible {
background: var(--clr-red-50);
color: var(--clr-red-600);
}
/* /Components/Shared/Modals/FokusModal.razor.rz.scp.css */
.fokus-group-empty[b-qbw8ds66fw] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 2rem 1rem;
color: var(--clr-slate-400);
font-size: 0.85rem;
text-align: center;
}
.fokus-group-empty p[b-qbw8ds66fw] {
margin: 0;
}
/* /Components/Shared/Modals/FollowUpProtocolModal.razor.rz.scp.css */
/* Date, start and end read as one line: they are one fact about the meeting, not three. Same shape as
NewProtocolModal, because this dialog asks the same question about the next meeting. */
.fu-grid[b-ezkbyef8ry] {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 0 0.75rem;
}
.fu-optional[b-ezkbyef8ry] {
color: var(--text-faint);
font-weight: 400;
}
/* The one thing that *is* a decision: carrying the decisions forward is right for a jour fixe and wrong
for a series of acceptances. Above the note, because it is a choice rather than a fact. */
.fu-carry[b-ezkbyef8ry] {
display: flex;
align-items: flex-start;
gap: 0.45rem;
margin-top: 1.25rem;
font-size: 0.88rem;
cursor: pointer;
}
.fu-carry-hint[b-ezkbyef8ry] {
color: var(--text-faint);
}
/* What travels without being asked. A quiet note rather than a list of checkboxes: none of it is a
decision this dialog needs to put up, and all of it is worth knowing before pressing Anlegen. */
.fu-note[b-ezkbyef8ry] {
display: flex;
align-items: flex-start;
gap: 0.4rem;
margin: 1.25rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--border-subtle);
color: var(--text-label);
font-size: 0.82rem;
line-height: 1.4;
}
.fu-note svg[b-ezkbyef8ry] {
flex-shrink: 0;
margin-top: 0.1rem;
}
/* /Components/Shared/Modals/FollowUpStepModal.razor.rz.scp.css */
/* ::deep – the icon markup comes from the Icon component, so the scope attribute
sits on the header, not on the svg. */
.dialog-header[b-9o2wb0dwr2] .fus-header-icon {
color: var(--clr-blue-500);
flex-shrink: 0;
}
.fus-hint[b-9o2wb0dwr2] {
margin: 0;
}
.fus-options[b-9o2wb0dwr2] {
display: flex;
flex-direction: column;
margin-top: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.fus-option[b-9o2wb0dwr2] {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.6rem 0.75rem;
background: var(--surface);
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.15s;
}
.fus-option:not(:last-child)[b-9o2wb0dwr2] {
border-bottom: 1px solid var(--clr-slate-100);
}
.fus-option:hover[b-9o2wb0dwr2] {
background: var(--surface-hover);
}
.fus-option:focus-visible[b-9o2wb0dwr2] {
outline: 2px solid var(--clr-blue-500);
outline-offset: -2px;
}
.fus-option[b-9o2wb0dwr2] .fus-option-icon {
color: var(--clr-slate-400);
flex-shrink: 0;
}
.fus-option-main[b-9o2wb0dwr2] {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
min-width: 0;
}
.fus-option-name[b-9o2wb0dwr2] {
font-weight: 600;
}
.fus-option-desc[b-9o2wb0dwr2] {
font-size: 0.8rem;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fus-option[b-9o2wb0dwr2] .fus-option-arrow {
color: var(--clr-slate-300);
flex-shrink: 0;
transition: color 0.15s, transform 0.15s;
}
.fus-option:hover[b-9o2wb0dwr2] .fus-option-arrow {
color: var(--clr-blue-500);
transform: translateX(2px);
}
/* /Components/Shared/Modals/FormSubmissionHistoryModal.razor.rz.scp.css */
.rev-empty[b-mqgefosk0m] {
font-size: 0.85rem;
color: var(--clr-slate-500);
}
.rev-table[b-mqgefosk0m] {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.rev-table th[b-mqgefosk0m] {
text-align: left;
font-weight: 600;
color: var(--clr-slate-600);
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--clr-slate-200);
}
.rev-table td[b-mqgefosk0m] {
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--clr-slate-100);
color: var(--clr-slate-700);
}
.rev-field-name[b-mqgefosk0m] {
font-weight: 500;
white-space: nowrap;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
}
.rev-field-value[b-mqgefosk0m] {
word-break: break-word;
}
.rev-field-empty[b-mqgefosk0m] {
color: var(--clr-slate-400);
font-style: italic;
}
/* /Components/Shared/Modals/GroupFocusModal.razor.rz.scp.css */
.gfm-title[b-3f670jidth] {
margin-bottom: 0.25rem;
}
.gfm-intro[b-3f670jidth] {
font-size: 0.85rem;
color: var(--clr-slate-500);
margin-bottom: 1rem;
}
.gfm-empty[b-3f670jidth] {
font-size: 0.85rem;
color: var(--clr-slate-400);
padding: 0.5rem 0;
}
.gfm-footer[b-3f670jidth] {
margin-top: 1rem;
}
/* /Components/Shared/Modals/HelpFeedbackModal.razor.rz.scp.css */
/* The article the feedback is about, above the rating. */
.hfb-article[b-z967u1nprd] {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.85rem;
padding: 0.5rem 0.7rem;
background: var(--clr-slate-50);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 0.82rem;
color: var(--clr-slate-600);
}
.hfb-article[b-z967u1nprd] svg {
color: var(--clr-slate-400);
flex-shrink: 0;
}
.hfb-article-title[b-z967u1nprd] {
font-weight: 600;
color: var(--clr-slate-800);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* /Components/Shared/Modals/HideMessageModal.razor.rz.scp.css */
/* The reasons as a list of rows, one click each — the design language's list: no borders, a hover tint. */
.hm-reasons[b-dggx8jv6e8] {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.hm-reason[b-dggx8jv6e8] {
width: 100%;
padding: 0.7rem 0.85rem;
border: none;
border-radius: var(--radius-md);
background: none;
text-align: left;
font: inherit;
font-size: 0.95rem;
color: var(--text);
cursor: pointer;
transition: background 0.12s ease;
}
.hm-reason:hover[b-dggx8jv6e8],
.hm-reason:focus-visible[b-dggx8jv6e8] {
background: var(--surface-hover);
}
.hm-reason.is-active[b-dggx8jv6e8] {
background: var(--surface-hover);
font-weight: 600;
}
.hm-other[b-dggx8jv6e8] {
margin-top: 0.75rem;
margin-bottom: 0;
}
/* /Components/Shared/Modals/IconPickerModal.razor.rz.scp.css */
/* The search sits between the header and the scroll region, so it needs the gap the region does not
carry itself. */
.ipm-search[b-ff6ou0l06m] {
margin-bottom: 0.85rem;
}
.ipm-group + .ipm-group[b-ff6ou0l06m] {
margin-top: 0.9rem;
}
/* The band heading rides along: with three hundred symbols under it, scrolling past the heading
leaves you looking at a grid with nothing saying what it is. Sticky at -3px because the scroll
region carries 3px of padding for focus rings — at 0 a sliver of the grid would show above it. */
.ipm-group-label[b-ff6ou0l06m] {
position: sticky;
top: -3px;
z-index: 1;
background: var(--surface);
padding: 0.35rem 0 0.3rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-faint);
}
/* A grid rather than a wrapping row: every tile carries its German word under the symbol, and words
of different length must not push the columns out of line. */
.ipm-grid[b-ff6ou0l06m] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
gap: 0.3rem;
}
.ipm-choice[b-ff6ou0l06m] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.55rem 0.25rem;
border: 1.5px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ipm-choice:hover[b-ff6ou0l06m] {
background: var(--surface-hover);
color: var(--text);
}
.ipm-choice-label[b-ff6ou0l06m] {
font-size: 0.65rem;
line-height: 1.25;
text-align: center;
/* The page is lang="de", so a long compound hyphenates at a real break instead of being cut
mid-word — "Zusammen-fuehren", not "Zusammenfuehr|en". */
overflow-wrap: break-word;
hyphens: auto;
/* Two lines at most — "Person hinzufügen" must not make its row twice as tall as the others. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ipm-selected[b-ff6ou0l06m] {
border-color: var(--primary);
color: var(--primary);
background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.ipm-empty[b-ff6ou0l06m] {
margin: 0.25rem 0 0;
font-size: 0.85rem;
color: var(--text-secondary);
}
/* /Components/Shared/Modals/InstallAppModal.razor.rz.scp.css */
/* ::deep – the icon markup comes from the Icon component, so the scope attribute sits on the element
around it, not on the svg. */
.dialog-header[b-ad8ulgb14d] .iam-header-icon {
color: var(--primary);
flex-shrink: 0;
}
.iam-device[b-ad8ulgb14d] {
margin-bottom: 0.85rem;
}
.iam-text[b-ad8ulgb14d],
.iam-done[b-ad8ulgb14d] {
margin: 0;
}
.iam-done[b-ad8ulgb14d] {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-body);
font-weight: 500;
}
.iam-done[b-ad8ulgb14d] .icon {
color: var(--clr-green-600);
flex-shrink: 0;
}
.iam-steps[b-ad8ulgb14d] {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin: 0;
padding-left: 1.25rem;
}
.iam-steps li[b-ad8ulgb14d] {
padding-left: 0.2rem;
}
.iam-steps li[b-ad8ulgb14d]::marker {
color: var(--text-muted);
font-weight: 600;
}
.iam-note[b-ad8ulgb14d] {
margin: 0.85rem 0 0;
color: var(--text-muted);
font-size: 0.82rem;
}
/* A control of the browser named in a step: its symbol and its label, set apart from the sentence. Kept on
one line, so a symbol never ends a line and its label starts the next. */
.iam-ui[b-ad8ulgb14d] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--text-body);
font-weight: 600;
white-space: nowrap;
vertical-align: bottom;
}
.iam-ui[b-ad8ulgb14d] .icon {
color: var(--primary);
}
/* /Components/Shared/Modals/ListSelectModal.razor.rz.scp.css */
/* === List Select Modal (shared by multiple modals) === */
.user-select-list[b-kn7ac22scl] {
display: flex;
flex-direction: column;
gap: 0.4rem;
max-height: 400px;
overflow-y: auto;
margin-bottom: 1rem;
}
.user-select-item[b-kn7ac22scl] {
display: flex;
flex-direction: column;
align-items: flex-start;
background: var(--btn-fill);
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: 0.6rem 0.85rem;
cursor: pointer;
transition: background 0.15s;
text-align: left;
width: 100%;
font-family: inherit;
}
.user-select-item:hover[b-kn7ac22scl] {
background: var(--clr-blue-50);
}
/* Between the newest few (RecencyOf) and the rest. flex-shrink: an empty item in this capped column would
otherwise shrink to nothing once the list scrolls. */
.list-select-divider[b-kn7ac22scl] {
flex-shrink: 0;
height: 1px;
margin: 0.2rem 0;
background: var(--border);
}
/* Heading above a group of items (e.g. "Webhooks"); the first one sits flush with the list top. */
.list-select-group[b-kn7ac22scl] {
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-slate-400);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
margin-top: 0.6rem;
}
.list-select-group:first-child[b-kn7ac22scl] {
margin-top: 0;
}
/* The row drawn from TitleOf/SubtitleOf. A caller's own ItemTemplate carries the caller's scope and
styles itself (AssignModal). */
.list-select-name[b-kn7ac22scl] {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
font-size: 0.92rem;
color: var(--clr-slate-800);
}
.list-select-sub[b-kn7ac22scl] {
font-size: 0.8rem;
color: var(--clr-slate-500);
margin-top: 0.15rem;
}
/* "Vorgang erstellen" keeps to the left of the footer, apart from "Abbrechen". */
.list-select-create[b-kn7ac22scl] {
margin-right: auto;
}
/* /Components/Shared/Modals/LunchBreakScoresModal.razor.rz.scp.css */
/* Leaderboard of the Mittagspause mini-game. Three columns, no header row: at
ten entries the headers cost more attention than they save. */
.lbs-header-icon[b-be4tduf0fi] {
color: var(--primary);
flex-shrink: 0;
}
/* The scope switch rides in the header instead of taking a line of its own. */
.lbs-scope[b-be4tduf0fi] {
margin-left: auto;
}
.lbs-body[b-be4tduf0fi] {
padding-top: 0.25rem;
}
.lbs-note[b-be4tduf0fi] {
margin: 0;
font-size: 0.85rem;
color: var(--text-muted);
}
/* ── Rows ───────────────────────────────────────────────────────────── */
.lbs-list[b-be4tduf0fi] {
list-style: none;
margin: 0;
padding: 0;
}
.lbs-row[b-be4tduf0fi] {
display: grid;
grid-template-columns: 1.75rem 1fr auto;
align-items: center;
gap: 0.85rem;
padding: 0.5rem 0.6rem;
border-radius: var(--radius-lg);
}
/* Hairlines between rows, not around them: a box per entry would turn ten
names into ten cards. */
.lbs-row + .lbs-row[b-be4tduf0fi] {
box-shadow: 0 -1px 0 var(--border);
}
.lbs-row.is-me[b-be4tduf0fi] {
background: var(--primary-soft);
box-shadow: none;
}
.lbs-row.is-me + .lbs-row[b-be4tduf0fi] {
box-shadow: none;
}
.lbs-place[b-be4tduf0fi] {
font-size: 0.95rem;
font-weight: 700;
text-align: right;
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
/* One gold number, because first place is the only rank worth colouring. */
.lbs-row.is-first .lbs-place[b-be4tduf0fi] {
color: var(--accent);
}
.lbs-who[b-be4tduf0fi] {
min-width: 0;
}
.lbs-name[b-be4tduf0fi] {
display: block;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lbs-figures[b-be4tduf0fi] {
text-align: right;
}
.lbs-score[b-be4tduf0fi] {
display: block;
font-weight: 700;
color: var(--primary);
font-variant-numeric: tabular-nums;
}
/* Rank title and duration: the same quiet second line on both sides, so they
read as annotations of the line above rather than as data of their own. */
.lbs-sub[b-be4tduf0fi] {
display: block;
font-size: 0.72rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* The cup in front of the count. Nudged down a hair because a stroke icon sits
optically high next to lining figures, and given air on its left so the
count does not read as part of the duration before it. */
.lbs-figures .lbs-sub[b-be4tduf0fi] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.1rem;
}
[b-be4tduf0fi] .lbs-cup {
margin-left: 0.3rem;
transform: translateY(0.5px);
}
/* ── Footer ─────────────────────────────────────────────────────────── */
.lbs-footer[b-be4tduf0fi] {
display: flex;
align-items: center;
gap: 1rem;
}
.lbs-tally[b-be4tduf0fi] {
margin: 0;
margin-right: auto;
font-size: 0.78rem;
color: var(--text-muted);
}
/* /Components/Shared/Modals/MemberPickerModal.razor.rz.scp.css */
/* One prefix for the one member picker. Its two predecessors drew this widget as .mdmm-* and
.mrum-*, so what is left here is deliberately only what neither the design system nor a shared
component already owns: the search field and its hits are , the buttons are the
global .btn family (.btn-icon for the quiet remove action, which hovers red because it destroys
something), and these rules do the section rhythm and the member row. Semantic tokens
throughout — the raw --clr-slate steps below --border are the exception, see the hairline note. */
/* ── Header count ─────────────────────────────────────── */
.member-picker-count[b-q1pwvbap0e] {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
background: var(--surface-sunken);
padding: 0.15rem 0.55rem;
border-radius: var(--radius-pill);
margin-left: auto;
align-self: center;
}
/* ── Body ─────────────────────────────────────────────────
The sections bleed past the dialog's padding so their dividers reach the edges and the list
reads as one continuous surface rather than a stack of boxes. */
.member-picker[b-q1pwvbap0e] {
display: flex;
flex-direction: column;
margin: 0 -1.5rem;
}
/* ── Sections ─────────────────────────────────────────── */
.member-picker-section[b-q1pwvbap0e] {
padding: 1rem 1.5rem;
}
.member-picker-section--list[b-q1pwvbap0e] {
padding-bottom: 0.5rem;
}
.member-picker-label[b-q1pwvbap0e] {
font-size: var(--text-label-size);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--text-label);
margin: 0 0 0.65rem 0;
}
.member-picker-hint[b-q1pwvbap0e] {
font-size: 0.8rem;
line-height: 1.5;
color: var(--text-muted);
margin: 0.55rem 0 0;
}
/* A hairline, not a border: --border would draw a rule as strong as a card's outline between two
halves of the same dialog. There is no semantic token for a step below it. */
.member-picker-divider[b-q1pwvbap0e] {
height: 1px;
background: var(--clr-slate-100);
margin: 0;
}
/* ── One member ──────────────────────────────────────── */
.member-picker-identity[b-q1pwvbap0e] {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
min-width: 0;
}
.member-picker-name[b-q1pwvbap0e] {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-body);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-picker-sub[b-q1pwvbap0e] {
font-size: 0.75rem;
color: var(--text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Loading / empty ─────────────────────────────────── */
.member-picker-state[b-q1pwvbap0e] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.5rem 0;
color: var(--text-faint);
font-size: 0.875rem;
}
/* ::deep: renders its own , which never carries this file's scope attribute. Both
dialogs this replaces wrote their icon tints without it, so none of the three ever applied. */
.member-picker-state[b-q1pwvbap0e] .member-picker-state-icon {
color: var(--text-faint);
opacity: 0.7;
}
/* ── Member list ─────────────────────────────────────── */
.member-picker-list[b-q1pwvbap0e] {
max-height: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.member-picker-member[b-q1pwvbap0e] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.25rem;
border-radius: var(--radius-md);
transition: background 0.1s;
/* The row keeps its height while the remove confirmation replaces its contents, so the list
below does not jump when someone opens or cancels one. */
min-height: 44px;
}
.member-picker-member:not(.member-picker-member--removing):hover[b-q1pwvbap0e] {
background: var(--surface-hover);
}
/* Separator in the page's own tone rather than --border: rows in a list, not cells in a table. */
.member-picker-member + .member-picker-member[b-q1pwvbap0e] {
border-top: 1px solid var(--clr-slate-50);
}
/* Quiet until the pointer is on the row — the same restraint as a card's delete action. */
.member-picker-actions[b-q1pwvbap0e] {
display: flex;
align-items: center;
gap: 0.1rem;
margin-left: auto;
opacity: 0;
transition: opacity 0.12s;
}
.member-picker-member:hover .member-picker-actions[b-q1pwvbap0e] {
opacity: 1;
}
/* Restraint only works where there is a pointer to be restrained. On touch the row's remove
button would stay invisible, so a member could not be taken off the list from a phone. */
@media (hover: none) {
.member-picker-actions[b-q1pwvbap0e] {
opacity: 1;
}
}
/* Only the hit area is ours; .btn-icon brings the look. 30px keeps the row at its 44px. */
.member-picker-remove[b-q1pwvbap0e] {
width: 30px;
height: 30px;
justify-content: center;
}
/* ── Remove confirmation, in the row itself ──────────── */
.member-picker-confirm[b-q1pwvbap0e] {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
/* On a narrow dialog the two buttons drop under the question instead of squeezing the name. */
flex-wrap: wrap;
}
/* Amber is the meaning here, so this one stays a palette value (see DESIGN-SYSTEM.md §1). */
.member-picker-confirm[b-q1pwvbap0e] .member-picker-confirm-icon {
color: var(--clr-amber-500);
flex-shrink: 0;
}
.member-picker-confirm-text[b-q1pwvbap0e] {
font-size: 0.875rem;
color: var(--text-secondary);
flex: 1;
}
.member-picker-confirm-actions[b-q1pwvbap0e] {
display: flex;
gap: 0.4rem;
flex-shrink: 0;
}
/* /Components/Shared/Modals/MultiPickModal.razor.rz.scp.css */
/* The candidate list, its checkboxes, the pending chips and the footer — see MultiPickModal.razor.
The heading and the create row are PickerHead's. */
.pick-list[b-pj778fon9q] {
display: flex;
flex-direction: column;
gap: 0.4rem;
max-height: 400px;
overflow-y: auto;
margin-bottom: 1rem;
}
.pick-item[b-pj778fon9q] {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--btn-fill);
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: 0.6rem 0.85rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
text-align: left;
width: 100%;
font-family: inherit;
color: var(--text-body);
}
.pick-item:hover[b-pj778fon9q] {
background: var(--primary-soft);
}
.pick-item--on[b-pj778fon9q] {
background: var(--primary-soft);
border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.pick-item--on:hover[b-pj778fon9q] {
border-color: var(--primary);
}
.pick-name[b-pj778fon9q] {
font-weight: 500;
font-size: 0.88rem;
}
/* The item's own colour, so the list reads the same as the chips it produces. */
.pick-swatch[b-pj778fon9q] {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.pick-checkbox[b-pj778fon9q] {
width: 16px;
height: 16px;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-xs);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 0.12s, background 0.12s;
}
.pick-checkbox--on[b-pj778fon9q] {
background: var(--primary);
border-color: var(--primary);
color: var(--clr-always-white);
}
.pick-pending[b-pj778fon9q] {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding: 0.65rem 0 0.1rem;
margin-top: 0.25rem;
border-top: 1px solid var(--border);
}
/* .list-select-empty and .list-select-footer are in app.css: ListSelectModal draws them too, and a scoped rule
here never reached it. */
/* /Components/Shared/Modals/MyProfileModal.razor.rz.scp.css */
.profile-modal[b-xjd9ly9au0] {
display: flex;
flex-direction: column;
gap: 0;
}
/* ── Header ─────────────────────────────────────────── */
.profile-header[b-xjd9ly9au0] {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.25rem 0 1.25rem 0;
border-bottom: 1px solid var(--clr-slate-100);
margin-bottom: 0;
}
.profile-info[b-xjd9ly9au0] {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.profile-name[b-xjd9ly9au0] {
font-weight: 600;
font-size: 1rem;
color: var(--clr-slate-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-username[b-xjd9ly9au0] {
font-size: 0.8rem;
color: var(--clr-slate-400);
}
.profile-roles[b-xjd9ly9au0] {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.15rem;
}
/* ── Tab Content ────────────────────────────────────── */
.profile-tab-content[b-xjd9ly9au0] {
padding: 1.25rem 0 0.25rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
min-height: 160px;
}
.profile-tab-footer[b-xjd9ly9au0] {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding-top: 0.5rem;
}
.profile-empty[b-xjd9ly9au0] {
color: var(--clr-slate-400);
font-size: 0.88rem;
margin: 0;
}
.profile-footer[b-xjd9ly9au0] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--clr-slate-100);
margin-top: 1rem;
}
/* ── Vertretung ─────────────────────────────────────── */
.delegation-block + .delegation-block[b-xjd9ly9au0] {
padding-top: 0.85rem;
border-top: 1px solid var(--clr-slate-100);
}
.delegation-block > label[b-xjd9ly9au0],
.delegation-block-head > label[b-xjd9ly9au0] {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--clr-slate-700);
margin-bottom: 0.45rem;
}
.delegation-block-head[b-xjd9ly9au0] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.delegation-block-head > label[b-xjd9ly9au0] {
margin-bottom: 0;
}
.delegation-list[b-xjd9ly9au0] {
list-style: none;
margin: 0.45rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.delegation-item[b-xjd9ly9au0] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
padding: 0.55rem 0.7rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
}
.delegation-info[b-xjd9ly9au0] {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.delegation-name[b-xjd9ly9au0] {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.88rem;
font-weight: 500;
color: var(--clr-slate-800);
}
.delegation-meta[b-xjd9ly9au0] {
font-size: 0.78rem;
color: var(--clr-slate-500);
}
.delegation-hint[b-xjd9ly9au0] {
font-size: 0.78rem;
color: var(--clr-slate-500);
margin: 0.5rem 0 0;
}
/* ── Theme Selector ─────────────────────────────────── */
.theme-selector[b-xjd9ly9au0] {
display: flex;
gap: 0.6rem;
}
.theme-btn[b-xjd9ly9au0] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 0.9rem 0.5rem 0.75rem;
border: 1.5px solid transparent;
border-radius: var(--radius-lg);
background: var(--btn-fill);
color: var(--clr-slate-500);
cursor: pointer;
font-family: inherit;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.theme-btn:hover[b-xjd9ly9au0] {
color: var(--clr-slate-700);
background: var(--btn-fill-hover);
}
.theme-btn.active[b-xjd9ly9au0] {
background: var(--clr-blue-50);
color: var(--clr-blue-600);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.14);
}
.theme-btn-label[b-xjd9ly9au0] {
font-size: 0.82rem;
font-weight: 600;
}
.theme-btn-hint[b-xjd9ly9au0] {
font-size: 0.72rem;
color: var(--clr-slate-400);
font-weight: 400;
}
/* /Components/Shared/Modals/NewProtocolModal.razor.rz.scp.css */
/* Date, start and end read as one line: they are one fact about the meeting, not three. The date
needs the most room — a native date input carries three fields and a picker. */
.np-grid[b-hwhx873gl9] {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 0 0.75rem;
}
.np-optional[b-hwhx873gl9] {
color: var(--text-faint);
font-weight: 400;
}
/* The attendance list is the dialog's second half, so it gets a rule above it rather than just more
space — the two halves answer different questions. */
.np-section[b-hwhx873gl9] {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border-subtle);
}
.np-people[b-hwhx873gl9] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.np-people li[b-hwhx873gl9] {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.4rem 0.5rem;
border-radius: var(--radius-md);
transition: background 0.12s;
}
.np-people li:hover[b-hwhx873gl9] {
background: var(--surface-hover);
}
/* A tinted disc, so the rows have a common left edge to line up on and the two kinds of person are
told apart before the name is read. */
.np-avatar[b-hwhx873gl9] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.85rem;
height: 1.85rem;
border-radius: var(--radius-circle);
}
.np-avatar.is-user[b-hwhx873gl9] {
background: var(--primary-soft);
color: var(--primary);
}
.np-avatar.is-external[b-hwhx873gl9] {
background: var(--surface-sunken);
color: var(--text-muted);
}
.np-person[b-hwhx873gl9] {
min-width: 0;
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Pushed to the far end so the names line up in a column of their own. */
.np-person-meta[b-hwhx873gl9] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-left: auto;
flex-shrink: 0;
}
/* The remove button appears on the row it belongs to. A column of crosses down the side reads as the
list's purpose; on hover it reads as an afterthought, which is what it is. Keyboard users get it
through :focus-within, so it is never unreachable. */
.np-remove[b-hwhx873gl9] {
flex-shrink: 0;
opacity: 0;
transition: opacity 0.12s;
}
.np-people li:hover .np-remove[b-hwhx873gl9],
.np-people li:focus-within .np-remove[b-hwhx873gl9] {
opacity: 1;
}
/* On touch there is no hover to reveal it, so the cross stays in view. */
@media (hover: none) {
.np-remove[b-hwhx873gl9] {
opacity: 1;
}
}
@media (max-width: 540px) {
.np-grid[b-hwhx873gl9] {
grid-template-columns: 1fr;
}
/* Nothing to reveal on hover on a touch screen. */
.np-remove[b-hwhx873gl9] {
opacity: 1;
}
}
/* /Components/Shared/Modals/NewSpeakerModal.razor.rz.scp.css */
/* "Wer spricht?": a countdown along the top edge, the quote, the people present, a name of one's own. */
/* Flush with the dialog's top edge: the negative margins take back the dialog's padding, and the
dialog's rounded corners clip the ends. Running down from full to empty over the dialog's lifetime;
gone the moment somebody types, because then the dialog waits. */
.ns-countdown[b-jjxyxszw95] {
height: 4px;
margin: -1.75rem -1.75rem 1.4rem;
background: var(--clr-slate-100);
transition: opacity 0.2s ease;
}
.ns-countdown-fill[b-jjxyxszw95] {
height: 100%;
background: var(--primary);
transform-origin: left center;
animation-name: ns-countdown-b-jjxyxszw95;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.ns-countdown.is-held[b-jjxyxszw95] {
opacity: 0;
}
@keyframes ns-countdown-b-jjxyxszw95 {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
.ns-countdown-fill[b-jjxyxszw95] {
animation-name: none;
}
}
.ns-label[b-jjxyxszw95] {
margin-left: auto;
padding: 0.15rem 0.55rem;
border-radius: var(--radius-pill);
background: var(--clr-slate-100);
color: var(--text-muted);
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
.ns-body[b-jjxyxszw95] {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.ns-quote[b-jjxyxszw95] {
margin: 0;
padding: 0.75rem 0.9rem;
border-left: 3px solid var(--primary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: var(--primary-soft);
color: var(--text-body);
font-style: italic;
line-height: 1.55;
max-height: 9.5rem;
overflow-y: auto;
}
.ns-people[b-jjxyxszw95] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
/* Given to another voice already: still offered — the diarizer splitting one person in two is exactly
when somebody wants it — but quieter. */
.ns-person.is-taken[b-jjxyxszw95] {
opacity: 0.6;
}
.ns-other[b-jjxyxszw95] {
display: flex;
gap: 0.5rem;
}
.ns-other input[b-jjxyxszw95] {
flex: 1;
min-width: 0;
}
/* /Components/Shared/Modals/PdfPagePickerModal.razor.rz.scp.css */
.ppm-file[b-4u91u7d8tz] {
margin-left: auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8rem;
color: var(--text-faint);
}
.ppm-grid[b-4u91u7d8tz] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
align-items: start;
gap: 0.75rem;
}
.ppm-page[b-4u91u7d8tz] {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.35rem;
border: 1.5px solid transparent;
border-radius: var(--radius-lg);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
text-align: left;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ppm-page:hover[b-4u91u7d8tz],
.ppm-page:focus-visible[b-4u91u7d8tz] {
background: var(--surface-hover);
border-color: var(--primary);
color: var(--text);
}
/* The page is paper: white in dark mode too, with a shadow where a border would read as a frame drawn on it. */
.ppm-thumb[b-4u91u7d8tz] {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-sm);
background: #fff;
box-shadow: var(--shadow-sm);
}
.ppm-label[b-4u91u7d8tz] {
padding: 0 0.15rem 0.1rem;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* /Components/Shared/Modals/PickerHead.razor.rz.scp.css */
/* The heading, the create row and its divider — see PickerHead.razor. Semantic tokens throughout; the
arrow is drawn by , a child component, hence ::deep. */
/* ── Select Modal: Header ─────────────────────────── */
.select-modal-header[b-57p3d8yvcc] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.select-modal-header h3[b-57p3d8yvcc] {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--text-body);
}
/* ── Blank Option ────────────────────────────────── */
.blank-option[b-57p3d8yvcc] {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem 1rem;
background: var(--btn-fill);
border: 1.5px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.15s;
font-family: inherit;
text-align: left;
}
.blank-option:hover[b-57p3d8yvcc] {
background: var(--primary-soft);
}
.blank-option-icon[b-57p3d8yvcc] {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--surface);
border: 1px solid transparent;
color: var(--text-muted);
flex-shrink: 0;
}
.blank-option:hover .blank-option-icon[b-57p3d8yvcc] {
color: var(--primary);
}
.blank-option-content[b-57p3d8yvcc] {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
min-width: 0;
}
.blank-option-title[b-57p3d8yvcc] {
font-weight: 500;
font-size: 0.9rem;
color: var(--text-body);
}
.blank-option-hint[b-57p3d8yvcc] {
font-size: 0.78rem;
color: var(--text-faint);
}
[b-57p3d8yvcc] .blank-option-arrow {
color: var(--text-faint);
flex-shrink: 0;
transition: color 0.15s, transform 0.15s;
}
.blank-option:hover[b-57p3d8yvcc] .blank-option-arrow {
color: var(--primary);
transform: translateX(2px);
}
/* ── Divider ─────────────────────────────────────── */
.select-modal-divider[b-57p3d8yvcc] {
position: relative;
text-align: center;
margin: 1rem 0;
}
.select-modal-divider[b-57p3d8yvcc]::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border);
}
.select-modal-divider span[b-57p3d8yvcc] {
position: relative;
background: var(--surface);
padding: 0 0.75rem;
font-size: 0.78rem;
color: var(--text-label);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
}
/* /Components/Shared/Modals/PickFormSubmissionModal.razor.rz.scp.css */
/* The rows take PickerHead's "Formular ausfüllen" row as their measure — padding, icon box, gap and
type — so the icon boxes, the titles and the arrows of every row in the dialog stand on one line.
Those rules live in PickerHead.razor.css under its own scope, hence the values repeated here. */
/* The search and, for a module template, the view switch — one row above the list, so both stay put
while the records scroll under them. Stretched: the field takes the switch's height, and the two
meet top and bottom. */
.pfs-tools[b-shzhnjj6bs] {
display: flex;
align-items: stretch;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.pfs-search[b-shzhnjj6bs] {
flex: 1;
min-width: 0;
}
/* SearchBar is a page element: it keeps a gap under itself and floats on a shadow. In a dialog that is
already the raised surface, it sits flat on the same fill as the rows below and the switch beside it.
::deep because SearchBar renders these elements — this file's scope attribute is not on them. */
.pfs-search[b-shzhnjj6bs] .searchbar,
.pfs-search[b-shzhnjj6bs] .searchbar-wrapper {
height: 100%;
margin-bottom: 0;
}
.pfs-search[b-shzhnjj6bs] .searchbar-input {
height: 100%;
min-height: 2.75rem;
background: var(--btn-fill);
box-shadow: none;
}
.pfs-search[b-shzhnjj6bs] .searchbar-input:focus {
background: var(--surface);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.12);
}
.pfs-empty[b-shzhnjj6bs] {
margin: 0.5rem 0;
color: var(--text-muted);
font-size: 0.88rem;
}
/* Says which part of the result set the table is actually holding — a header that offers to sort
1000 of 4000 rows has to admit it. */
.pfs-cap[b-shzhnjj6bs] {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.75rem;
color: var(--text-muted);
font-size: 0.85rem;
}
/* ── Rows ─────────────────────────────────────────── */
.pfs-list[b-shzhnjj6bs] {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.pfs-row[b-shzhnjj6bs] {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem 1rem;
background: var(--btn-fill);
border: 1.5px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.15s;
}
.pfs-row:hover:not(:disabled)[b-shzhnjj6bs] {
background: var(--primary-soft);
}
.pfs-row:disabled[b-shzhnjj6bs] {
cursor: default;
}
.pfs-row:focus-visible[b-shzhnjj6bs] {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.pfs-row-icon[b-shzhnjj6bs] {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text-muted);
flex-shrink: 0;
transition: color 0.15s;
}
.pfs-row:hover:not(:disabled) .pfs-row-icon[b-shzhnjj6bs] {
color: var(--primary);
}
.pfs-row-main[b-shzhnjj6bs] {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
min-width: 0;
}
.pfs-row-title[b-shzhnjj6bs] {
font-weight: 500;
font-size: 0.9rem;
color: var(--text-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pfs-row-meta[b-shzhnjj6bs] {
font-size: 0.78rem;
color: var(--text-faint);
}
.pfs-row[b-shzhnjj6bs] .pfs-row-arrow {
color: var(--text-faint);
flex-shrink: 0;
transition: color 0.15s, transform 0.15s;
}
.pfs-row:hover:not(:disabled)[b-shzhnjj6bs] .pfs-row-arrow {
color: var(--primary);
transform: translateX(2px);
}
.pfs-more[b-shzhnjj6bs] {
margin-top: 0.75rem;
}
/* /Components/Shared/Modals/PrintProtocolModal.razor.rz.scp.css */
/* ::deep – the icon markup comes from the Icon component, so the scope attribute sits on the
surrounding element, not on the svg. */
.dialog-header[b-prscg774n9] .pp-header-icon {
color: var(--clr-royal-600);
flex-shrink: 0;
}
.dialog-body[b-prscg774n9] {
margin-bottom: 0.85rem;
}
/* Its own line under the instruction, not a second sentence in it: this is a caveat, and a caveat
that reads as part of the prose is a caveat nobody sees. */
.pp-warning[b-prscg774n9] {
display: flex;
align-items: flex-start;
gap: 0.4rem;
margin-top: 0.5rem;
color: var(--clr-amber-700);
}
.dialog-body[b-prscg774n9] svg {
flex-shrink: 0;
margin-top: 0.1rem;
}
/* One bordered block with hairline separators – the house pattern for a list of choices
(ApplyStatusToWorkOrdersModal, the status picker). */
.pp-list[b-prscg774n9] {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.pp-row[b-prscg774n9] {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.6rem 0.8rem;
background: var(--surface);
cursor: pointer;
transition: background 0.15s;
}
.pp-row:not(:last-child)[b-prscg774n9] {
border-bottom: 1px solid var(--border);
}
.pp-row:hover[b-prscg774n9] {
background: var(--surface-hover);
}
/* An option that only qualifies the one above it – indented, without its own icon, so the
list reads as sections rather than as nine equal switches. */
.pp-row--sub[b-prscg774n9] {
padding-left: 2.4rem;
background: var(--surface-track);
}
.pp-row--sub .pp-title[b-prscg774n9] {
font-weight: 400;
}
.pp-row.is-disabled[b-prscg774n9] {
cursor: default;
opacity: 0.5;
}
.pp-row.is-disabled:hover[b-prscg774n9] {
background: var(--surface-track);
}
.pp-row input[type="checkbox"][b-prscg774n9] {
margin-top: 0.15rem;
flex-shrink: 0;
cursor: pointer;
}
.pp-row[b-prscg774n9] .pp-icon {
margin-top: 0.05rem;
flex-shrink: 0;
color: var(--text-muted);
}
.pp-info[b-prscg774n9] {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.pp-title[b-prscg774n9] {
font-size: 0.88rem;
font-weight: 600;
}
.pp-sub[b-prscg774n9] {
font-size: 0.76rem;
line-height: 1.4;
color: var(--text-muted);
}
/* /Components/Shared/Modals/ProtocolDraftQuestionsModal.razor.rz.scp.css */
/* The draft's questions: one section per question, its options as tiles lifted by shadow (the look of
the chat's question card), and a line for an answer in one's own words. */
.dq-body[b-0xepca518f] {
display: flex;
flex-direction: column;
gap: 1.1rem;
width: min(36rem, 100%);
}
.dq-question[b-0xepca518f] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.dq-text[b-0xepca518f] {
display: flex;
gap: 0.55rem;
margin: 0;
color: var(--text);
font-weight: 600;
line-height: 1.4;
}
.dq-number[b-0xepca518f] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary);
font-size: 0.75rem;
font-weight: 700;
}
.dq-options[b-0xepca518f] {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding-left: 1.95rem;
}
.dq-option[b-0xepca518f] {
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
padding: 0.5rem 0.7rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-xs);
color: var(--text);
font: inherit;
font-size: 0.86rem;
line-height: 1.3;
text-align: left;
cursor: pointer;
transition: background 0.12s ease, box-shadow 0.12s ease;
}
.dq-option:hover[b-0xepca518f] {
background: var(--surface-hover);
box-shadow: var(--shadow-sm);
}
.dq-option:focus-visible[b-0xepca518f] {
outline: 2px solid var(--primary);
outline-offset: 1px;
}
.dq-option span[b-0xepca518f] {
min-width: 0;
word-break: break-word;
}
.dq-option--picked[b-0xepca518f],
.dq-option--picked:hover[b-0xepca518f] {
background: var(--primary-soft);
color: var(--primary);
font-weight: 600;
}
.dq-own[b-0xepca518f] {
margin-left: 1.95rem;
width: calc(100% - 1.95rem);
}
/* /Components/Shared/Modals/QrCodeLabelModal.razor.rz.scp.css */
/* ::deep – the icon markup comes from the Icon component, so the scope attribute sits on the
surrounding element, not on the svg. */
.dialog-header[b-9zl938fx3b] .qlm-header-icon {
color: var(--clr-royal-600);
flex-shrink: 0;
}
.qlm-size[b-9zl938fx3b] {
display: flex;
justify-content: center;
margin-bottom: 0.85rem;
}
/* The label is the paper itself – white in both themes, styled inline (see the note in the markup).
The inset around it only sets it apart from the dialog. It scrolls rather than squeezes: on a
phone the large label is wider than the screen, and the preview is to scale. */
.qlm-preview[b-9zl938fx3b] {
display: flex;
padding: 1.25rem;
overflow: auto;
background: var(--surface-sunken);
border-radius: var(--radius-lg);
}
/* Auto margins rather than justify-content: centred that way, a label wider than the inset would
be cut off on the left instead of scrolling. */
.qlm-label[b-9zl938fx3b] {
margin: auto;
}
.qlm-caption[b-9zl938fx3b] {
margin: 0.5rem 0 0;
font-size: 0.8rem;
color: var(--text-muted);
text-align: center;
}
/* /Components/Shared/Modals/QrCodeModal.razor.rz.scp.css */
/* Der Dialograhmen wird beim Öffnen transparent gestellt (siehe dialogStyle des Aufrufers),
sichtbar sind also nur der Code und der Schließen-Button. */
.qrm-full[b-nitkx5ihlm] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* Fest weiß, weil der QR-Code keine Ruhezone mitbringt und ein dunkles Polster das Scannen erschwert. */
.qrm-code[b-nitkx5ihlm] {
display: block;
padding: clamp(0.75rem, 2vw, 1.5rem);
background: #fff;
border: 0;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
line-height: 0;
cursor: zoom-out;
}
.qrm-code:focus[b-nitkx5ihlm] {
outline: none;
}
.qrm-code:focus-visible[b-nitkx5ihlm] {
outline: 3px solid var(--clr-blue-500);
outline-offset: 4px;
}
.qrm-code[b-nitkx5ihlm] svg {
display: block;
width: min(80vw, 74dvh);
height: min(80vw, 74dvh);
}
.qrm-close[b-nitkx5ihlm] {
flex-shrink: 0;
}
/* On the dimmed backdrop rather than on a surface, like the button below it — hence the light colour
in both themes. */
.qrm-caption[b-nitkx5ihlm] {
margin: 0;
max-width: min(80vw, 74dvh);
font-size: 0.95rem;
font-weight: 600;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}
/* /Components/Shared/Modals/QrScannerModal.razor.rz.scp.css */
.qrs-body[b-buhc0h44v2] {
padding: 0 1.5rem 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
min-height: 280px;
}
/* ::deep — the class sits on the Icon component's own element, which this stylesheet does not reach. */
.dialog-header[b-buhc0h44v2] .qrs-header-icon {
color: var(--clr-blue-600);
}
/* The field a scan fills, beside the title. */
.qrs-field[b-buhc0h44v2] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.88rem;
color: var(--text-muted);
}
/* ── Viewfinder ──────────────────────────────────────── */
.qrs-viewfinder[b-buhc0h44v2] {
width: 100%;
min-height: 300px;
border-radius: var(--radius-xl);
background: var(--surface-inverse);
}
/* let html5-qrcode internal elements render without clipping */
[b-buhc0h44v2] #qrs-reader video,
[b-buhc0h44v2] #qrs-reader canvas {
border-radius: var(--radius-xl);
}
[b-buhc0h44v2] #qrs-reader__dashboard {
display: none !important;
}
/* ── Hint ────────────────────────────────────────────── */
.qrs-hint[b-buhc0h44v2] {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
color: var(--clr-slate-400);
margin: 0;
}
/* ── Error state ─────────────────────────────────────── */
.qrs-error-state[b-buhc0h44v2] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 2rem 1rem;
text-align: center;
}
.qrs-error-icon[b-buhc0h44v2] {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--clr-red-50);
color: var(--clr-red-500);
display: flex;
align-items: center;
justify-content: center;
}
.qrs-error-text[b-buhc0h44v2] {
margin: 0;
font-size: 0.88rem;
color: var(--clr-slate-600);
line-height: 1.5;
max-width: 300px;
}
/* ── Result state ────────────────────────────────────── */
.qrs-result-state[b-buhc0h44v2] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 2rem 1rem;
text-align: center;
}
.qrs-result-icon[b-buhc0h44v2] {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--clr-green-50);
color: var(--clr-green-500);
display: flex;
align-items: center;
justify-content: center;
}
.qrs-result-label[b-buhc0h44v2] {
margin: 0;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
font-weight: 600;
color: var(--clr-green-600);
}
.qrs-result-value[b-buhc0h44v2] {
margin: 0;
color: var(--clr-slate-700);
background: var(--clr-slate-50);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 0.5rem 0.875rem;
word-break: break-all;
max-width: 100%;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.82rem;
}
/* /Components/Shared/Modals/RecordingConsentModal.razor.rz.scp.css */
/* The consent dialog: one line, then what the recording will do, each with a green check. */
.rc-body[b-ylt0pgzh1p] {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: min(30rem, 100%);
}
.rc-lead[b-ylt0pgzh1p] {
margin: 0;
color: var(--text);
font-weight: 600;
}
.rc-list[b-ylt0pgzh1p] {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin: 0;
padding: 0.75rem 0.9rem;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-xs);
list-style: none;
}
.rc-list li[b-ylt0pgzh1p] {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--text);
font-size: 0.9rem;
}
.rc-list[b-ylt0pgzh1p] svg {
flex-shrink: 0;
color: var(--clr-green-600, #16a34a);
}
/* /Components/Shared/Modals/RevisionTimeline.razor.rz.scp.css */
/* Scrolling comes from .modal-body: the timeline takes whatever height the dialog
has left instead of a fixed slice of the viewport. */
.rev-scroll[b-o77tbgjkxm] {
margin-bottom: 0;
}
/* ── Timeline ────────────────────────────────────────── */
.rev-timeline[b-o77tbgjkxm] {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 1.1rem;
margin-bottom: 1rem;
}
.rev-timeline[b-o77tbgjkxm]::before {
content: "";
position: absolute;
left: 5px;
top: 12px;
bottom: 12px;
width: 2px;
background: var(--clr-slate-200);
border-radius: 1px;
}
.rev-node[b-o77tbgjkxm] {
display: flex;
align-items: flex-start;
gap: 0.65rem;
background: none;
border: none;
cursor: pointer;
padding: 0.55rem 0.65rem;
border-radius: var(--radius-md);
text-align: left;
transition: background 0.12s;
position: relative;
font-family: inherit;
}
.rev-node:hover[b-o77tbgjkxm] {
background: var(--surface-hover);
}
.rev-node--active[b-o77tbgjkxm],
.rev-node--active:hover[b-o77tbgjkxm] {
background: var(--clr-blue-50);
}
.rev-dot[b-o77tbgjkxm] {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--clr-slate-300);
border: 2px solid var(--clr-white);
flex-shrink: 0;
margin-top: 0.25rem;
position: relative;
z-index: 1;
transition: background 0.15s, transform 0.15s;
}
.rev-node--active .rev-dot[b-o77tbgjkxm] {
background: var(--clr-blue-500);
transform: scale(1.25);
}
.rev-meta[b-o77tbgjkxm] {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.rev-date[b-o77tbgjkxm] {
font-size: 0.82rem;
font-weight: 600;
color: var(--clr-slate-800);
}
.rev-author[b-o77tbgjkxm] {
font-size: 0.75rem;
color: var(--clr-slate-500);
}
.rev-note[b-o77tbgjkxm] {
font-size: 0.72rem;
color: var(--clr-amber-700);
font-style: italic;
}
/* ── Detail panel ────────────────────────────────────── */
.rev-detail[b-o77tbgjkxm] {
background: var(--clr-slate-50);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1rem;
animation: revDetailIn-b-o77tbgjkxm 0.15s ease;
}
.rev-detail-header[b-o77tbgjkxm] {
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--clr-slate-200);
}
.rev-detail-header h4[b-o77tbgjkxm] {
margin: 0 0 0.15rem;
font-size: 0.95rem;
color: var(--clr-slate-900);
}
.rev-detail-date[b-o77tbgjkxm] {
font-size: 0.75rem;
color: var(--clr-slate-500);
}
@keyframes revDetailIn-b-o77tbgjkxm {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/Modals/SelectWorkOrderStatusModal.razor.rz.scp.css */
/* ::deep – the icon markup comes from the Icon component, so the scope attribute
sits on the header, not on the svg. */
.dialog-header[b-1k8h94f046] .sws-header-icon {
color: var(--clr-green-600);
flex-shrink: 0;
}
.sws-hint[b-1k8h94f046] {
margin: 0 0 1rem;
}
/* ── Current status (context only) ────────────────── */
.sws-current[b-1k8h94f046] {
display: flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.85rem;
}
.sws-eyebrow[b-1k8h94f046] {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--clr-slate-400);
}
/* ── Options ──────────────────────────────────────── */
/* One bordered block with hairline separators – calmer than a stack of cards. */
.sws-options[b-1k8h94f046] {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.sws-option[b-1k8h94f046] {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.6rem 0.75rem;
background: var(--surface);
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.15s;
}
.sws-option:not(:last-child)[b-1k8h94f046] {
border-bottom: 1px solid var(--clr-slate-100);
}
.sws-option:hover[b-1k8h94f046] {
background: var(--surface-hover);
}
.sws-option:focus-visible[b-1k8h94f046] {
outline: 2px solid var(--clr-blue-500);
outline-offset: -2px;
}
/* The suggested status carries the accent so the expected click is obvious. */
.sws-option--suggested[b-1k8h94f046] {
background: var(--clr-blue-50);
box-shadow: inset 3px 0 0 var(--clr-blue-500);
}
.sws-option--suggested:hover[b-1k8h94f046] {
background: var(--clr-blue-100);
}
.sws-option-main[b-1k8h94f046] {
flex: 1;
min-width: 0;
}
.sws-option-tag[b-1k8h94f046] {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--clr-blue-700);
}
.sws-option[b-1k8h94f046] .sws-option-arrow {
color: var(--clr-slate-300);
flex-shrink: 0;
transition: color 0.15s, transform 0.15s;
}
.sws-option:hover[b-1k8h94f046] .sws-option-arrow {
color: var(--clr-blue-500);
transform: translateX(2px);
}
/* /Components/Shared/Modals/ShareLinkModal.razor.rz.scp.css */
/* ::deep – das Icon-Markup kommt aus der Icon-Komponente, das Scope-Attribut sitzt
daher auf dem Header und nicht auf dem svg. */
.dialog-header[b-4k5f382n1l] .slm-header-icon {
color: var(--clr-blue-600);
flex-shrink: 0;
}
.slm-body[b-4k5f382n1l] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
margin-bottom: 1.25rem;
}
/* ─── QR-Kachel ─── */
.slm-qr[b-4k5f382n1l] {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
/* Fest weiß statt --clr-white: der QR-Code bringt keine Ruhezone mit, im Dark Mode
würde ihn ein dunkles Polster direkt am Rand schlechter scannbar machen. */
.slm-qr-code[b-4k5f382n1l] {
display: block;
padding: 0.75rem 0.75rem 0.65rem;
line-height: 0;
background: #fff;
border: 0;
cursor: zoom-in;
}
.slm-qr-code[b-4k5f382n1l] svg {
display: block;
width: 160px;
height: 160px;
}
.slm-qr-actions[b-4k5f382n1l] {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--clr-slate-50);
border-top: 1px solid var(--clr-slate-200);
}
.slm-qr-actions button[b-4k5f382n1l] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.28rem;
padding: 0.45rem 0.2rem;
font-family: inherit;
font-size: 0.72rem;
color: var(--clr-slate-600);
background: none;
border: 0;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.slm-qr-actions button + button[b-4k5f382n1l] {
border-left: 1px solid var(--clr-slate-200);
}
.slm-qr-actions button:hover[b-4k5f382n1l] {
background: var(--surface-hover);
color: var(--clr-slate-900);
}
/* ─── Link ─── */
.slm-link[b-4k5f382n1l] {
width: 100%;
}
.slm-label[b-4k5f382n1l] {
display: block;
margin-bottom: 0.3rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--clr-slate-400);
}
.slm-row[b-4k5f382n1l] {
display: flex;
gap: 0.4rem;
align-items: center;
}
.slm-url[b-4k5f382n1l] {
flex: 1;
min-width: 0;
font-family: "Courier New", monospace;
font-size: 0.8rem;
background: var(--clr-slate-50);
color: var(--clr-slate-700);
cursor: text;
}
.slm-hint[b-4k5f382n1l],
.slm-meta[b-4k5f382n1l] {
display: flex;
align-items: flex-start;
gap: 0.4rem;
width: 100%;
margin: 0;
}
.slm-hint[b-4k5f382n1l] {
font-size: 0.78rem;
line-height: 1.45;
color: var(--clr-slate-500);
}
.slm-meta[b-4k5f382n1l] {
align-items: center;
font-size: 0.72rem;
color: var(--clr-slate-400);
}
.slm-hint[b-4k5f382n1l] svg,
.slm-meta[b-4k5f382n1l] svg {
flex-shrink: 0;
margin-top: 0.1rem;
}
/* ─── Schalter unter dem Link (Tonaufnahmen mitfreigeben) ─── */
.slm-option[b-4k5f382n1l] {
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 100%;
}
.slm-option-hint[b-4k5f382n1l] {
margin: 0;
font-size: 0.75rem;
line-height: 1.45;
color: var(--clr-slate-500);
}
/* Widerrufen sitzt als Gegenpol links, getrennt von der Schließen-Aktion. */
.slm-revoke[b-4k5f382n1l] {
margin-right: auto;
}
/* /Components/Shared/Modals/SignatureModal.razor.rz.scp.css */
/* ::deep – the icon markup comes from the Icon component, so the scope attribute sits on the
surrounding element rather than on the svg. */
.dialog-header[b-xtds31008d] .sigm-header-icon {
color: var(--primary);
flex-shrink: 0;
}
.sigm-intro[b-xtds31008d] {
margin-bottom: 0.85rem;
}
/* Place and date share a row: both are short, and together they read as the one line that goes
under a signature on paper. */
.sigm-row[b-xtds31008d] {
display: flex;
gap: 0.75rem;
}
.sigm-row .form-group[b-xtds31008d] {
flex: 1 1 0;
min-width: 0;
}
.sigm-pad-group[b-xtds31008d] {
margin-bottom: 0;
}
/* The locate control sits in the field rather than beside it: the row already holds the date, and
a fourth box in it would make the one line under a signature look like a form of its own. */
.sigm-location[b-xtds31008d] {
position: relative;
}
.sigm-location .form-control[b-xtds31008d] {
padding-right: 2.4rem;
}
.sigm-locate[b-xtds31008d] {
position: absolute;
top: 50%;
right: 0.4rem;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--text-faint);
cursor: pointer;
transition: color 0.15s, background-color 0.15s;
}
.sigm-locate:hover[b-xtds31008d] {
background: var(--surface-hover);
color: var(--primary);
}
.sigm-locate.is-busy[b-xtds31008d] {
color: var(--text-faint);
cursor: default;
}
/* Quiet, and only ever after somebody pressed the button: an empty field is a perfectly good
outcome here, and the person can simply type the place. */
.sigm-locate-note[b-xtds31008d] {
display: block;
margin-top: 0.3rem;
color: var(--text-muted);
font-size: 0.78rem;
}
.sigm-error[b-xtds31008d] {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0.6rem 0 0;
color: var(--danger);
font-size: 0.82rem;
}
/* /Components/Shared/Modals/StartImagePickerModal.razor.rz.scp.css */
.sipm-group + .sipm-group[b-79awqja4c1] {
margin-top: 0.9rem;
}
/* Sticky like the symbol picker's band headings; -3px because the scroll region carries 3px of
padding for focus rings. */
.sipm-group-label[b-79awqja4c1] {
position: sticky;
top: -3px;
z-index: 1;
background: var(--surface);
padding: 0.35rem 0 0.3rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-faint);
}
.sipm-grid[b-79awqja4c1] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
gap: 0.6rem;
}
.sipm-choice[b-79awqja4c1] {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.3rem;
border: 1.5px solid transparent;
border-radius: var(--radius-lg);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
text-align: left;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sipm-choice:hover[b-79awqja4c1] {
background: var(--surface-hover);
color: var(--text);
}
/* The pictures' own proportion (400×300), so a tile shows the whole picture. */
.sipm-thumb[b-79awqja4c1] {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-md);
background: var(--surface-sunken);
}
.sipm-label[b-79awqja4c1] {
padding: 0 0.15rem 0.1rem;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* A picture nothing uses reads quieter than one that is doing its job. */
.sipm-label--unused[b-79awqja4c1] {
color: var(--text-faint);
font-style: italic;
}
/* The tile is a button, and a button must not hold another — so the delete control sits beside it
in the same box, laid over the picture's corner. */
.sipm-item[b-79awqja4c1] {
position: relative;
display: flex;
}
.sipm-item > .sipm-choice[b-79awqja4c1] {
flex: 1;
min-width: 0;
}
.sipm-delete[b-79awqja4c1] {
position: absolute;
top: 0.55rem;
right: 0.55rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
padding: 0;
border: none;
border-radius: var(--radius-md);
background: rgb(15 23 42 / 0.6);
color: var(--clr-always-white);
cursor: pointer;
opacity: 0;
transition: opacity 0.12s, background 0.12s;
}
/* Shown on hover and on keyboard focus; always on a touch screen, which has no hover. */
.sipm-item:hover .sipm-delete[b-79awqja4c1],
.sipm-delete:focus-visible[b-79awqja4c1] {
opacity: 1;
}
@media (hover: none) {
.sipm-delete[b-79awqja4c1] {
opacity: 1;
}
}
.sipm-delete:hover[b-79awqja4c1] {
background: var(--clr-red-600);
}
.sipm-delete:disabled[b-79awqja4c1] {
cursor: default;
}
.sipm-selected[b-79awqja4c1] {
border-color: var(--primary);
color: var(--primary);
background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.sipm-error[b-79awqja4c1] {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.75rem;
padding: 0.55rem 0.75rem;
border-radius: var(--radius-md);
background: var(--clr-red-50);
color: var(--clr-red-600);
font-size: 0.85rem;
}
/* The one action of its own: it sits on the left, the way out and "Kein Bild" on the right. */
.sipm-upload[b-79awqja4c1] {
margin-right: auto;
}
/* /Components/Shared/Modals/StatusModelEditorModal.razor.rz.scp.css */
.sm-fields[b-0yqcrjuc5p] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 0 1rem;
}
@media (max-width: 640px) {
.sm-fields[b-0yqcrjuc5p] {
grid-template-columns: minmax(0, 1fr);
}
}
/* ── The statuses ───────────────────────────────────── */
/* A section of its own: the pickers above set defaults for templates, the list below is the statuses themselves. */
.sm-section[b-0yqcrjuc5p] {
margin-top: 0.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
.sm-section-title[b-0yqcrjuc5p] {
margin: 0 0 0.5rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
}
.sm-list[b-0yqcrjuc5p] {
list-style: none;
margin: 0;
padding: 0;
}
/* The drop line is drawn on top of the row, so the row is the positioning context. */
.sm-item[b-0yqcrjuc5p] {
position: relative;
border-bottom: 1px solid var(--clr-slate-100);
/* Timed with the .reveal-slot below, so the ground fades in while the fields slide open. */
transition: background-color 0.25s ease, margin 0.25s ease, border-color 0.25s ease;
}
.sm-item:last-child[b-0yqcrjuc5p] {
border-bottom-color: transparent;
}
.sm-item-head[b-0yqcrjuc5p] {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0.35rem 0.5rem;
border-radius: var(--radius-lg);
}
.sm-item-head--editable[b-0yqcrjuc5p] {
cursor: pointer;
transition: background 0.15s;
}
.sm-item-head--editable:hover[b-0yqcrjuc5p] {
background: var(--surface-hover);
}
.sm-item-summary[b-0yqcrjuc5p] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.75rem;
flex: 1;
min-width: 0;
}
/* The open status sits on one sunken ground, head and fields together, so it reads as a single block. */
.sm-item--open[b-0yqcrjuc5p] {
margin: 0.25rem 0;
border-bottom-color: transparent;
border-radius: var(--radius-lg);
background: var(--surface-sunken);
}
.sm-item--open .sm-item-head--editable:hover[b-0yqcrjuc5p] {
background: transparent;
}
/* The grip says "this status moves". Faint until the row is hovered, so a list at rest stays quiet. */
.sm-grip[b-0yqcrjuc5p] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.1rem;
color: var(--clr-slate-300);
opacity: 0.5;
cursor: grab;
transition: opacity 0.15s ease, color 0.15s ease;
}
.sm-item-head:hover .sm-grip[b-0yqcrjuc5p],
.sm-item--open .sm-grip[b-0yqcrjuc5p] {
opacity: 1;
color: var(--clr-slate-400);
}
.sm-item-head[draggable="true"]:active[b-0yqcrjuc5p] {
cursor: grabbing;
}
/* Nothing hovers on touch, so the grip has to be visible from the start. */
@media (hover: none) {
.sm-grip[b-0yqcrjuc5p] {
opacity: 1;
}
}
.sm-chevron[b-0yqcrjuc5p] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: none;
border-radius: var(--radius-md);
background: none;
color: var(--clr-slate-400);
cursor: pointer;
transition: transform 0.15s ease, color 0.15s, background 0.15s;
}
/* Mixed from the text colour: --surface-hover is the sunken fill of an open row in dark mode. */
.sm-chevron:hover[b-0yqcrjuc5p] {
color: var(--text);
background: color-mix(in srgb, var(--text) 7%, transparent);
}
.sm-item--open .sm-chevron[b-0yqcrjuc5p] {
transform: rotate(180deg);
}
/* The slot's own transitions stop in app.css. */
@media (prefers-reduced-motion: reduce) {
.sm-item[b-0yqcrjuc5p],
.sm-chevron[b-0yqcrjuc5p] {
transition: none;
}
}
/* ── An open status ─────────────────────────────────── */
/* Indented to the badge, past the grip. Wide enough for all colour swatches in one row. */
.sm-item-body[b-0yqcrjuc5p] {
padding: 0.25rem 1rem 1rem 2.1rem;
}
.sm-name[b-0yqcrjuc5p] {
max-width: 24rem;
}
.sm-switch-groups[b-0yqcrjuc5p] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem 2.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
.sm-item-body[b-0yqcrjuc5p] {
padding-left: 1rem;
}
.sm-switch-groups[b-0yqcrjuc5p] {
grid-template-columns: minmax(0, 1fr);
}
}
.sm-overline[b-0yqcrjuc5p] {
margin-bottom: 0.25rem;
font-size: var(--text-label-size);
font-weight: 600;
color: var(--text-label);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
}
/* A second group in the same column, spaced like the grid's rows. */
.sm-overline--follow[b-0yqcrjuc5p] {
margin-top: 0.75rem;
}
/* Label left, switch right: the eye reads down the names, the switches line up on one edge. */
.sm-switch[b-0yqcrjuc5p] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 2.25rem;
}
.sm-switch-label[b-0yqcrjuc5p] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.88rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
}
/* "Zählt für Projekt" belongs to "Beendet", so it hangs below it. */
.sm-switch--sub .sm-switch-label[b-0yqcrjuc5p] {
padding-left: 1rem;
}
.sm-switch--locked[b-0yqcrjuc5p] {
opacity: 0.6;
}
.sm-switch--locked .sm-switch-label[b-0yqcrjuc5p] {
cursor: default;
}
.sm-lock[b-0yqcrjuc5p] {
display: inline-flex;
color: var(--text-muted);
}
.sm-item-actions[b-0yqcrjuc5p] {
display: flex;
justify-content: flex-end;
margin-top: 0.75rem;
}
/* ── Drag & drop ────────────────────────────────────── */
.sm-item--dragging[b-0yqcrjuc5p] {
opacity: 0.45;
}
/* While a drag is running only the rows themselves see the pointer. Without this every chip and button inside a row
fires its own dragenter/dragleave pair as the pointer crosses it, and the line blinks across the row. */
.sm-list.is-dragging .sm-item > *[b-0yqcrjuc5p] {
pointer-events: none;
}
/* The line is drawn on top of the layout, never inside it: showing it must not move a single row, otherwise the row
slides out from under the pointer and the drag starts fighting itself. */
.sm-item--drop-before[b-0yqcrjuc5p]::after,
.sm-item--drop-after[b-0yqcrjuc5p]::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 3px;
border-radius: 2px;
background: var(--clr-blue-500);
box-shadow: 0 0 0 2px rgba(42, 86, 214, 0.18);
pointer-events: none;
}
.sm-item--drop-before[b-0yqcrjuc5p]::after {
top: -1.5px;
}
.sm-item--drop-after[b-0yqcrjuc5p]::after {
bottom: -1.5px;
}
/* ── Below the list ─────────────────────────────────── */
.sm-add[b-0yqcrjuc5p] {
margin-top: 0.25rem;
}
.sm-removed-rows[b-0yqcrjuc5p] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
}
.sm-removed-row[b-0yqcrjuc5p] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
opacity: 0.75;
}
/* /Components/Shared/Modals/TranscriptTurnModal.razor.rz.scp.css */
/* What was said, quoted so the deletion is aimed at something the user can read rather than at a
name. Sunken and quiet: it is context, not a field. */
.tt-quote[b-avgj4ep7dz] {
margin: 0;
max-height: 9rem;
overflow-y: auto;
padding: 0.7rem 0.85rem;
border-radius: var(--radius-md);
background: var(--surface-sunken);
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-muted);
white-space: pre-wrap;
}
/* Off to the left, away from the two buttons somebody reaches for by habit — and where the row breaks
into two, alone on the first of them. */
.tt-delete[b-avgj4ep7dz] {
margin-right: auto;
color: var(--clr-red-600);
}
.tt-confirm[b-avgj4ep7dz] {
display: flex;
gap: 0.5rem;
}
.tt-delete:hover:not(:disabled)[b-avgj4ep7dz] {
background: var(--clr-red-100);
color: var(--clr-red-600);
}
/* /Components/Shared/Modals/UnlistedSpeakersModal.razor.rz.scp.css */
/* Speakers not on the attendance list: one line, then a ticked row per person. */
.us-body[b-43e12u5vit] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.us-lead[b-43e12u5vit] {
margin: 0;
color: var(--text);
font-weight: 600;
}
.us-list[b-43e12u5vit] {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.35rem;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-xs);
}
.us-row[b-43e12u5vit] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.55rem;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s;
}
.us-row:hover[b-43e12u5vit] {
background: var(--surface-hover);
}
.us-row input[type="checkbox"][b-43e12u5vit] {
flex-shrink: 0;
margin: 0;
}
.us-name[b-43e12u5vit] {
flex: 1;
min-width: 0;
color: var(--text);
overflow-wrap: anywhere;
}
.us-account[b-43e12u5vit] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
flex-shrink: 0;
color: var(--text-muted);
font-size: 0.78rem;
}
/* /Components/Shared/Modals/UnsavedChangesModal.razor.rz.scp.css */
/* Discarding stands apart at the left and in the colour of what cannot be undone — without the fill
that would make it the loudest of the three. */
.unsaved-discard[b-0yorrcdzis] {
margin-right: auto;
color: var(--clr-red-600);
}
.unsaved-discard:hover:not(:disabled)[b-0yorrcdzis] {
background: var(--clr-red-50);
color: var(--clr-red-800);
}
/* /Components/Shared/Modals/UserProfileModal.razor.rz.scp.css */
/* The card for a colleague. Deliberately shaped like MyProfileModal's header — the dialog for oneself
and the card for somebody else are the same thing seen from two sides, so they open the same way. */
/* ── Identity ─────────────────────────────────────────── */
/* Outside .modal-body, so it stays put while the facts scroll (see docs/DESIGN-SYSTEM.md §9). */
.up-head[b-urfx7qahmc] {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 1.5rem 1.25rem;
border-bottom: 1px solid var(--clr-slate-100);
}
.up-identity[b-urfx7qahmc] {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.up-name[b-urfx7qahmc] {
font-size: 1.05rem;
font-weight: 600;
line-height: 1.3;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The role in the organisation sits directly under the name, where it is read as part of it. */
.up-title[b-urfx7qahmc] {
font-size: 0.88rem;
line-height: 1.35;
color: var(--text-secondary);
}
.up-user[b-urfx7qahmc] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--text-muted);
}
/* ── Contact ──────────────────────────────────────────── */
/* First in the body and styled as targets rather than as data: reaching the person is what most people
open this card for. */
.up-contact[b-urfx7qahmc] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1.1rem;
}
.up-contact-item[b-urfx7qahmc] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
max-width: 100%;
padding: 0.4rem 0.7rem;
border-radius: 8px;
background: var(--surface-sunken);
color: var(--text-body);
font-size: 0.86rem;
text-decoration: none;
}
.up-contact-item:hover[b-urfx7qahmc] {
background: var(--surface-hover);
color: var(--primary);
text-decoration: none;
}
.up-contact-item svg[b-urfx7qahmc] {
flex-shrink: 0;
color: var(--text-muted);
}
.up-contact-item span[b-urfx7qahmc] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Facts ────────────────────────────────────────────── */
/* Two columns with a fixed label width, so the values line up whatever is present — a profile without a
deputy must not shift the dates left. */
.up-facts[b-urfx7qahmc] {
display: grid;
grid-template-columns: 7rem 1fr;
gap: 0.6rem 1rem;
margin: 0;
align-items: baseline;
}
.up-facts dt[b-urfx7qahmc] {
font-size: 0.78rem;
color: var(--text-muted);
}
.up-facts dd[b-urfx7qahmc] {
margin: 0;
min-width: 0;
font-size: 0.88rem;
color: var(--text-body);
overflow-wrap: anywhere;
}
.up-deputy[b-urfx7qahmc] {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.4rem;
}
.up-note[b-urfx7qahmc] {
font-size: 0.8rem;
color: var(--text-muted);
}
/* /Components/Shared/Modals/VisibilityModal.razor.rz.scp.css */
/* The mode switch, the search and the list are VisibilityRulesEditor and AccessListEditor. */
/* ── Header count badge ──────────────────────────────── */
.vis-header-count[b-hyor08x6e5] {
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-slate-500);
background: var(--clr-slate-100);
padding: 0.15rem 0.55rem;
border-radius: var(--radius-pill);
margin-left: auto;
align-self: center;
}
/* The starter option, below the mode hint (passed into the editor, so still this dialog's markup). */
.vis-starter[b-hyor08x6e5] {
margin-top: 0.75rem;
}
/* ── Self-lockout warning ────────────────────────────── */
/* The line above the buttons (EntityFormModal's FooterNote), next to the "Trotzdem speichern" it explains. */
.vis-lockout[b-hyor08x6e5] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.vis-lockout[b-hyor08x6e5] .vis-lockout-icon {
color: var(--clr-amber-500);
flex-shrink: 0;
}
.vis-lockout-text[b-hyor08x6e5] {
font-size: 0.82rem;
color: var(--clr-slate-700);
}
/* /Components/Shared/Modals/VoiceEnrollModal.razor.rz.scp.css */
/* "Stimme neu kennenlernen": the text to read, how much of the voice is in, the level, a note. */
.ve-name[b-4zamo2y3a2] {
margin-left: auto;
padding: 0.15rem 0.55rem;
border-radius: var(--radius-pill);
background: var(--clr-violet-50);
color: var(--clr-violet-700);
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 14rem;
}
.ve-body[b-4zamo2y3a2] {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ve-who[b-4zamo2y3a2] {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
}
/* The text to read and the line above it, as the one child of the .reveal-slot that folds them away. */
.ve-reading[b-4zamo2y3a2] {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ve-lead[b-4zamo2y3a2] {
margin: 0;
color: var(--text);
font-weight: 600;
}
/* Read from a little distance, so larger than body text, and quiet until the microphone is open. */
.ve-text[b-4zamo2y3a2] {
margin: 0;
padding: 0.9rem 1rem;
border-left: 3px solid var(--border);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: var(--surface-sunken);
color: var(--text);
font-size: 1.05rem;
line-height: 1.7;
transition: border-color 0.2s ease, background 0.2s ease;
}
.ve-text.is-live[b-4zamo2y3a2] {
border-left-color: var(--clr-violet-500);
background: var(--clr-violet-50);
}
/* The voiceprint is in: a green check in place of the status, the bar and the level. */
.ve-recognized[b-4zamo2y3a2] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 1rem;
border-radius: var(--radius-lg);
background: var(--clr-green-50);
color: var(--clr-green-700);
font-size: 1.05rem;
font-weight: 600;
}
.ve-recognized[b-4zamo2y3a2] svg {
color: var(--clr-green-600);
}
/* It arrives rather than appears: the box fades and settles, the icon pops, and its two strokes draw
themselves — the circle first, then the check, from its short arm to the tip. The icon is Feather's
check-circle (Icon.razor): an arc of about 53 units and a polyline of about 18 drawn from the tip, hence
the dash lengths and the negative offset that draws the polyline backwards. The gaps are longer than
the dashes and the hidden dash ends short of the path: the round line caps would otherwise leave a dot
where the stroke is about to start. */
.ve-recognized[b-4zamo2y3a2] {
animation: ve-arrive-b-4zamo2y3a2 0.3s ease-out both;
}
.ve-recognized[b-4zamo2y3a2] svg {
animation: ve-pop-b-4zamo2y3a2 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ve-recognized[b-4zamo2y3a2] svg path {
stroke-dasharray: 60 80;
stroke-dashoffset: 62;
animation: ve-draw-circle-b-4zamo2y3a2 0.45s ease-out 0.1s forwards;
}
.ve-recognized[b-4zamo2y3a2] svg polyline {
stroke-dasharray: 20 40;
stroke-dashoffset: -21;
animation: ve-draw-check-b-4zamo2y3a2 0.3s ease-out 0.45s forwards;
}
@keyframes ve-arrive-b-4zamo2y3a2 {
from { opacity: 0; transform: translateY(4px) scale(0.97); }
to { opacity: 1; transform: none; }
}
@keyframes ve-pop-b-4zamo2y3a2 {
from { transform: scale(0.5); }
to { transform: scale(1); }
}
@keyframes ve-draw-circle-b-4zamo2y3a2 {
to { stroke-dashoffset: 0; }
}
@keyframes ve-draw-check-b-4zamo2y3a2 {
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ve-recognized[b-4zamo2y3a2],
.ve-recognized[b-4zamo2y3a2] svg {
animation: none;
}
.ve-recognized[b-4zamo2y3a2] svg path,
.ve-recognized[b-4zamo2y3a2] svg polyline {
animation: none;
stroke-dashoffset: 0;
}
}
.ve-live[b-4zamo2y3a2] {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ve-live.is-hidden[b-4zamo2y3a2] {
display: none;
}
.ve-meter[b-4zamo2y3a2] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.ve-heard[b-4zamo2y3a2] {
color: var(--text-muted);
font-size: 0.85rem;
}
.ve-progress[b-4zamo2y3a2] {
height: 6px;
border-radius: var(--radius-pill);
background: var(--clr-slate-100);
overflow: hidden;
}
/* Fills over the minute the dialog listens; the duration comes from the component. Linear, because it is
a clock. */
.ve-progress-fill[b-4zamo2y3a2] {
height: 100%;
border-radius: inherit;
background: var(--clr-violet-500);
transform-origin: left center;
animation-name: ve-listen-b-4zamo2y3a2;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes ve-listen-b-4zamo2y3a2 {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* The level, as in the recorder (TranscriptRecorder.razor.css): JS writes the bars, hence ::deep. */
.ve-wave[b-4zamo2y3a2] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
height: 2.75rem;
padding: 0 0.75rem;
border-radius: var(--radius-lg);
background: var(--surface-sunken);
}
.ve-wave[b-4zamo2y3a2] .ve-bar {
flex: 0 1 3px;
height: 100%;
border-radius: var(--radius-pill);
background: linear-gradient(180deg, var(--clr-violet-400), var(--clr-violet-600));
transform: scaleY(0.12);
transform-origin: center;
}
.ve-wave:not(.is-live)[b-4zamo2y3a2] .ve-bar {
background: var(--border);
transform: scaleY(0.12);
}
.ve-note[b-4zamo2y3a2] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0;
padding: 0.6rem 0.75rem;
border-radius: var(--radius-md);
background: var(--clr-amber-50);
color: var(--clr-amber-800);
font-size: 0.85rem;
line-height: 1.45;
}
.ve-note[b-4zamo2y3a2] svg {
flex-shrink: 0;
margin-top: 0.1rem;
}
/* /Components/Shared/Modals/WebhookDeliveryLogModal.razor.rz.scp.css */
.dlm-list[b-1xikqgagdd] {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 400px;
overflow-y: auto;
margin-bottom: 1rem;
}
.dlm-row[b-1xikqgagdd] {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.6rem 0.75rem;
background: var(--clr-slate-50);
border-radius: var(--radius-md);
border-left: 3px solid var(--clr-green-400);
}
.dlm-row--error[b-1xikqgagdd] {
border-left-color: var(--clr-red-400);
background: var(--clr-red-50);
}
.dlm-status[b-1xikqgagdd] {
flex-shrink: 0;
margin-top: 0.1rem;
}
.dlm-row:not(.dlm-row--error) .dlm-status[b-1xikqgagdd] { color: var(--clr-green-500); }
.dlm-row--error .dlm-status[b-1xikqgagdd] { color: var(--clr-red-500); }
.dlm-info[b-1xikqgagdd] {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
min-width: 0;
}
.dlm-trigger[b-1xikqgagdd] {
font-size: 0.88rem;
font-weight: 600;
color: var(--clr-slate-800);
}
.dlm-time[b-1xikqgagdd] {
font-size: 0.76rem;
color: var(--clr-slate-500);
}
.dlm-error[b-1xikqgagdd] {
font-size: 0.78rem;
color: var(--clr-red-600);
word-break: break-all;
}
.dlm-http[b-1xikqgagdd] {
font-size: 0.78rem;
color: var(--clr-slate-500);
flex-shrink: 0;
font-family: monospace;
}
.dlm-empty[b-1xikqgagdd] {
color: var(--text-faint);
font-size: 0.85rem;
margin: 0.5rem 0 1rem;
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* The button is the bar's .tb-btn and the panel's frame is TopBarPopover's; what is here is the bell's
own motion and the inbox inside the panel. The panel is TopBarPopover's element, so its rules reach
it through the wrapper (::deep). */
.notification-bell-wrapper[b-7b92pqdo0w] {
display: contents;
}
/* ── Something just arrived ─────────────────────────────────────────────
A message nobody on this screen has been told about is the one thing on the page that happens
without anybody doing it, so it is the one thing that has to announce itself. The bell rings — the
body swings out and dies down, the clapper lags behind it and strikes the other way — and the badge
lands on the count. Both play for a rise while the page is open, and on the first load only for what
this browser has not rung for yet (NotificationBell.AnnounceAsync), so a reload stays quiet. */
.notification-bell-icon[b-7b92pqdo0w] {
display: inline-flex;
transform-origin: 50% 15%; /* the crown of the bell, so it swings and does not spin */
}
.notification-bell-icon.is-ringing[b-7b92pqdo0w] {
animation: bell-ring-b-7b92pqdo0w 1.2s ease-in-out;
}
/* The clapper is a path of the Icon component's svg, hence ::deep. */
.notification-bell-icon.is-ringing[b-7b92pqdo0w] .bell-clapper {
animation: bell-clapper-b-7b92pqdo0w 1.2s ease-in-out;
}
@keyframes bell-ring-b-7b92pqdo0w {
0%, 100% { transform: rotate(0); }
8% { transform: rotate(18deg); }
20% { transform: rotate(-16deg); }
32% { transform: rotate(13deg); }
44% { transform: rotate(-10deg); }
56% { transform: rotate(7deg); }
68% { transform: rotate(-4deg); }
80% { transform: rotate(2deg); }
}
@keyframes bell-clapper-b-7b92pqdo0w {
0%, 100% { transform: translateX(0); }
12% { transform: translateX(-2.5px); }
24% { transform: translateX(2.5px); }
36% { transform: translateX(-2px); }
48% { transform: translateX(1.5px); }
60% { transform: translateX(-1px); }
72% { transform: translateX(0.5px); }
}
.notification-badge.is-new[b-7b92pqdo0w] {
animation: bell-badge-pop-b-7b92pqdo0w 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bell-badge-pop-b-7b92pqdo0w {
from { transform: scale(0.3); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* The count is the message; the swing is the flourish. */
@media (prefers-reduced-motion: reduce) {
.notification-bell-icon.is-ringing[b-7b92pqdo0w],
.notification-bell-icon.is-ringing[b-7b92pqdo0w] .bell-clapper,
.notification-badge.is-new[b-7b92pqdo0w] {
animation: none;
}
}
/* ── The inbox ───────────────────────────────────────────────────────── */
.notification-bell-wrapper[b-7b92pqdo0w] .notification-panel {
display: flex;
flex-direction: column;
max-height: min(600px, calc(100dvh - var(--top-bar-height) - 1.5rem));
overflow: hidden;
}
.notification-panel-header[b-7b92pqdo0w] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1rem 0.25rem;
flex-shrink: 0;
}
.notification-panel-header h3[b-7b92pqdo0w] {
margin: 0;
font-size: 1rem;
color: var(--text);
font-weight: 700;
}
.notification-panel-action[b-7b92pqdo0w] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--text-muted);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.notification-panel-action:hover[b-7b92pqdo0w] {
background: var(--btn-fill);
color: var(--text);
}
.notification-panel-empty[b-7b92pqdo0w] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 120px;
color: var(--text-faint);
flex: 1;
}
.notification-panel-empty p[b-7b92pqdo0w] {
margin: 0;
font-size: 0.88rem;
}
.notification-panel-list[b-7b92pqdo0w] {
flex: 1;
overflow-y: auto;
padding: 0 0.5rem 0.5rem;
}
.notification-item[b-7b92pqdo0w] {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.7rem 0.75rem;
border-radius: var(--radius-md);
transition: background 0.15s;
}
.notification-item:hover[b-7b92pqdo0w] {
background: var(--surface-hover);
}
/* The kind of news at a glance (Notification.Icon): plain and grey, so it marks the row without
competing with the title. As tall as the title's line, so the two sit level. */
.notification-icon[b-7b92pqdo0w] {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 1.44rem;
color: var(--text-muted);
}
.notification-content[b-7b92pqdo0w] {
flex: 1;
min-width: 0;
}
/* A row with a target is a button; it must still read as the plain text block it replaced. */
button.notification-content[b-7b92pqdo0w] {
display: block;
margin: 0;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
button.notification-content:focus-visible[b-7b92pqdo0w] {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
.notification-title[b-7b92pqdo0w],
.notification-body[b-7b92pqdo0w],
.notification-time[b-7b92pqdo0w] {
display: block;
}
.notification-title[b-7b92pqdo0w] {
font-weight: 600;
color: var(--text);
font-size: 0.9rem;
margin-bottom: 0.2rem;
word-break: break-word;
}
.notification-body[b-7b92pqdo0w] {
color: var(--text-secondary);
font-size: 0.85rem;
margin-bottom: 0.35rem;
white-space: normal;
word-break: break-word;
}
.notification-time[b-7b92pqdo0w] {
color: var(--text-faint);
font-size: 0.75rem;
}
.notification-close[b-7b92pqdo0w] {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 26px;
height: 26px;
padding: 0;
margin: 0;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--text-faint);
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.notification-close:hover[b-7b92pqdo0w] {
color: var(--text);
background: var(--btn-fill);
}
/* The rest of the unread ones, a page at a time — quiet, a row of the list rather than a button bar. */
.notification-more[b-7b92pqdo0w] {
display: block;
width: 100%;
margin-top: 0.25rem;
padding: 0.55rem 0.75rem;
border: none;
border-radius: var(--radius-md);
background: none;
font: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--primary);
text-align: center;
cursor: pointer;
transition: background 0.15s;
}
.notification-more:hover[b-7b92pqdo0w] {
background: var(--surface-hover);
}
.notification-more:focus-visible[b-7b92pqdo0w] {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
/* /Components/Shared/NotificationPreferenceGrid.razor.rz.scp.css */
/* Two parts, two sets of alignment lines.
The ways are rows: names flush left, controls flush right, whatever their height. The matrix is a
grid: nothing in a column head but a name, so the ticks sit under their word.
The first version merged them — the connection control lived in the table's column head — and that
cannot align. Three channels meant three head heights and three widths, and one channel meant a
wide switch floating above a narrow column of checkboxes. */
.np-intro[b-bwvt0ilc82] {
margin: 0 0 1.25rem;
color: var(--text-muted);
font-size: 0.875rem;
}
/* ── The ways ─────────────────────────────────────────────────────── */
.np-ways[b-bwvt0ilc82] {
margin-bottom: 1.75rem;
border: 1px solid var(--border);
border-radius: var(--radius-md, 8px);
overflow: hidden;
}
.np-way[b-bwvt0ilc82] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.65rem 0.9rem;
min-height: 3rem;
}
.np-way + .np-way[b-bwvt0ilc82],
.np-way--rhythm[b-bwvt0ilc82] {
border-top: 1px solid var(--border);
}
.np-way-name[b-bwvt0ilc82] {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
}
/* Right-hand edge every row shares, whatever fills it: a switch, a button, or an address. */
.np-way-control[b-bwvt0ilc82] {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
font-size: 0.8125rem;
color: var(--text-muted);
text-align: right;
/* An address can be long and must not push the row wider than the dialog. */
min-width: 0;
overflow-wrap: anywhere;
}
.np-rhythm-select[b-bwvt0ilc82] {
width: auto;
min-width: 11rem;
}
.np-ways-note[b-bwvt0ilc82] {
margin: 0;
padding: 0 0.9rem 0.75rem;
font-size: 0.8125rem;
color: var(--text-muted);
}
.np-way-control[b-bwvt0ilc82] .push-notification-toggle,
.np-way-control[b-bwvt0ilc82] .sms-connection {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
}
.np-way-control[b-bwvt0ilc82] .settings-hint {
font-size: 0.8125rem;
color: var(--text-muted);
}
/* ── The matrix ───────────────────────────────────────────────────── */
/* Wide content scrolls inside itself; the modal body must never scroll sideways. */
.np-scroll[b-bwvt0ilc82] {
overflow-x: auto;
}
.np-grid[b-bwvt0ilc82] {
width: 100%;
border-collapse: collapse;
/* Fixed: the channel columns share what is left evenly instead of being sized by their contents. */
table-layout: fixed;
}
.np-grid th[b-bwvt0ilc82],
.np-grid td[b-bwvt0ilc82] {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
}
.np-event-head[b-bwvt0ilc82],
.np-event[b-bwvt0ilc82] {
width: 45%;
text-align: left;
}
.np-event[b-bwvt0ilc82] {
font-weight: 400;
color: var(--text-primary);
}
.np-channel-head[b-bwvt0ilc82] {
text-align: center;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
/* The icon rides on the text baseline rather than starting a flex row, so a one-word head stays one
line and centres cleanly over its column. */
.np-channel-head[b-bwvt0ilc82] svg {
vertical-align: -2px;
margin-right: 0.3rem;
}
/* A second, quieter line under the channel name: the one exception to the rhythm, said where the
ticks are rather than in a sentence the reader has to connect to the column. */
.np-channel-note[b-bwvt0ilc82] {
display: block;
margin-top: 0.1rem;
font-size: 0.6875rem;
font-weight: 400;
color: var(--text-muted);
}
.np-grid tbody td[b-bwvt0ilc82] {
text-align: center;
}
.np-grid tbody tr:hover[b-bwvt0ilc82] {
background: var(--surface-hover);
}
.np-grid input[type="checkbox"][b-bwvt0ilc82] {
width: 1.05rem;
height: 1.05rem;
accent-color: var(--clr-navy-700);
cursor: pointer;
}
@media (max-width: 640px) {
.np-way[b-bwvt0ilc82] {
align-items: flex-start;
flex-direction: column;
gap: 0.4rem;
}
.np-way-control[b-bwvt0ilc82] {
justify-content: flex-start;
text-align: left;
}
.np-grid[b-bwvt0ilc82] {
table-layout: auto;
min-width: 26rem;
}
.np-event-head[b-bwvt0ilc82],
.np-event[b-bwvt0ilc82] {
width: auto;
}
}
/* /Components/Shared/OutreachQuestions.razor.rz.scp.css */
/* A Kontaktieren's questions as the person outside answers them (docs/OUTREACH.md §6). */
.oq[b-4l1lcwyj2k] {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.oq-question[b-4l1lcwyj2k] {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
.oq-text[b-4l1lcwyj2k] {
float: none;
width: auto;
margin: 0 0 0.6rem;
padding: 0;
font-size: 1rem;
font-weight: 600;
color: var(--text);
overflow-wrap: anywhere;
}
.oq-answers[b-4l1lcwyj2k] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Options in a row: filled and flat, never outlined; the picked one takes the primary fill and a soft glow
(docs/DESIGN-SYSTEM.md §5a). */
.oq-answer[b-4l1lcwyj2k] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px;
padding: 0.5rem 1rem;
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: var(--btn-fill);
color: var(--text);
font: inherit;
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.oq-answer:hover:not(:disabled)[b-4l1lcwyj2k] {
background: var(--btn-fill-hover);
}
.oq-answer.is-picked[b-4l1lcwyj2k],
.oq-answer.is-picked:hover:not(:disabled)[b-4l1lcwyj2k] {
background: var(--primary);
color: var(--clr-always-white);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.16);
}
.oq-answer:disabled[b-4l1lcwyj2k] {
cursor: default;
opacity: 0.7;
}
.oq-actions[b-4l1lcwyj2k] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* /Components/Shared/PageLoading.razor.rz.scp.css */
.page-loading[b-ydyk5fj27h] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 3.5rem 1rem;
color: var(--clr-slate-400);
font-size: 0.95rem;
}
.page-loading--compact[b-ydyk5fj27h] {
flex-direction: row;
gap: 0.5rem;
padding: 0.75rem 1rem;
color: var(--clr-slate-500);
font-size: 0.85rem;
}
/* /Components/Shared/PageScaffold.razor.rz.scp.css */
/* Page toolbar: one row that may wrap. The title uses the global h1 sizing, which the design language
scales up to --text-hero with tight tracking.
On a phone the actions stay beside the title, top right, while they fit next to a title column of
10rem — a star and the ⋮ menu always do — and the title wraps in what is left. Only a wider group, a
row of buttons, drops to a line of its own. The toolbar used to stack on every phone, which put two
icons alone on a line under the title, as if they belonged to nothing. */
.page-scaffold-toolbar[b-2so2ez36vp] {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.page-scaffold-left[b-2so2ez36vp] {
flex: 1 1 10rem;
display: flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.page-scaffold-title[b-2so2ez36vp] {
margin: 0;
/* Entity titles can be long – on a phone they wrap; from 768px they shorten instead (below). */
overflow-wrap: anywhere;
}
/* Same icon/title pairing as SettingsPageHeader, so a list page with a search slot
and a plain settings page wear their icon alike. */
.page-scaffold-title.has-icon[b-2so2ez36vp] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Extra breathing room between leading toolbar buttons and the title. */
.page-scaffold-title:not(:first-child)[b-2so2ez36vp] {
margin-left: 0.4rem;
}
.page-scaffold-actions[b-2so2ez36vp] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.page-scaffold-subtitle[b-2so2ez36vp] {
font-size: 0.92rem;
color: var(--text-muted);
margin: 0 0 1.5rem;
max-width: 70ch;
}
/* Pull the subtitle up close under the toolbar row. */
.page-scaffold-toolbar + .page-scaffold-subtitle[b-2so2ez36vp] {
margin-top: -0.85rem;
}
.page-scaffold-back[b-2so2ez36vp] {
margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
.page-scaffold-toolbar[b-2so2ez36vp] {
justify-content: space-between;
align-items: center;
}
.page-scaffold-actions[b-2so2ez36vp] {
flex-shrink: 0;
}
/* A long title gives way before the actions do: it shortens to one line with "…" and the
actions stay on its right. Only when the left group would get less than 20rem does the
action group drop to a row of its own. */
.page-scaffold-left[b-2so2ez36vp] {
flex: 1 1 20rem;
}
.page-scaffold-title[b-2so2ez36vp] {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Status dot, badges and buttons beside the title keep their size – only the title gives way: it
wraps on a phone and shortens from 768px. */
.page-scaffold-left[b-2so2ez36vp] > :not(.page-scaffold-title) {
flex-shrink: 0;
}
/* /Components/Shared/PasskeyList.razor.rz.scp.css */
/* The same rows as the sessions tab beside it (UserSessionList): a passkey is a device that can
sign in, a session is a device that has. */
.passkey-tab[b-g854j3g8so] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.passkey-empty[b-g854j3g8so] {
color: var(--clr-slate-400);
font-size: 0.88rem;
margin: 0;
}
.passkey-list[b-g854j3g8so] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.passkey-item[b-g854j3g8so] {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.6rem 0.7rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
}
.passkey-icon[b-g854j3g8so] {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--radius-md);
background: var(--clr-slate-100);
color: var(--clr-slate-600);
}
.passkey-info[b-g854j3g8so] {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
flex: 1;
}
.passkey-name[b-g854j3g8so] {
font-size: 0.88rem;
font-weight: 500;
color: var(--clr-slate-800);
}
.passkey-meta[b-g854j3g8so] {
font-size: 0.78rem;
color: var(--clr-slate-500);
}
.passkey-actions[b-g854j3g8so] {
display: flex;
justify-content: flex-end;
}
/* /Components/Shared/PasswordInput.razor.rz.scp.css */
.password-input[b-phvu2s2csz] {
position: relative;
}
.password-input input[b-phvu2s2csz] {
padding-right: 2.4rem;
}
/* Edge draws its own reveal eye into password fields — it would sit next to ours. */
.password-input input[b-phvu2s2csz]::-ms-reveal {
display: none;
}
.password-input-toggle[b-phvu2s2csz] {
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
}
/* /Components/Shared/PhotoCaptureField.razor.rz.scp.css */
.photo-field[b-grkzn9ex02] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* ─── Thumbnail grid ─── */
.photo-grid[b-grkzn9ex02] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr));
gap: 0.5rem;
}
.photo-thumb[b-grkzn9ex02] {
position: relative;
aspect-ratio: 4 / 3;
/* --form-*: the lines of a form design, when the field sits in one (docs/FORMS.md §11.5). */
border: 1px solid var(--form-line-color, var(--border));
border-radius: var(--form-radius, var(--radius-md));
overflow: hidden;
background: var(--clr-slate-100);
}
.photo-thumb img[b-grkzn9ex02] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: zoom-in;
}
.photo-thumb-remove[b-grkzn9ex02] {
position: absolute;
top: 0.3rem;
right: 0.3rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: var(--radius-pill);
background: rgba(15, 27, 61, 0.65);
color: white;
cursor: pointer;
}
.photo-thumb-remove:hover[b-grkzn9ex02] {
background: var(--clr-red-600);
}
.photo-empty[b-grkzn9ex02] {
padding: 1.5rem;
text-align: center;
color: var(--clr-slate-400);
font-size: 0.85rem;
border: 1px dashed var(--form-line-color, var(--clr-slate-300));
border-radius: var(--form-radius, var(--radius-md));
}
/* ─── Actions ─── */
.photo-actions[b-grkzn9ex02] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.photo-actions label[b-grkzn9ex02] {
margin: 0;
cursor: pointer;
}
.photo-btn-disabled[b-grkzn9ex02] {
opacity: 0.55;
pointer-events: none;
}
.photo-hint[b-grkzn9ex02] {
font-size: 0.78rem;
color: var(--clr-slate-500);
}
.photo-error[b-grkzn9ex02] {
margin: 0;
font-size: 0.78rem;
color: var(--clr-red-600);
}
/* ─── Overlay (camera + lightbox) ─── */
.photo-overlay[b-grkzn9ex02] {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(15, 27, 61, 0.78);
}
.photo-overlay-inner[b-grkzn9ex02] {
display: flex;
flex-direction: column;
width: min(680px, 100%);
max-height: 92dvh;
/* The surface token, not white: the header above is dark in dark mode, and its light text sat on white. */
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.photo-overlay-header[b-grkzn9ex02] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem 1rem;
font-weight: 600;
font-size: 0.9rem;
color: var(--clr-slate-700);
border-bottom: 1px solid var(--clr-slate-200);
}
.photo-overlay-header span[b-grkzn9ex02] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.photo-video-wrap[b-grkzn9ex02] {
position: relative;
background: var(--surface-inverse);
min-height: 240px;
}
.photo-video-wrap video[b-grkzn9ex02] {
display: block;
width: 100%;
max-height: 60dvh;
object-fit: contain;
}
.photo-video-error[b-grkzn9ex02] {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
text-align: center;
color: white;
font-size: 0.9rem;
background: rgba(15, 27, 61, 0.85);
}
.photo-capture-flash[b-grkzn9ex02] {
position: absolute;
inset: 0;
background: white;
animation: photo-flash-b-grkzn9ex02 0.18s ease-out;
pointer-events: none;
}
@keyframes photo-flash-b-grkzn9ex02 {
from { opacity: 0.9; }
to { opacity: 0; }
}
.photo-overlay-footer[b-grkzn9ex02] {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
justify-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-top: 1px solid var(--clr-slate-200);
}
.photo-overlay-footer > :first-child[b-grkzn9ex02] { justify-self: start; }
.photo-overlay-footer > :last-child[b-grkzn9ex02] { justify-self: end; grid-column: 3; }
.photo-overlay-footer > .photo-shutter[b-grkzn9ex02] { grid-column: 2; }
.photo-shutter[b-grkzn9ex02] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
padding: 0;
border: 3px solid var(--clr-slate-700);
border-radius: var(--radius-pill);
background: white;
cursor: pointer;
}
.photo-shutter:disabled[b-grkzn9ex02] {
opacity: 0.4;
cursor: default;
}
.photo-shutter-inner[b-grkzn9ex02] {
width: 42px;
height: 42px;
border-radius: var(--radius-pill);
background: var(--clr-red-600);
transition: transform 0.1s ease;
}
.photo-shutter:not(:disabled):active .photo-shutter-inner[b-grkzn9ex02] {
transform: scale(0.85);
}
/* ─── Lightbox ─── */
.photo-lightbox[b-grkzn9ex02] {
position: relative;
max-width: min(1080px, 96vw);
max-height: 92dvh;
}
.photo-lightbox img[b-grkzn9ex02] {
display: block;
max-width: 100%;
max-height: 92dvh;
border-radius: var(--radius-md);
object-fit: contain;
}
.photo-lightbox-close[b-grkzn9ex02] {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: rgba(255, 255, 255, 0.9);
}
.photo-lightbox-nav[b-grkzn9ex02] {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.9);
color: var(--clr-slate-700);
cursor: pointer;
}
.photo-lightbox-nav.prev[b-grkzn9ex02] { left: 0.5rem; }
.photo-lightbox-nav.next[b-grkzn9ex02] { right: 0.5rem; }
.photo-lightbox-counter[b-grkzn9ex02] {
position: absolute;
bottom: 0.6rem;
left: 50%;
transform: translateX(-50%);
padding: 0.2rem 0.7rem;
border-radius: var(--radius-pill);
background: rgba(15, 27, 61, 0.65);
color: white;
font-size: 0.78rem;
}
/* ─── Print / PDF export ─── */
@media print {
.photo-actions[b-grkzn9ex02],
.photo-thumb-remove[b-grkzn9ex02],
.photo-overlay[b-grkzn9ex02] {
display: none !important;
}
}
body.pdf-exporting .photo-actions[b-grkzn9ex02],
body.pdf-exporting .photo-thumb-remove[b-grkzn9ex02],
body.pdf-exporting .photo-overlay[b-grkzn9ex02],
.pdf-layout .photo-actions[b-grkzn9ex02],
.pdf-layout .photo-thumb-remove[b-grkzn9ex02],
.pdf-layout .photo-overlay[b-grkzn9ex02] {
display: none !important;
}
/* /Components/Shared/PluginMailGrants.razor.rz.scp.css */
/* One row per mailbox on a two-column grid: who it is on the left, the switches on the right, and
underneath — flush with the name — what the switches hand out. Every line starts on the same left
edge, and the switch cells have a fixed width so "Senden" and "Lesen" form columns down the list. */
.plugin-grant-intro[b-gssyc4lpt1] {
margin: 0;
}
.plugin-grant[b-gssyc4lpt1] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 1.5rem;
row-gap: 0.6rem;
padding: 0.9rem 0;
}
.plugin-grant:first-child[b-gssyc4lpt1] {
padding-top: 0;
}
.plugin-grant:last-child[b-gssyc4lpt1] {
padding-bottom: 0;
}
.plugin-grant + .plugin-grant[b-gssyc4lpt1] {
border-top: 1px solid var(--border);
}
.plugin-grant-id[b-gssyc4lpt1] {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.plugin-grant-name[b-gssyc4lpt1] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
font-weight: 600;
color: var(--text);
}
.plugin-grant-name code[b-gssyc4lpt1] {
font-size: 0.75rem;
padding: 0.05rem 0.3rem;
border-radius: 4px;
background: var(--surface-sunken);
color: var(--text-muted);
font-weight: 400;
}
.plugin-grant-address[b-gssyc4lpt1] {
font-size: 0.8rem;
color: var(--text-muted);
}
.plugin-grant-toggles[b-gssyc4lpt1] {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 7.5rem;
column-gap: 0.5rem;
}
/* Reach, missing legs and the system-sender warning share one icon column and one type size; only
the colour says how much each one matters. */
.plugin-grant-notes[b-gssyc4lpt1] {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8rem;
color: var(--text-secondary);
}
.plugin-grant-notes li[b-gssyc4lpt1] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
/* On the first line's centre, not the paragraph's. */
.plugin-grant-notes[b-gssyc4lpt1] svg {
flex-shrink: 0;
margin-top: 0.15rem;
color: var(--text-muted);
}
.plugin-grant-notes .is-muted[b-gssyc4lpt1] {
color: var(--text-muted);
}
.plugin-grant-notes .is-warn[b-gssyc4lpt1] {
color: var(--clr-amber-800);
}
.plugin-grant-notes .is-warn[b-gssyc4lpt1] svg {
color: var(--clr-amber-600);
}
@media (max-width: 640px) {
.plugin-grant[b-gssyc4lpt1] {
grid-template-columns: minmax(0, 1fr);
}
}
/* /Components/Shared/PluginPanel.razor.rz.scp.css */
/* The docked plugin panel on the right. Same shape and depth as the AI chat panel so the two read as
one family of surfaces. From 1024px up the page makes room for it (.plugin-open in
AppShell.razor.css), like it does for the assistant and the recorder: overlaid, it covered the
button in the top bar that closes it. */
.plugin-panel[b-hkpj13yuza] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(var(--plugin-panel-width), 100vw);
z-index: 1050;
display: flex;
flex-direction: column;
border-left: 1px solid var(--border);
box-shadow: var(--shadow-lg);
animation: plugin-panel-in-b-hkpj13yuza 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The surface, see-through over the blurred page like the chat's and the recorder's. On a layer of
its own: backdrop-filter on the panel would make it the containing block of a plugin's fixed
popups, and the backdrop root of its menus. */
.plugin-panel[b-hkpj13yuza]::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--surface);
background: var(--surface-menu);
-webkit-backdrop-filter: var(--menu-blur);
backdrop-filter: var(--menu-blur);
}
/* In from the edge with no fade: below full opacity the panel is a backdrop root, and the glass
would blur nothing until the fade had ended. */
@keyframes plugin-panel-in-b-hkpj13yuza {
from { transform: translateX(100%); }
to { transform: none; }
}
/* ── Head ── */
.plugin-panel-head[b-hkpj13yuza] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.plugin-panel-icon[b-hkpj13yuza] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-lg);
background: var(--surface-hover);
color: var(--text);
flex-shrink: 0;
}
.plugin-panel-title[b-hkpj13yuza] {
margin: 0;
font-size: 0.98rem;
font-weight: 600;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plugin-panel-close[b-hkpj13yuza] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: var(--radius-lg);
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.plugin-panel-close:hover[b-hkpj13yuza] {
background: var(--surface-hover);
color: var(--text);
}
/* ── Body and action row ──
The body scrolls, the footer is pinned — the same division the plugin dialog makes, so a plugin's
behaves identically wherever it is drawn. */
.plugin-panel-body[b-hkpj13yuza] {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* A plugin's surface fills the panel rather than sitting at the top of it. Written with ::deep
because the surface belongs to a child component, which this stylesheet cannot reach otherwise.
Column flow, so a widget inside can claim the height a panel has and a text region can grow —
for ordinary markup this reads the same as the block flow it replaces. */
.plugin-panel-body[b-hkpj13yuza] .plugin-surface {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.plugin-panel-foot[b-hkpj13yuza] {
flex-shrink: 0;
padding: 12px 16px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
}
.plugin-panel-foot[b-hkpj13yuza] .plugin-footer {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 640px) {
.plugin-panel[b-hkpj13yuza] {
width: 100vw;
border-left: none;
}
}
/* Touch devices: follow the *visible* viewport. `top: 0; bottom: 0` spans the layout viewport,
which the on-screen keyboard does not shrink on every engine — a panel whose plugin renders
a form would then run on under the keyboard. js/viewport.js publishes the visible box. */
@media (hover: none) and (pointer: coarse) {
.plugin-panel[b-hkpj13yuza] {
bottom: auto;
top: var(--visual-top, 0px);
height: var(--visual-vh, 100dvh);
}
}
/* /Components/Shared/PluginPermissions.razor.rz.scp.css */
/* One row per capability, the PluginMailGrants grid with an icon column in front: what the plugin
asked for in the middle, a grant on the right where there is one, and underneath — flush with the
name — what that grant hands out. */
.plugin-perm[b-10blmgk8xd] {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 0.9rem;
row-gap: 0.6rem;
padding: 0.9rem 0;
}
.plugin-perm:first-child[b-10blmgk8xd] {
padding-top: 0;
}
.plugin-perm:last-child[b-10blmgk8xd] {
padding-bottom: 0;
}
.plugin-perm + .plugin-perm[b-10blmgk8xd] {
border-top: 1px solid var(--border);
}
.plugin-perm-icon[b-10blmgk8xd] {
display: inline-flex;
align-self: start;
margin-top: 0.1rem;
color: var(--text-muted);
}
.plugin-perm-id[b-10blmgk8xd] {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.plugin-perm-name[b-10blmgk8xd] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
font-weight: 600;
color: var(--text);
}
.plugin-perm-name code[b-10blmgk8xd],
.plugin-perm-notes code[b-10blmgk8xd] {
font-size: 0.75rem;
padding: 0.05rem 0.3rem;
border-radius: 4px;
background: var(--surface-sunken);
color: var(--text-muted);
font-weight: 400;
}
/* The network row carries two switches; stacked, their labels start on one edge. */
.plugin-perm-grant[b-10blmgk8xd] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
.plugin-perm-hint[b-10blmgk8xd] {
font-size: 0.8rem;
color: var(--text-muted);
}
.plugin-perm-notes[b-10blmgk8xd] {
grid-column: 2 / -1;
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8rem;
color: var(--text-secondary);
}
.plugin-perm-notes li[b-10blmgk8xd] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
/* On the first line's centre, not the paragraph's. */
.plugin-perm-notes[b-10blmgk8xd] svg {
flex-shrink: 0;
margin-top: 0.15rem;
color: var(--text-muted);
}
.plugin-perm-notes .is-muted[b-10blmgk8xd] {
color: var(--text-muted);
}
.plugin-perm-notes .is-warn[b-10blmgk8xd] {
color: var(--clr-amber-800);
}
.plugin-perm-notes .is-warn[b-10blmgk8xd] svg {
color: var(--clr-amber-600);
}
/* The plugin's address: long and unbroken, so it wraps anywhere rather than widening the row. */
.plugin-perm-notes .plugin-perm-hook[b-10blmgk8xd] {
align-items: center;
flex-wrap: wrap;
}
.plugin-perm-notes .plugin-perm-url[b-10blmgk8xd] {
min-width: 0;
overflow-wrap: anywhere;
}
.plugin-perm-hook select[b-10blmgk8xd] {
width: auto;
}
@media (max-width: 640px) {
.plugin-perm[b-10blmgk8xd] {
grid-template-columns: auto minmax(0, 1fr);
}
.plugin-perm-grant[b-10blmgk8xd] {
grid-column: 2;
}
}
/* /Components/Shared/Plugins/PhotoWidget.razor.rz.scp.css */
/* The camera block inside a plugin's surface. Like the dictation widget it carries no card and no
title: the dialog around it already has both, and a card on a card does not read
(docs/DESIGN-SYSTEM.md §8). What is left is the strip of pictures and its two buttons, which
PhotoCaptureField draws — everything here is the frame around them. */
.plugin-photo[b-rdm9v0euzc] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.plugin-photo-error[b-rdm9v0euzc] {
display: flex;
align-items: center;
gap: 0.375rem;
margin: 0;
font-size: 0.8125rem;
color: var(--clr-red-600);
}
/* /Components/Shared/Popover.razor.rz.scp.css */
/* The same floating sheet as the context menu: a card above the page, pinned where PopupPlacement put it. */
.popover[b-34dps876w1] {
z-index: 9999;
width: 18rem;
max-width: calc(100vw - 1rem);
max-height: min(26rem, calc(100vh - 1rem));
overflow-y: auto;
padding: 0.75rem;
background: var(--surface);
border: 1px solid transparent;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
scrollbar-width: thin;
animation: popover-down-b-34dps876w1 0.12s ease-out;
}
.popover:focus[b-34dps876w1] {
outline: none;
}
.popover--above[b-34dps876w1] {
animation-name: popover-up-b-34dps876w1;
}
@keyframes popover-down-b-34dps876w1 {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes popover-up-b-34dps876w1 {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/PopupBackdrop.razor.rz.scp.css */
/* Just below the popups themselves (z-index 9999), above everything else on the page. */
.popup-backdrop[b-0436nolkpe] {
position: fixed;
inset: 0;
z-index: 9998;
}
/* /Components/Shared/PopupListbox.razor.rz.scp.css */
/* The open list of DropdownSelect and BadgeSelect. What differs between the two — the type size of a
plain option, the weight of the chosen one — is set by the owner through ::deep. */
.popup-list[b-bpnmr93wn9] {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
z-index: 9999;
padding: 0.3rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
/* A long option must not widen the list past the screen it is pinned to. */
max-width: calc(100vw - 1rem);
animation: popup-list-down-b-bpnmr93wn9 0.12s ease-out;
}
.popup-list--above[b-bpnmr93wn9] {
animation: popup-list-up-b-bpnmr93wn9 0.12s ease-out;
}
.popup-list--scrolls[b-bpnmr93wn9] {
max-height: 220px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--clr-slate-200) transparent;
}
@keyframes popup-list-down-b-bpnmr93wn9 {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes popup-list-up-b-bpnmr93wn9 {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.popup-option[b-bpnmr93wn9] {
display: flex;
align-items: center;
padding: 0.45rem 0.6rem;
border: none;
background: none;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background 0.12s;
font-family: inherit;
width: 100%;
text-align: left;
}
.popup-option:hover[b-bpnmr93wn9],
.popup-option:focus-visible[b-bpnmr93wn9] {
background: var(--surface-hover);
}
/* The arrow keys move focus from option to option, so the one that has it must be unmistakable. */
.popup-option:focus-visible[b-bpnmr93wn9] {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
.popup-option--selected[b-bpnmr93wn9] {
background: var(--clr-slate-100);
}
/* /Components/Shared/ProgressBar.razor.rz.scp.css */
.meter[b-kx9p4z1ias] {
position: relative;
height: 1.65rem;
border-radius: var(--radius-pill);
background: var(--clr-slate-100);
box-shadow: inset 0 0 0 1px var(--clr-slate-200);
overflow: hidden;
flex-shrink: 0;
}
/* Flat fill with a diagonal hatch – texture without any depth or gloss. */
.meter-fill[b-kx9p4z1ias] {
position: absolute;
inset: 0 auto 0 0;
border-radius: var(--radius-pill);
background-color: var(--clr-emerald-500);
background-image: repeating-linear-gradient(45deg,
rgba(255, 255, 255, 0.14) 0 5px,
transparent 5px 10px);
transition: width 0.35s ease;
}
.meter-labels[b-kx9p4z1ias] {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0 0.8rem;
font-size: 0.78rem;
white-space: nowrap;
pointer-events: none;
}
.meter-caption[b-kx9p4z1ias] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: var(--clr-slate-600);
}
.meter-pct[b-kx9p4z1ias] {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--clr-slate-700);
}
/* Clipped copy: same text, white, revealed in step with the fill. */
.meter-labels-on-fill[b-kx9p4z1ias] {
transition: clip-path 0.35s ease;
}
.meter-labels-on-fill .meter-caption[b-kx9p4z1ias],
.meter-labels-on-fill .meter-pct[b-kx9p4z1ias] {
color: var(--clr-white);
}
/* /Components/Shared/ProgressSummary.razor.rz.scp.css */
/* Its own card, not a strip of chrome: the progress is the first thing a project has to say. */
.progress-summary[b-at1fblbi56] {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
background: var(--surface);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-sm);
}
/* A custom property is a token of text until it is registered, and text cannot be interpolated — so
an unregistered --ring-fill makes the ring jump from one percentage to the next. Naming its type
here is the whole reason the sweep below works.
A browser that does not know @property ignores this block, keeps the old jump, and loses nothing
else: the transition simply has nothing to interpolate. */
@property --ring-fill {
syntax: "";
inherits: false;
initial-value: 0%;
}
/* A ring rather than a bar: the fill is a conic gradient and the hole is a disc of the card's own
surface, so the percentage sits in the middle without a second element to keep in sync.
It sweeps round to a new value rather than cutting to it — a step of the project just finished,
and that is the one moment this card exists to show. */
.summary-ring[b-at1fblbi56] {
position: relative;
display: grid;
place-items: center;
flex: none;
width: 3.25rem;
height: 3.25rem;
border-radius: var(--radius-circle);
background: conic-gradient(var(--primary) var(--ring-fill, 0%), var(--surface-track) 0);
transition: --ring-fill 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
.summary-ring[b-at1fblbi56] {
transition: none;
}
}
.summary-ring[b-at1fblbi56]::before {
content: "";
position: absolute;
inset: 5px;
border-radius: var(--radius-circle);
background: var(--surface);
}
.ring-value[b-at1fblbi56] {
position: relative; /* above the disc the ::before paints */
font-size: 0.72rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.summary-text[b-at1fblbi56] {
display: flex;
flex-direction: column;
min-width: 0;
}
.summary-label[b-at1fblbi56] {
font-size: 1rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.summary-caption[b-at1fblbi56] {
font-size: 0.85rem;
color: var(--text-muted);
}
/* The rail rides beside the count, not under it — one line, whatever the step count. */
.summary-steps[b-at1fblbi56] {
display: flex;
align-items: center;
gap: 0.4rem;
margin-left: 0.75rem;
min-width: 0;
}
/* box-shadow is in the list because that is what the halo of the active step is made of: without it
the fill would fade to the next dot while the halo jumped there, which reads as two events rather
than one step moving along the rail. */
.step-dot[b-at1fblbi56] {
flex: none;
width: 0.55rem;
height: 0.55rem;
border-radius: var(--radius-circle);
background: var(--surface-track);
transition: background 0.2s ease, box-shadow 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.step-dot[b-at1fblbi56] {
transition: none;
}
}
.step-done[b-at1fblbi56] {
background: var(--primary);
}
/* Where the work stands: the same fill, haloed so it still reads apart from a finished step. */
.step-active[b-at1fblbi56] {
background: var(--primary);
box-shadow: 0 0 0 3px var(--clr-blue-100);
}
/* Called off — greyer than waiting, because nothing is coming. */
.step-cancelled[b-at1fblbi56] {
background: var(--border-strong);
}
.step-more[b-at1fblbi56] {
font-size: 0.75rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* On a phone the count carries the whole message; the rail is the first thing to go. */
@media (max-width: 640px) {
.progress-summary[b-at1fblbi56] {
padding: 0.85rem 1rem;
}
.summary-steps[b-at1fblbi56] {
display: none;
}
}
/* /Components/Shared/ProjectFormsCard.razor.rz.scp.css */
/* The section is the shared .detail-section card, so the table inside gives up its own frame — a card
in a card, as the attendance list in a protocol does (ProtocolDetail.razor.css). */
.pfc-table[b-9cgt3asj33] .table-container {
background: none;
box-shadow: none;
padding: 0;
}
.pfc-table[b-9cgt3asj33] .data-table {
white-space: nowrap;
}
.pfc-empty[b-9cgt3asj33] {
color: var(--clr-slate-400);
font-size: 0.88rem;
margin-top: 0.5rem;
}
/* /Components/Shared/ProjectStoragePanel.razor.rz.scp.css */
/* The sections themselves are the shared .detail-section cards the work order uses for its attachments —
only the search row, the value preview and the empty line are specific to the storage. The preview and
the slot description sit in AttachmentItem's Body, but they are written here, so they carry this scope. */
.storage-search[b-yttgoomz7a] {
margin-bottom: 1rem;
}
.storage-value[b-yttgoomz7a] {
font-family: var(--font-mono, monospace);
font-size: 0.8rem;
color: var(--clr-slate-600);
word-break: break-word;
}
/* A slot says whether it is filled: green with its count, amber while a required one is missing. */
.psp-slot-done[b-yttgoomz7a] {
color: var(--clr-green-600);
}
.psp-slot-missing[b-yttgoomz7a] {
color: var(--clr-amber-600);
}
/* The file inputs stay hidden; their labels are the buttons. */
.psp-file-input[b-yttgoomz7a] {
display: none;
}
.psp-file-button[b-yttgoomz7a] {
cursor: pointer;
}
/* "Mehr laden", "Eintrag hinzufügen" and the system-entry toggle under a list. */
.psp-below[b-yttgoomz7a] {
margin-top: 0.75rem;
}
/* /Components/Shared/ProjectTile.razor.rz.scp.css */
/* The body this component puts into a shared . Text is graded by opacity of the card's own text
colour, so it reads on a plain card and on one with a picture, where that colour is white. */
/* The status pill: only drawn when there is something to say. */
.tile-pill[b-vzrj8u4z9a]::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.tile-pill--danger[b-vzrj8u4z9a] {
background: var(--clr-red-100);
color: var(--danger-text);
}
.tile-pill--waiting[b-vzrj8u4z9a] {
background: var(--clr-amber-100);
color: var(--clr-amber-800);
}
.tile-step[b-vzrj8u4z9a] {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-top: 0.35rem;
}
.tile-overline[b-vzrj8u4z9a] {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
opacity: 0.55;
}
.tile-step-row[b-vzrj8u4z9a] {
display: flex;
align-items: baseline;
gap: 0.35rem;
min-width: 0;
font-size: 0.92rem;
}
.tile-step-name[b-vzrj8u4z9a] {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
}
.tile-step-name.is-empty[b-vzrj8u4z9a] {
font-weight: 500;
font-style: italic;
opacity: 0.6;
}
.tile-step-more[b-vzrj8u4z9a] {
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 600;
opacity: 0.55;
}
.tile-step-count[b-vzrj8u4z9a] {
flex-shrink: 0;
margin-left: auto;
padding-left: 0.5rem;
font-size: 0.82rem;
}
.tile-step-count span[b-vzrj8u4z9a] {
opacity: 0.55;
}
/* One segment per step. Done is the card's text colour, so it stays neutral on both grounds. */
.tile-segments[b-vzrj8u4z9a] {
display: flex;
gap: 3px;
height: 6px;
}
.tile-segment[b-vzrj8u4z9a] {
flex: 1;
min-width: 0;
border-radius: var(--radius-pill);
background: currentColor;
opacity: 0.13;
}
.tile-segment.is-done[b-vzrj8u4z9a] {
opacity: 0.7;
}
/* The step open now blinks gently, so the eye finds where the run stands. */
.tile-segment.is-current[b-vzrj8u4z9a] {
background: var(--clr-gold-500);
opacity: 1;
animation: tile-segment-blink-b-vzrj8u4z9a 1.4s ease-in-out infinite;
}
@keyframes tile-segment-blink-b-vzrj8u4z9a {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
.tile-segment.is-current[b-vzrj8u4z9a] { animation: none; }
}
.tile-segment.is-overdue[b-vzrj8u4z9a] {
background: var(--clr-red-500);
opacity: 1;
}
/* Three figures side by side, set apart by hairlines rather than boxes. margin-top: auto keeps them —
and the footer under them — at the bottom, so the tiles of one grid row line up. */
.tile-figures[b-vzrj8u4z9a] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: auto;
padding-top: 0.6rem;
}
.tile-figure[b-vzrj8u4z9a] {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
padding: 0 0.75rem;
border-left: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.tile-figure:first-child[b-vzrj8u4z9a] {
padding-left: 0;
border-left: none;
}
.tile-figure span[b-vzrj8u4z9a] {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.72rem;
opacity: 0.6;
}
.tile-figure strong[b-vzrj8u4z9a] {
font-size: 0.95rem;
font-weight: 600;
}
.tile-figure strong.is-overdue[b-vzrj8u4z9a] {
color: var(--clr-red-600);
}
/* On a picture the dark red would sink into the gradient. The picture's scrim is dark in both themes,
so this is a fixed light red rather than a token the dark theme would darken. (.card--image is the
Card's own class; the scope attribute lands on .is-overdue, which this component renders.) */
.card--image .is-overdue[b-vzrj8u4z9a] {
color: color-mix(in srgb, var(--clr-red-500) 55%, var(--clr-always-white));
}
.tile-foot[b-vzrj8u4z9a] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
min-width: 0;
}
.tile-people[b-vzrj8u4z9a] {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
/* Overlapping faces, each ringed in the card's ground so the overlap reads. */
.tile-people[b-vzrj8u4z9a] .avatar {
box-shadow: 0 0 0 2px var(--surface);
}
.tile-people[b-vzrj8u4z9a] .avatar + .avatar {
margin-left: -6px;
}
.tile-people-more[b-vzrj8u4z9a] {
margin-left: 0.35rem;
font-size: 0.72rem;
font-weight: 600;
}
.tile-last[b-vzrj8u4z9a] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-width: 0;
margin-left: auto;
}
.tile-last-text[b-vzrj8u4z9a] {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* /Components/Shared/ProjectTimelinePanel.razor.rz.scp.css */
.tlp-none[b-3qcck7pijq] {
margin: 0;
padding: 0.5rem 0.25rem;
font-size: 0.8125rem;
color: var(--text-muted);
}
/* /Components/Shared/ProjectTimelineView.razor.rz.scp.css */
/* The project's Zeitachse (docs/PROJECT-TIMELINE.md). A bar's outer element is HoverCard's, so it is reached through
::deep from the track; what lies inside a bar, and the bubble's content, is this component's own markup. */
/* ── "Ansicht" ───────────────────────────────────────────────────────── */
/* The scale's group stands in the Expander's row like the others; the wrapper is only there to drop it on a phone. */
.tl-scale-group[b-38p2125sa6] {
display: contents;
}
/* ── Frame and grid ──────────────────────────────────────────────────── */
.tl-frame[b-38p2125sa6] {
overflow-x: auto;
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
/* Inside the project list's tinted row: a card lying on it. */
.tl--embedded .tl-frame[b-38p2125sa6] {
border-radius: var(--radius-lg);
}
/* --tl-lead is the sum of the two sticky columns as a plain length: project-timeline.js reads it to scroll "now" into view. */
.tl-grid[b-38p2125sa6] {
--tl-label-w: 300px;
--tl-people-w: 96px;
--tl-lead: 396px;
--tl-edge: linear-gradient(to right, color-mix(in srgb, var(--border) 85%, transparent), transparent);
position: relative;
min-width: calc(var(--tl-lead) + var(--tl-track-min, 0px));
}
/* The room below the last row. It carries the columns down to the frame's foot, as every
row and the divider do: their surface, or the bars scrolled beneath show through, and their edge, or it has a notch. */
.tl-grid[b-38p2125sa6]::after {
content: "";
position: sticky;
left: 0;
display: block;
width: calc(var(--tl-lead) + 14px);
height: 2rem;
background:
var(--tl-edge) right top / 14px 100% no-repeat,
linear-gradient(var(--surface), var(--surface)) left top / var(--tl-lead) 100% no-repeat;
}
/* Positioned, but no z-index: a row must not be a stacking context, or the bubble a bar opens (position: fixed,
z-index 9999) stays trapped inside its row, and the next rows and the sticky columns paint over it.
No rules between rows: height parts them, and the row under the pointer is tinted from label to bar. */
.tl-row[b-38p2125sa6] {
position: relative;
display: grid;
grid-template-columns: var(--tl-label-w) var(--tl-people-w) 1fr;
min-height: 42px;
}
.tl-label[b-38p2125sa6],
.tl-people[b-38p2125sa6] {
position: sticky;
z-index: 2;
display: flex;
align-items: center;
min-width: 0;
background: var(--surface);
transition: background-color 0.18s ease;
}
.tl-label[b-38p2125sa6] {
left: 0;
gap: 0.5rem;
padding: 0 0.75rem 0 calc(1.25rem + var(--depth, 0) * 16px);
}
.tl-label.has-frame[b-38p2125sa6] {
box-shadow: inset 3px 0 0 var(--frame, var(--border-strong));
}
/* The faces stand at the column's right edge, beside the bars they belong to. */
.tl-people[b-38p2125sa6] {
left: var(--tl-label-w);
justify-content: flex-end;
padding: 0 0.5rem;
}
/* The project's band (§3.2): set apart from the chart by a tint of the primary from label to strip and a little room
below — no rule. Opaque, as the sticky column must be, so the weekends and the line of now stop at it; the line's
label sits in it (.tl-now). The title spans both columns: the name has the room, its Zuständige are in its bubble. */
.tl-row--project[b-38p2125sa6] {
--tl-band: color-mix(in srgb, var(--primary) 5%, var(--surface));
min-height: 60px;
margin-bottom: 6px;
background: var(--tl-band);
}
.tl-row--project .tl-label[b-38p2125sa6] {
grid-column: 1 / 3;
background: var(--tl-band);
}
/* In the project list the card lies on the open row's tint (--surface-hover), which is the band's to the eye: the
card's top edge and its shadow melted into the row. There the card sets the project apart; the band keeps the
surface. */
.tl--embedded .tl-row--project[b-38p2125sa6] {
--tl-band: var(--surface);
}
/* The columns cast a soft edge onto the bars that scroll beneath them, where a rule stood before. */
.tl-people[b-38p2125sa6]::after,
.tl-row--project .tl-label[b-38p2125sa6]::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 14px;
background: var(--tl-edge);
pointer-events: none;
}
/* Only while bars lie beneath the columns: the edge fades in over the first 40px scrolled and stays away where the
chart fits its frame — there it read as a shadow inside the card, cast by nothing. A browser without scroll-driven
animations ends the animation at once and keeps the edge. */
.tl-people[b-38p2125sa6]::after,
.tl-row--project .tl-label[b-38p2125sa6]::after,
.tl-divider span[b-38p2125sa6]::after,
.tl-grid[b-38p2125sa6]::after {
opacity: 0;
animation: tl-edge-in-b-38p2125sa6 linear both;
animation-timeline: scroll(nearest inline);
animation-range: 0 40px;
}
@keyframes tl-edge-in-b-38p2125sa6 {
from { opacity: 0; }
to { opacity: 1; }
}
/* The row under the pointer: the primary's light tint from label to bar, faded in, and its bars a little taller. Thin
enough on the track that the weekends and the line of now show through — the first tint, the hover surface at 70 %, hid
the line and could not be told from a weekend. */
@media (hover: hover) {
.tl-row:not(.tl-row--axis):not(.tl-row--head):not(.tl-row--project):hover .tl-label[b-38p2125sa6],
.tl-row:not(.tl-row--axis):not(.tl-row--head):not(.tl-row--project):hover .tl-people[b-38p2125sa6] {
background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.tl-row:not(.tl-row--axis):not(.tl-row--head):not(.tl-row--project):hover .tl-track[b-38p2125sa6] {
background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.tl-row:not(.tl-row--axis):not(.tl-row--head):not(.tl-row--project):hover .tl-track[b-38p2125sa6] .tl-bar {
--bar-grow: 4px;
}
.tl-row:not(.tl-row--axis):not(.tl-row--head):not(.tl-row--project):hover .tl-diamond-shape[b-38p2125sa6] {
transform: rotate(45deg) scale(1.2);
}
}
/* A label that carries a bubble (a step not reached yet) and the faces in the people column are stacking contexts of
their own, being sticky with a z-index, and their bubble can rise no higher than the cell. While the bubble is open
the cell takes the bubble's own layer: above the cells of the rows below, and above the app's sidebar (1000), which
the first build's 4 left it under. */
.tl-label:has(.hover-card)[b-38p2125sa6],
.tl-people:has(.hover-card)[b-38p2125sa6] {
z-index: 9999;
}
.tl-track[b-38p2125sa6] {
position: relative;
min-height: 42px;
transition: background-color 0.18s ease;
}
/* ── The background: weekends, grid lines, today ─────────────────────── */
.tl-bg[b-38p2125sa6] {
position: absolute;
top: 0;
bottom: 0;
left: var(--tl-lead);
right: 0;
z-index: 0;
pointer-events: none;
}
.tl-weekend[b-38p2125sa6] {
position: absolute;
top: 0;
bottom: 0;
background: var(--surface-sunken);
}
.tl-gridline[b-38p2125sa6] {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: color-mix(in srgb, var(--border) 35%, transparent);
}
.tl-today[b-38p2125sa6] {
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
width: 2px;
margin-left: -1px;
background: var(--accent);
}
/* ── The axis ────────────────────────────────────────────────────────── */
.tl-row--axis[b-38p2125sa6] {
min-height: 58px;
}
.tl-axis-corner[b-38p2125sa6] {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.tl-axis[b-38p2125sa6] {
display: grid;
grid-template-rows: 28px 26px;
align-self: center;
}
.tl-axis-major[b-38p2125sa6],
.tl-axis-minor[b-38p2125sa6] {
position: relative;
overflow: hidden;
}
.tl-tick-label[b-38p2125sa6] {
position: absolute;
top: 3px;
padding-left: 4px;
font-size: 0.6875rem;
color: var(--text-muted);
white-space: nowrap;
}
.tl-axis-major .tl-tick-label[b-38p2125sa6] {
font-weight: 600;
color: var(--text-secondary);
}
/* ── Labels ──────────────────────────────────────────────────────────── */
.tl-label[b-38p2125sa6] .tl-name {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
max-width: 100%;
padding: 0.2rem 0;
border: none;
background: none;
color: var(--text);
font: inherit;
font-size: 0.875rem;
text-align: left;
cursor: pointer;
}
.tl-label[b-38p2125sa6] .tl-name:hover:not(:disabled) .tl-name-text {
color: var(--primary);
}
.tl-label[b-38p2125sa6] .tl-name:disabled {
cursor: default;
}
/* The project above the axis (§3.2): its name, number and state. The bubble opens on it as on a bar; the name gives
way first, the state never. */
.tl-label[b-38p2125sa6] .tl-project {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
max-width: 100%;
cursor: default;
}
.tl-project-headline[b-38p2125sa6] {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.tl-project-name[b-38p2125sa6] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
color: var(--text);
}
.tl-project-sub[b-38p2125sa6] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.tl-label[b-38p2125sa6] .tl-project .chip {
flex: none;
}
.tl-name-icon[b-38p2125sa6] {
display: inline-flex;
flex: none;
color: var(--text-muted);
}
.tl-name-text[b-38p2125sa6] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tl-name-text.is-struck[b-38p2125sa6] {
text-decoration: line-through;
color: var(--text-muted);
}
.tl-number[b-38p2125sa6] {
flex: none;
font-size: 0.6875rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.tl-shared[b-38p2125sa6] {
flex: none;
padding: 0 0.3rem;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
color: var(--text-muted);
font-size: 0.6875rem;
}
.tl-row--ahead .tl-label[b-38p2125sa6] .tl-name {
color: var(--text-muted);
}
.tl-row--control .tl-label[b-38p2125sa6] .tl-name {
font-size: 0.8125rem;
color: var(--text-secondary);
}
/* Dimmed part by part, not the row: opacity on the row — or on a cell that keeps a bubble, the label of a step not
reached and the faces — would make it a stacking context and fade the bubble too. */
.tl-row.is-dimmed .tl-label[b-38p2125sa6] .tl-name,
.tl-row.is-dimmed .tl-avatars[b-38p2125sa6] .tl-avatar,
.tl-row.is-dimmed .tl-more[b-38p2125sa6],
.tl-row.is-dimmed .tl-people-note[b-38p2125sa6],
.tl-row.is-dimmed .tl-mark[b-38p2125sa6],
.tl-row.is-dimmed .tl-track[b-38p2125sa6] .tl-bar,
.tl-row.is-dimmed .tl-track[b-38p2125sa6] .tl-diamond {
opacity: 0.35;
}
/* ── Group and lane headers ──────────────────────────────────────────── */
.tl-row--head .tl-label[b-38p2125sa6] {
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
}
.tl-row--frame .tl-label[b-38p2125sa6],
.tl-row--frame .tl-people[b-38p2125sa6] {
background: color-mix(in srgb, var(--frame, var(--border-strong)) 9%, var(--surface));
}
.tl-row--lane .tl-label[b-38p2125sa6],
.tl-row--lane .tl-people[b-38p2125sa6] {
background: var(--surface-page);
}
.tl-toggle[b-38p2125sa6] {
display: inline-flex;
flex: none;
padding: 0;
border: none;
background: none;
color: var(--text-muted);
cursor: pointer;
}
.tl-toggle:hover[b-38p2125sa6] {
color: var(--primary);
}
.tl-toggle[b-38p2125sa6] svg {
transition: transform 0.15s ease;
}
.tl-toggle[b-38p2125sa6] .is-folded {
transform: rotate(-90deg);
}
.tl-swatch[b-38p2125sa6] {
flex: none;
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--frame, var(--border-strong));
}
/* The title keeps its room; the counts beside it give way first. */
.tl-head-title[b-38p2125sa6] {
flex: 0 1 auto;
min-width: 4.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tl-head-count[b-38p2125sa6],
.tl-head-late[b-38p2125sa6] {
flex: 0 100 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.75rem;
}
.tl-head-count[b-38p2125sa6] {
font-weight: 400;
color: var(--text-muted);
}
.tl-head-late[b-38p2125sa6] {
font-weight: 500;
color: var(--danger-text);
}
.tl-divider[b-38p2125sa6] {
position: relative;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
/* As wide as the two columns and as high as the divider, so it carries their edge across it like a row's cells. */
.tl-divider span[b-38p2125sa6] {
position: sticky;
left: 0;
display: block;
box-sizing: border-box;
width: var(--tl-lead);
padding: 1.5rem 0.75rem 0.5rem 1.25rem;
background: var(--surface);
}
.tl-divider span[b-38p2125sa6]::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 14px;
background: var(--tl-edge);
pointer-events: none;
}
/* ── Zuständige ──────────────────────────────────────────────────────── */
.tl-avatars[b-38p2125sa6] {
display: flex;
align-items: center;
gap: 2px;
}
/* On the faces, not the list: opacity there would fade their bubble too. */
.tl-avatars.is-expected[b-38p2125sa6] .tl-avatar,
.tl-avatars.is-expected .tl-more[b-38p2125sa6] {
opacity: 0.7;
}
/* The HoverCard's trigger, rendered by it: reached with ::deep. The face lifts a little under the pointer, saying the
bubble is about to open. */
.tl-avatars[b-38p2125sa6] .tl-avatar {
display: inline-flex;
border-radius: var(--radius-circle);
transition: transform 0.15s ease;
}
@media (hover: hover) {
.tl-avatars[b-38p2125sa6] .tl-avatar:hover {
transform: scale(1.12);
}
}
@media (prefers-reduced-motion: reduce) {
.tl-avatars[b-38p2125sa6] .tl-avatar {
transition: none;
}
}
.tl-group-dot[b-38p2125sa6] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--radius-circle);
background: var(--surface-sunken);
color: var(--text-secondary);
}
.tl-more[b-38p2125sa6],
.tl-people-note[b-38p2125sa6] {
font-size: 0.6875rem;
color: var(--text-muted);
}
/* ── Bars ────────────────────────────────────────────────────────────── */
/* Centred in the track whatever the row's height: a variant sets only --bar-h, the row's hover adds --bar-grow. The
segments inside round their outer ends with the bar's --bar-r. */
.tl-track[b-38p2125sa6] .tl-bar {
--bar-h: 20px;
--bar-grow: 0px;
--bar-r: var(--radius-pill);
position: absolute;
top: calc(50% - (var(--bar-h) + var(--bar-grow)) / 2);
height: calc(var(--bar-h) + var(--bar-grow));
transition: height 0.18s ease, top 0.18s ease;
min-width: 6px;
overflow: hidden;
border-radius: var(--bar-r);
background: var(--surface-track);
box-shadow: inset 0 0 0 1px var(--border-strong);
}
.tl-track[b-38p2125sa6] .tl-bar.is-working {
background: var(--primary);
box-shadow: var(--shadow-xs);
}
.tl-track[b-38p2125sa6] .tl-bar.is-done {
background: var(--clr-green-500);
box-shadow: var(--shadow-xs);
}
.tl-track[b-38p2125sa6] .tl-bar.is-cancelled {
background: var(--border-strong);
box-shadow: none;
}
/* Still running: the end fades out, because it is not an end. */
.tl-track[b-38p2125sa6] .tl-bar.is-running {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), rgb(0 0 0 / 0.25));
mask-image: linear-gradient(to right, #000 calc(100% - 16px), rgb(0 0 0 / 0.25));
}
/* A Steuerknoten explains a gap, it is no work: thinner and muted (§3.4). */
.tl-track[b-38p2125sa6] .tl-bar.is-control {
--bar-h: 8px;
background: color-mix(in srgb, var(--text-muted) 45%, transparent);
box-shadow: none;
}
.tl-track[b-38p2125sa6] .tl-bar.is-control.is-done {
background: color-mix(in srgb, var(--text-muted) 30%, transparent);
}
.tl-track[b-38p2125sa6] .tl-bar.is-removed,
.tl-track[b-38p2125sa6] .tl-bar.is-cancelled {
opacity: 0.6;
}
.tl-track[b-38p2125sa6] .tl-bar.is-removed::after,
.tl-track[b-38p2125sa6] .tl-bar.is-cancelled::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: var(--text-secondary);
}
.tl-track[b-38p2125sa6] .tl-bar.is-masked {
background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.18) 0 4px, transparent 4px 8px);
}
.tl-track[b-38p2125sa6] .tl-bar.is-inert {
cursor: default;
}
.tl-track[b-38p2125sa6] .tl-bar--summary {
--bar-h: 8px;
opacity: 0.75;
}
/* ── The project's strip (§3.2) ──────────────────────────────────────────
A thin line from the project's start to its end or now, each stretch in what was going on: the steps in the
primary — solid while one is in work, light while nobody has begun one —, a Steuerknoten holding the run in its
own bar's grey, nothing open the hairline left bare. A dash pattern for the Steuerknoten read as a perforation at
this height. The wrapper is the bubble's trigger, taller than the line so a pointer finds it. */
.tl-track[b-38p2125sa6] .tl-strip {
position: absolute;
top: calc(50% - 9px);
height: 18px;
min-width: 6px;
cursor: default;
}
.tl-strip-line[b-38p2125sa6] {
position: absolute;
top: 6px;
right: 0;
left: 0;
height: 6px;
overflow: hidden;
border-radius: var(--radius-pill);
background: linear-gradient(var(--border-strong), var(--border-strong)) center / 100% 1px no-repeat;
}
/* Still running: the end fades out, as a running bar's does. */
.tl-track[b-38p2125sa6] .tl-strip.is-running .tl-strip-line {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), rgb(0 0 0 / 0.25));
mask-image: linear-gradient(to right, #000 calc(100% - 16px), rgb(0 0 0 / 0.25));
}
/* The head of the line of now (§8): "Jetzt" on the strip's end — the line marks the instant, not the day — and the
line's first piece from there down to the band's foot, where the background's line, which the band covers, goes
on. The first build said "Heute" at the line's foot; at its head it would have covered the month, before the
project moved above the axis. */
.tl-now[b-38p2125sa6] {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
width: 0;
pointer-events: none;
}
.tl-now[b-38p2125sa6]::before {
content: "";
position: absolute;
top: 50%;
bottom: 0;
left: -1px;
width: 2px;
background: var(--accent);
}
.tl-now-label[b-38p2125sa6] {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
padding: 0 0.4rem;
border-radius: var(--radius-pill);
background: var(--accent);
color: var(--text-hero, #fff);
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
}
.tl-now--end .tl-now-label[b-38p2125sa6] {
transform: translate(calc(-100% + 1px), -50%);
}
.tl-stretch[b-38p2125sa6] {
position: absolute;
top: 0;
bottom: 0;
}
.tl-stretch.is-working[b-38p2125sa6],
.tlc-swatch.is-working[b-38p2125sa6] {
background: var(--primary);
}
.tl-stretch.is-waiting[b-38p2125sa6],
.tlc-swatch.is-waiting[b-38p2125sa6] {
background: color-mix(in srgb, var(--primary) 28%, var(--surface));
}
.tl-stretch.is-held[b-38p2125sa6],
.tlc-swatch.is-held[b-38p2125sa6] {
background: color-mix(in srgb, var(--text-muted) 45%, transparent);
}
/* The strip's legend in the project's bubble (Zeitanteile). */
.tlc-swatch[b-38p2125sa6] {
flex: none;
width: 16px;
height: 6px;
overflow: hidden;
border-radius: var(--radius-pill);
}
.tlc-swatch.is-idle[b-38p2125sa6] {
background: linear-gradient(var(--border-strong), var(--border-strong)) center / 100% 1px no-repeat;
}
.tl-bar-fill[b-38p2125sa6] {
position: absolute;
inset: 0;
}
/* ── What a bar says (§6.3) ──────────────────────────────────────────────
Over the bar's solid part, which is the container its words are measured against: the time from 100px, the state
before it from 190px — whole words or none. */
.tl-bar-text[b-38p2125sa6] {
position: absolute;
top: 0;
bottom: 0;
container-type: inline-size;
pointer-events: none;
}
.tl-bar-words[b-38p2125sa6] {
display: flex;
align-items: center;
gap: 8px;
height: 100%;
padding: 0 10px;
overflow: hidden;
font-size: 0.75rem;
line-height: 1;
white-space: nowrap;
color: var(--text-secondary);
}
.tl-track[b-38p2125sa6] .tl-bar.is-working .tl-bar-words,
.tl-track[b-38p2125sa6] .tl-bar.is-done .tl-bar-words {
color: var(--text-on-inverse);
}
/* Hidden until the container queries below let it in. Classes only: a scoped child selector would outweigh them. */
.tl-bar-state[b-38p2125sa6],
.tl-bar-time[b-38p2125sa6] {
display: none;
}
.tl-bar-state[b-38p2125sa6] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
}
.tl-bar-time[b-38p2125sa6] {
flex: none;
font-weight: 500;
opacity: 0.85;
}
@container (min-width: 100px) {
.tl-bar-time[b-38p2125sa6],
.tl-bar-state:only-child[b-38p2125sa6] {
display: inline;
}
}
@container (min-width: 190px) {
.tl-bar-state[b-38p2125sa6] {
display: inline;
}
}
/* ── Arrows (§6.4) ───────────────────────────────────────────────────────
Drawn by project-timeline.js into the background's layer: over the weekends, under the bars and the sticky columns.
Quiet until the row at either end is under the pointer; drawn in once, when an arrow first appears. */
.tl-links[b-38p2125sa6] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.tl-links[b-38p2125sa6] .tl-link-line {
fill: none;
stroke: color-mix(in srgb, var(--text-muted) 55%, transparent);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
transition: stroke 0.18s ease;
}
.tl-links[b-38p2125sa6] .tl-link-head {
fill: color-mix(in srgb, var(--text-muted) 55%, transparent);
transition: fill 0.18s ease;
}
.tl-links[b-38p2125sa6] .tl-link.is-lit .tl-link-line {
stroke: var(--primary);
stroke-width: 2;
}
.tl-links[b-38p2125sa6] .tl-link.is-lit .tl-link-head {
fill: var(--primary);
}
.tl-links[b-38p2125sa6] .tl-link.is-new .tl-link-line {
animation: tl-link-draw-b-38p2125sa6 0.5s ease-out both;
}
.tl-links[b-38p2125sa6] .tl-link.is-new .tl-link-head {
animation: tl-link-head-b-38p2125sa6 0.2s ease-out 0.4s both;
}
@keyframes tl-link-draw-b-38p2125sa6 {
from { stroke-dashoffset: 1; }
to { stroke-dashoffset: 0; }
}
@keyframes tl-link-head-b-38p2125sa6 {
from { opacity: 0; }
to { opacity: 1; }
}
.tl-seg[b-38p2125sa6] {
position: absolute;
top: 0;
bottom: 0;
}
/* Before it was begun the work order waited: the part before "in Arbeit", lighter. */
.tl-seg--wait[b-38p2125sa6] {
left: 0;
background: var(--surface-track);
box-shadow: inset 0 0 0 1px var(--border-strong);
border-radius: var(--bar-r) 0 0 var(--bar-r);
}
.tl-seg--late[b-38p2125sa6] {
background: repeating-linear-gradient(135deg, var(--danger) 0 3px, color-mix(in srgb, var(--danger) 55%, transparent) 3px 6px);
}
/* The rest of a running Warten: drawn, but only as an outline of what is still to come. */
.tl-seg--ahead[b-38p2125sa6] {
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--text-muted);
border-radius: 0 var(--bar-r) var(--bar-r) 0;
opacity: 0.85;
}
.tl-track[b-38p2125sa6] .tl-diamond {
--dia: 14px;
position: absolute;
top: calc(50% - var(--dia) / 2);
width: var(--dia);
height: var(--dia);
margin-left: calc(var(--dia) / -2);
}
.tl-diamond-shape[b-38p2125sa6] {
display: block;
width: 100%;
height: 100%;
border-radius: 3px;
background: var(--clr-green-500);
box-shadow: var(--shadow-xs);
transform: rotate(45deg);
transition: transform 0.18s ease;
}
.tl-track[b-38p2125sa6] .tl-diamond.is-waiting .tl-diamond-shape {
background: var(--surface-track);
box-shadow: inset 0 0 0 1px var(--border-strong);
}
/* ── Marks ───────────────────────────────────────────────────────────── */
/* Above the bars, below the sticky columns (z-index 2) they scroll under. */
.tl-mark[b-38p2125sa6] {
position: absolute;
top: 7px;
bottom: 7px;
z-index: 1;
width: 2px;
margin-left: -1px;
pointer-events: auto;
}
.tl-mark--due[b-38p2125sa6] {
background: var(--danger);
}
.tl-mark--due[b-38p2125sa6]::before {
content: "";
position: absolute;
top: 0;
left: 2px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 6px solid var(--danger);
}
.tl-mark--meeting[b-38p2125sa6] {
top: 50%;
bottom: auto;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: var(--radius-circle);
background: var(--accent);
box-shadow: 0 0 0 2px var(--surface);
}
.tl-mark--replydue[b-38p2125sa6],
.tl-mark--deadline[b-38p2125sa6] {
background: repeating-linear-gradient(to bottom, var(--clr-amber-500) 0 3px, transparent 3px 5px);
}
/* ── The bubble ────────────────────────────────────────────────────────
One look for every bubble: a tile in the step's colour, the title with its number and state chip under it, facts
one a line with their icons, people as chips. Spacing parts what belongs apart — no rules, no separators. The
bubble's body (TimelinePeekBody) speaks the same language in its own stylesheet. */
.tlc[b-38p2125sa6] {
display: flex;
flex-direction: column;
gap: 12px;
width: 320px;
max-width: 100%;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--text);
}
.tlc-head[b-38p2125sa6] {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
}
.tlc-tile[b-38p2125sa6] {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--tile, var(--primary)) 14%, transparent);
color: var(--tile, var(--primary));
}
.tlc-headline[b-38p2125sa6] {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding-top: 1px;
}
.tlc-title[b-38p2125sa6] {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.3;
color: var(--text);
}
.tlc-sub[b-38p2125sa6] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.tlc-number[b-38p2125sa6] {
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: var(--text-muted);
}
/* A state as a soft chip with a dot in its colour. */
.tlc-chip[b-38p2125sa6] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 1px 8px;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
color: var(--text-secondary);
font-size: 0.72rem;
font-weight: 600;
line-height: 1.6;
white-space: nowrap;
}
.tlc-chip[b-38p2125sa6]::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--radius-circle);
background: currentColor;
opacity: 0.85;
}
.tlc-chip.is-working[b-38p2125sa6] {
background: var(--primary-soft);
color: var(--primary);
}
.tlc-chip.is-done[b-38p2125sa6] {
background: var(--clr-green-100);
color: var(--clr-green-800);
}
.tlc-chip.is-cancelled[b-38p2125sa6] {
color: var(--text-muted);
}
.tlc-chip.is-late[b-38p2125sa6] {
background: color-mix(in srgb, var(--danger) 13%, transparent);
color: var(--danger-text);
}
.tlc-chip.is-ahead[b-38p2125sa6] {
background: transparent;
box-shadow: inset 0 0 0 1px var(--border-strong);
color: var(--text-muted);
}
/* The facts: icon and label on the left, the value beside them — a grid, so the values line up. */
.tlc-facts[b-38p2125sa6] {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 14px;
row-gap: 6px;
margin: 0;
}
.tlc-facts:empty[b-38p2125sa6] {
display: none;
}
.tlc-fact[b-38p2125sa6] {
display: contents;
}
.tlc-fact dt[b-38p2125sa6] {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
}
.tlc-fact dd[b-38p2125sa6] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
margin: 0;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.tlc-fact.is-late dt[b-38p2125sa6] {
color: var(--danger-text);
}
.tlc-section[b-38p2125sa6] {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.tlc-section-head[b-38p2125sa6] {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
}
.tlc-hint[b-38p2125sa6] {
font-weight: 400;
color: var(--text-muted);
}
.tlc-people[b-38p2125sa6] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tlc-person[b-38p2125sa6] {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 2px 10px 2px 2px;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
font-size: 0.78rem;
color: var(--text);
}
.tlc-person.is-inactive[b-38p2125sa6] {
opacity: 0.6;
}
.tlc-person-name[b-38p2125sa6] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tlc-person-group[b-38p2125sa6] {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--radius-circle);
background: var(--surface);
color: var(--text-secondary);
}
.tlc-person-answer[b-38p2125sa6] {
display: inline-flex;
margin-right: -4px;
color: var(--text-muted);
}
.tlc-person.is-yes .tlc-person-answer[b-38p2125sa6] {
color: var(--clr-green-600);
}
.tlc-person.is-no .tlc-person-answer[b-38p2125sa6] {
color: var(--danger-text);
}
.tlc-text[b-38p2125sa6] {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 0;
color: var(--text-secondary);
overflow-wrap: anywhere;
}
.tlc-text[b-38p2125sa6] svg {
flex: none;
margin-top: 2px;
color: var(--text-muted);
}
.tlc-clamp[b-38p2125sa6] {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/* A reason or a note in someone's words: a quiet card with a quotation mark. */
.tlc-quote[b-38p2125sa6] {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 8px;
row-gap: 2px;
margin: 0;
padding: 8px 10px;
border-radius: var(--radius-md);
background: var(--surface-sunken);
color: var(--text-secondary);
overflow-wrap: anywhere;
}
.tlc-quote[b-38p2125sa6] svg {
margin-top: 2px;
color: var(--text-muted);
}
.tlc-quote cite[b-38p2125sa6] {
grid-column: 2;
font-size: 0.72rem;
font-style: normal;
color: var(--text-muted);
}
.tlc-progress[b-38p2125sa6] {
height: 6px;
overflow: hidden;
border-radius: var(--radius-pill);
background: var(--surface-track);
}
.tlc-progress span[b-38p2125sa6] {
display: block;
height: 100%;
border-radius: inherit;
background: var(--clr-green-500);
}
.tlc-list[b-38p2125sa6] {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.tlc-list li[b-38p2125sa6] {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.tlc-list li.is-ahead[b-38p2125sa6] {
color: var(--text-muted);
}
.tlc-member[b-38p2125sa6] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tlc-meta[b-38p2125sa6] {
display: inline-flex;
flex: none;
align-items: center;
gap: 4px;
font-size: 0.72rem;
color: var(--text-muted);
}
/* A row's people as faces, overlapping a little. */
.tlc-faces[b-38p2125sa6] {
display: inline-flex;
flex: none;
}
.tlc-face[b-38p2125sa6] {
display: inline-flex;
border-radius: var(--radius-circle);
box-shadow: 0 0 0 2px var(--surface);
}
.tlc-face + .tlc-face[b-38p2125sa6] {
margin-left: -6px;
}
.tlc-dot[b-38p2125sa6] {
flex: none;
width: 8px;
height: 8px;
border-radius: var(--radius-circle);
background: var(--surface-track);
box-shadow: inset 0 0 0 1px var(--border-strong);
}
.tlc-dot.is-working[b-38p2125sa6] {
background: var(--primary);
box-shadow: none;
}
.tlc-dot.is-done[b-38p2125sa6] {
background: var(--clr-green-500);
box-shadow: none;
}
.tlc-dot.is-cancelled[b-38p2125sa6] {
background: var(--border-strong);
box-shadow: none;
}
.tlc-dot.is-ahead[b-38p2125sa6] {
background: transparent;
}
.tlc-more[b-38p2125sa6] {
margin: 0;
font-size: 0.75rem;
color: var(--text-muted);
}
.tlc-actions[b-38p2125sa6] {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 2px;
}
/* A phone's sheet is as wide as the screen; the bubble's content follows it. */
@media (max-width: 480px) {
.tlc[b-38p2125sa6] {
width: auto;
}
}
/* ── Narrower screens ────────────────────────────────────────────────── */
/* A tablet: the two columns narrow, the bars keep scrolling beneath them. */
@media (max-width: 900px) {
.tl-grid[b-38p2125sa6] {
--tl-label-w: 200px;
--tl-people-w: 60px;
--tl-lead: 260px;
}
/* "Zuständig" does not fit the narrower column; the avatars say it themselves. */
.tl-people.tl-axis-corner[b-38p2125sa6] {
font-size: 0;
}
}
/* A phone: no sideways scrolling next to the page's own — the whole project fits the width, each row puts its
label and Zuständige on a line of their own above its bar, and the bubble opens as a sheet with the exact times.
The scale has nothing left to switch, so it goes. */
@media (max-width: 640px) {
.tl-scale-group[b-38p2125sa6] {
display: none;
}
.tl-frame[b-38p2125sa6] {
overflow-x: hidden;
}
.tl-grid[b-38p2125sa6] {
--tl-lead: 0px;
min-width: 0;
}
.tl-row[b-38p2125sa6] {
grid-template-columns: minmax(0, 1fr) auto;
min-height: 0;
padding-bottom: 0.4rem;
}
.tl-label[b-38p2125sa6],
.tl-people[b-38p2125sa6] {
position: static;
min-height: 30px;
background: transparent;
box-shadow: none;
}
/* Nothing scrolls beneath the columns here. */
.tl-people[b-38p2125sa6]::after,
.tl-row--project .tl-label[b-38p2125sa6]::after {
display: none;
}
/* Bars this thin hold no words, and rows stacked under their labels no arrows; the bubble has both. */
.tl-bar-text[b-38p2125sa6],
.tl-links[b-38p2125sa6] {
display: none;
}
.tl-axis[b-38p2125sa6] {
grid-template-rows: 22px 22px;
}
.tl-label[b-38p2125sa6] {
padding-left: calc(0.75rem + var(--depth, 0) * 10px);
}
.tl-label.has-frame[b-38p2125sa6] {
box-shadow: inset 3px 0 0 var(--frame, var(--border-strong));
}
.tl-row--frame .tl-label[b-38p2125sa6],
.tl-row--frame .tl-people[b-38p2125sa6],
.tl-row--lane .tl-label[b-38p2125sa6],
.tl-row--lane .tl-people[b-38p2125sa6] {
background: transparent;
}
.tl-row--frame[b-38p2125sa6] {
background: color-mix(in srgb, var(--frame, var(--border-strong)) 9%, transparent);
}
.tl-track[b-38p2125sa6] {
grid-column: 1 / -1;
min-height: 22px;
}
/* The band's foot is the row's padding below the track here. */
.tl-now[b-38p2125sa6]::before {
bottom: -0.4rem;
}
/* Nothing to draw yet: no empty line under a step not reached. */
.tl-row--ahead .tl-track[b-38p2125sa6] {
display: none;
}
.tl-row--axis .tl-axis-corner[b-38p2125sa6] {
display: none;
}
.tl-axis-minor .tl-tick-label:not(.is-phone)[b-38p2125sa6] {
display: none;
}
.tl-track[b-38p2125sa6] .tl-bar {
--bar-h: 14px;
}
.tl-track[b-38p2125sa6] .tl-bar.is-control,
.tl-track[b-38p2125sa6] .tl-bar--summary {
--bar-h: 6px;
}
.tl-track[b-38p2125sa6] .tl-diamond {
--dia: 12px;
}
.tl-divider span[b-38p2125sa6] {
position: static;
width: auto;
padding-left: 0.75rem;
}
.tl-grid[b-38p2125sa6]::after,
.tl-divider span[b-38p2125sa6]::after {
background: none;
}
}
@media (prefers-reduced-motion: reduce) {
.tl-toggle[b-38p2125sa6] svg,
.tl-label[b-38p2125sa6],
.tl-people[b-38p2125sa6],
.tl-track[b-38p2125sa6],
.tl-track[b-38p2125sa6] .tl-bar,
.tl-diamond-shape[b-38p2125sa6] {
transition: none;
}
.tl-links[b-38p2125sa6] .tl-link.is-new .tl-link-line,
.tl-links[b-38p2125sa6] .tl-link.is-new .tl-link-head {
animation: none;
}
}
/* /Components/Shared/ProtocolCard.razor.rz.scp.css */
/* .protocol-card-live sits in wwwroot/app.css: the chronology diagram carries the same badge, and a
scoped rule reaches only the component it was written in. */
/* /Components/Shared/ProtocolChronologyFlow.razor.rz.scp.css */
/* The chronology diagram. Geometry lives in ProtocolChronologyGeometry, not here: the SVG has to agree
with the cards to the pixel, and two places to change a number is one too many. What is here is the
paint. Movement is chronology-motion.js — a glide on `translate`, which leaves `transform` to the
hover lift below. */
/* The frame gives the diagram its height and is what the zoom control anchors to — it must not be the
scrolling element, or the control would travel with the diagram instead of floating over it. Tall
enough to reach the foot of the page, so the working surface reads as a surface and not as a strip
under the newest row; the same "take what is left of the viewport" measure the transcript uses. */
.pflow-frame[b-h0d5cw8nf4] {
position: relative;
height: max(28rem, calc(100dvh - 20rem - var(--top-bar-height)));
}
.pflow[b-h0d5cw8nf4] {
height: 100%;
overflow: auto;
border-radius: var(--radius-lg);
background: var(--surface-page);
cursor: grab;
/* As on the project diagram: a drag must not turn into a text selection. */
-webkit-user-select: none;
user-select: none;
/* No scrollbars on a surface that is moved by dragging — they only ever drew two grey rails across
the diagram. This hides them; the overflow itself stays. */
scrollbar-width: none;
}
.pflow:active[b-h0d5cw8nf4] {
cursor: grabbing;
}
.pflow[b-h0d5cw8nf4]::-webkit-scrollbar {
display: none;
}
/* The content plane, in unscaled coordinates — the zoom script scales this one and grows it so the
grid keeps covering the view, which is why the grid belongs here and not on the frame.
The transparent border is the overscroll room, the same as the project diagram's: space ahead of the
origin, so the diagram can be pushed past its top left corner, which native scrolling alone stops
at. The scripts read it back as clientLeft/clientTop. content-box, so the room comes on top of the
width and height the component writes inline instead of out of them. */
.pflow-canvas[b-h0d5cw8nf4] {
position: relative;
box-sizing: content-box;
min-width: 100%;
min-height: 100%;
border-top: var(--canvas-overscroll) solid transparent;
border-left: var(--canvas-overscroll) solid transparent;
/* The same dot grid the project diagram is drawn on, so the two read as one kind of surface. */
background-image: radial-gradient(circle, var(--clr-slate-200) 1px, transparent 1px);
background-size: 26px 26px;
background-position: 6px 10px;
}
/* No box of its own while the diagram is a diagram — everything in it is positioned against the
canvas. It exists for the narrow layout at the foot of this file, where it becomes the day's group. */
.pflow-row[b-h0d5cw8nf4] {
display: contents;
}
/* Behind the cards and never under the pointer: the lines are a reading aid, not a control. */
.pflow-lines[b-h0d5cw8nf4] {
position: absolute;
left: 0;
top: 0;
overflow: visible;
pointer-events: none;
}
.pflow-line[b-h0d5cw8nf4] {
fill: none;
stroke: var(--clr-slate-400);
stroke-width: 1.75;
}
.pflow-arrow[b-h0d5cw8nf4] {
fill: var(--clr-slate-400);
}
/* ── The date column ──────────────────────────────────────────────────────
The axis the whole view is about, kept quiet: it labels the rows, it does not compete with them. */
.pflow-month[b-h0d5cw8nf4] {
position: absolute;
left: 0;
font-size: var(--text-label-size);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--text-muted);
}
.pflow-day[b-h0d5cw8nf4] {
position: absolute;
left: 0;
display: flex;
align-items: flex-start;
gap: 0.45rem;
width: 96px;
padding-top: 0.9rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.3;
color: var(--text-muted);
}
.pflow-day b[b-h0d5cw8nf4] {
font-weight: 700;
color: var(--text);
}
/* Gold is the brand's active marker, and on a time axis "active" means today. */
.pflow-today[b-h0d5cw8nf4] {
flex: none;
width: 7px;
height: 7px;
margin-top: 0.3rem;
border-radius: 50%;
background: var(--accent);
}
/* ── The node ─────────────────────────────────────────────────────────────
A tile, not a list card: fixed 220 x 96 so the lines can be drawn to it, with the icon box, the
title, one meta line and the badges under each other. Shadow and radius are the shared card's, so it
still belongs to the same family. */
.pflow-card[b-h0d5cw8nf4] {
position: absolute;
width: 220px;
height: 96px;
display: grid;
grid-template-columns: 30px 1fr;
column-gap: 0.6rem;
row-gap: 0.3rem;
align-content: center;
padding: 0.75rem;
border-radius: var(--radius-2xl);
background: var(--surface);
box-shadow: var(--shadow-md);
cursor: pointer;
transition: box-shadow 0.15s, transform 0.15s;
}
.pflow-card:hover[b-h0d5cw8nf4] {
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
.pflow-card:focus-visible[b-h0d5cw8nf4] {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
.pflow-icon[b-h0d5cw8nf4] {
grid-row: 1 / 4;
align-self: start;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: var(--radius-md);
background: var(--surface-sunken);
color: var(--text-muted);
}
/* A protocol's own colour (--pflow-tint, set inline) — the tinted card's icon-box recipe, so a series
reads the same here as in the card grid. */
.pflow-icon--tinted[b-h0d5cw8nf4] {
background: color-mix(in srgb, var(--pflow-tint) 26%, var(--surface));
color: color-mix(in srgb, var(--pflow-tint) 72%, var(--text));
}
.pflow-title[b-h0d5cw8nf4] {
font-size: 0.8rem;
font-weight: 700;
line-height: 1.3;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pflow-meta[b-h0d5cw8nf4] {
font-size: 0.78rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pflow-badges[b-h0d5cw8nf4] {
display: flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
overflow: hidden;
}
/* Empty on most cards — without this the row would still take its height and push the title off
centre on some cards and not on others. */
.pflow-badges:empty[b-h0d5cw8nf4] {
display: none;
}
/* The meeting this one follows is not in the view. The card says so where the line would have been. */
.pflow-orphan[b-h0d5cw8nf4] {
display: inline-flex;
color: var(--text-faint);
}
/* ── Drawing a link ───────────────────────────────────────────────────────
The handle itself is the workflow diagram's, .node-connector / .connector-dot from app.css — one
gesture with one look wherever a line is drawn in this app. The dragged line is styled by
chronology-connect.js, because an element made in script carries no scope attribute and nothing
written here would ever reach it. What is left for this file is what the diagram does around them. */
/* What it would land on. */
.pflow-card.is-drop-target[b-h0d5cw8nf4] {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
/* While a line is being drawn nothing else should look clickable — the cards are targets, not links. */
.pflow.is-connecting .pflow-card[b-h0d5cw8nf4] {
cursor: crosshair;
}
/* The line's own hit area: transparent, fat, and the only thing on the edge that takes a pointer while
nothing is being drawn. Without it a 1.75 px stroke would have to be hit exactly. */
.pflow-hit[b-h0d5cw8nf4] {
fill: none;
stroke: transparent;
stroke-width: 18;
pointer-events: stroke;
}
/* Undoing a link, on the line itself. Hidden until the pointer finds that line — a diagram at rest is
made of protocols, not of controls, and every line carrying a permanent ✕ would say otherwise. */
.pflow-cut[b-h0d5cw8nf4] {
cursor: pointer;
pointer-events: auto;
opacity: 0;
transition: opacity 0.12s;
}
.pflow-edge:hover .pflow-cut[b-h0d5cw8nf4],
.pflow-cut:focus-visible[b-h0d5cw8nf4] {
opacity: 1;
}
/* The focus ring is the circle itself: an outline around a transformed SVG group lands wherever the
browser thinks the group's box is, which is rarely around the circle. */
.pflow-cut:focus-visible[b-h0d5cw8nf4] {
outline: none;
}
.pflow-cut:focus-visible circle[b-h0d5cw8nf4] {
stroke: var(--primary);
stroke-width: 2;
}
/* A line under a pointer that is drawing another one must not offer to be cut. */
.pflow.is-connecting .pflow-hit[b-h0d5cw8nf4] {
pointer-events: none;
}
.pflow-cut circle[b-h0d5cw8nf4] {
fill: var(--surface);
stroke: var(--border-strong);
}
.pflow-cut:hover circle[b-h0d5cw8nf4] {
stroke: var(--danger);
}
.pflow-cut path[b-h0d5cw8nf4] {
stroke: var(--text-muted);
stroke-width: 1.6;
stroke-linecap: round;
}
.pflow-cut:hover path[b-h0d5cw8nf4] {
stroke: var(--danger);
}
/* The keyboard's way to draw a line, and the finger's: a picker instead of a drag. Quiet until the
card is hovered or holds focus, the way the tree's kebab is — a diagram at rest is made of
protocols, not of buttons. */
.pflow-link-btn[b-h0d5cw8nf4] {
position: absolute;
top: 0.35rem;
right: 0.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-faint);
cursor: pointer;
opacity: 0;
transition: opacity 0.12s, background 0.15s, color 0.15s;
}
.pflow-card:hover .pflow-link-btn[b-h0d5cw8nf4],
.pflow-card:focus-within .pflow-link-btn[b-h0d5cw8nf4],
.pflow-link-btn:focus-visible[b-h0d5cw8nf4] {
opacity: 1;
}
/* A finger never hovers, and the picker is the finger's only way to draw a line — so on touch both
controls stay in view. A diagram with a visible ✕ on every line is busier than one at rest, but a
line that cannot be undone at all is worse. */
@media (hover: none) {
.pflow-link-btn[b-h0d5cw8nf4],
.pflow-cut[b-h0d5cw8nf4] {
opacity: 1;
}
}
.pflow-link-btn:hover[b-h0d5cw8nf4] {
background: var(--surface-hover);
color: var(--text);
}
.pflow-link-btn:focus-visible[b-h0d5cw8nf4] {
outline: 2px solid var(--primary);
outline-offset: 1px;
}
/* Room for the button in the corner, so it never sits on the end of a long title. */
.pflow-card.has-link .pflow-title[b-h0d5cw8nf4] {
padding-right: 1.5rem;
}
/* ── In the grace period ──────────────────────────────────────────────────
Struck through and flat, the way the tree and the cards show it. It stays in the diagram because it
is still a protocol and still part of its series (docs/SOFT-DELETE.md). */
.pflow-card.is-deleted[b-h0d5cw8nf4] {
box-shadow: none;
border: 1px dashed var(--border);
}
.pflow-card.is-deleted .pflow-title[b-h0d5cw8nf4] {
text-decoration: line-through;
font-weight: 600;
color: var(--text-muted);
}
.pflow-card.is-deleted .pflow-icon[b-h0d5cw8nf4] {
opacity: 0.55;
}
.pflow-restore[b-h0d5cw8nf4] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0;
border: none;
background: none;
color: var(--primary);
font-family: inherit;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
}
.pflow-restore:hover[b-h0d5cw8nf4] {
color: var(--primary-hover);
}
/* ── Where there is no room for a diagram ─────────────────────────────────
A diagram that has to be scrolled sideways on a phone is not a view of anything. Below this width the
positioning is dropped and the same markup falls into its reading order — heading, day, that day's
meetings — which is the grouped list this view used to be. The lines go with the positions: they say
where a card is relative to another one, and stacked there is no such relation left to draw.
The !important is for the canvas' own width and height, which the component writes inline because the
SVG needs the same numbers. */
@media (max-width: 900px) {
.pflow-frame[b-h0d5cw8nf4] {
height: auto;
}
.pflow[b-h0d5cw8nf4] {
height: auto;
overflow: visible;
background: none;
cursor: default;
/* A list is read, not dragged. */
-webkit-user-select: auto;
user-select: auto;
}
.pflow-canvas[b-h0d5cw8nf4] {
/* A list does not pan, so it has no room to pan into. */
--canvas-overscroll: 0px;
width: auto !important;
height: auto !important;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
background-image: none;
}
.pflow-lines[b-h0d5cw8nf4] {
display: none;
}
.pflow-row[b-h0d5cw8nf4] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pflow-month[b-h0d5cw8nf4],
.pflow-day[b-h0d5cw8nf4],
.pflow-card[b-h0d5cw8nf4] {
position: static;
}
.pflow-month[b-h0d5cw8nf4] {
margin-top: 0.75rem;
}
.pflow-day[b-h0d5cw8nf4] {
width: auto;
padding-top: 0;
}
.pflow-card[b-h0d5cw8nf4] {
width: auto;
height: auto;
}
}
/* And no job at all where there is nothing to zoom. */
@media (max-width: 900px) {
.pflow-frame[b-h0d5cw8nf4] .canvas-zoom {
display: none;
}
}
/* Drawing is a diagram gesture; the stacked list has no geometry to draw into. */
@media (max-width: 900px) {
.pflow-card .node-connector[b-h0d5cw8nf4],
.pflow-cut[b-h0d5cw8nf4] {
display: none;
}
}
/* /Components/Shared/ProtocolPrintSheet.razor.rz.scp.css */
/* The printed protocol — see the component for why it exists at all.
Everything here is written for paper, which is a different medium from the app: literal colours
instead of tokens (a user in the dark theme would otherwise print white text on white paper),
point sizes instead of rem, hairlines instead of shadows, and no filled backgrounds — browsers
drop those unless "Hintergrundgrafiken" is ticked, so anything that carries meaning has to carry
it in ink that actually comes out. */
.protocol-sheet[b-ubrsfg30re] {
color: #111;
font-size: 10.5pt;
line-height: 1.55;
}
/* ── Title block ──────────────────────────────────────────────────────────
What the sheet is, when it was, and whether it is the final text. */
.ps-kicker[b-ubrsfg30re] {
display: flex;
align-items: baseline;
gap: 0.6em;
font-size: 8.5pt;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #555;
}
.ps-kicker-label[b-ubrsfg30re] {
font-weight: 700;
}
/* Pushed to the right edge, the way a document carries its date. */
.ps-kicker-date[b-ubrsfg30re] {
margin-left: auto;
letter-spacing: 0.04em;
text-transform: none;
}
/* A draft that leaves the building has to say so — boxed rather than tinted, because a background
is exactly what the printer will not reproduce. */
.ps-flag[b-ubrsfg30re] {
padding: 0.15em 0.5em;
border: 1pt solid #111;
border-radius: 2pt;
font-weight: 700;
letter-spacing: 0.06em;
color: #111;
}
.ps-title[b-ubrsfg30re] {
margin: 0.35em 0 0;
font-size: 19pt;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: #000;
}
.ps-summary[b-ubrsfg30re] {
margin: 0.35em 0 0;
font-size: 10.5pt;
color: #444;
}
/* Title and summary on the left, the code on the right. The gap is the code's quiet zone on that side
(the SVG brings none); above, right and below it is paper anyway. */
.ps-head-row[b-ubrsfg30re] {
display: flex;
align-items: flex-start;
gap: 5mm;
}
.ps-head-text[b-ubrsfg30re] {
flex: 1;
min-width: 0;
}
.ps-qr[b-ubrsfg30re] {
flex: 0 0 auto;
width: 20mm;
height: 20mm;
margin-top: 0.5em;
}
.ps-logo[b-ubrsfg30re] {
display: block;
margin: 0 0 3mm auto;
max-width: 60mm;
max-height: 14mm;
width: auto;
height: auto;
object-fit: contain;
}
.ps-head[b-ubrsfg30re] {
padding-bottom: 0.7em;
border-bottom: 1.5pt solid #111;
break-after: avoid;
}
/* ── Head data ────────────────────────────────────────────────────────────
Two columns of labelled facts, kept on one page: this is the block a reader checks first. */
.ps-meta[b-ubrsfg30re] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5em 2em;
margin: 1em 0 0;
break-inside: avoid;
}
.ps-meta dt[b-ubrsfg30re] {
font-size: 7.5pt;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #666;
}
.ps-meta dd[b-ubrsfg30re] {
margin: 0;
}
/* ── Sections ─────────────────────────────────────────────────────────────
A heading never ends a page on its own. */
.ps-section[b-ubrsfg30re] {
margin-top: 1.6em;
}
.ps-section h2[b-ubrsfg30re] {
margin: 0 0 0.5em;
padding-bottom: 0.2em;
border-bottom: 0.75pt solid #999;
font-size: 11pt;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #000;
break-after: avoid;
}
.ps-section h3[b-ubrsfg30re] {
margin: 1em 0 0.35em;
font-size: 9.5pt;
font-weight: 700;
color: #333;
break-after: avoid;
}
.ps-empty[b-ubrsfg30re] {
margin: 0;
color: #666;
font-style: italic;
}
.ps-agenda[b-ubrsfg30re] {
margin: 0;
padding-left: 1.2em;
list-style: none;
}
.ps-agenda li[b-ubrsfg30re] {
margin-bottom: 0.15em;
break-inside: avoid;
}
/* ── The minutes ──────────────────────────────────────────────────────────
The body arrives as sanitized HTML, so it carries no scope attribute — ::deep throughout. The
app's own rules for TOP and decision blocks are written for the screen and in tokens, which is
why every one of them is restated here in ink. */
.ps-body-section[b-ubrsfg30re] {
margin-top: 1.4em;
}
.ps-body[b-ubrsfg30re] p {
margin: 0 0 0.6em;
orphans: 3;
widows: 3;
}
.ps-body[b-ubrsfg30re] h1,
.ps-body[b-ubrsfg30re] h2,
.ps-body[b-ubrsfg30re] h3 {
color: #000;
break-after: avoid;
}
.ps-body[b-ubrsfg30re] h1 { font-size: 13pt; }
.ps-body[b-ubrsfg30re] h3 { font-size: 10.5pt; }
/* A TOP heading opens an agenda point — a rule above it, not a box around it. */
.ps-body[b-ubrsfg30re] .fk-top {
margin: 1.3em 0 0.5em;
padding-bottom: 0.2em;
border-bottom: 0.75pt solid #bbb;
font-size: 11.5pt;
break-after: avoid;
}
.ps-body[b-ubrsfg30re] .fk-top::before {
color: #666;
}
/* A decision keeps its bar, loses its tint: the bar prints, the tint would not. */
.ps-body[b-ubrsfg30re] .fk-decision {
margin: 0.6em 0;
padding: 0.1em 0 0.1em 0.8em;
border-left: 2.5pt solid #111;
border-radius: 0;
background: none;
break-inside: avoid;
}
.ps-body[b-ubrsfg30re] .fk-decision::before {
color: #333;
}
/* Mentions are links on screen and plain names on paper. */
.ps-body[b-ubrsfg30re] .fk-mention {
padding: 0;
background: none;
color: #000;
font-weight: 600;
}
.ps-body[b-ubrsfg30re] a {
color: #000;
text-decoration: underline;
}
.ps-body[b-ubrsfg30re] ul,
.ps-body[b-ubrsfg30re] ol {
margin: 0 0 0.6em;
padding-left: 1.4em;
}
.ps-body[b-ubrsfg30re] li {
margin-bottom: 0.15em;
}
.ps-body[b-ubrsfg30re] blockquote {
margin: 0.6em 0;
padding-left: 0.8em;
border-left: 1pt solid #999;
color: #333;
}
.ps-body[b-ubrsfg30re] img {
max-width: 100%;
height: auto;
break-inside: avoid;
}
.ps-body[b-ubrsfg30re] table {
width: 100%;
border-collapse: collapse;
margin: 0.6em 0;
}
.ps-body[b-ubrsfg30re] th,
.ps-body[b-ubrsfg30re] td {
padding: 0.3em 0.5em;
border: 0.5pt solid #999;
text-align: left;
vertical-align: top;
}
/* ── Attendance list ──────────────────────────────────────────────────────
A real table: three columns, hairlines, and no row torn across two sheets. */
.ps-table[b-ubrsfg30re] {
width: 100%;
border-collapse: collapse;
}
.ps-table th[b-ubrsfg30re] {
padding: 0.25em 0.5em 0.25em 0;
border-bottom: 0.75pt solid #111;
font-size: 8pt;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
color: #444;
}
.ps-table td[b-ubrsfg30re] {
padding: 0.35em 0.5em 0.35em 0;
border-bottom: 0.5pt solid #ccc;
vertical-align: top;
}
.ps-table th:first-child[b-ubrsfg30re],
.ps-table td:first-child[b-ubrsfg30re] {
width: 50%;
}
.ps-table tr[b-ubrsfg30re] {
break-inside: avoid;
}
/* ── Signatures ───────────────────────────────────────────────────────────
Boxes on a line, two to a row: a drawn signature sits above the line, an open one leaves it
empty so it can be signed in the room. Neither may be torn across a page. */
.ps-signatures[b-ubrsfg30re] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.4em 2em;
margin-top: 0.6em;
}
.ps-sig[b-ubrsfg30re] {
margin: 0;
break-inside: avoid;
}
.ps-sig-area[b-ubrsfg30re] {
display: flex;
align-items: flex-end;
height: 16mm;
padding-bottom: 1mm;
border-bottom: 0.75pt solid #111;
}
.ps-sig-area img[b-ubrsfg30re] {
max-height: 15mm;
max-width: 100%;
object-fit: contain;
}
.ps-sig figcaption[b-ubrsfg30re] {
display: flex;
flex-direction: column;
padding-top: 0.3em;
}
.ps-sig-name[b-ubrsfg30re] {
font-weight: 600;
}
.ps-sig-note[b-ubrsfg30re] {
font-size: 8pt;
color: #666;
}
.ps-revoked[b-ubrsfg30re] {
margin-top: 1.2em;
break-inside: avoid;
}
.ps-revoked ul[b-ubrsfg30re] {
margin: 0;
padding-left: 1.1em;
font-size: 9pt;
color: #444;
}
/* ── Attachments and comments ─────────────────────────────────────────────
Both are apparatus around the document, so both stay quiet. */
.ps-files[b-ubrsfg30re] {
margin: 0;
padding-left: 1.1em;
}
.ps-files li[b-ubrsfg30re] {
margin-bottom: 0.15em;
}
.ps-file-size[b-ubrsfg30re] {
color: #666;
}
.ps-comment[b-ubrsfg30re] {
margin-bottom: 0.9em;
padding-left: 0.8em;
border-left: 1pt solid #bbb;
break-inside: avoid;
}
.ps-comment-head[b-ubrsfg30re] {
display: flex;
gap: 0.6em;
margin: 0 0 0.2em;
font-size: 8.5pt;
color: #555;
}
.ps-comment-body[b-ubrsfg30re] p {
margin: 0 0 0.3em;
}
.ps-comment-body[b-ubrsfg30re] .fk-mention {
padding: 0;
background: none;
color: #000;
font-weight: 600;
}
/* ── Closing note ─────────────────────────────────────────────────────────
Who printed this, and when. The page numbers are the browser's job. */
.ps-foot[b-ubrsfg30re] {
margin-top: 2em;
padding-top: 0.5em;
border-top: 0.5pt solid #bbb;
font-size: 8pt;
color: #777;
}
/* /Components/Shared/ProtocolRecorderPanel.razor.rz.scp.css */
/* The running recording on the right — the AI chat's shape, so the two read as one family of surfaces
rather than as two inventions. Like the chat it floats: a card inset from the window edges, set
apart by shadow alone, no rule down its side and none under its header. It still claims
--recorder-panel-width from the right edge (the page reserves exactly that); the inset is taken out
of its own width.
Always mounted, slid off-screen when minimised: both opening and closing animate that way, and —
the part that matters here — unmounting the recorder inside would stop the recording. Visibility
flips to hidden only after the slide-out has finished, and back immediately on the way in. */
.recorder-panel[b-f9zb10vwpc] {
--recorder-inset: 0.75rem;
position: fixed;
top: var(--recorder-inset);
right: var(--recorder-inset);
bottom: var(--recorder-inset);
width: calc(var(--recorder-panel-width, 26rem) - var(--recorder-inset));
max-width: calc(92vw - var(--recorder-inset));
z-index: 1001;
display: flex;
flex-direction: column;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
/* none, not translateX(0): any transform makes the panel the containing block of every
position:fixed popup inside it, so the speaker chips' menu — placed in screen coordinates —
landed off to the right of the panel and was clipped by its body. The slide still animates:
none interpolates as the identity. No fade, for the chat's reason: below full opacity the panel
is a backdrop root and the glass behind it blurs nothing until the fade has ended. */
transform: none;
visibility: visible;
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s,
width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The surface, see-through over the blurred page like the chat's. On a layer of its own for the
reason transform is none above: backdrop-filter on the panel would make it the containing block of
the speaker chips' menu just the same. */
.recorder-panel[b-f9zb10vwpc]::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--surface);
background: var(--surface-menu);
-webkit-backdrop-filter: var(--menu-blur);
backdrop-filter: var(--menu-blur);
}
/* While the grip is being dragged the width must track the cursor with no easing lag. */
body.recorder-resizing .recorder-panel[b-f9zb10vwpc] {
transition: none;
}
.recorder-panel.is-minimized[b-f9zb10vwpc] {
transform: translateX(calc(100% + var(--recorder-inset)));
visibility: hidden;
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s linear 0.32s;
}
/* ── Head ── */
.recorder-panel-head[b-f9zb10vwpc] {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.85rem 1rem;
flex-shrink: 0;
}
/* A panel that outlives the page it was started from has to say what it belongs to. */
.recorder-panel-protocol[b-f9zb10vwpc] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex: 1;
min-width: 0;
font-weight: 600;
color: var(--clr-slate-800);
text-decoration: none;
}
.recorder-panel-protocol span[b-f9zb10vwpc] {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* The clipboard takes the accent the assistant's spark has in its own header. */
.recorder-panel-protocol[b-f9zb10vwpc] svg {
color: var(--clr-orange-500);
flex-shrink: 0;
}
/* The two header actions: open the protocol, and close the panel. */
.recorder-panel-toggle[b-f9zb10vwpc] {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 0.25rem;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--clr-slate-500);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.recorder-panel-toggle:hover[b-f9zb10vwpc] {
background: var(--surface-hover);
color: var(--clr-slate-700);
}
/* ── Body ──
The body itself does not scroll; the transcript inside it does. Two reasons, and the second one is
not obvious: it keeps the controls pinned to the foot of the panel however long the transcript
gets, and it is what makes the recorder follow along while somebody speaks. stt.js scrolls the
transcript's own box and only while the reader is already at its bottom — with the box grown to
fit its content there is nothing to scroll, so the text simply ran off the panel. */
.recorder-panel-body[b-f9zb10vwpc] {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 1rem;
}
.recorder-panel-body[b-f9zb10vwpc] .dictation {
flex: 1;
min-height: 0;
}
/* The console was drawn for a card the width of a page; in a panel it goes back to the proportions
the plugin widget has. */
.recorder-panel-body[b-f9zb10vwpc] .dictation-wave {
height: 2.5rem;
}
.recorder-panel-body[b-f9zb10vwpc] .dictation-transcript {
flex: 1;
min-height: 6rem;
max-height: none;
overflow-y: auto;
}
/* The last row in the column, so it stays at the foot of the panel whatever the transcript does. */
.recorder-panel-body[b-f9zb10vwpc] .dictation-actions {
flex-shrink: 0;
}
.recorder-panel-body[b-f9zb10vwpc] .dictation-record,
.recorder-panel-body[b-f9zb10vwpc] .dictation-ctl {
flex: 1;
}
@media print {
/* A recording is not part of the document. */
.recorder-panel[b-f9zb10vwpc] {
display: none;
}
}
/* ── The resize grip ──────────────────────────────────────────────────────
The chat's grip, so the two feel the same under the pointer: a strip covering the gap between page
and card plus a few pixels of the card, with only a small pill drawn in the gap — a full-height line
against a rounded, floating card reads as a stray border. Orange while dragging, the recorder's
accent. Double-click clears the remembered width. */
.recorder-resize-handle[b-f9zb10vwpc] {
position: absolute;
top: 0;
left: calc(-1 * var(--recorder-inset));
bottom: 0;
width: calc(var(--recorder-inset) + 4px);
z-index: 30;
cursor: ew-resize;
touch-action: none;
}
.recorder-resize-handle[b-f9zb10vwpc]::after {
content: '';
position: absolute;
top: 50%;
left: calc((var(--recorder-inset) - 4px) / 2);
width: 4px;
height: 40px;
margin-top: -20px;
border-radius: var(--radius-pill);
background: var(--border-strong);
opacity: 0;
transition: opacity 0.15s, background 0.15s;
}
.recorder-resize-handle:hover[b-f9zb10vwpc]::after {
opacity: 1;
}
body.recorder-resizing .recorder-resize-handle[b-f9zb10vwpc]::after {
opacity: 1;
background: var(--clr-orange-500);
}
/* Below desktop the panel already covers nearly the whole width; there is nothing to drag. */
@media (max-width: 1023px) {
.recorder-resize-handle[b-f9zb10vwpc] { display: none; }
}
/* ── Detached ─────────────────────────────────────────────────────────────
Dragged past the threshold the panel is too wide to read as a sidebar, so it stops pretending to
be one: a dimmed ground goes behind it and it floats. The recording is untouched by any of this —
clicking the ground closes the panel, not the microphone. */
.recorder-backdrop[b-f9zb10vwpc] {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(15, 27, 61, 0.28);
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
body.recorder-detached .recorder-backdrop.open[b-f9zb10vwpc] {
opacity: 1;
visibility: visible;
transition: opacity 0.28s ease, visibility 0s;
}
/* Touch devices: follow the *visible* viewport rather than the layout one, which the on-screen
keyboard leaves at full height on some engines and scrolls instead — parking the panel's
header above the screen edge. js/viewport.js publishes the visible box. */
@media (hover: none) and (pointer: coarse) {
.recorder-panel[b-f9zb10vwpc] {
bottom: auto;
top: calc(var(--visual-top, 0px) + var(--recorder-inset));
height: calc(var(--visual-vh, 100dvh) - 2 * var(--recorder-inset));
}
}
/* Phone: the same full-screen treatment the assistant gets, without inset or radius — at 92vw the
8vw sliver of page beside it is unusable anyway, and the transcript needs every pixel of width it
can get. */
@media (max-width: 640px) {
.recorder-panel[b-f9zb10vwpc] {
--recorder-inset: 0px;
width: 100%;
max-width: none;
border-radius: 0;
}
}
/* /Components/Shared/ProtocolTranscriptPanel.razor.rz.scp.css */
/* The spoken record. The recorder itself brings its own look (the dictation classes it shares with
the plugin widget); what is styled here is the review step around it.
The card reads top to bottom as the path the material takes — who spoke, what was said, what
becomes of it — so each of those is a labelled step rather than another row of controls. The
buttons used to sit in one row of five with the primary in the middle, which said nothing about
which of them is the point and which are housekeeping.
No marker on the card any more: the transcript used to sit under the minutes and needed to be told
apart from them. It has a tab of its own now, so the tab is the distinction. */
/* Everything one can do to the transcript, in one row above it. Three scattered groups meant hunting
the length of the card for the next thing to press — and this way the record gets the rest of the
height, which is what the tab is for. */
.transcript-toolbar[b-uiszxq84fv] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
}
/* The one action the tab exists for, at the far end and the only filled button in the row. */
.transcript-draft[b-uiszxq84fv] {
margin-left: auto;
}
.transcript-busy[b-uiszxq84fv] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: var(--text-muted);
}
/* ── The AI at work ───────────────────────────────────────────────────────
Over the record rather than beside it: both passes take minutes on a long meeting, the transcript
must not be typed in while one of them is rewriting it, and the only thing the user needs in those
minutes is the certainty that something is happening. The stage is the positioning box — the sheet
covers exactly what is being worked on and nothing else. */
.transcript-stage[b-uiszxq84fv] {
position: relative;
}
.transcript-working[b-uiszxq84fv] {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg);
/* Veiled, not hidden: the words underneath stay legible enough to say what is being worked on. */
background: color-mix(in srgb, var(--surface-sunken) 86%, transparent);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: transcript-working-in-b-uiszxq84fv 0.18s ease-out;
z-index: 1;
}
@keyframes transcript-working-in-b-uiszxq84fv {
from { opacity: 0; }
to { opacity: 1; }
}
.transcript-working-card[b-uiszxq84fv] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
max-width: 22rem;
padding: 1.5rem;
text-align: center;
color: var(--primary);
}
.transcript-working-text[b-uiszxq84fv] {
margin: 0;
font-size: 0.92rem;
font-weight: 600;
color: var(--text);
}
.transcript-working-step[b-uiszxq84fv] {
margin: 0;
font-size: 0.78rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* The draft's meter row — tokens in and out, and the time — in the look of the chat's: small, quiet,
tabular figures so the row does not twitch while the seconds count. */
.transcript-working-meter[b-uiszxq84fv] {
display: flex;
gap: 0.75rem;
margin: 0;
font-size: 0.72rem;
color: var(--clr-slate-400);
font-variant-numeric: tabular-nums;
user-select: none;
}
.transcript-working-meter span[b-uiszxq84fv] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.transcript-working-meter[b-uiszxq84fv] svg { color: var(--clr-slate-400); flex-shrink: 0; }
/* The agenda as the model writes it: numbered like the TOPs it becomes, left-aligned in the centred
card, each new point fading in. */
.transcript-working-tops[b-uiszxq84fv] {
align-self: stretch;
margin: 0.2rem 0 0;
padding: 0.6rem 0.8rem 0.6rem 2rem;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-xs);
color: var(--text);
font-size: 0.8rem;
line-height: 1.35;
text-align: left;
}
.transcript-working-tops li[b-uiszxq84fv] {
padding: 0.12rem 0;
animation: transcript-top-in-b-uiszxq84fv 0.35s ease-out;
}
.transcript-working-tops li[b-uiszxq84fv]::marker {
color: var(--primary);
font-weight: 700;
}
@keyframes transcript-top-in-b-uiszxq84fv {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.transcript-working-tops li[b-uiszxq84fv] { animation: none; }
}
.transcript-working-bar[b-uiszxq84fv] {
width: 13rem;
height: 4px;
border-radius: 999px;
background: var(--border);
overflow: hidden;
}
.transcript-working-bar span[b-uiszxq84fv] {
display: block;
height: 100%;
border-radius: inherit;
background: var(--primary);
transition: width 0.35s ease;
}
/* No block count to go by — a single call, or a pass that has not reported yet. A bar that swept
would be honest about that; a bar stuck at a made-up position would not. */
.transcript-working-bar.is-indeterminate span[b-uiszxq84fv] {
width: 38%;
animation: transcript-working-sweep-b-uiszxq84fv 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}
@keyframes transcript-working-sweep-b-uiszxq84fv {
from { transform: translateX(-110%); }
to { transform: translateX(275%); }
}
@media (prefers-reduced-motion: reduce) {
.transcript-working[b-uiszxq84fv] { animation: none; }
.transcript-working-bar.is-indeterminate span[b-uiszxq84fv] {
width: 100%;
animation: none;
opacity: 0.45;
}
}
@media print {
/* The minutes are the record; the material they were made from is not. */
.transcript-card[b-uiszxq84fv] {
display: none;
}
}
/* ── Somebody else is recording ───────────────────────────────────────────
The whole card for anyone who is not holding the microphone: what is happening, who is doing it,
and the text as it grows. No controls at all — a button that would be refused is worse than no
button, because it promises the recording is yours to end. */
.transcript-live-notice[b-uiszxq84fv] {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.9rem 1.1rem;
border-radius: var(--radius-lg);
background: var(--surface-sunken);
}
/* Pushed to the far end and centred against the text beside it. */
.transcript-live-action[b-uiszxq84fv] {
margin-left: auto;
align-self: center;
flex-shrink: 0;
}
.transcript-live-notice .dictation-dot[b-uiszxq84fv] {
margin-top: 0.35rem;
}
.transcript-live-text[b-uiszxq84fv] {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.transcript-live-text strong[b-uiszxq84fv] {
font-size: 0.92rem;
}
.transcript-live-text span[b-uiszxq84fv] {
font-size: 0.8rem;
line-height: 1.6;
color: var(--text-muted);
}
/* The same sunken face the transcript is edited in, so it does not move house when the recording
ends and the field appears in its place. */
.transcript-readonly[b-uiszxq84fv] {
margin-top: 0.75rem;
height: max(24rem, calc(100dvh - 30rem - var(--top-bar-height)));
overflow-y: auto;
padding: 0.9rem 1rem;
border-radius: var(--radius-lg);
background: var(--surface-sunken);
font-size: 0.88rem;
line-height: 1.65;
white-space: pre-wrap;
}
/* ── The transcript as turns ──────────────────────────────────────────────
One sunken region holding the whole record, so it reads as one document and not as a stack of
cards — and so the raw text box that replaces it sits in the same place at the same size. */
.transcript-turns[b-uiszxq84fv] {
/* Same reasoning as the live mirror: the tab's height belongs to the record it exists to show. */
height: max(24rem, calc(100dvh - 30rem - var(--top-bar-height)));
overflow-y: auto;
padding: 0.9rem 1rem;
border-radius: var(--radius-lg);
background: var(--surface-sunken);
}
.transcript-turn + .transcript-turn[b-uiszxq84fv] {
margin-top: 0.9rem;
}
/* The speaker is a button because it is one: clicking opens the menu that names them. Styled as a quiet label rather
than a control, so a page of turns does not read as a page of buttons — the affordance shows up
on hover, where a pointer already is. */
.transcript-speaker[b-uiszxq84fv] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-bottom: 0.15rem;
padding: 0.1rem 0.4rem;
margin-left: -0.4rem;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--primary);
font-family: inherit;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: background 0.12s;
}
.transcript-speaker:hover[b-uiszxq84fv],
.transcript-speaker:focus-visible[b-uiszxq84fv] {
background: var(--primary-soft);
}
/* An offer, not a name: this paragraph has no speaker yet. Quieter than a real one, so a transcript
with a few of them does not read as a list of them. */
.transcript-speaker.is-unnamed[b-uiszxq84fv] {
color: var(--text-label);
font-weight: 600;
font-style: italic;
}
/* The same block whether it is being typed into or read: a box that looks like a form field while
editing and like a paragraph while not would make the mode a visual event, and the mode belongs to
the protocol, not to this card. So the field carries no frame and no fill — the caret is what says
it can be typed in. */
.transcript-turn-text[b-uiszxq84fv] {
display: block;
/* The gutter the hover line lives in is always here, and the negative margin always cancels it, so
switching the line on paints and moves nothing. Held on the base rule rather than on the hover
one: with the padding added only under the pointer, the box lost 0.5rem of content width and the
paragraph rewrapped — the text moving away from the cursor that was pointing at it. */
width: calc(100% + 0.5rem);
margin: 0 0 0 -0.5rem;
padding: 0 0 0 0.5rem;
border: none;
background: none;
resize: none;
overflow: hidden;
font-family: inherit;
font-size: 0.88rem;
line-height: 1.65;
color: var(--text);
}
.transcript-turn-text:focus[b-uiszxq84fv] {
outline: none;
}
/* Only on hover and focus, so a page of turns does not read as a page of inputs. Paint alone — the
space it needs is reserved above. */
.transcript-turns.is-editing .transcript-turn:hover .transcript-turn-text[b-uiszxq84fv],
.transcript-turn-text:focus[b-uiszxq84fv] {
box-shadow: inset 2px 0 0 var(--border);
}
.transcript-turn-text:focus[b-uiszxq84fv] {
box-shadow: inset 2px 0 0 var(--primary);
}
/* Where speech was lost. A note between the turns rather than one of them: no speaker, no text field,
and the warning colours of the "Lücken" chip in the header, so the two are read as one thing. */
.transcript-gap[b-uiszxq84fv] {
display: flex;
align-items: flex-start;
gap: 0.45rem;
margin: 0;
padding: 0.45rem 0.7rem;
border-radius: var(--radius-md);
background: var(--clr-amber-50);
color: var(--clr-amber-800);
font-size: 0.82rem;
line-height: 1.5;
}
/* Outside the mode the speaker is a label, not a control. */
.transcript-speaker.is-static[b-uiszxq84fv] {
cursor: default;
color: var(--text-muted);
}
.transcript-speaker.is-static:hover[b-uiszxq84fv] {
background: none;
}
/* ── The live mirror ──────────────────────────────────────────────────────
The running session, read-only, in the tab it belongs to. Given the page's proportions rather than
the rail's: the recorder's own overrides are scoped to that component and do not reach here. */
.transcript-mirror[b-uiszxq84fv] {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Only when something stands above it — with the panel open the mirror is the first thing in the
card and a top margin would be a gap under the heading. */
.transcript-live-notice + .transcript-mirror[b-uiszxq84fv] {
margin-top: 1rem;
}
.transcript-mirror[b-uiszxq84fv] .dictation-status {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.transcript-mirror[b-uiszxq84fv] .dictation-state {
flex: 1;
min-width: 0;
font-weight: 500;
}
.transcript-mirror[b-uiszxq84fv] .dictation-elapsed {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.transcript-mirror[b-uiszxq84fv] .dictation-transcript {
/* The tab is a whole page and the transcript is what it is for, so the region takes the height
the window has left rather than a fixed slice of it. Still a scroller, not a growing block:
that is what keeps the text following along as it arrives (see stickToEnd in stt.js). */
height: max(24rem, calc(100dvh - 26rem - var(--top-bar-height)));
overflow-y: auto;
padding: 0.9rem 1rem;
border-radius: var(--radius-lg);
background: var(--surface-sunken);
font-size: 0.88rem;
line-height: 1.65;
white-space: pre-wrap;
}
.transcript-mirror[b-uiszxq84fv] .dictation-placeholder {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
min-height: 0;
height: auto;
margin: 0;
text-align: left;
color: var(--text-faint);
}
/* The one control the mirror carries. Under the words, because it is what one does when they stop. */
.transcript-mirror-actions[b-uiszxq84fv] {
display: flex;
}
/* The same filled square the recorder's stop button uses — "stop" is a shape before it is a word. */
.transcript-stop-square[b-uiszxq84fv] {
width: 10px;
height: 10px;
border-radius: 2px;
background: currentColor;
}
/* /Components/Shared/PublicBrand.razor.rz.scp.css */
.pb-brand[b-rdz3wbr4ua] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.pb-logo[b-rdz3wbr4ua] {
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
object-fit: contain;
}
.pb-brand-info[b-rdz3wbr4ua] {
display: flex;
flex-direction: column;
}
.pb-brand-text[b-rdz3wbr4ua] {
font-size: 1.1rem;
font-weight: 700;
color: var(--clr-slate-800);
line-height: 1.2;
}
.pb-brand-tagline[b-rdz3wbr4ua] {
font-size: 0.72rem;
color: var(--clr-slate-400);
letter-spacing: 0.02em;
}
/* The company logo in place of the FlowKlar brand (docs/BRANDING.md §3.4), one variant per theme. */
.pb-company-logo[b-rdz3wbr4ua] {
display: block;
max-width: 220px;
max-height: 44px;
width: auto;
height: auto;
object-fit: contain;
}
.pb-company-logo--dark[b-rdz3wbr4ua] {
display: none;
}
.pb-company-logo--plate[b-rdz3wbr4ua] {
padding: 0.3rem 0.55rem;
border-radius: var(--radius-sm);
background: #fff;
}
html[data-theme="dark"] .pb-company-logo--light[b-rdz3wbr4ua] {
display: none;
}
html[data-theme="dark"] .pb-company-logo--dark[b-rdz3wbr4ua] {
display: block;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .pb-company-logo--light[b-rdz3wbr4ua] {
display: none;
}
html:not([data-theme]) .pb-company-logo--dark[b-rdz3wbr4ua] {
display: block;
}
}
/* /Components/Shared/PublicPage.razor.rz.scp.css */
/* The frame of every page behind a link (docs/DESIGN-SYSTEM.md §8b). One column on every one of them: whoever goes
from a conversation to the form or the protocol it links finds the mark and the buttons where they were. It is
as wide as an A4 sheet, because a form design draws itself as one (width: 210mm): so the sheet's edge stands
under the mark, as a card's does. */
.pub-page[b-6sfs38tdm8] {
/* Where the content of every card begins, notices included: the one line everything inside the column
starts on. */
--pub-inset: 2rem;
/* The bar's height, the room under it and how far a docked bar stays from the window's top: a page that docks
something under the bar adds them up (the conversation's head). */
--pub-bar-height: 44px;
--pub-gap: 1.25rem;
--pub-dock-top: 1rem;
width: 100%;
max-width: 210mm;
/* Fills the layout's column, so a SaveBar in the foot docks at the bottom of a short page. */
flex: 1 0 auto;
display: flex;
flex-direction: column;
gap: var(--pub-gap);
}
/* The mark and the buttons float on the backdrop, as the app's top bar does (.tb-btn, app.css): no card, the
buttons set apart by their shadow. Their outer edges are the column's — the mark stands over the cards' left
edge, PDF ends at their right one. */
.pub-bar[b-6sfs38tdm8] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: var(--pub-bar-height);
}
/* Docked, it stays at the top of the window; what scrolls under it is the page's to fade out (fade-under.js). */
.pub-bar.is-docked[b-6sfs38tdm8] {
position: sticky;
top: var(--pub-dock-top);
z-index: 6;
}
.pub-bar-end[b-6sfs38tdm8] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.pub-actions[b-6sfs38tdm8] {
display: flex;
gap: 0.5rem;
}
/* The info button is the phone's (below); a wider screen has the layout's footer for it. */
.pub-info[b-6sfs38tdm8] {
display: none;
}
/* The panel's content is this component's markup, inside TopBarPopover's panel. */
/* On the rows' inset (.tb-menu-item), so the line starts where their symbols do. */
.pub-info-head[b-6sfs38tdm8] {
margin: 0;
padding: 0.85rem 0.75rem 0.35rem;
font-size: 0.82rem;
color: var(--text-muted);
}
.pub-info-head strong[b-6sfs38tdm8] {
color: var(--text-secondary);
}
/* "Ein Produkt von" and the logo read as one line, the logo right after the words. */
.pub-info-maker .tb-menu-label[b-6sfs38tdm8] {
flex: 0 1 auto;
}
.pub-info-maker .brand-badge img[b-6sfs38tdm8] {
height: 22px;
}
.pub-actions .tb-btn:disabled[b-6sfs38tdm8] {
cursor: progress;
}
.pub-content[b-6sfs38tdm8] {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
/* ── The parts a page builds its column from ──
The page's own markup, so the rules reach it through ::deep. */
/* A card: white on the backdrop, set apart by its shadow alone (as .detail-section in the app). */
.pub-content[b-6sfs38tdm8] .pub-card {
min-width: 0;
padding: var(--pub-inset);
border-radius: var(--radius-2xl);
background: var(--surface);
box-shadow: var(--shadow-md);
}
/* A card that says where things stand — loading, an invalid link, a closed page — instead of showing them. */
.pub-content[b-6sfs38tdm8] .pub-card.pub-state {
padding-block: 3rem;
}
.pub-content[b-6sfs38tdm8] .pub-title {
margin: 0;
font-size: clamp(1.5rem, 1.15rem + 1.6vw, var(--text-hero));
font-weight: 700;
letter-spacing: var(--tracking-hero);
line-height: 1.2;
color: var(--text);
overflow-wrap: anywhere;
}
/* The line under the title: date, place, number. */
.pub-content[b-6sfs38tdm8] .pub-meta {
margin: 0.5rem 0 0;
color: var(--text-muted);
}
/* An overline, as the app's sections set theirs (.detail-section h2). */
.pub-content[b-6sfs38tdm8] .pub-section-title {
margin: 0 0 1rem;
font-size: var(--text-label-size);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-label);
}
/* A notice in the column, as wide as the cards: defined by its tint, without an outline or a shadow — lifted, it
would read as something to press (docs/DESIGN-SYSTEM.md §1). Its symbol stands on the cards' inset. */
.pub-content[b-6sfs38tdm8] .pub-notice {
display: flex;
align-items: center;
gap: 0.85rem;
margin: 0;
padding: 1rem var(--pub-inset);
border-radius: var(--radius-2xl);
background: var(--clr-amber-50);
color: var(--clr-amber-800);
}
.pub-content[b-6sfs38tdm8] .pub-notice.is-success {
background: var(--clr-green-50);
color: var(--clr-green-800);
}
.pub-content[b-6sfs38tdm8] .pub-notice > .icon {
flex-shrink: 0;
}
/* A phone keeps the page's content in view: a lower bar — the mark smaller and without "Workflow-Plattform", the
buttons as symbols (flat below 768px is .tb-btn's own) — and less room between the parts. PublicBrand renders the
mark, so the rules reach it through ::deep. */
@media (max-width: 640px) {
.pub-page[b-6sfs38tdm8] {
--pub-inset: 1.25rem;
--pub-gap: 0.75rem;
--pub-dock-top: 0.5rem;
--pub-bar-height: 40px;
}
.pub-content[b-6sfs38tdm8] .pub-card,
.pub-content[b-6sfs38tdm8] .pub-notice {
border-radius: var(--radius-xl);
}
.pub-bar-end[b-6sfs38tdm8],
.pub-actions[b-6sfs38tdm8] {
gap: 0.25rem;
}
.pub-info[b-6sfs38tdm8] {
display: inline-flex;
}
.pub-action-label[b-6sfs38tdm8] {
display: none;
}
.pub-actions .tb-btn--pill[b-6sfs38tdm8] {
padding: 0;
}
.pub-bar[b-6sfs38tdm8] .pb-brand {
gap: 0.6rem;
min-width: 0;
}
.pub-bar[b-6sfs38tdm8] .pb-logo {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
}
.pub-bar[b-6sfs38tdm8] .pb-brand-tagline {
display: none;
}
.pub-bar[b-6sfs38tdm8] .pb-brand-text {
font-size: 1rem;
}
.pub-bar[b-6sfs38tdm8] .pb-company-logo {
max-height: 32px;
}
}
/* ── Paper ──
The column is the document: the bar goes, and the cards give up their surface, so each is a section of the
page. What only means something on screen — the field to write in, a button — carries pub-screen-only. */
@media print {
.pub-bar[b-6sfs38tdm8] {
display: none !important;
}
.pub-page[b-6sfs38tdm8] {
max-width: none;
gap: 0;
}
.pub-content[b-6sfs38tdm8] {
gap: 0;
}
.pub-content[b-6sfs38tdm8] .pub-screen-only {
display: none !important;
}
/* A card docked on screen (the conversation's head) stands in the flow here. */
.pub-content[b-6sfs38tdm8] .pub-card {
position: static !important;
padding: 0 0 1.25rem !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.pub-content[b-6sfs38tdm8] .pub-notice {
padding: 0.5rem 0 !important;
background: none !important;
}
}
/* The PDF's copy of the column (html2pdf lays it out in its container, pdf-export.js) takes the same rules. The
page itself stays as it is while the export runs. The surface goes from every card, a glass one included, before
html2canvas reads it — html2canvas fails on color-mix(), and it reads a card left out (pub-screen-only) too. And
no card stays docked: the copy lies in an overlay that clips, and a sticky head would slide down in it. */
.html2pdf__container .pub-content[b-6sfs38tdm8] {
gap: 0;
}
.html2pdf__container .pub-content[b-6sfs38tdm8] .pub-screen-only {
display: none !important;
}
.html2pdf__container .pub-content[b-6sfs38tdm8] .pub-card {
position: static !important;
padding: 0 0 1.25rem !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.html2pdf__container .pub-content[b-6sfs38tdm8] .pub-notice {
padding: 0.5rem 0 !important;
background: none !important;
}
/* /Components/Shared/PushNotificationToggle.razor.rz.scp.css */
.push-notification-toggle[b-7wac88wp28] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
gap: 0.75rem;
}
[b-7wac88wp28] .toggle-text {
color: var(--text-secondary) !important;
}
/* /Components/Shared/RecorderPill.razor.rz.scp.css */
/* The pill is the bar's .tb-btn (app.css): a dot and the elapsed time. The microphone shows only on a
phone, where the time does not fit and a lone dot would say nothing about what is running. */
.recorder-fab-mic[b-qc5wvwbcx0] {
display: none;
}
.recorder-fab-time[b-qc5wvwbcx0] {
font-variant-numeric: tabular-nums;
color: var(--text);
}
/* Red, and moving. Red because that is what "recording" means everywhere a microphone is involved,
and moving because a static dot reads as decoration — this one has to be noticed by somebody who
is not looking for it. It is the only thing on screen saying a microphone is open once the panel is
minimised. */
.recorder-fab-dot[b-qc5wvwbcx0] {
width: 9px;
height: 9px;
flex-shrink: 0;
border-radius: var(--radius-circle);
background: var(--clr-red-500);
animation: recorder-fab-pulse-b-qc5wvwbcx0 1.6s ease-in-out infinite;
}
/* Paused: amber and still. The pulse is what says "you are being listened to right now", so a paused
recording must not have it — and it must still be visible, because the microphone is claimed and the
meeting is not over. */
.recorder-fab-dot.is-paused[b-qc5wvwbcx0] {
background: var(--clr-amber-500);
animation: none;
}
@keyframes recorder-fab-pulse-b-qc5wvwbcx0 {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.82); }
}
/* Somebody who asked for less motion still needs to see the dot — it just stops moving. */
@media (prefers-reduced-motion: reduce) {
.recorder-fab-dot[b-qc5wvwbcx0] {
animation: none;
}
}
/* Phone: the microphone with the dot on its shoulder, no time. */
@media (max-width: 767px) {
.recorder-fab[b-qc5wvwbcx0] {
padding: 0;
}
.recorder-fab-mic[b-qc5wvwbcx0] {
display: inline-flex;
}
.recorder-fab-time[b-qc5wvwbcx0] {
display: none;
}
.recorder-fab-dot[b-qc5wvwbcx0] {
position: absolute;
top: 7px;
right: 7px;
box-shadow: 0 0 0 2px var(--surface-page);
}
}
/* /Components/Shared/RememberMeCheckbox.razor.rz.scp.css */
/* ── Wrapper label ─────────────────────────────────────────── */
.remember-check[b-febv94iezn] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
margin-bottom: 1rem;
}
/* ── Hide native input while keeping it accessible + submittable ── */
.remember-check__input[b-febv94iezn] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
clip: rect(0, 0, 0, 0);
border: 0;
margin: 0;
}
/* ── Custom visual box ─────────────────────────────────────── */
.remember-check__box[b-febv94iezn] {
position: relative;
width: 1.1rem;
height: 1.1rem;
flex-shrink: 0;
border-radius: var(--radius-xs);
border: 1.5px solid var(--clr-slate-300);
background: var(--surface);
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
/* ── Checkmark via ::after (rotated L-shape) ───────────────── */
.remember-check__box[b-febv94iezn]::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 5px;
height: 9px;
border: 2px solid var(--clr-always-white);
border-top: none;
border-left: none;
transform: rotate(45deg) translateY(-1px);
opacity: 0;
transition: opacity 0.1s;
}
/* ── Hover ─────────────────────────────────────────────────── */
.remember-check:hover .remember-check__box[b-febv94iezn] {
border-color: var(--clr-blue-400);
}
/* ── Keyboard focus ring ───────────────────────────────────── */
.remember-check__input:focus-visible + .remember-check__box[b-febv94iezn] {
outline: 2px solid var(--clr-blue-400);
outline-offset: 2px;
}
/* ── Checked state ─────────────────────────────────────────── */
.remember-check__input:checked + .remember-check__box[b-febv94iezn] {
background: var(--clr-blue-500);
border-color: var(--clr-blue-500);
}
.remember-check__input:checked + .remember-check__box[b-febv94iezn]::after {
opacity: 1;
}
/* ── Checked + hover ───────────────────────────────────────── */
.remember-check:hover .remember-check__input:checked + .remember-check__box[b-febv94iezn] {
background: var(--clr-blue-600);
border-color: var(--clr-blue-600);
}
/* ── Label text ────────────────────────────────────────────── */
.remember-check__label[b-febv94iezn] {
font-size: 0.85rem;
color: var(--clr-slate-600);
line-height: 1.4;
}
/* ══ Dark Mode ═════════════════════════════════════════════════
Unchecked box: slightly darker than card bg (#1b2a3d)
so the box boundary is always perceivable.
Checked state uses --clr-blue-500 (var(--clr-blue-500)) which is
unchanged in dark mode — vivid and readable.
══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .remember-check__box[b-febv94iezn] {
background: #0f1c2d;
border-color: var(--clr-slate-300); /* #365470 in dark */
}
html[data-theme="dark"] .remember-check:hover .remember-check__box[b-febv94iezn] {
border-color: var(--clr-blue-400); /* --clr-blue-400, static for dark */
}
html[data-theme="dark"] .remember-check__input:checked + .remember-check__box[b-febv94iezn] {
background: var(--clr-blue-500);
border-color: var(--clr-blue-500);
}
html[data-theme="dark"] .remember-check:hover .remember-check__input:checked + .remember-check__box[b-febv94iezn] {
background: var(--clr-blue-600); /* --clr-blue-600, slightly brighter on dark */
border-color: var(--clr-blue-600);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .remember-check__box[b-febv94iezn] {
background: #0f1c2d;
border-color: var(--clr-slate-300);
}
html:not([data-theme]) .remember-check:hover .remember-check__box[b-febv94iezn] {
border-color: var(--clr-blue-400);
}
html:not([data-theme]) .remember-check__input:checked + .remember-check__box[b-febv94iezn] {
background: var(--clr-blue-500);
border-color: var(--clr-blue-500);
}
html:not([data-theme]) .remember-check:hover .remember-check__input:checked + .remember-check__box[b-febv94iezn] {
background: var(--clr-blue-600);
border-color: var(--clr-blue-600);
}
}
/* /Components/Shared/SaveBar.razor.rz.scp.css */
/* Docking host. `margin-top: auto` claims the leftover height of a flex column, which parks the
bar at the bottom of short pages; on long pages there is nothing left to claim and the sticky
offset keeps the bar floating above the lower edge while scrolling. Modals are flex columns
too, but sized to their content, so there the bar simply follows the content – as before. */
.save-bar-host[b-eyj0a7o6lo] {
position: sticky;
bottom: 1.5rem;
z-index: 40;
margin-top: auto;
padding-top: 1.5rem;
display: flex;
justify-content: center;
/* Chrome floating over the page – only the bar itself may take clicks. */
pointer-events: none;
}
/* Overlay: the host takes no room, so the element before it runs down to the page's bottom padding
and the bar floats over its lower edge. A row with no height lines the bar's bottom up with its own
and lets it overflow upwards; the margin lifts it off the edge like the canvas' zoom control. */
.save-bar-host.is-overlay[b-eyj0a7o6lo] {
height: 0;
margin-top: 0;
padding-top: 0;
align-items: flex-end;
}
.save-bar-host.is-overlay .save-bar[b-eyj0a7o6lo] {
margin-bottom: 0.75rem;
}
.save-bar[b-eyj0a7o6lo] {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
/* A compact bar floating in the centre rather than spanning the full width – that keeps it
clear of the FAB cluster on the right and gives it more presence. */
max-width: 100%;
padding: 0.85rem 1.5rem;
/* Glass, like every surface that lies over the page (app.css, --surface-menu): what the bar floats
over stays visible, blurred. The solid surface is the fallback where backdrop-filter is missing. */
background: var(--surface);
background: var(--surface-menu);
-webkit-backdrop-filter: var(--menu-blur);
backdrop-filter: var(--menu-blur);
border: 1px solid transparent;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
/* Ausgeblendeter Ruhezustand */
opacity: 0;
transform: translateY(0.75rem);
visibility: hidden;
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.save-bar.is-visible[b-eyj0a7o6lo] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
visibility: visible;
}
.save-bar-hint[b-eyj0a7o6lo] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--clr-slate-500);
}
/* With a note the bar is a grid: hint and buttons in a row as always, the note centred under both,
small, so it is there when looked for. A grid rather than the wrapping flex row, which would size
the bar as if all three sat on one line and then break the note off into an over-wide bar. */
.save-bar.has-note[b-eyj0a7o6lo] {
display: grid;
grid-template-columns: auto auto;
align-items: center;
column-gap: 1.25rem;
/* Not the bar's 1.25rem: a folded note would leave that gap under the buttons. */
row-gap: 0;
}
/* The note's row folds open and shut — a grid row animates from 0fr to 1fr — while the line fades, so
the bar grows and shrinks with it instead of jumping. The gap above the line lives inside the
clipped part, so a folded note leaves none behind. */
.save-bar-note[b-eyj0a7o6lo] {
grid-column: 1 / -1;
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}
.save-bar-note.is-shown[b-eyj0a7o6lo] {
grid-template-rows: 1fr;
opacity: 1;
}
.save-bar-note-clip[b-eyj0a7o6lo] {
min-height: 0;
overflow: hidden;
}
.save-bar-note-line[b-eyj0a7o6lo] {
display: flex;
justify-content: center;
padding-top: 0.3rem;
font-size: 0.68rem;
color: var(--text-faint);
}
@media (prefers-reduced-motion: reduce) {
.save-bar-note[b-eyj0a7o6lo] {
transition-duration: 0.01ms;
}
}
@media (max-width: 480px) {
.save-bar.has-note[b-eyj0a7o6lo] {
grid-template-columns: auto;
justify-items: center;
}
}
.save-bar-actions[b-eyj0a7o6lo] {
display: flex;
gap: 0.5rem;
}
/* The bar is UI chrome – never print it and never bake it into a PDF export. */
@media print {
.save-bar-host[b-eyj0a7o6lo] {
display: none !important;
}
}
body.pdf-exporting .save-bar-host[b-eyj0a7o6lo] {
display: none !important;
}
/* /Components/Shared/SchottlerBuhlContactCard.razor.rz.scp.css */
/* ===========================================================
The maker's card below the contact person — the agency's design language
===========================================================
The dark contact card of the "Entwickler" tab (SchottlerBuhlProfile.razor.css), made compact for the end of
a help page or the settings overview: ink, copper, Manrope in light weights with Instrument Serif italic for emphasis, JetBrains Mono
for the labels, hairlines, the pixel signet as a watermark. Deliberately NOT the FlowKlar design system:
prefixed `sbc-`, local custom properties, pixel sizes as on the site. The one thing taken from the app is
its theme: on the dark page the card is a step up and edged by a hairline, as on the profile.
=========================================================== */
/* Registered here as well, as the profile and the modal do: global once loaded, harmless twice. */
@font-face {
font-family: 'SB Manrope';
font-style: normal;
font-weight: 200 700;
font-display: swap;
src: url(/branding/fonts/manrope-latin.woff2) format('woff2');
}
@font-face {
font-family: 'SB Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/branding/fonts/instrument-serif-italic-latin.woff2) format('woff2');
}
@font-face {
font-family: 'SB JetBrains Mono';
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url(/branding/fonts/jetbrains-mono-latin.woff2) format('woff2');
}
.sbc[b-mennie3a2u] {
--sbc-paper: #f4f1ec;
--sbc-ink: #0e0f10;
--sbc-ink-2: #18191b;
--sbc-line: #26282b;
--sbc-muted: #8a8a8e;
--sbc-body: #c8c6c2;
--sbc-copper: oklch(0.62 0.13 35);
--sbc-card: var(--sbc-ink);
--sbc-edge: transparent;
--sbc-sans: 'SB Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--sbc-serif: 'SB Instrument Serif', 'Iowan Old Style', Georgia, serif;
--sbc-mono: 'SB JetBrains Mono', ui-monospace, Consolas, monospace;
container-type: inline-size;
position: relative;
overflow: hidden;
border-radius: 20px;
background: var(--sbc-card);
color: var(--sbc-paper);
font-family: var(--sbc-sans);
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
box-shadow: inset 0 0 0 1px var(--sbc-edge);
}
/* Written twice, like app.css: a declaration list cannot be shared between a selector and a media query. */
html[data-theme="dark"] .sbc[b-mennie3a2u] {
--sbc-card: var(--sbc-ink-2);
--sbc-edge: var(--sbc-line);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .sbc[b-mennie3a2u] {
--sbc-card: var(--sbc-ink-2);
--sbc-edge: var(--sbc-line);
}
}
/* The words on the left, the addresses on the right, both standing on the same line at the bottom. */
.sbc-grid[b-mennie3a2u] {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 18px 56px;
align-items: end;
padding: 36px 44px 30px;
}
/* Large enough that every pixel is a tile of its own, cut off by the card's corner. Faint through
fill-opacity rather than opacity, so single pixels can twinkle up out of it. */
.sbc > .sbc-amp[b-mennie3a2u] {
position: absolute;
right: -24px;
bottom: -70px;
height: 300px;
width: auto;
aspect-ratio: 22.52 / 32.26;
color: var(--sbc-copper);
fill-opacity: 0.14;
pointer-events: none;
}
/* The size schottler-buhl.de gives the lockup in its own footer. */
.sbc-logo[b-mennie3a2u] {
display: block;
width: auto;
height: 44px;
margin-bottom: 24px;
}
/* Four copper pixels before a line — the site's eyebrow rule. */
.sbc-eyebrow[b-mennie3a2u] {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--sbc-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--sbc-muted);
}
.sbc-eyebrow[b-mennie3a2u]::before {
content: '';
flex: none;
width: 22px;
height: 4px;
background: var(--sbc-copper);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Crect width='4' height='4' rx='1'/%3E%3C/svg%3E") left center / 6px 4px repeat-x;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Crect width='4' height='4' rx='1'/%3E%3C/svg%3E") left center / 6px 4px repeat-x;
}
.sbc-title[b-mennie3a2u] {
max-width: 22ch;
margin: 18px 0 0;
font-weight: 300;
font-size: clamp(24px, 3.2cqi, 36px);
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--sbc-paper);
text-wrap: pretty;
}
.sbc-title em[b-mennie3a2u] {
font-family: var(--sbc-serif);
font-style: italic;
font-weight: 400;
color: var(--sbc-copper);
}
.sbc-body[b-mennie3a2u] {
max-width: 52ch;
margin: 14px 0 0;
font-size: 15px;
line-height: 1.6;
color: var(--sbc-body);
text-wrap: pretty;
}
/* ── Hairline items: the ways to reach the agency ── */
.sbc-info[b-mennie3a2u] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 18px 28px;
margin: 0;
}
.sbc-info > div[b-mennie3a2u] {
padding-top: 14px;
border-top: 1px solid var(--sbc-line);
}
.sbc-info dt[b-mennie3a2u] {
font-family: var(--sbc-mono);
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--sbc-muted);
}
.sbc-info dd[b-mennie3a2u] {
margin: 6px 0 0;
overflow-wrap: anywhere;
font-size: 16px;
letter-spacing: -0.015em;
color: var(--sbc-paper);
}
.sbc-info a[b-mennie3a2u] {
display: inline-flex;
align-items: center;
gap: 10px;
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.sbc-info a:hover[b-mennie3a2u] {
color: var(--sbc-copper);
}
.sbc-info a:focus-visible[b-mennie3a2u] {
outline: 1px solid var(--sbc-copper);
outline-offset: 4px;
border-radius: 2px;
}
/* The site's pixel arrow for a link that leaves it. */
.sbc-arr[b-mennie3a2u] {
flex: none;
width: 0.7em;
height: 0.7em;
background: var(--sbc-copper);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='15' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='15' y='5' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='5' width='4' height='4' rx='1.28'/%3E%3Crect x='10' y='10' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='10' width='4' height='4' rx='1.28'/%3E%3Crect x='5' y='15' width='4' height='4' rx='1.28'/%3E%3Crect x='0' y='20' width='4' height='4' rx='1.28'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='15' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='15' y='5' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='5' width='4' height='4' rx='1.28'/%3E%3Crect x='10' y='10' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='10' width='4' height='4' rx='1.28'/%3E%3Crect x='5' y='15' width='4' height='4' rx='1.28'/%3E%3Crect x='0' y='20' width='4' height='4' rx='1.28'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sbc-note[b-mennie3a2u] {
grid-column: 1 / -1;
margin: 4px 0 0;
font-size: 13px;
line-height: 1.55;
color: var(--sbc-muted);
}
/* Single pixels of the watermark light up now and then, slowly, like stars, and sink back. */
@media (prefers-reduced-motion: no-preference) {
.sbc-amp rect.tw[b-mennie3a2u] {
animation: sbc-twinkle-b-mennie3a2u var(--tw-t) ease-in-out var(--tw-d) infinite;
}
}
@keyframes sbc-twinkle-b-mennie3a2u {
0%, 72%, 100% { fill-opacity: 0.14; }
86% { fill-opacity: 0.6; }
}
/* ── Narrow: the addresses go below the words ── */
@container (max-width: 720px) {
.sbc-grid[b-mennie3a2u] {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
padding: 28px 24px 24px;
}
.sbc > .sbc-amp[b-mennie3a2u] {
height: 220px;
}
.sbc-logo[b-mennie3a2u] {
height: 34px;
margin-bottom: 20px;
}
}
/* /Components/Shared/SchottlerBuhlProfile.razor.rz.scp.css */
/* ===========================================================
Entwickler tab — the agency's own design language
===========================================================
Ported from schottler-buhl.de (src/styles/global.css): ink/paper palette, copper accent, Manrope
in light weights, Instrument Serif italic for emphasis, JetBrains Mono for the uppercase labels,
pixel figures and the pixel signet, hairline rules instead of cards, a dark contact card.
Deliberately NOT the FlowKlar design system, like AboutSchottlerBuhlModal: everything is scoped
to this component and prefixed `sbp-`, the tokens are local custom properties on `.sbp`, and
pixel sizes follow the site rather than the app's rem scale. The one thing taken from the app is
its theme: in dark mode the page becomes one of the site's dark sections.
=========================================================== */
/* Registered here as well as in the modal: both are global once loaded, and identical rules for one
family are harmless, while relying on the other component's stylesheet would not be. */
@font-face {
font-family: 'SB Manrope';
font-style: normal;
font-weight: 200 700;
font-display: swap;
src: url(/branding/fonts/manrope-latin.woff2) format('woff2');
}
@font-face {
font-family: 'SB Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/branding/fonts/instrument-serif-italic-latin.woff2) format('woff2');
}
@font-face {
font-family: 'SB JetBrains Mono';
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url(/branding/fonts/jetbrains-mono-latin.woff2) format('woff2');
}
.sbp[b-6wqsfriyb4] {
/* ── Brand palette (local; intentionally not the app's) ── */
--sbp-paper: #f4f1ec;
--sbp-ink: #0e0f10;
--sbp-ink-2: #18191b;
--sbp-line-l: #d8d3c8;
--sbp-line-d: #26282b;
--sbp-muted-l: #66625a;
--sbp-muted-d: #8a8a8e;
--sbp-copper: oklch(0.62 0.13 35);
/* ── The page: paper ── */
--sbp-bg: var(--sbp-paper);
--sbp-fg: var(--sbp-ink);
--sbp-body: #3a3a3c;
--sbp-muted: var(--sbp-muted-l);
--sbp-line: var(--sbp-line-l);
--sbp-dot: rgba(14, 15, 16, 0.14);
--sbp-shadow: 0 2px 6px -1px rgba(40, 32, 22, 0.11), 0 7px 20px -4px rgba(40, 32, 22, 0.13);
/* The contact card: ink on paper. On the dark page a step up, edged by a hairline. */
--sbp-card: var(--sbp-ink);
--sbp-card-edge: transparent;
--sbp-sans: 'SB Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--sbp-serif: 'SB Instrument Serif', 'Iowan Old Style', Georgia, serif;
--sbp-mono: 'SB JetBrains Mono', ui-monospace, Consolas, monospace;
container-type: inline-size;
position: relative;
overflow: hidden;
border-radius: 24px;
background: var(--sbp-bg);
color: var(--sbp-fg);
font-family: var(--sbp-sans);
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
box-shadow: var(--sbp-shadow);
}
/* ── The site's dark section, under the app's dark mode ──
Written twice, like app.css: a declaration list cannot be shared between a selector and a media
query. */
html[data-theme="dark"] .sbp[b-6wqsfriyb4] {
--sbp-bg: var(--sbp-ink);
--sbp-fg: var(--sbp-paper);
--sbp-body: #c8c6c2;
--sbp-muted: var(--sbp-muted-d);
--sbp-line: var(--sbp-line-d);
--sbp-dot: rgba(244, 241, 236, 0.1);
--sbp-shadow: none;
--sbp-card: var(--sbp-ink-2);
--sbp-card-edge: var(--sbp-line-d);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .sbp[b-6wqsfriyb4] {
--sbp-bg: var(--sbp-ink);
--sbp-fg: var(--sbp-paper);
--sbp-body: #c8c6c2;
--sbp-muted: var(--sbp-muted-d);
--sbp-line: var(--sbp-line-d);
--sbp-dot: rgba(244, 241, 236, 0.1);
--sbp-shadow: none;
--sbp-card: var(--sbp-ink-2);
--sbp-card-edge: var(--sbp-line-d);
}
}
/* ── Sections: the site's label column beside the content, a hairline between them ── */
.sbp-sec[b-6wqsfriyb4] {
position: relative;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 56px;
padding: 56px;
}
.sbp-sec + .sbp-sec[b-6wqsfriyb4] {
border-top: 1px solid var(--sbp-line);
}
.sbp-sec > *[b-6wqsfriyb4] {
position: relative;
}
/* The hero's dot grid behind the first section, fading out towards the edges. */
.sbp-sec--intro[b-6wqsfriyb4]::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--sbp-dot) 1px, transparent 1.6px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(120% 100% at 25% 10%, #000 0%, #000 18%, transparent 70%);
mask-image: radial-gradient(120% 100% at 25% 10%, #000 0%, #000 18%, transparent 70%);
pointer-events: none;
}
.sbp-label[b-6wqsfriyb4],
.sbp-contact-label[b-6wqsfriyb4] {
display: flex;
align-items: center;
align-self: start;
padding-top: 12px;
font-family: var(--sbp-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--sbp-muted);
}
/* A section number in the pixel face: 7 pitches of 3px, as on the site. */
.sbp-num[b-6wqsfriyb4] {
display: inline-flex;
flex: none;
margin-right: 14px;
color: var(--sbp-copper);
}
.sbp-num svg[b-6wqsfriyb4] {
display: block;
width: calc(var(--cols) * 3px);
height: 21px;
overflow: visible;
}
/* Four copper pixels before a line — the site's eyebrow rule. */
.sbp-eyebrow[b-6wqsfriyb4] {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
font-family: var(--sbp-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--sbp-muted);
}
.sbp-eyebrow[b-6wqsfriyb4]::before {
content: '';
flex: none;
width: 22px;
height: 4px;
background: var(--sbp-copper);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Crect width='4' height='4' rx='1'/%3E%3C/svg%3E") left center / 6px 4px repeat-x;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Crect width='4' height='4' rx='1'/%3E%3C/svg%3E") left center / 6px 4px repeat-x;
}
/* ── Type ── */
.sbp-copy[b-6wqsfriyb4] {
margin: 0;
max-width: 26ch;
font-weight: 300;
font-size: clamp(26px, 3.6cqi, 40px);
letter-spacing: -0.02em;
line-height: 1.2;
text-wrap: pretty;
}
.sbp-copy--sub[b-6wqsfriyb4] {
max-width: 34ch;
margin-top: 26px;
font-size: clamp(20px, 2.4cqi, 26px);
line-height: 1.3;
}
.sbp-copy em[b-6wqsfriyb4],
.sbp-contact-title em[b-6wqsfriyb4] {
font-family: var(--sbp-serif);
font-style: italic;
font-weight: 400;
color: var(--sbp-copper);
}
.sbp-body[b-6wqsfriyb4] {
max-width: 58ch;
margin: 20px 0 0;
font-size: 16px;
line-height: 1.6;
color: var(--sbp-body);
text-wrap: pretty;
}
.sbp-headline[b-6wqsfriyb4] {
margin: 0;
font-weight: 300;
font-size: clamp(44px, 7cqi, 88px);
letter-spacing: -0.035em;
line-height: 1;
color: var(--sbp-fg);
}
/* The signet as the "&": cap height of the light sans, standing on the baseline. */
.sbp-amp[b-6wqsfriyb4] {
display: inline-block;
height: 0.74em;
width: auto;
aspect-ratio: 22.52 / 32.26;
margin: 0 0.06em 0 0.02em;
color: var(--sbp-copper);
vertical-align: baseline;
overflow: visible;
}
/* ── Hairline items: the facts ── */
.sbp-items[b-6wqsfriyb4] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 24px 32px;
margin: 40px 0 0;
}
.sbp-items > *[b-6wqsfriyb4] {
padding-top: 18px;
border-top: 1px solid var(--sbp-line);
}
.sbp-items dt[b-6wqsfriyb4],
.sbp-info dt[b-6wqsfriyb4] {
font-family: var(--sbp-mono);
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--sbp-muted);
}
.sbp-items dd[b-6wqsfriyb4] {
margin: 8px 0 0;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--sbp-fg);
}
/* ── Contact: the dark card ── */
.sbp-contact[b-6wqsfriyb4] {
position: relative;
overflow: hidden;
margin: 0 24px 24px;
padding: 56px 56px 44px;
border-radius: 20px;
background: var(--sbp-card);
color: var(--sbp-paper);
box-shadow:
inset 0 0 0 1px var(--sbp-card-edge),
0 16px 38px -10px rgba(40, 32, 22, 0.22),
0 42px 80px -20px rgba(40, 32, 22, 0.2);
}
.sbp-contact > *[b-6wqsfriyb4] {
position: relative;
}
/* Large enough that every pixel is a tile of its own, cut off by the card's corner. Faint through
fill-opacity rather than opacity, so single pixels can twinkle up out of it. */
.sbp-contact > .sbp-contact-amp[b-6wqsfriyb4] {
position: absolute;
right: -30px;
bottom: -80px;
height: 420px;
width: auto;
aspect-ratio: 22.52 / 32.26;
color: var(--sbp-copper);
fill-opacity: 0.14;
pointer-events: none;
}
.sbp-contact-label[b-6wqsfriyb4] {
padding-top: 0;
color: var(--sbp-muted-d);
}
.sbp-contact-title[b-6wqsfriyb4] {
margin: 22px 0 0;
font-weight: 300;
font-size: clamp(32px, 5.4cqi, 64px);
letter-spacing: -0.035em;
line-height: 1;
color: var(--sbp-paper);
}
.sbp-info[b-6wqsfriyb4] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 24px 32px;
max-width: 960px;
margin: 44px 0 0;
}
.sbp-info > div[b-6wqsfriyb4] {
padding-top: 18px;
border-top: 1px solid var(--sbp-line-d);
}
.sbp-info dt[b-6wqsfriyb4] {
color: var(--sbp-muted-d);
}
.sbp-info dd[b-6wqsfriyb4] {
margin: 8px 0 0;
font-size: 19px;
letter-spacing: -0.015em;
color: var(--sbp-paper);
}
.sbp-info a[b-6wqsfriyb4] {
display: inline-flex;
align-items: center;
gap: 10px;
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.sbp-info a:hover[b-6wqsfriyb4] {
color: var(--sbp-copper);
}
.sbp-info a:focus-visible[b-6wqsfriyb4] {
outline: 1px solid var(--sbp-copper);
outline-offset: 4px;
border-radius: 2px;
}
/* The site's pixel arrow for a link that leaves it. */
.sbp-arr[b-6wqsfriyb4] {
flex: none;
width: 0.7em;
height: 0.7em;
background: var(--sbp-copper);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='15' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='15' y='5' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='5' width='4' height='4' rx='1.28'/%3E%3Crect x='10' y='10' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='10' width='4' height='4' rx='1.28'/%3E%3Crect x='5' y='15' width='4' height='4' rx='1.28'/%3E%3Crect x='0' y='20' width='4' height='4' rx='1.28'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='15' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='0' width='4' height='4' rx='1.28'/%3E%3Crect x='15' y='5' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='5' width='4' height='4' rx='1.28'/%3E%3Crect x='10' y='10' width='4' height='4' rx='1.28'/%3E%3Crect x='20' y='10' width='4' height='4' rx='1.28'/%3E%3Crect x='5' y='15' width='4' height='4' rx='1.28'/%3E%3Crect x='0' y='20' width='4' height='4' rx='1.28'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sbp-note[b-6wqsfriyb4] {
max-width: 60ch;
margin: 40px 0 0;
font-size: 13px;
line-height: 1.55;
color: var(--sbp-muted-d);
}
/* Single pixels of the watermark light up now and then, slowly, like stars, and sink back. */
@media (prefers-reduced-motion: no-preference) {
.sbp-contact-amp rect.tw[b-6wqsfriyb4] {
animation: sbp-twinkle-b-6wqsfriyb4 var(--tw-t) ease-in-out var(--tw-d) infinite;
}
}
@keyframes sbp-twinkle-b-6wqsfriyb4 {
0%, 72%, 100% { fill-opacity: 0.14; }
86% { fill-opacity: 0.6; }
}
/* ── Narrow: the label goes above its section ── */
@container (max-width: 760px) {
.sbp-sec[b-6wqsfriyb4] {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
padding: 36px 28px;
}
.sbp-label[b-6wqsfriyb4] {
padding-top: 0;
}
.sbp-contact[b-6wqsfriyb4] {
margin: 0 12px 12px;
padding: 36px 26px 30px;
}
.sbp-contact > .sbp-contact-amp[b-6wqsfriyb4] {
height: 300px;
}
}
/* /Components/Shared/SearchBar.razor.rz.scp.css */
.searchbar[b-6rve0b6gr0] {
margin-bottom: 1.25rem;
}
.searchbar-wrapper[b-6rve0b6gr0] {
position: relative;
width: 100%;
}
.searchbar-icon[b-6rve0b6gr0] {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: var(--clr-slate-400);
pointer-events: none;
z-index: 1;
display: flex;
align-items: center;
}
.searchbar-input[b-6rve0b6gr0] {
width: 100%;
padding: 0.625rem 2.75rem 0.625rem 2.75rem;
font-size: 0.95rem;
height: 2.75rem;
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-sm);
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.searchbar-input:focus[b-6rve0b6gr0] {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.12), var(--shadow-md);
outline: none;
}
.searchbar-clear[b-6rve0b6gr0] {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--clr-slate-400);
cursor: pointer;
padding: 0.35rem;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
z-index: 2;
width: 32px;
height: 32px;
}
/* A button inside a field: the icon colour alone on hover, no background (house rule). */
.searchbar-clear:hover[b-6rve0b6gr0] {
color: var(--clr-slate-900);
}
.searchbar-results[b-6rve0b6gr0] {
font-size: 0.85rem;
color: var(--clr-slate-400);
margin-top: 0.5rem;
margin-bottom: 0;
}
/* /Components/Shared/SearchCombobox.razor.rz.scp.css */
/* ── Field ─────────────────────────────────────────────── */
.combobox-field[b-l4a0xdktdv] {
display: flex;
align-items: center;
gap: 0.45rem;
/* An input's own line height, for the chosen value too: the field keeps its height when it swaps
between the two, and matches the .form-control inputs around it. */
line-height: normal;
border-radius: var(--radius-md);
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
min-width: 0;
}
/* The decorated input of the dialogs that add with it (an icon in front, tinted until it has the
focus) — the look the access dialog's and the checklist dialog's own fields already had. */
.combobox-field--tinted[b-l4a0xdktdv] {
padding: 0.5rem 0.7rem;
border: 1.5px solid var(--clr-slate-200);
background: var(--clr-slate-50);
font-size: 0.875rem;
}
.combobox-field--tinted:focus-within[b-l4a0xdktdv] {
border-color: var(--clr-blue-500);
background: var(--surface);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.1);
}
/* FormField: the global .form-control, so it sits among a form's plain inputs without standing out. */
.combobox-field--form[b-l4a0xdktdv] {
padding: 0.6rem 0.85rem;
border: 1px solid var(--border-strong);
background: var(--surface);
font-size: 0.88rem;
}
.combobox-field--form:focus-within[b-l4a0xdktdv] {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(42, 86, 214, 0.14);
}
.combobox-field--disabled[b-l4a0xdktdv] {
opacity: 0.6;
cursor: not-allowed;
}
.combobox-field-icon[b-l4a0xdktdv] {
display: inline-flex;
color: var(--clr-slate-400);
flex-shrink: 0;
}
.combobox-input[b-l4a0xdktdv] {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: inherit;
color: var(--text-body);
font-family: inherit;
min-width: 0;
padding: 0;
}
.combobox-input[b-l4a0xdktdv]::placeholder {
color: var(--clr-slate-400);
}
/* ── Chosen value (Value/ValueChanged) ─────────────────── */
/* The field reads like a filled input; a click anywhere on it searches again. */
.combobox-field--value[b-l4a0xdktdv] {
cursor: pointer;
}
.combobox-field--value.combobox-field--disabled[b-l4a0xdktdv] {
cursor: not-allowed;
}
.combobox-value[b-l4a0xdktdv] {
flex: 1;
display: flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
padding: 0;
border: none;
background: none;
font: inherit;
color: var(--text-body);
text-align: left;
cursor: inherit;
}
/* The field's own ring shows the focus (:focus-within); a second outline inside it would be noise. */
.combobox-value:focus[b-l4a0xdktdv] {
outline: none;
}
.combobox-value-text[b-l4a0xdktdv] {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.combobox-clear[b-l4a0xdktdv] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
/* Inside the field's padding, so the field is no taller with the cross than without it. */
margin: -0.25rem -0.35rem -0.25rem 0;
padding: 0;
border: none;
background: none;
border-radius: var(--radius-sm);
color: var(--clr-slate-400);
cursor: pointer;
flex-shrink: 0;
transition: background 0.12s, color 0.12s;
}
/* A button inside a field: the icon colour alone on hover, no background (house rule); the keyboard gets the
buttons' focus ring, which the background used to stand in for. */
.combobox-clear:hover[b-l4a0xdktdv],
.combobox-clear:focus-visible[b-l4a0xdktdv] {
color: var(--text-body);
}
.combobox-clear:focus-visible[b-l4a0xdktdv] {
outline: 2px solid var(--clr-blue-500);
outline-offset: 1px;
}
/* ── List ──────────────────────────────────────────────── */
/* Drawn like the house popup list (PopupListbox). Its place, width and — on a short screen — height
come from flowklarPopup.follow, which also makes it visible once it stands where it belongs; until
then it is laid out but not shown, so it never flashes at the spot it was first rendered. */
.combobox-list[b-l4a0xdktdv] {
position: fixed;
visibility: hidden;
z-index: 9999;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 0.3rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
max-width: calc(100vw - 1rem);
max-height: 290px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--clr-slate-200) transparent;
animation: combobox-in-b-l4a0xdktdv 0.12s ease-out;
}
@keyframes combobox-in-b-l4a0xdktdv {
from { opacity: 0; }
to { opacity: 1; }
}
.combobox-empty[b-l4a0xdktdv] {
padding: 0.5rem 0.6rem;
font-size: 0.85rem;
color: var(--clr-slate-400);
}
.combobox-option[b-l4a0xdktdv] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.6rem;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.12s;
flex-shrink: 0;
}
.combobox-option:hover[b-l4a0xdktdv],
.combobox-option--active[b-l4a0xdktdv] {
background: var(--surface-hover);
}
.combobox-option-icon[b-l4a0xdktdv] {
display: inline-flex;
color: var(--clr-slate-400);
flex-shrink: 0;
transition: color 0.12s;
}
.combobox-option--active .combobox-option-icon[b-l4a0xdktdv] {
color: var(--clr-blue-500);
}
.combobox-option-text[b-l4a0xdktdv] {
display: flex;
flex-direction: column;
gap: 0.05rem;
flex: 1;
min-width: 0;
}
.combobox-option-title[b-l4a0xdktdv],
.combobox-option-sub[b-l4a0xdktdv] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.combobox-option-title[b-l4a0xdktdv] {
font-size: 0.875rem;
font-weight: 500;
color: var(--clr-slate-800);
}
.combobox-option-sub[b-l4a0xdktdv] {
font-size: 0.75rem;
color: var(--clr-slate-500);
}
.combobox-option-tag[b-l4a0xdktdv] {
font-size: 0.68rem;
font-weight: 600;
color: var(--clr-slate-400);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
flex-shrink: 0;
}
.combobox-option-pick[b-l4a0xdktdv] {
display: inline-flex;
color: var(--clr-slate-300);
flex-shrink: 0;
transition: color 0.12s;
}
.combobox-option--active .combobox-option-pick[b-l4a0xdktdv] {
color: var(--primary);
}
/* The value the field holds now, in the choosing use. */
.combobox-option-current[b-l4a0xdktdv] {
display: inline-flex;
color: var(--primary);
flex-shrink: 0;
}
/* /Components/Shared/SearchResultGroup.razor.rz.scp.css */
.sr-group[b-jfz8zfzgrm] {
display: flex;
flex-direction: column;
padding: 0.35rem 0.4rem;
}
.sr-group + .sr-group[b-jfz8zfzgrm] {
margin-top: 0.15rem;
}
.sr-group-head[b-jfz8zfzgrm] {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.65rem 0.25rem;
color: var(--text-label);
font-size: var(--text-label-size);
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.sr-group-label[b-jfz8zfzgrm] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-group-count[b-jfz8zfzgrm] {
margin-left: auto;
color: var(--text-faint);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.sr-group-more[b-jfz8zfzgrm] {
padding: 0.2rem 0.65rem 0.3rem;
font-size: 0.78rem;
color: var(--text-faint);
}
/* The same line, pressable: it unfolds the group in place. */
.sr-group-more--action[b-jfz8zfzgrm] {
display: block;
width: 100%;
border: none;
background: none;
font-family: inherit;
text-align: left;
color: var(--primary);
cursor: pointer;
border-radius: var(--radius-sm);
}
.sr-group-more--action:hover[b-jfz8zfzgrm] {
background: var(--surface-hover);
}
/* /Components/Shared/SearchResultRow.razor.rz.scp.css */
.sr-row[b-6843mlj010] {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0.65rem;
border-radius: var(--radius-md);
color: var(--text-body);
cursor: pointer;
transition: background 0.1s;
}
/* The keyboard's row and the pointer's are the same row: hovering moves the highlight. */
.sr-row.is-highlighted[b-6843mlj010] {
background: var(--surface-hover);
}
.sr-icon[b-6843mlj010] {
display: inline-flex;
flex-shrink: 0;
color: var(--text-muted);
}
.sr-main[b-6843mlj010] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.05rem;
text-align: left;
}
.sr-title[b-6843mlj010] {
font-size: 0.88rem;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sr-sub[b-6843mlj010] {
font-size: 0.78rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* The display id in the tables' number type (DataTable's .table-id), on a quiet chip of its own. */
.sr-code[b-6843mlj010] {
display: inline-block;
margin-right: 0.4rem;
padding: 0 0.35rem;
font-family: 'Courier New', monospace;
font-size: 0.74rem;
line-height: 1.35;
color: var(--text-muted);
background: var(--surface-sunken);
border-radius: var(--radius-xs);
vertical-align: 0.05em;
}
.sr-trailing[b-6843mlj010] {
display: inline-flex;
flex-shrink: 0;
color: var(--text-faint);
}
/* "Alle 6 in der Liste zeigen", "Mehr Ergebnisse von überall": the search's own moves, in the
primary colour so they do not read as one more hit. */
.sr-row--action .sr-title[b-6843mlj010],
.sr-row--action .sr-icon[b-6843mlj010],
.sr-row--action .sr-trailing[b-6843mlj010] {
color: var(--primary);
}
.sr-row--action .sr-title[b-6843mlj010] {
font-weight: 600;
}
/* /Components/Shared/SegmentedControl.razor.rz.scp.css */
/* inline-flex, not flex: a segmented control is as wide as its options. As a block-level flex box it
stretched across the full width of any non-flex parent (settings card, form group), leaving the pill
background running far past the buttons. Callers that DO want it full width opt in explicitly — see
.vis-mode ::deep .segmented-group in VisibilityModal. */
.segmented-group[b-run9z12uam] {
/* position: relative anchors the indicator — it measures itself against
this box via offsetLeft. */
position: relative;
display: inline-flex;
gap: 0;
background: var(--surface-track);
border-radius: var(--radius-lg);
padding: 5px;
}
/* The white pill. Geometry comes from segmented-control.js as --seg-x/--seg-w;
the movement itself is this transition. */
.segmented-indicator[b-run9z12uam] {
position: absolute;
top: 5px;
bottom: 5px;
left: 0;
width: var(--seg-w, 0);
transform: translateX(var(--seg-x, 0));
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs), 0 6px 14px -8px rgba(15, 27, 61, 0.2);
pointer-events: none;
}
/* Armed one frame after the first placement, so the pill does not slide in
from the left edge when the control first renders. */
.segmented-group.is-armed .segmented-indicator[b-run9z12uam] {
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.segmented-btn[b-run9z12uam] {
/* Above the indicator, which shares the same box. */
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.55rem 1.1rem;
background: none;
border: none;
border-radius: var(--radius-md);
color: var(--text-muted);
font-size: 0.86rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: color 0.15s;
}
.segmented-btn:hover[b-run9z12uam] {
color: var(--text);
}
/* The fill now belongs to the indicator; the active button only changes ink. */
.segmented-btn.active[b-run9z12uam] {
color: var(--text);
}
/* Someone who asked for less motion gets the pill placed, not moved. */
@media (prefers-reduced-motion: reduce) {
.segmented-group.is-armed .segmented-indicator[b-run9z12uam] {
transition: none;
}
}
.switch-label[b-run9z12uam] {
display: none;
}
@media (min-width: 480px) {
.switch-label[b-run9z12uam] {
display: inline;
}
}
/* /Components/Shared/SelectOptionsEditor.razor.rz.scp.css */
/* The options of a choice field, in the form editor's properties. The sidebar sets the density of every
.form-control in it (CanvasSidebar.razor.css); what is here is the list around them. */
.soe[b-kgjqgprs6x] {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
/* ── Head: name, count, the values switch, the two views ── */
.soe-head[b-kgjqgprs6x] {
display: flex;
align-items: center;
gap: 0.4rem;
}
.soe-title[b-kgjqgprs6x] {
font-size: 0.76rem;
font-weight: 600;
color: var(--text-secondary);
}
.soe-count[b-kgjqgprs6x] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.1rem;
padding: 0 0.35rem;
border-radius: var(--radius-pill);
background: var(--surface-track);
color: var(--text-muted);
font-size: 0.68rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* "Werte": a switch that reads as one, on the same track as the views beside it, tinted while it is on. */
.soe-values[b-kgjqgprs6x] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
height: 26px;
margin-left: auto;
padding: 0 0.55rem;
border: 0;
border-radius: var(--radius-sm);
background: var(--surface-track);
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.soe-values:hover[b-kgjqgprs6x] {
color: var(--text-body);
}
.soe-values.active[b-kgjqgprs6x] {
background: var(--primary-soft);
color: var(--primary);
}
/* The same track and raised pill as the app's segmented control, at the size of an icon. */
.soe-views[b-kgjqgprs6x] {
display: inline-flex;
padding: 2px;
border-radius: var(--radius-sm);
background: var(--surface-track);
}
.soe-view[b-kgjqgprs6x] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 22px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.soe-view:hover[b-kgjqgprs6x] {
color: var(--text-body);
}
.soe-view.active[b-kgjqgprs6x] {
background: var(--surface);
color: var(--text-body);
box-shadow: var(--shadow-xs);
}
/* ── The box: column heads, rows and the add button on one ground ── */
.soe-box[b-kgjqgprs6x] {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.35rem;
border-radius: var(--radius-md);
background: var(--surface-sunken);
}
/* Grip, label, (value,) remove — the column heads share the grid so their words sit over their boxes. */
.soe-row[b-kgjqgprs6x],
.soe-columns[b-kgjqgprs6x] {
display: grid;
grid-template-columns: 1rem minmax(0, 1fr) 1.5rem;
align-items: center;
gap: 0.3rem;
}
.soe-list.with-values .soe-row[b-kgjqgprs6x],
.soe-columns[b-kgjqgprs6x] {
grid-template-columns: 1rem minmax(0, 1.4fr) minmax(0, 1fr) 1.5rem;
}
.soe-columns[b-kgjqgprs6x] {
padding-top: 0.1rem;
}
.soe-columns span[b-kgjqgprs6x] {
font-size: var(--text-label-size);
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-label);
}
.soe-columns span:first-child[b-kgjqgprs6x] {
grid-column: 2;
}
.soe-list[b-kgjqgprs6x] {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
}
/* The drop line is drawn on top of the row, so the row is the positioning context. */
.soe-row[b-kgjqgprs6x] {
position: relative;
border-radius: var(--radius-sm);
}
.soe-row.is-dragged[b-kgjqgprs6x] {
opacity: 0.45;
}
/* A value is a code more often than a word: set it apart from the label it stands behind. */
.soe-value[b-kgjqgprs6x] {
font-family: var(--font-mono);
font-size: 0.78rem;
}
/* The grip says "this row moves". Faint until the row is hovered, so a list at rest stays quiet. */
.soe-grip[b-kgjqgprs6x] {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--clr-slate-300);
opacity: 0.6;
cursor: grab;
transition: opacity 0.15s, color 0.15s;
}
.soe-grip:active[b-kgjqgprs6x] {
cursor: grabbing;
}
.soe-row:hover .soe-grip[b-kgjqgprs6x],
.soe-row:focus-within .soe-grip[b-kgjqgprs6x] {
opacity: 1;
color: var(--clr-slate-400);
}
.soe-remove[b-kgjqgprs6x] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border: 0;
border-radius: var(--radius-xs);
background: transparent;
color: var(--text-faint);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.soe-row:hover .soe-remove[b-kgjqgprs6x],
.soe-row:focus-within .soe-remove[b-kgjqgprs6x],
.soe-remove:focus-visible[b-kgjqgprs6x] {
opacity: 1;
}
.soe-remove:hover[b-kgjqgprs6x] {
color: var(--danger);
background: var(--clr-red-100);
}
/* Nothing hovers on touch, so grip and remove have to be visible from the start. */
@media (hover: none) {
.soe-grip[b-kgjqgprs6x],
.soe-remove[b-kgjqgprs6x] {
opacity: 1;
}
}
/* A lone empty row: nothing to move, nothing to remove. The column stays so the box does not jump when the
second row arrives. */
.soe-grip.is-idle[b-kgjqgprs6x],
.soe-remove.is-idle[b-kgjqgprs6x] {
visibility: hidden;
}
/* While a drag runs only the rows see the pointer; otherwise every input inside one fires its own
dragenter/dragleave pair and the line blinks across the row. */
.soe-list.is-dragging .soe-row > *[b-kgjqgprs6x] {
pointer-events: none;
}
/* On top of the layout, never in it: showing the line must not move a row out from under the pointer. */
.soe-row.drop-before[b-kgjqgprs6x]::after,
.soe-row.drop-after[b-kgjqgprs6x]::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 3px;
border-radius: 2px;
background: var(--clr-blue-500);
box-shadow: 0 0 0 2px rgba(42, 86, 214, 0.18);
pointer-events: none;
}
.soe-row.drop-before[b-kgjqgprs6x]::after {
top: -3px;
}
.soe-row.drop-after[b-kgjqgprs6x]::after {
bottom: -3px;
}
/* In line with the inputs, past the grip column, so it reads as the list's next row. */
.soe-add[b-kgjqgprs6x] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
align-self: flex-start;
margin-left: calc(1rem + 0.3rem);
padding: 0.3rem 0.5rem;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--primary);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.soe-add:hover[b-kgjqgprs6x] {
background: var(--primary-soft);
}
/* ── The text view ────────────────────────────────────── */
.soe-text[b-kgjqgprs6x] {
font-size: 0.8rem;
line-height: 1.55;
}
/* ── Hints, as the rest of the properties have them ──── */
.soe-hint[b-kgjqgprs6x] {
margin: 0;
font-size: 0.72rem;
line-height: 1.45;
color: var(--text-muted);
}
.soe-hint code[b-kgjqgprs6x] {
padding: 0 0.25rem;
border-radius: 4px;
background: var(--surface-track);
font-size: 0.7rem;
}
.soe-hint-error[b-kgjqgprs6x] {
display: flex;
gap: 0.3rem;
align-items: baseline;
color: var(--danger);
}
/* /Components/Shared/SettingsCard.razor.rz.scp.css */
.settings-card[b-5rbh0i9mul] {
background: var(--surface);
border: 1px solid transparent;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 1.5rem;
margin-bottom: 1rem;
}
.settings-card-header[b-5rbh0i9mul] {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
font-size: var(--text-label-size);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--text-label);
margin-bottom: 1rem;
}
.settings-card-header-actions[b-5rbh0i9mul] {
margin-left: auto;
text-transform: none;
letter-spacing: normal;
}
/* Gleichmäßiger Vertikalabstand zwischen den direkten Inhalten (Felder, Hinweise, Aktionen). */
.settings-card-body[b-5rbh0i9mul] {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ── Varianten ───────────────────────────────────────── */
/* Tints come from palette steps that dark mode redefines. The text inside reads the ordinary text
tokens, which turn light there — so a fixed near-white fill put light text on a light card. */
.settings-card--accent[b-5rbh0i9mul] {
border-color: var(--clr-indigo-200);
background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 60%);
}
.settings-card--success[b-5rbh0i9mul] {
border-color: var(--clr-green-200);
background: var(--clr-green-50);
}
.settings-card--warn[b-5rbh0i9mul] {
border-color: var(--clr-amber-200);
background: var(--clr-amber-50);
}
/* /Components/Shared/SettingsPageHeader.razor.rz.scp.css */
/* Layout (toolbar row, subtitle, breakpoints) comes from PageScaffold – only the
icon/title pairing lives here. */
.settings-page-header[b-3v5b7d6mf6] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* /Components/Shared/SignatureField.razor.rz.scp.css */
.sig-field[b-fnb7j75wzl] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
.sig-field-image[b-fnb7j75wzl] {
max-width: 100%;
/* With a design's --form-signature-height the drawing is as tall as the empty slot was, so signing
does not move the rest of the sheet. */
max-height: var(--form-signature-height, 120px);
padding: 0.35rem;
/* --form-*: the lines of a form design, when the field sits in one (docs/FORMS.md §11.5). */
border: 1px solid var(--form-line-color, var(--border));
border-radius: var(--form-radius, var(--radius-md));
/* The drawing is near-black ink on white and travels as such — see js/signature-pad.js. */
background: #fff;
object-fit: contain;
}
.sig-field-actions[b-fnb7j75wzl] {
display: flex;
gap: 0.25rem;
}
.sig-field-remove[b-fnb7j75wzl] {
color: var(--danger);
}
/* The empty field: a box the size of the signature that will go in it, so the form does not
change shape once it is signed. */
.sig-field-slot[b-fnb7j75wzl] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: var(--form-signature-height, 88px);
padding: 1rem;
border: 1.5px dashed var(--form-line-color, var(--border-strong));
border-radius: var(--form-radius, var(--radius-md));
background: var(--surface-sunken);
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.sig-field-slot:hover[b-fnb7j75wzl] {
border-color: var(--form-accent, var(--primary));
background: var(--surface-hover);
color: var(--form-accent, var(--primary));
}
/* A form goes to the printer and into a PDF as it stands on screen. What is signed prints; the
controls for signing it do not. */
@media print {
.sig-field-actions[b-fnb7j75wzl] {
display: none !important;
}
}
body.pdf-exporting .sig-field-actions[b-fnb7j75wzl],
.pdf-layout .sig-field-actions[b-fnb7j75wzl] {
display: none !important;
}
.sig-field-empty[b-fnb7j75wzl] {
padding: 1.5rem;
width: 100%;
text-align: center;
color: var(--text-faint);
font-size: 0.85rem;
border: 1px dashed var(--form-line-color, var(--border-strong));
border-radius: var(--form-radius, var(--radius-md));
}
/* /Components/Shared/SignaturePad.razor.rz.scp.css */
.sig-pad[b-fxgmq4eoak] {
display: flex;
flex-direction: column;
gap: 0.5rem;
/* It takes the focus so Escape has something to leave full screen from; it is not a control,
so it must not draw a ring for it. */
outline: none;
}
.sig-pad-sheet[b-fxgmq4eoak] {
position: relative;
}
.sig-pad-canvas[b-fxgmq4eoak] {
display: block;
width: 100%;
height: 170px;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-md);
/* Always white, in both themes: the ink is near-black, and the image that leaves here is
shown on cards, in table cells and on paper. */
background: #fff;
cursor: crosshair;
/* Without this the browser claims the gesture and scrolls the dialog instead of drawing. */
touch-action: none;
}
/* The line on a paper form: where the name goes, and how much room there is for it.
A fixed tone rather than a token, and the only place in the component that takes one: this sits
on the sheet, which is white in both themes, and every --clr-* inverts under dark mode. */
.sig-pad-rule[b-fxgmq4eoak] {
position: absolute;
left: 9%;
right: 9%;
bottom: 26%;
display: flex;
align-items: center;
border-bottom: 1px dashed #cbd5e1;
pointer-events: none;
}
.sig-pad-rule-mark[b-fxgmq4eoak] {
margin-left: -0.35rem;
padding-right: 0.5rem;
color: #cbd5e1;
font-size: 0.8rem;
line-height: 1;
transform: translateY(0.25rem);
}
.sig-pad-footer[b-fxgmq4eoak] {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
/* ── Full screen ──────────────────────────────────────────────────────────
The sheet taken out of the dialog and given the whole screen. Above the modal backdrop
(10050) because it belongs to the dialog that is open, below the toasts. The canvas element
itself never moves — only this class does — so the ink survives the switch. */
.sig-pad.is-full[b-fxgmq4eoak] {
position: fixed;
inset: 0;
z-index: 10060;
margin: 0;
padding: 1rem;
gap: 0.75rem;
background: var(--surface);
}
/* Touch devices: the visible box, not the layout viewport — the same rule the modal backdrop
follows, so the pad is not partly behind the browser's own chrome. */
@media (hover: none) and (pointer: coarse) {
.sig-pad.is-full[b-fxgmq4eoak] {
bottom: auto;
top: var(--visual-top, 0px);
height: var(--visual-vh, 100dvh);
}
}
.sig-pad.is-full .sig-pad-sheet[b-fxgmq4eoak] {
flex: 1 1 auto;
min-height: 0;
}
.sig-pad.is-full .sig-pad-canvas[b-fxgmq4eoak] {
height: 100%;
}
/* A mouse and a monitor: nobody signs across the whole width of a desktop screen, and the wider
the sheet, the smaller the name is in it. Touch devices keep every pixel — room is what they
went full screen for. */
@media (pointer: fine) {
.sig-pad.is-full .sig-pad-sheet[b-fxgmq4eoak],
.sig-pad.is-full .sig-pad-footer[b-fxgmq4eoak] {
width: 100%;
max-width: 1000px;
margin-inline: auto;
}
}
/* The two controls a full-screen pad has are the two a thumb has to hit, so they stop being the
small buttons that fit next to a field in a dialog. */
.sig-pad.is-full .sig-pad-footer button[b-fxgmq4eoak] {
padding: 0.6rem 1.15rem;
font-size: 0.95rem;
}
/* Said only where it helps: held upright, a phone gives a signature a fraction of the width it
wants, and turning it is the whole difference. */
.sig-pad-turn[b-fxgmq4eoak] {
display: none;
}
@media (orientation: portrait) and (pointer: coarse) {
.sig-pad-turn[b-fxgmq4eoak] {
display: block;
position: absolute;
left: 50%;
bottom: 0.6rem;
transform: translateX(-50%);
padding: 0.2rem 0.6rem;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
color: var(--text-secondary);
font-size: 0.75rem;
white-space: nowrap;
pointer-events: none;
}
}
/* /Components/Shared/StartImagePicker.razor.rz.scp.css */
/* 4:3 — the pictures' own proportion (400×300) — and one size for the preview and the empty tile, so
the form does not jump when a picture is chosen. */
.sip[b-9yyaf30jyv],
.sip-empty[b-9yyaf30jyv] {
width: 15rem;
max-width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-xl);
}
.sip[b-9yyaf30jyv] {
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
background: var(--clr-navy-900);
transition: box-shadow 0.15s;
/* The start card's gradient (Card.razor.css, .card--image), so the preview is what the cards wear. */
--sip-scrim: var(--clr-navy-900);
}
.sip[style*="--sip-tint"][b-9yyaf30jyv] {
--sip-scrim: color-mix(in srgb, var(--sip-tint) 38%, var(--clr-navy-900));
}
.sip:hover:not(.sip--disabled)[b-9yyaf30jyv] {
box-shadow: var(--shadow-lg);
}
.sip-open[b-9yyaf30jyv] {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
text-align: left;
}
.sip-open:disabled[b-9yyaf30jyv] {
cursor: default;
}
.sip-open img[b-9yyaf30jyv] {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.25s ease;
}
.sip:hover:not(.sip--disabled) .sip-open img[b-9yyaf30jyv] {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.sip-open img[b-9yyaf30jyv] {
transition: none;
}
.sip:hover:not(.sip--disabled) .sip-open img[b-9yyaf30jyv] {
transform: none;
}
}
.sip-open[b-9yyaf30jyv]::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg,
color-mix(in srgb, var(--sip-scrim) 58%, transparent) 0%,
color-mix(in srgb, var(--sip-scrim) 72%, transparent) 50%,
color-mix(in srgb, var(--sip-scrim) 88%, transparent) 100%);
}
/* The picture's name where a card's footer would be — above the gradient, so it reads like a card. */
.sip-label[b-9yyaf30jyv] {
position: absolute;
left: 0.85rem;
right: 0.85rem;
bottom: 0.7rem;
z-index: 1;
font-size: 0.85rem;
font-weight: 600;
color: var(--clr-always-white);
text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Change and remove on the picture's corner: glass buttons, the same recipe as the icon box on a
picture card. Always visible — a touch screen has no hover to reveal them. */
.sip-actions[b-9yyaf30jyv] {
position: absolute;
top: 0.55rem;
right: 0.55rem;
z-index: 1;
display: flex;
gap: 0.3rem;
}
.sip-action[b-9yyaf30jyv] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
padding: 0;
border: none;
border-radius: var(--radius-md);
background: rgb(255 255 255 / 0.18);
color: var(--clr-always-white);
cursor: pointer;
backdrop-filter: blur(6px);
transition: background 0.12s;
}
.sip-action:hover[b-9yyaf30jyv] {
background: rgb(255 255 255 / 0.32);
}
.sip-action:focus-visible[b-9yyaf30jyv],
.sip-open:focus-visible[b-9yyaf30jyv] {
outline: 2px solid var(--clr-always-white);
outline-offset: -4px;
}
/* No picture yet: a dashed tile in the preview's size, the way into the dialog. */
.sip-empty[b-9yyaf30jyv] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0;
border: 1.5px dashed var(--clr-slate-300);
background: var(--surface-sunken);
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.sip-empty:hover[b-9yyaf30jyv] {
border-color: var(--primary);
color: var(--primary);
background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
/* /Components/Shared/StatsLine.razor.rz.scp.css */
/* Groups are held apart by whitespace, the figures inside one by a smaller gap
— no separator glyphs. The overline in front of a group does the dividing. */
.stats-line[b-178jomlqmt] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
margin: 0.25rem 0 1.25rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.stats-line-group[b-178jomlqmt] {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 1.1rem;
}
.stats-line-label[b-178jomlqmt] {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--text-label);
}
.stats-line-item[b-178jomlqmt] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
/* The button entry has to be talked out of looking like a button — it is a
figure that happens to switch the filter, not a control of its own. */
button.stats-line-item[b-178jomlqmt] {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
line-height: inherit;
}
/* Tabular figures so the numbers do not shuffle as counts change. */
.stats-line-item strong[b-178jomlqmt] {
color: var(--text-body);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ── A figure that just changed ─────────────────────────────────────────
Switching a filter rewrites this line, and the figures that answer differently roll over while
the rest stay where they are — so the line shows which numbers the new filter actually moved.
inline-block because an inline box ignores transform; the tabular figures above are what stop
that from shifting the words beside it. */
.stats-line-value[b-178jomlqmt] {
display: inline-block;
}
.stats-line-value.is-changed[b-178jomlqmt] {
animation: stats-figure-roll-b-178jomlqmt 0.3s ease-out;
}
@keyframes stats-figure-roll-b-178jomlqmt {
from { opacity: 0; transform: translateY(-0.35em); }
to { opacity: 1; transform: none; }
}
/* The figure is right either way. */
@media (prefers-reduced-motion: reduce) {
.stats-line-value.is-changed[b-178jomlqmt] {
animation: none;
}
}
/* Only entries that lead somewhere react to the pointer, and they do it by
darkening — an underline would turn a line of figures into a line of links. */
a.stats-line-item[b-178jomlqmt],
button.stats-line-item[b-178jomlqmt] {
cursor: pointer;
}
a.stats-line-item:hover[b-178jomlqmt],
button.stats-line-item:hover[b-178jomlqmt] {
color: var(--text-body);
}
a.stats-line-item:focus-visible[b-178jomlqmt],
button.stats-line-item:focus-visible[b-178jomlqmt] {
outline: 2px solid var(--primary);
outline-offset: 3px;
border-radius: 4px;
}
/* The figure the list is currently filtered to. */
.stats-line-item.is-active[b-178jomlqmt],
.stats-line-item.is-active strong[b-178jomlqmt] {
color: var(--primary);
}
/* /Components/Shared/StatusBadge.razor.rz.scp.css */
/* Draft / publish / submission lifecycle (unified, see docs/PERSISTENCE-STRATEGY.md) */
.status-draft[b-km089g1ntj] {
background: var(--clr-amber-100);
color: var(--clr-amber-800);
}
.status-published[b-km089g1ntj],
.status-submitted[b-km089g1ntj] {
background: var(--clr-green-100);
color: var(--clr-green-800);
}
.status-editing[b-km089g1ntj] {
background: var(--clr-blue-100);
color: var(--clr-blue-800);
}
/* /Components/Shared/StatusDefaultsPicker.razor.rz.scp.css */
.status-defaults[b-8qe471ay2i] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 1rem;
}
@media (max-width: 640px) {
.status-defaults[b-8qe471ay2i] {
grid-template-columns: minmax(0, 1fr);
}
}
/* /Components/Shared/StatusModelStatuses.razor.rz.scp.css */
.sms-section[b-ziukpjjydq] {
margin-top: 0.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
.sms-head[b-ziukpjjydq] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.5rem;
}
.sms-title[b-ziukpjjydq] {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
}
.sms-list[b-ziukpjjydq] {
list-style: none;
margin: 0;
padding: 0;
}
.sms-list li[b-ziukpjjydq] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.75rem;
min-height: 2.75rem;
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--clr-slate-100);
}
.sms-list li:last-child[b-ziukpjjydq] {
border-bottom-color: transparent;
}
/* /Components/Shared/StatusValueFlags.razor.rz.scp.css */
.status-flags[b-bfm8kuk6tb] {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
}
/* /Components/Shared/SuggestlyReportForm.razor.rz.scp.css */
/* ── Sentiment toggle ─────────────────────────────────── */
.srf-sentiment[b-ifxho60wwd] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.srf-sentiment-btn[b-ifxho60wwd] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.6rem 0.85rem;
background: var(--btn-fill);
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
font-size: 0.88rem;
font-weight: 500;
color: var(--clr-slate-600);
transition: background .15s, color .15s, box-shadow .15s;
}
.srf-sentiment-btn:hover[b-ifxho60wwd] {
background: var(--btn-fill-hover);
color: var(--text);
}
.srf-sentiment-btn[b-ifxho60wwd] svg {
color: var(--clr-slate-400);
transition: color .15s;
}
.srf-sentiment-btn--up.active[b-ifxho60wwd] {
background: var(--clr-emerald-50, #ecfdf5);
color: var(--clr-emerald-700, #047857);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.srf-sentiment-btn--up.active[b-ifxho60wwd] svg {
color: var(--clr-emerald-600, #059669);
}
.srf-sentiment-btn--down.active[b-ifxho60wwd] {
background: var(--clr-red-50);
color: var(--clr-red-700, #b91c1c);
box-shadow: 0 0 0 3px rgba(224, 90, 84, 0.12);
}
.srf-sentiment-btn--down.active[b-ifxho60wwd] svg {
color: var(--clr-red-600);
}
/* "optional" hint next to a label */
.srf-optional[b-ifxho60wwd] {
font-weight: 400;
font-size: 0.78rem;
color: var(--clr-slate-400);
}
/* ── Technical-data expander ──────────────────────────── */
.srf-technical[b-ifxho60wwd] {
margin-bottom: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--clr-slate-50);
overflow: hidden;
}
.srf-technical summary[b-ifxho60wwd] {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.7rem;
font-size: 0.82rem;
font-weight: 500;
color: var(--clr-slate-600);
cursor: pointer;
user-select: none;
list-style: none;
}
.srf-technical summary[b-ifxho60wwd]::-webkit-details-marker {
display: none;
}
.srf-technical summary[b-ifxho60wwd] svg {
color: var(--clr-slate-400);
flex-shrink: 0;
}
.srf-technical[open] summary[b-ifxho60wwd] {
border-bottom: 1px solid var(--clr-slate-200);
}
/* A cap on the block, not on the dialog: the stack trace or transcript scrolls in place. */
.srf-technical pre[b-ifxho60wwd] {
margin: 0;
padding: 0.6rem 0.7rem;
max-height: 240px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.72rem;
line-height: 1.5;
color: var(--clr-slate-600);
white-space: pre-wrap;
word-break: break-word;
}
/* ── Terms checkbox (a label inside a form-group) ─────── */
.srf-terms[b-ifxho60wwd] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0;
font-weight: 400;
font-size: 0.85rem;
line-height: 1.45;
color: var(--clr-slate-700);
cursor: pointer;
}
.srf-terms input[b-ifxho60wwd] {
margin-top: 0.15rem;
flex-shrink: 0;
accent-color: var(--clr-blue-500);
cursor: pointer;
}
.srf-terms a[b-ifxho60wwd] {
color: var(--clr-blue-600);
text-decoration: underline;
text-underline-offset: 2px;
}
.srf-terms a[b-ifxho60wwd] svg {
margin-left: 0.2rem;
vertical-align: -1px;
}
/* A send without the tick: the line the error names turns red with it. */
.srf-terms--invalid[b-ifxho60wwd] {
color: var(--clr-red-600);
}
.srf-terms--invalid input[b-ifxho60wwd] {
outline: 2px solid var(--clr-red-400);
outline-offset: 1px;
}
/* /Components/Shared/TagFilterButton.razor.rz.scp.css */
/* The tag's colour on a button that is white when inactive and blue when active — the ring keeps the
dot readable on both. */
.tag-filter-dot[b-lpu17yc2c1] {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 30%, transparent);
}
/* /Components/Shared/TimelinePeekBody.razor.rz.scp.css */
/* A bubble's body (docs/PROJECT-TIMELINE.md §7.2), in the language of its head (ProjectTimelineView): sections under an
icon and a count, facts one a line with their icons, chips for states, a quiet card for someone's words. Spacing
parts what belongs apart — no rules, no separators. The icons are drawn by Icon, a child component, and are reached
with ::deep. */
.tpb[b-plzd8lfqfi] {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--text);
}
.tpb-loading[b-plzd8lfqfi] {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--text-muted);
}
.tpb-section[b-plzd8lfqfi] {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.tpb-head[b-plzd8lfqfi] {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
}
.tpb-head[b-plzd8lfqfi] svg {
color: var(--text-muted);
}
/* The count at the head's right end, as a small pill. */
.tpb-count[b-plzd8lfqfi] {
margin-left: auto;
padding: 0 7px;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
font-size: 0.72rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.6;
color: var(--text-secondary);
}
.tpb-progress[b-plzd8lfqfi] {
height: 6px;
overflow: hidden;
border-radius: var(--radius-pill);
background: var(--surface-track);
}
.tpb-progress span[b-plzd8lfqfi] {
display: block;
height: 100%;
border-radius: inherit;
background: var(--clr-green-500);
}
.tpb-list[b-plzd8lfqfi],
.tpb-agenda[b-plzd8lfqfi] {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.tpb-list > li[b-plzd8lfqfi],
.tpb-agenda > li[b-plzd8lfqfi] {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.tpb-mark[b-plzd8lfqfi] {
display: inline-flex;
flex: none;
color: var(--text-muted);
}
.tpb-list > li.is-done .tpb-mark[b-plzd8lfqfi] {
color: var(--clr-green-600);
}
.tpb-list > li.is-done .tpb-label[b-plzd8lfqfi] {
color: var(--text-muted);
}
.tpb-label[b-plzd8lfqfi] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tpb-meta[b-plzd8lfqfi] {
flex: none;
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
.tpb-number[b-plzd8lfqfi] {
flex: none;
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: var(--text-muted);
}
/* A numbered agenda: the number in a small round badge. */
.tpb-agenda[b-plzd8lfqfi] {
counter-reset: agenda;
}
.tpb-agenda > li[b-plzd8lfqfi]::before {
counter-increment: agenda;
content: counter(agenda);
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: var(--radius-circle);
background: var(--surface-sunken);
font-size: 0.68rem;
font-weight: 600;
color: var(--text-secondary);
}
.tpb-chip[b-plzd8lfqfi] {
display: inline-flex;
flex: none;
align-items: center;
gap: 4px;
padding: 1px 8px;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
font-size: 0.72rem;
font-weight: 600;
line-height: 1.6;
color: var(--text-secondary);
white-space: nowrap;
}
.tpb-chip.is-done[b-plzd8lfqfi] {
background: var(--clr-green-100);
color: var(--clr-green-800);
}
.tpb-chips[b-plzd8lfqfi] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
/* Facts: icon and label on the left, the value beside them — the head's grid. */
.tpb-facts[b-plzd8lfqfi] {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 14px;
row-gap: 6px;
margin: 0;
}
.tpb-fact[b-plzd8lfqfi] {
display: contents;
}
.tpb-fact dt[b-plzd8lfqfi] {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
}
.tpb-fact dd[b-plzd8lfqfi] {
min-width: 0;
margin: 0;
font-variant-numeric: tabular-nums;
color: var(--text);
overflow-wrap: anywhere;
}
.tpb-fact.is-warn dt[b-plzd8lfqfi],
.tpb-fact.is-warn dd[b-plzd8lfqfi] {
color: var(--danger-text);
}
/* A form's answers: the label quiet on the left, the answer beside it; a group's heading above its answers. */
.tpb-answers[b-plzd8lfqfi] {
display: grid;
grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
column-gap: 14px;
row-gap: 6px;
margin: 0;
}
.tpb-answer[b-plzd8lfqfi] {
display: contents;
}
.tpb-answer dt[b-plzd8lfqfi] {
font-size: 0.75rem;
line-height: 1.6;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.tpb-answer dd[b-plzd8lfqfi] {
margin: 0;
font-weight: 500;
color: var(--text);
overflow-wrap: anywhere;
}
.tpb-answers-section[b-plzd8lfqfi] {
grid-column: 1 / -1;
margin-top: 4px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.tpb-answers-section:first-child[b-plzd8lfqfi] {
margin-top: 0;
}
.tpb-text[b-plzd8lfqfi] {
margin: 0;
color: var(--text-secondary);
overflow-wrap: anywhere;
}
.tpb-clamp[b-plzd8lfqfi] {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* A quiet line with its icon: what is hidden, what is missing. */
.tpb-note[b-plzd8lfqfi] {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 0;
font-size: 0.78rem;
color: var(--text-muted);
}
.tpb-note[b-plzd8lfqfi] svg {
flex: none;
margin-top: 2px;
}
.tpb-more[b-plzd8lfqfi] {
margin: 0;
font-size: 0.75rem;
color: var(--text-muted);
}
.tpb-people[b-plzd8lfqfi] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tpb-person[b-plzd8lfqfi] {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 2px 10px 2px 2px;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
font-size: 0.78rem;
}
.tpb-person-name[b-plzd8lfqfi] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The last message, as a card: who and when on top, its first lines below; tinted by direction. */
.tpb-message[b-plzd8lfqfi] {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: var(--surface-sunken);
}
.tpb-message.is-out[b-plzd8lfqfi] {
background: var(--primary-soft);
}
.tpb-message-head[b-plzd8lfqfi] {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
color: var(--text-secondary);
}
.tpb-message-head[b-plzd8lfqfi] svg {
flex: none;
color: var(--text-muted);
}
.tpb-message-who[b-plzd8lfqfi] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.tpb-question[b-plzd8lfqfi] {
color: var(--text-secondary);
}
.tpb-project[b-plzd8lfqfi] {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.tpb-tile[b-plzd8lfqfi] {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--radius-md);
background: var(--primary-soft);
color: var(--primary);
}
.tpb-project-text[b-plzd8lfqfi] {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.tpb-tags[b-plzd8lfqfi] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tpb-tag[b-plzd8lfqfi] {
padding: 2px 9px;
border-radius: var(--radius-pill);
background: var(--surface-sunken);
font-size: 0.75rem;
color: var(--text-secondary);
}
/* /Components/Shared/ToastContainer.razor.rz.scp.css */
/* Bottom right: the top right belongs to the top bar's actions. AppShell.razor.css moves it clear of
a docked panel, the way it used to move the floating buttons. */
.toast-container[b-0xkkaoe3tj] {
position: fixed;
bottom: 1rem;
right: 1rem;
/* Above the modal backdrop (10050) so a toast fired from a modal stays visible. */
z-index: 10100;
display: flex;
flex-direction: column;
/* Every toast takes the width of the widest, up to this; a longer message wraps. */
max-width: 30rem;
/* No gap: the slot below carries the spacing, because a gap cannot collapse with the toast it
belongs to and would leave a hole where one just left. */
pointer-events: none;
}
/* One toast's place in the stack. It opens as the toast arrives and collapses as it leaves, so the
ones above glide up to make room and the ones below walk up after it, instead of either jumping. */
.toast-slot[b-0xkkaoe3tj] {
display: grid;
grid-template-rows: 1fr;
padding-bottom: 0.5rem;
animation: toast-slot-in-b-0xkkaoe3tj 0.5s cubic-bezier(0.22, 1, 0.36, 1);
/* The collapse waits for the fade to get going, so the gap closes behind the toast rather than
under it. Declared here, not on .is-leaving: a transition added with its new value never runs. */
transition: grid-template-rows 0.34s cubic-bezier(0.65, 0, 0.35, 1) 0.06s,
padding-bottom 0.34s cubic-bezier(0.65, 0, 0.35, 1) 0.06s;
}
@keyframes toast-slot-in-b-0xkkaoe3tj {
from { grid-template-rows: 0fr; padding-bottom: 0; }
}
/* A grid item will not shrink below its content without this. Pinned to the top of its slot rather
than stretched: while the slot opens, the toast keeps its full height and rises from below the
screen edge, where a stretched one would be squashed and grow out of a sliver. */
.toast-slot > *[b-0xkkaoe3tj] {
min-height: 0;
align-self: start;
}
/* Dropping the arrival as well: a toast sent off while its slot is still opening (an undo pressed at
once) would otherwise hold the slot open until the arrival ended. The collapse starts from wherever
the arrival had got to. */
.toast-slot.is-leaving[b-0xkkaoe3tj] {
grid-template-rows: 0fr;
padding-bottom: 0;
animation: none;
}
/* Stretched again while leaving, so the box shrinks with the slot and the toast below has somewhere to
go; the toast clips its own content (see .toast). */
.toast-slot.is-leaving > *[b-0xkkaoe3tj] {
align-self: stretch;
}
/* Glass like every surface that lies over the page (app.css, --surface-menu), solid where the blur is
missing. The colour of the kind is only the badge's: the message reads as text, not as an alarm. */
.toast[b-0xkkaoe3tj] {
position: relative;
/* Clips the time bar to the rounded corners, and the content while the slot collapses. Its own
shadow is not content, so the glow stays. */
overflow: hidden;
display: flex;
align-items: center;
gap: 0.95rem;
min-width: min(22rem, calc(100vw - 2rem));
padding: 0.8rem 1.35rem 0.8rem 0.8rem;
border-radius: var(--radius-2xl);
background: var(--surface);
background: var(--surface-menu);
-webkit-backdrop-filter: var(--menu-blur);
backdrop-filter: var(--menu-blur);
box-shadow: var(--shadow-lg);
color: var(--text);
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
pointer-events: auto;
transform-origin: 50% 100%;
/* Opacity on the toast itself, never on the slot or the container: below full opacity an
ancestor becomes the backdrop root, and the glass would blur nothing until the fade ended. */
animation: toast-in-b-0xkkaoe3tj 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes toast-in-b-0xkkaoe3tj {
from { opacity: 0; transform: translateY(0.75rem) scale(0.94); }
to { opacity: 1; transform: none; }
}
.toast-success[b-0xkkaoe3tj] { --toast-color: var(--clr-green-600); }
.toast-error[b-0xkkaoe3tj] { --toast-color: var(--clr-red-600); }
.toast-info[b-0xkkaoe3tj] { --toast-color: var(--clr-blue-600); }
/* The kind, as a filled square the glyph sits in. Its radius is the toast's minus the padding, so the
two corners run parallel. It arrives with the toast and does not move on its own. */
.toast-badge[b-0xkkaoe3tj] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-md);
background: var(--toast-color);
color: var(--clr-always-white);
}
/* A shade heavier than the app's 2: white on a fill thins out next to the same glyph on the page. */
.toast-badge[b-0xkkaoe3tj] svg {
stroke-width: 2.5;
}
/* The check draws itself while the toast settles, short stroke first. Run backwards along the
polyline (20,6 → 9,17 → 4,12, about 22.6 long): the dash grows from its end. The gap is wider than
the dash travels, so no second dash ever shows. */
.toast-success .toast-badge[b-0xkkaoe3tj] polyline {
animation: toast-check-draw-b-0xkkaoe3tj 0.4s 0.25s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes toast-check-draw-b-0xkkaoe3tj {
from { stroke-dasharray: 24 30; stroke-dashoffset: -24; }
to { stroke-dasharray: 24 30; stroke-dashoffset: 0; }
}
.toast-message[b-0xkkaoe3tj] {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: break-word;
}
/* How long the toast still stays: a thin line along its foot in the kind's colour, softened, filling
from the left over --toast-life (set from ToastItem.LifeMs, the same number the removal waits for);
when it reaches the right edge, the toast goes. The
corners clip its ends, so it follows the toast's curve. It stays under reduced motion: it is the
message here, not a flourish, and a slow linear bar is no travel. */
.toast-time[b-0xkkaoe3tj] {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: color-mix(in srgb, var(--toast-color) 45%, transparent);
transform-origin: left center;
animation: toast-time-b-0xkkaoe3tj var(--toast-life, 3000ms) linear both;
}
@keyframes toast-time-b-0xkkaoe3tj {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* The one action a toast may carry ("Rückgängig"): the quiet button (.btn-secondary), at the end of
the line. */
.toast-action[b-0xkkaoe3tj] {
flex-shrink: 0;
margin-left: 0.25rem;
}
/* It leaves to the side it lives on, a little smaller. `both` holds the last frame, so it stays
invisible for the moment between the animation ending and the list dropping it. */
.toast-slot.is-leaving .toast[b-0xkkaoe3tj] {
animation: toast-out-b-0xkkaoe3tj 0.26s cubic-bezier(0.4, 0, 1, 1) both;
pointer-events: none;
}
@keyframes toast-out-b-0xkkaoe3tj {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateX(1.25rem) scale(0.96); }
}
/* The toast still comes and goes — only the travel is dropped, so nothing is missed by someone who
asked for less movement. The check is then simply there: its dash exists only in the animation. */
@media (prefers-reduced-motion: reduce) {
.toast[b-0xkkaoe3tj],
.toast-slot[b-0xkkaoe3tj],
.toast-slot.is-leaving .toast[b-0xkkaoe3tj],
.toast-success .toast-badge[b-0xkkaoe3tj] polyline {
animation: none;
}
.toast-slot[b-0xkkaoe3tj] {
transition: none;
}
}
/* Phone: bottom centre. Anchored only on the right, a long message grows leftwards until it hits
the screen edge with nothing between it and the bezel; pinned on both sides the text wraps. */
@media (max-width: 640px) {
.toast-container[b-0xkkaoe3tj] {
left: 1rem;
/* Pinned on both sides, a cap would push it against the left edge. */
max-width: none;
}
}
/* /Components/Shared/Toggle.razor.rz.scp.css */
/* === Toggle Label === */
.toggle-label[b-iskoqk6ow8] {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.88rem;
}
.toggle-label input[type="checkbox"][b-iskoqk6ow8] {
margin: 0;
}
.toggle-label[b-iskoqk6ow8] {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
height: 24px;
/* The slider is absolutely positioned (44px); keep room for it even without a label,
so a label-less toggle is exactly the switch width with no empty space to its right. */
min-width: 44px;
}
.toggle-checkbox[b-iskoqk6ow8] {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider[b-iskoqk6ow8] {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
width: 44px;
bottom: 0;
background-color: var(--clr-slate-700);
transition: 0.3s;
border-radius: var(--radius-2xl);
}
.toggle-slider[b-iskoqk6ow8]:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.toggle-checkbox:checked + .toggle-slider[b-iskoqk6ow8] {
background-color: var(--clr-blue-500);
}
.toggle-checkbox:checked + .toggle-slider[b-iskoqk6ow8]:before {
transform: translateX(20px);
}
.toggle-text[b-iskoqk6ow8] {
color: var(--clr-slate-700);
font-size: 0.9rem;
font-weight: 500;
margin: 0 0 0 50px;
}
/* A locked switch has to look locked; drawn like a live one it only reads as broken. */
.toggle-label:has(.toggle-checkbox:disabled)[b-iskoqk6ow8],
.toggle-checkbox:disabled + .toggle-slider[b-iskoqk6ow8] {
cursor: not-allowed;
}
.toggle-checkbox:disabled + .toggle-slider[b-iskoqk6ow8] {
opacity: 0.4;
}
.toggle-checkbox:disabled ~ .toggle-text[b-iskoqk6ow8] {
color: var(--text-faint);
}
/* /Components/Shared/Tooltip.razor.rz.scp.css */
.tt[b-293ruqhbtb] {
position: relative;
display: inline-flex;
align-items: center;
cursor: help;
outline: none;
}
.tt:focus-visible[b-293ruqhbtb] {
outline: 2px solid var(--clr-blue-500);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* The bubble sits above the trigger and is centred on it. It stays out of the layout
(absolute) so a card's grid never grows when a tooltip appears. */
.tt-bubble[b-293ruqhbtb] {
position: absolute;
bottom: calc(100% + 0.5rem);
left: 50%;
transform: translateX(-50%) translateY(0.25rem);
z-index: 40;
width: max-content;
max-width: 15rem;
padding: 0.5rem 0.7rem;
border-radius: var(--radius-md);
background: var(--surface-inverse);
color: var(--text-on-inverse);
font-size: 0.78rem;
font-weight: 500;
line-height: 1.45;
text-align: left;
white-space: normal;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* The pointer down to the trigger. */
.tt-bubble[b-293ruqhbtb]::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--surface-inverse);
}
.tt:hover .tt-bubble[b-293ruqhbtb],
.tt:focus-within .tt-bubble[b-293ruqhbtb],
.tt--open .tt-bubble[b-293ruqhbtb] {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Near the right edge of a card the centred bubble would run off screen; on narrow
viewports it aligns to the trigger's right instead. */
@media (max-width: 640px) {
.tt-bubble[b-293ruqhbtb] {
left: auto;
right: 0;
transform: translateY(0.25rem);
max-width: 12rem;
}
.tt-bubble[b-293ruqhbtb]::after {
left: auto;
right: 0.35rem;
transform: none;
}
.tt:hover .tt-bubble[b-293ruqhbtb],
.tt:focus-within .tt-bubble[b-293ruqhbtb],
.tt--open .tt-bubble[b-293ruqhbtb] {
transform: translateY(0);
}
}
/* /Components/Shared/TopBarPopover.razor.rz.scp.css */
.tbp[b-00mfjcsrwj] {
position: relative;
display: inline-flex;
}
/* Under its button, right-aligned with it: every panel hangs off the right half of the bar. Above the
press-anywhere backdrop (PopupBackdrop, 9998). */
.tbp-panel[b-00mfjcsrwj] {
position: absolute;
top: calc(100% + 0.6rem);
right: 0;
z-index: 9999;
width: 320px;
max-width: calc(100vw - 1rem);
max-height: calc(100dvh - var(--top-bar-height) - 1.5rem);
overflow-y: auto;
background: var(--surface);
background: var(--surface-menu);
-webkit-backdrop-filter: var(--menu-blur);
backdrop-filter: var(--menu-blur);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
scrollbar-width: thin;
scrollbar-color: var(--clr-slate-200) transparent;
animation: tbp-in-b-00mfjcsrwj 0.14s ease-out;
}
@keyframes tbp-in-b-00mfjcsrwj {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.tbp-panel[b-00mfjcsrwj] {
animation: none;
}
}
/* Phone: the bar's right edge is the screen's, and a panel wider than the space left of its button
would run off the left. Pinned to the screen instead, under the bar. */
@media (max-width: 767px) {
.tbp-panel[b-00mfjcsrwj] {
position: fixed;
top: calc(var(--top-bar-height) + 0.25rem);
left: 0.5rem;
right: 0.5rem;
width: auto !important;
max-width: none;
}
}
/* /Components/Shared/TranscriptLiveText.razor.rz.scp.css */
/* The gutter the status marks hang in (TranscriptLiveTurn): the mark, 13px, and a gap to the name. */
.live-text.has-status[b-f95lcfe31t] {
padding-left: 1.3rem;
}
/* /Components/Shared/TranscriptLiveTurn.razor.rz.scp.css */
/* A gap notice is nobody's words: quieter than the turns around it. */
.live-turn.is-notice[b-5nudsju222] {
color: var(--text-muted);
}
/* The menu's trigger keeps the name in a selection — the text is copied from here when a stop was
refused — and the menu itself must not take on the transcript's pre-wrap. */
.live-turn[b-5nudsju222] .cm-trigger {
user-select: text;
}
.live-turn[b-5nudsju222] .cm-menu {
white-space: normal;
}
/* ── A line that just came ──
Its words stood in grey as the open partial, in the same place; they darken into the text one after
the other, in reading order, instead of jumping. Grey while each one waits (backwards), and the colour
they end in is the text's own — the keyframes say only where they start. A new turn's colon and name
come along. */
.live-word[b-5nudsju222] {
animation: live-settle-b-5nudsju222 0.5s ease-out backwards;
}
.live-turn.is-arriving[b-5nudsju222],
.live-turn.is-arriving .live-speaker-name[b-5nudsju222] {
animation: live-settle-b-5nudsju222 0.5s ease-out;
}
@keyframes live-settle-b-5nudsju222 {
from { color: var(--text-muted); }
}
/* ── The name ──
A word in the text that is also a control: the review's speaker style (ProtocolTranscriptPanel),
inline. Its padding is only for the hover ground and taken back on both sides, so the name starts
where the lines under it do and the colon follows it without a gap. */
.live-speaker[b-5nudsju222] {
position: relative;
display: inline-flex;
align-items: baseline;
margin: 0 -0.35rem;
padding: 0 0.35rem;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--primary);
font: inherit;
font-weight: 700;
line-height: inherit;
cursor: pointer;
user-select: text;
transition: background 0.12s;
}
.live-speaker:hover[b-5nudsju222],
.live-speaker:focus-visible[b-5nudsju222] {
background: var(--primary-soft);
}
/* ── Where recognising the voice stands ──
Hung in the text's gutter (TranscriptLiveText), centred on the name's line, so the marks stand in a
column of their own and take nothing from the text's edge. Inside the button all the same: a click on
the mark names the voice too. */
.voice-status[b-5nudsju222] {
position: absolute;
top: 50%;
left: -0.9rem;
display: flex;
width: 13px;
height: 13px;
margin-top: -6.5px;
border-radius: 50%;
}
.voice-status.is-waiting[b-5nudsju222] {
color: var(--text-muted);
}
.voice-status.is-recognized[b-5nudsju222] {
color: var(--clr-green-600);
}
.voice-status.is-unknown[b-5nudsju222] {
color: var(--clr-amber-500);
}
/* Turning only while the microphone listens: paused, nothing is coming. */
.live-text.is-listening .voice-status.is-waiting[b-5nudsju222] {
animation: voice-hourglass-b-5nudsju222 4s ease-in-out infinite;
}
/* The voiceprint has come — recognised or not, the mark lands. */
.voice-status.is-fresh[b-5nudsju222] {
animation: voice-land-b-5nudsju222 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.voice-status.is-recognized.is-fresh[b-5nudsju222] {
animation: voice-land-b-5nudsju222 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
voice-ring-b-5nudsju222 1.1s ease-out 0.15s;
}
/* Recognised a moment ago: the name lights up green and settles back into the text. */
.live-speaker.is-identified[b-5nudsju222] {
animation: voice-identified-b-5nudsju222 2.2s ease-out;
}
.live-speaker.is-identified .live-speaker-name[b-5nudsju222] {
animation: voice-name-in-b-5nudsju222 0.6s ease-out;
}
/* Half a second to turn, then a long rest — an hourglass that turns more often reads as a spinner. */
@keyframes voice-hourglass-b-5nudsju222 {
0%, 37.5% { transform: rotate(0deg); }
50%, 87.5% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
@keyframes voice-land-b-5nudsju222 {
from { opacity: 0; transform: scale(0.2) rotate(-60deg); }
to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes voice-ring-b-5nudsju222 {
from { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
to { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}
@keyframes voice-identified-b-5nudsju222 {
0%, 30% {
background: var(--clr-green-100);
color: var(--clr-green-700);
}
100% {
background: transparent;
color: var(--primary);
}
}
@keyframes voice-name-in-b-5nudsju222 {
from { opacity: 0; transform: translateY(0.35em); filter: blur(3px); }
to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
.live-word[b-5nudsju222],
.live-turn.is-arriving[b-5nudsju222],
.live-turn.is-arriving .live-speaker-name[b-5nudsju222],
.live-text.is-listening .voice-status.is-waiting[b-5nudsju222],
.voice-status.is-fresh[b-5nudsju222],
.voice-status.is-recognized.is-fresh[b-5nudsju222],
.live-speaker.is-identified[b-5nudsju222],
.live-speaker.is-identified .live-speaker-name[b-5nudsju222] {
animation: none;
}
}
/* /Components/Shared/TranscriptRecorder.razor.rz.scp.css */
/* The recorder inside a protocol card.
The .dictation-* vocabulary in app.css was drawn for the plugin's panel: a column about 400px
wide, where a button that fills the row is the right answer and a centred level meter reads as a
pulse. A protocol tab is the width of the page, and the same rules there give an orange bar the
length of a desk and two half-page buttons. So the shared look stays shared, and the proportions
are this component's own — these rules are scoped, so they reach the elements this component
renders and nothing else.
Where the two disagree, the app wins: buttons keep their natural width and sit at the start of
their row, the way every other action in FlowKlar does. Only the record button keeps the warm
accent, because "this is being recorded" is the one thing that must not read as ordinary. */
/* ── The console ── */
.dictation[b-k2tsdl3vek] {
gap: 1rem;
}
/* ── Status ── (drawn by DictationStatus, hence ::deep) */
.dictation[b-k2tsdl3vek] .dictation-status {
font-size: 0.88rem;
}
.dictation[b-k2tsdl3vek] .dictation-elapsed {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
}
/* ── The level ──
A band across the card, not a blob in the middle of one: at this width a centred meter looks
misplaced, while a full row reads as the signal it is. */
.dictation-wave[b-k2tsdl3vek] {
height: 3rem;
padding: 0 0.75rem;
justify-content: space-between;
border-radius: var(--radius-lg);
background: var(--surface-sunken);
}
/* ── The live text ──
The same sunken region the finished transcript is edited in, so the text does not move house when
the recording stops. */
.dictation-transcript[b-k2tsdl3vek] {
min-height: 9rem;
padding: 0.9rem 1rem;
border-radius: var(--radius-lg);
background: var(--surface-sunken);
font-size: 0.88rem;
line-height: 1.65;
}
/* Left-aligned with the text that will replace it, rather than centred in an empty box — it is a
placeholder for the first sentence, and the first sentence starts on the left. */
.dictation-placeholder[b-k2tsdl3vek] {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
flex-direction: row;
justify-content: flex-start;
min-height: 0;
height: auto;
text-align: left;
color: var(--text-faint);
}
/* ── Actions ──
Ordinary buttons in an ordinary row. The plugin stretches them because it has one column and no
other actions; here they would be two half-page slabs. */
.dictation-actions[b-k2tsdl3vek] {
justify-content: flex-start;
gap: 0.6rem;
}
.dictation-record[b-k2tsdl3vek],
.dictation-ctl[b-k2tsdl3vek] {
flex: 0 0 auto;
min-height: 2.4rem;
padding: 0 1.1rem;
font-size: 0.88rem;
}
/* /Components/Shared/TranscriptSpeakerBar.razor.rz.scp.css */
/* One row above the recording: a quiet caption, then the voices. Wraps rather than scrolls — a meeting
has a handful of them, and a hidden one is one nobody names. */
.speaker-bar[b-qkgrbq8hpv] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
}
.speaker-bar-label[b-qkgrbq8hpv] {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-label);
}
/* The chip's frame, for the moment its voice is recognised: a green ring goes out from it, in step with
the names lighting up in the text (TranscriptLiveTurn). */
.speaker-chip[b-qkgrbq8hpv] {
display: inline-flex;
border-radius: var(--radius-pill);
}
.speaker-chip.is-identified[b-qkgrbq8hpv] {
animation: speaker-identified-b-qkgrbq8hpv 1.2s ease-out 2;
}
@keyframes speaker-identified-b-qkgrbq8hpv {
from { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
to { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
.speaker-chip.is-identified[b-qkgrbq8hpv] {
animation: none;
}
}
/* /Components/Shared/UpgradeBanners.razor.rz.scp.css */
.upgrade-banners[b-mlx3d8zzvr] {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0 0 1.5rem;
}
/* Full width, card height: the offer is the first thing on the page, not a footnote beside the
title. Same elevation language as the cards below it – a shadow rather than a border. */
.upgrade-banner[b-mlx3d8zzvr] {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
padding: 1.1rem 1.4rem;
border: none;
border-radius: var(--radius-lg);
font-family: inherit;
text-align: left;
cursor: pointer;
box-shadow: var(--shadow-md);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.upgrade-banner:hover[b-mlx3d8zzvr] {
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
.upgrade-banner-icon[b-mlx3d8zzvr] {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: var(--radius-md);
}
.upgrade-banner-text[b-mlx3d8zzvr] {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
min-width: 0;
}
.upgrade-banner-title[b-mlx3d8zzvr] {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
}
.upgrade-banner-desc[b-mlx3d8zzvr] {
font-size: 0.875rem;
line-height: 1.4;
opacity: 0.85;
}
.upgrade-banner[b-mlx3d8zzvr] .upgrade-banner-chevron {
flex-shrink: 0;
opacity: 0.6;
}
.upgrade-banner--license[b-mlx3d8zzvr] {
background: var(--clr-blue-100);
color: var(--clr-blue-800);
}
.upgrade-banner--license .upgrade-banner-icon[b-mlx3d8zzvr] {
background: var(--clr-blue-500);
color: var(--clr-always-white);
}
.upgrade-banner--ai[b-mlx3d8zzvr] {
background: var(--clr-gold-100);
color: var(--clr-gold-800);
}
.upgrade-banner--ai .upgrade-banner-icon[b-mlx3d8zzvr] {
background: var(--clr-gold-500);
color: var(--clr-navy-900);
}
@media (max-width: 640px) {
.upgrade-banner[b-mlx3d8zzvr] {
padding: 0.9rem 1rem;
gap: 0.75rem;
}
.upgrade-banner-icon[b-mlx3d8zzvr] {
width: 40px;
height: 40px;
}
.upgrade-banner-title[b-mlx3d8zzvr] {
font-size: 0.95rem;
}
}
/* /Components/Shared/UserAvatar.razor.rz.scp.css */
/* Sizes match what the three hand-rolled predecessors used, so nothing moves: 24px in the sidebar,
34px in a comment stream, 52px on the profile card. */
.avatar[b-j70nca6wie] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
border-radius: var(--radius-circle);
background: var(--primary);
color: var(--clr-white);
font-weight: 600;
line-height: 1;
user-select: none;
}
.avatar--small[b-j70nca6wie] {
width: 24px;
height: 24px;
font-size: 0.62rem;
}
.avatar--medium[b-j70nca6wie] {
width: 34px;
height: 34px;
font-size: 0.8rem;
}
.avatar--large[b-j70nca6wie] {
width: 52px;
height: 52px;
font-size: 1.15rem;
}
/* The contact person's face on its tab — the one place a face is the content. */
.avatar--xlarge[b-j70nca6wie] {
width: 96px;
height: 96px;
font-size: 2rem;
}
.avatar--muted[b-j70nca6wie] {
background: var(--surface-sunken);
color: var(--text-muted);
}
/* Without a picture: the person's pattern fills the disc (cropped by its overflow), the initials sit on
top. The shadow is the same one Card puts on text over a picture — whichever shape lands behind a
letter, it keeps its edge. */
.avatar-pattern[b-j70nca6wie] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.avatar-initials[b-j70nca6wie] {
position: relative;
text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}
/* The picture fills the disc and is cropped to it. The browser already made it square before upload, so
this only guards against a picture that arrived some other way. */
.avatar img[b-j70nca6wie] {
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
display: block;
}
/* /Components/Shared/UserHoverCard.razor.rz.scp.css */
/* The profile in brief, in the speech bubble's language (HoverCard, the Zeitachse's bubbles): the face and the name at
the top, then what to do with the person — reach them, see where they belong, whom to ask while they are away.
Spacing parts what belongs apart — no rules, no separators. Icon, UserAvatar, Chip are child components and are
reached with ::deep. */
.uhc[b-bl27jqlcjm] {
display: flex;
flex-direction: column;
gap: 12px;
width: 280px;
max-width: 100%;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--text);
}
.uhc-head[b-bl27jqlcjm] {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.uhc-head[b-bl27jqlcjm] .avatar {
flex: none;
}
.uhc-identity[b-bl27jqlcjm] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.uhc-name[b-bl27jqlcjm] {
overflow: hidden;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.uhc-title[b-bl27jqlcjm] {
color: var(--text-secondary);
overflow-wrap: anywhere;
}
.uhc-hint[b-bl27jqlcjm] {
font-size: 0.75rem;
color: var(--text-muted);
}
.uhc-loading[b-bl27jqlcjm] {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--text-muted);
}
/* Ways to reach the person look like what they are: things to press. Only the icon takes the colour on hover. */
.uhc-contact[b-bl27jqlcjm] {
display: flex;
flex-direction: column;
gap: 4px;
}
.uhc-contact-item[b-bl27jqlcjm] {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: var(--text);
text-decoration: none;
}
.uhc-contact-item span[b-bl27jqlcjm] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uhc-contact-item[b-bl27jqlcjm] svg {
flex: none;
color: var(--text-muted);
transition: color 0.15s ease;
}
.uhc-contact-item:hover[b-bl27jqlcjm] svg,
.uhc-contact-item:focus-visible[b-bl27jqlcjm] svg {
color: var(--primary);
}
.uhc-contact-item:hover span[b-bl27jqlcjm] {
color: var(--primary);
}
.uhc-text[b-bl27jqlcjm] {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
color: var(--text-secondary);
overflow-wrap: anywhere;
}
.uhc-text[b-bl27jqlcjm] svg {
flex: none;
margin-top: 2px;
color: var(--text-muted);
}
.uhc-text strong[b-bl27jqlcjm] {
font-weight: 600;
color: var(--text);
}
.uhc-actions[b-bl27jqlcjm] {
display: flex;
gap: 8px;
}
/* A phone's sheet is as wide as the screen; the content follows it. */
@media (max-width: 480px) {
.uhc[b-bl27jqlcjm] {
width: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.uhc-contact-item[b-bl27jqlcjm] svg {
transition: none;
}
}
/* /Components/Shared/UserLink.razor.rz.scp.css */
/* Deliberately quiet: a name in a table row or a comment header is content, not a call to action. It
reads as text and only shows it is clickable on hover, the way a wiki link does. */
.user-link[b-x270kvw1x5] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
max-width: 100%;
margin: 0;
padding: 0;
border: none;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
vertical-align: baseline;
}
button.user-link[b-x270kvw1x5] {
cursor: pointer;
border-radius: 4px;
}
button.user-link:hover .user-link-name[b-x270kvw1x5],
button.user-link:focus-visible .user-link-name[b-x270kvw1x5] {
color: var(--primary);
text-decoration: underline;
}
button.user-link:focus-visible[b-x270kvw1x5] {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.user-link-name[b-x270kvw1x5] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-link--muted .user-link-name[b-x270kvw1x5] {
color: var(--text-muted);
}
/* /Components/Shared/UserSessionList.razor.rz.scp.css */
.session-tab[b-c4u299ohva] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.session-intro[b-c4u299ohva] {
font-size: 0.82rem;
color: var(--clr-slate-500);
margin: 0;
}
.session-empty[b-c4u299ohva] {
color: var(--clr-slate-400);
font-size: 0.88rem;
margin: 0;
}
.session-list[b-c4u299ohva] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
/* Soft layers, as everywhere else: a card is lifted by its shadow, not outlined. */
.session-item[b-c4u299ohva] {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.7rem 0.8rem;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
/* The device you are looking at right now, tinted in the primary. */
.session-item--current[b-c4u299ohva] {
background: var(--primary-soft);
}
.session-icon[b-c4u299ohva] {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--radius-md);
background: var(--clr-slate-100);
color: var(--clr-slate-600);
}
.session-info[b-c4u299ohva] {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
flex: 1;
}
.session-name[b-c4u299ohva] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.88rem;
font-weight: 500;
color: var(--clr-slate-800);
}
.session-meta[b-c4u299ohva] {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.78rem;
color: var(--clr-slate-500);
}
.session-chips[b-c4u299ohva] {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.2rem;
}
/* A white chip would vanish on the white card: inset fill instead, as the card's own tags have. */
.session-chips[b-c4u299ohva] .chip {
background: var(--surface-sunken);
box-shadow: none;
color: var(--clr-slate-600);
}
.session-all[b-c4u299ohva] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--clr-slate-100);
}
.session-hint[b-c4u299ohva] {
font-size: 0.78rem;
color: var(--clr-slate-500);
margin: 0;
}
/* /Components/Shared/VisibilityRulesEditor.razor.rz.scp.css */
/* ── Mode switch (Freigeben für / Ausblenden für) ─────── */
.vr-mode[b-72qusuenoh] {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 1rem 1.5rem 0.9rem;
}
.vr-mode[b-72qusuenoh] .segmented-group {
width: 100%;
}
.vr-mode[b-72qusuenoh] .segmented-btn {
flex: 1;
justify-content: center;
}
.vr-mode-hint[b-72qusuenoh] {
font-size: 0.8rem;
line-height: 1.35;
color: var(--clr-slate-500);
margin: 0;
}
.vr-divider[b-72qusuenoh] {
height: 1px;
background: var(--clr-slate-100);
margin: 0;
}
/* /Components/Shared/VorgangCard.razor.rz.scp.css */
/* Everything structural comes from ; only the work-order body parts live here. */
.vorgang-card-assignees[b-gvhmx9ctp0] {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
/* On the template's picture the white pills would sit like stickers: frosted glass, as does for its tags.
.card--image is Card's class and needs no scope; ::deep reaches into Chip. */
.card--image .vorgang-card-assignees[b-gvhmx9ctp0] .chip {
background: rgb(255 255 255 / 0.16);
box-shadow: none;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.card--image .vorgang-card-assignees[b-gvhmx9ctp0] .chip-main {
color: var(--clr-always-white);
}
.vorgang-card-progress[b-gvhmx9ctp0] {
flex: 1;
min-width: 0;
}