/* ═══════════════════════════════════════════════════════════════════════
RULED SHEET — the shared layer of the house language
═══════════════════════════════════════════════════════════════════════
DESIGN.md → "The Ruled Sheet" / "Where it lives". Plan:
docs/plans/2implement/2026-09-28_ruled-sheet-layer.md (EP-4.1 of
docs/roadmaps/edit-page-refresh.md).
Values, not rules. This file is the ONE place the canonical ruled-sheet
colours are written as hex. A surface aliases them under its own scope
(`--mgr-ink: var(--rs-ink)`) — never restate the hex, never add a
fallback (`var(--rs-ink, #111827)` is another copy of the value).
Literal hex on purpose, never var(--theme-*): content colours must look
identical under every housing theme.
Retiring a legacy token family (--appt-*, --inv-*): alias it to --rs-*
under the revamped page's scope class, on a wrapper INSIDE
{% block content %} — never on :root or , or UnifiedModal content
and every unrevamped consumer recolour with it.
Linked from base_standardized.html, base_buchhaltung.html and
commentary/base_commentary.html, before style-guide.css — so any later
sheet wins at equal specificity. Geist Mono is NOT loaded here: a
surface using .rs-mono adds the same as core/manager.html.
═══════════════════════════════════════════════════════════════════════ */
/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
--rs-ink: #111827;
--rs-ink-hover: #1f2937;
--rs-ink-2: #3d4550;
--rs-body: #374151;
--rs-muted: #6b7280;
--rs-faint: #8b929c;
--rs-line: #e5e8ec;
--rs-line-soft: #eff1f4;
--rs-hover: #f5f6f8;
--rs-sunken: #f7f8fa;
--rs-page: #f6f7f9;
--rs-teal: #0f766e;
--rs-teal-hi: #5eead4; /* teal on dark */
--rs-teal-wash: #ccfbf1; /* ::selection, dashboard accent-soft */
--rs-sel: #eef8f6; /* selection wash */
--rs-pos: #067647;
--rs-neg: #b42318;
--rs-neg-wash: #fef3f2;
--rs-focus: #3b82f6;
--rs-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--rs-radius-control: 6px;
}
/* ── Primitives ────────────────────────────────────────────────────────────
Opt-in classes for revamped surfaces. The shipped surfaces keep their own
rules (.mgr-*, .dash-*, .um-sheet-*); lift from them, do not diverge. */
/* One square sheet per concern. */
.rs-sheet {
background: #ffffff;
border: 1px solid var(--rs-line);
border-radius: 0;
}
/* Small caps: column + field labels / section labels. Structure, never emphasis. */
.rs-caps,
.rs-section {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--rs-muted);
}
.rs-section {
font-size: 0.72rem;
}
/* Numerals on the sheet. */
.rs-mono {
font-family: var(--rs-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* Status: a 7px dot plus a word. */
.rs-st {
--rs-dot: #b6bcc4;
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 12.5px;
color: var(--rs-ink-2);
white-space: nowrap;
}
.rs-st::before {
content: '';
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--rs-dot);
}
.rs-st--ok,
.rs-st--act { --rs-dot: #12b76a; }
.rs-st--sent { --rs-dot: #0e7490; }
.rs-st--plan { --rs-dot: #3d4550; }
.rs-st--off { --rs-dot: #b6bcc4; }
.rs-st--neg { --rs-dot: #d92d20; }
/* Empty is quiet: a centered column inside the sheet, no outline. */
.rs-empty {
padding: 3.5rem 1.5rem;
text-align: center;
color: var(--rs-muted);
}
.rs-empty__icon {
font-size: 1.6rem;
color: #c3c9d0;
}
.rs-empty__title {
margin: 0.8rem 0 0.25rem;
font-size: 1rem;
font-weight: 600;
color: var(--rs-ink);
}
.rs-empty__text {
margin: 0 auto;
max-width: 44ch;
font-size: 0.8125rem;
}
.rs-empty__acts {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.rs-st--warn { --rs-dot: #f79009; }
/* ── Property table (settings register, plan 2026-09-29 § 5.10) ─────────────
Keys in a 170px small-caps column, values beside them, an optional hint
under the value. A surface that wants the margin column (hints beside the
value) opts in with its own media query — see settings-register.css. The
editors' own .pult property table predates this and keeps its rules. */
.rs-props {
border-top: 1px solid var(--rs-line-soft);
}
.rs-prop {
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
align-items: center;
column-gap: 1rem;
min-height: 44px;
padding: 0 1.25rem;
border-bottom: 1px solid var(--rs-line-soft);
}
.rs-prop:last-child {
border-bottom: 0;
}
.rs-prop__key {
margin: 0;
padding: 0.35rem 0;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.09em;
line-height: 1.35;
text-transform: uppercase;
color: var(--rs-muted);
overflow-wrap: anywhere;
hyphens: auto;
}
.rs-prop__val {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.6rem;
padding: 0.3rem 0;
font-size: 13.5px;
color: var(--rs-ink);
}
.rs-prop__hint {
grid-column: 2;
max-width: 64ch;
margin: -0.3rem 0 0.6rem;
font-size: 12.5px;
line-height: 1.45;
color: var(--rs-muted);
}
.rs-prop__ro {
color: var(--rs-ink-2);
}
.rs-prop__empty {
color: var(--rs-faint);
}
/* A field on the sheet: borderless until hover or focus, 6px control radius.
Works on input, select and textarea. */
.rs-field {
display: block;
width: calc(100% + 0.5rem);
max-width: 460px;
min-height: 32px;
margin-left: -0.5rem;
padding: 0.3rem 0.5rem;
border: 1px solid transparent;
border-radius: var(--rs-radius-control);
background: transparent;
color: var(--rs-ink);
font: inherit;
font-size: 13.5px;
line-height: 1.4;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.rs-field::placeholder {
color: var(--rs-faint);
}
.rs-field:hover {
background: var(--rs-hover);
}
.rs-field:focus {
outline: none;
background: #ffffff;
border-color: var(--rs-focus);
box-shadow: 0 0 0 1px var(--rs-focus);
}
.rs-field[readonly],
.rs-field:disabled {
background: transparent;
color: var(--rs-ink-2);
}
select.rs-field {
appearance: auto;
width: auto;
min-width: 200px;
}
textarea.rs-field {
max-width: 640px;
min-height: 6rem;
resize: vertical;
}
.rs-field.rs-mono {
font-size: 13px;
}
.rs-field--num {
width: 88px;
}
.rs-field.is-invalid {
border-color: var(--rs-neg);
}
.rs-field-err {
flex-basis: 100%;
font-size: 12.5px;
color: var(--rs-neg);
}
.rs-field-err:empty {
display: none;
}
/* Square switch with an Ink thumb, plus the word „An“ / „Aus“. A styled
checkbox, so it posts like one:
*/
.rs-switch {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 32px;
margin: 0;
font-size: 13px;
color: var(--rs-ink-2);
white-space: nowrap;
cursor: pointer;
}
.rs-switch > input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.rs-switch__track {
position: relative;
flex: none;
width: 30px;
height: 16px;
border: 1px solid #c3c9d0;
background: #ffffff;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.rs-switch__track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
background: #b6bcc4;
transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.15s ease;
}
.rs-switch > input:checked + .rs-switch__track {
background: var(--rs-ink);
border-color: var(--rs-ink);
}
.rs-switch > input:checked + .rs-switch__track::after {
transform: translateX(14px);
background: #ffffff;
}
.rs-switch > input:focus-visible + .rs-switch__track {
outline: 2px solid var(--rs-focus);
outline-offset: 2px;
}
.rs-switch > input:disabled ~ * {
opacity: 0.55;
cursor: not-allowed;
}
.rs-switch:hover {
color: var(--rs-ink);
}
.rs-switch__on,
.rs-switch > input:checked ~ .rs-switch__off {
display: none;
}
.rs-switch > input:checked ~ .rs-switch__on {
display: inline;
}
@media (prefers-reduced-motion: reduce) {
.rs-switch__track,
.rs-switch__track::after {
transition: none;
}
}
/* Meter: small-caps label, a mono figure, a 3px track, one muted line.
--warn / --danger recolour the fill. Without a limit, drop the track. */
.rs-meter {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 0.3rem 0.5rem;
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
text-align: left;
text-decoration: none;
}
a.rs-meter:hover,
a.rs-meter:focus-visible {
color: inherit;
text-decoration: none;
}
.rs-meter__figure {
font-size: 12px;
color: var(--rs-ink-2);
white-space: nowrap;
}
.rs-meter__track {
grid-column: 1 / -1;
display: block;
height: 3px;
background: var(--rs-line-soft);
}
.rs-meter__fill,
.rs-meter__fill.tw-progress-fill {
display: block;
width: 0;
height: 100%;
border-radius: 0;
background: var(--rs-teal);
transition: width 0.3s ease;
}
.rs-meter--warn .rs-meter__fill {
background: #f79009;
}
.rs-meter--danger .rs-meter__fill {
background: #d92d20;
}
.rs-meter__note {
grid-column: 1 / -1;
font-size: 11.5px;
color: var(--rs-muted);
}
a.rs-meter:hover .rs-meter__label {
color: var(--rs-ink);
}
a.rs-meter:hover .rs-meter__track {
background: var(--rs-line);
}