would silently fall out of alignment). The first column widens to make
room for it; nothing else in these templates moves. */
.rt__ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt__title { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt__title--gone { color: var(--muted); font-style: italic; }
/* per-screen column templates */
.rt--myreq .rt__head, .rt--myreq .rt__row { grid-template-columns: 220px 96px 1fr 140px 128px 120px; }
.rt--allreq .rt__head, .rt--allreq .rt__row { grid-template-columns: 200px 1fr 140px 130px 128px 120px 130px; }
/* mobile cards — hidden on desktop */
.rt__card { display: none; }
.rt__card-top { display: flex; justify-content: space-between; align-items: center; }
.rt__badges { display: flex; gap: 6px; flex-wrap: wrap; }
/* chip filter hides non-matching rows/cards (wins over the mobile display rule) */
.rt__row.filtered, .rt__card.filtered { display: none !important; }
@media (max-width: 760px) {
.rt [data-desk] { display: none !important; }
.rt__card[data-mob] {
display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none;
}
.rt__card[data-mob]:last-child { border-bottom: none; }
}
/* ---- Payments (accountant): approved-to-pay cards + actions (T-046) ---- */
.pay-note { margin-bottom: var(--space-md); }
.pay-list { display: flex; flex-direction: column; gap: .8rem; }
.pay-card {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line);
border-radius: 14px; padding: 1rem 1.2rem; box-shadow: var(--shadow-sm);
}
.pay-card__info { min-width: 0; flex: 1 1 16rem; }
.pay-card__head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: .3rem; }
.pay-card__amt { font-size: 1.05rem; }
.pay-card__actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pay-card__actions form { margin: 0; }
.pay-decline { display: flex; align-items: center; gap: .5rem; }
.pay-decline .input { width: 15rem; max-width: 100%; }
@media (max-width: 640px) {
.pay-card__actions, .pay-decline { width: 100%; }
.pay-decline .input { flex: 1; width: auto; }
}
/* ---- Invite: form + role-capabilities panel (T-046) ---- */
.invite-layout { display: grid; grid-template-columns: minmax(0, 34rem) 1fr; gap: var(--space-lg); align-items: start; }
.caps-card__title { margin: 0 0 var(--space-md); font-size: 1.05rem; }
.caps { margin: 0; }
.caps dt { margin-top: var(--space-md); }
.caps dt:first-child { margin-top: 0; }
.caps dd { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
@media (max-width: 860px) { .invite-layout { grid-template-columns: 1fr; } }
/* Audit viewer (T-043) */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); font-size: .9rem; }
/* scoped to admin forms only — a bare global `.warn` would also restyle the
receipt-upload screen's warning (templates/requests/_receipts.html), out of scope (Diablo S1) */
.admin-form .warn { color: var(--warn-fg); background: var(--warn-bg); border-radius: var(--radius);
padding: .5rem .75rem; font-size: .9rem; margin: 0 0 var(--space-md); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
/* owner report 2026-09-04: max-width alone does nothing without these three — a long
unbreakable hex/email string overflows its grid cell into the next column instead of
truncating. display:block also needed: an inline span's overflow box is its line, not
the width constraint, so overflow:hidden/text-overflow never engage. */
.mono-clip { display: block; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.audit-change { color: var(--muted); font-size: .85rem; }
/* ============================================================================
Modal + toast layer (T-047, canonical mockup: renderModal/renderToasts)
============================================================================ */
.modal[hidden] { display: none; }
.modal {
position: fixed; inset: 0; z-index: 70;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal__backdrop {
position: absolute; inset: 0;
background: rgba(2, 6, 23, .55); backdrop-filter: blur(2px);
animation: fa-fadein .18s ease;
}
.modal__dialog {
position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
box-shadow: 0 24px 70px rgba(2, 6, 23, .4); padding: 24px;
animation: fa-pop .18s ease;
}
.modal__title { margin: 0 0 4px; font-weight: 600; font-size: 18px; color: var(--text); }
.modal__hint { margin: 0 0 16px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.modal__summary {
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
padding: 13px 15px; background: var(--panel2); border-radius: 10px; margin-bottom: 18px;
}
.modal__summary-amt { font-weight: 700; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.modal__summary-id { font-weight: 600; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.modal__summary-sub { font-size: 12.5px; color: var(--muted); }
.modal .input, .modal textarea.input { width: 100%; }
.modal__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.modal__actions { display: flex; gap: 10px; margin-top: 20px; }
.modal__actions .btn { min-height: 44px; }
.modal__actions .btn[type="submit"], .modal__actions .btn--confirm { flex: 1; }
#toast-root {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 80;
display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.toast {
display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px;
background: var(--chrome); color: #fff; box-shadow: 0 12px 34px rgba(2, 6, 23, .34);
font-size: 13.5px; font-weight: 500; pointer-events: auto; animation: fa-toastin .22s ease;
}
.toast__icon { display: flex; }
.toast--ok .toast__icon { color: var(--ok-fg); }
.toast--crit .toast__icon { color: var(--crit-fg); }
@keyframes fa-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fa-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fa-toastin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body.modal-open { overflow: hidden; }
/* ============================================================================
Request form + detail card (T-048, canonical mockup renderForm/renderDetailCard)
============================================================================ */
.form-card { max-width: 40rem; margin: 0 auto; }
.req-form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: .4rem; }
/* T-081: `display: grid` above beats the user agent's own `[hidden] { display: none }`,
so a conditional payment field marked hidden would still be drawn — and a field the
form does not apply is worse than clutter here, it invites somebody to type an account
number into a box the server is about to ignore. Same explicit pairing the modal and
the queue card already need (`.modal[hidden]`, `.req-card[hidden]`). */
.field[hidden] { display: none; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.field__row { display: flex; gap: .6rem; }
.req-form__amount { flex: 1; }
.req-form__ccy { max-width: 7rem; }
.confirm { display: flex; gap: .5rem; align-items: center; font-size: 13.5px; color: var(--text); }
.req-form__submit { margin-top: .2rem; }
.req-detail-card { max-width: 40rem; }
.panel__actions--detail { display: flex; gap: .6rem; margin-top: var(--space-md); }
/* «Shared with» — who else may open this request (T-078). */
.shared-with { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.shared-with__row { display: flex; align-items: center; gap: var(--space-sm); min-height: 32px; }
.shared-with__who { color: var(--text); font-size: 13.5px; }
.shared-with__drop { margin-left: auto; display: flex; }
.shared-with__drop .btn { min-height: 32px; padding: .2rem .5rem; font-size: 12.5px; font-weight: 500; }
.shared-with__add { margin-top: var(--space-sm); }
.shared-with__add .input { max-width: 18rem; }
.shared-with__hint { font-size: 12px; margin: .35rem 0 0; }
.reject-banner {
border: 1px solid var(--crit-fg); border-radius: 12px; padding: 12px 15px;
background: color-mix(in srgb, var(--crit-fg) 8%, transparent); margin-bottom: 4px;
}
.reject-banner__title { font-weight: 600; font-size: 12.5px; color: var(--crit-fg); margin-bottom: 4px; }
.reject-banner__body { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.5; }
/* ============================================================================
Sign-in card + profile (T-049, canonical mockup renderSignin)
============================================================================ */
.signin-body { min-height: 100vh; background: var(--bg); color: var(--text);
font-family: var(--font-body); margin: 0; }
.signin { min-height: 100vh; display: flex; flex-direction: column;
align-items: center; justify-content: center; padding: 24px; gap: 14px; }
.signin__lang { display: flex; align-items: center; gap: .4rem; font-size: 12px; }
.signin__lang a { color: var(--muted); text-decoration: none; padding: 2px 6px; border-radius: 6px; }
.signin__lang a[aria-current] { color: var(--text); font-weight: 600; }
.auth-card { width: 100%; max-width: 400px; background: var(--panel);
border: 1px solid var(--line); border-radius: 16px; padding: 36px 32px;
box-shadow: 0 12px 40px rgba(2, 6, 23, .10); animation: fa-fadein .3s ease; }
.auth-card__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-card__logo { width: 34px; height: 34px; border-radius: 9px; background: var(--chrome);
color: var(--accent); display: flex; align-items: center; justify-content: center; }
.auth-card__name { font-weight: 600; font-size: 16px; color: var(--text); letter-spacing: -.01em; }
.auth-card__title { margin: 0 0 6px; font-weight: 600; font-size: 20px; color: var(--text); }
.auth-card__sub { margin: 0 0 22px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.auth-card__go { width: 100%; justify-content: center; }
.profile-tg__hint { font-size: .85rem; }
.profile-logout { margin-top: var(--space-md); }
/* Payment card: link to the full request detail (bug fix — accountant view) */
.pay-card__details { display: inline-block; margin-top: .3rem; font-size: .85rem;
color: var(--accent); text-decoration: none; }
.pay-card__details:hover { text-decoration: underline; }
/* Admin all-requests overview (R-008) — section heading above each admin card list */
.section-title { margin: 0 0 var(--space-md); font-size: 1rem; font-weight: 600; color: var(--text); }
/* Pager (all-requests / admin overview) — prev/next + page-size selector */
.pager { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
justify-content: space-between; margin-top: var(--space-md); }
.pager__nav { display: flex; gap: .6rem; align-items: center; }
.pager__sizes { display: flex; gap: .4rem; align-items: center; font-size: .9rem; }
.pager__size { padding: 2px 8px; border-radius: 7px; text-decoration: none;
color: var(--muted); border: 1px solid var(--line); }
.pager__size.is-on { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
/* Extra breathing room between stacked admin cards (e.g. all-requests vs stuck-chains) */
.admin-section-gap { margin-top: var(--space-xl); }
/* Invite modal (T-051): form stacked + role-capabilities hint below the form */
.invite-add { display: flex; flex-direction: column; gap: .6rem; }
.invite-add__hint { font-size: .85rem; }
.caps--modal { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.caps__title { margin: 0 0 var(--space-sm); font-size: .95rem; font-weight: 600; color: var(--text); }
.caps__list { margin: 0; }
/* ============================================================================
Admin flat-row tables (T-050) — restyle the 7 admin screens to the canonical
`.rt` grid (design-system/canonical-source.dc.html renderUsers/renderCollection/
renderRules/renderAudit). NEW selectors only — no edit to shared classes, so the
already-shipped operational screens (.rt--myreq/--allreq) are untouched (Diablo S1).
Rows here are (they carry inline forms), not
link-rows. ============= */
.rt--admin .rt__row { cursor: default; }
.rt--admin .rt__row:hover { background: transparent; } /* forms inside → no row-hover */
.rt__act { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.rt__act form { margin: 0; display: inline-flex; gap: .4rem; }
.rt__cell-form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.rt__cell-form .input { min-width: 0; }
.rt__chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rt__chain .badge { background: var(--neu-bg); color: var(--neu-fg); }
/* per-screen desktop column templates */
/* T-072: three columns since the per-user department cell was removed (ADR-0016 —
a project belongs to a request, so there is no per-person replacement column). */
.rt--users .rt__head, .rt--users .rt__row { grid-template-columns: minmax(0,1fr) 160px 130px; }
.rt--coll .rt__head, .rt--coll .rt__row { grid-template-columns: minmax(0,1fr) 120px 170px; }
/* T-072: eight columns — the department column became project, and "author" joined it
as the third optional matching dimension (ADR-0016). */
.rt--rules .rt__head, .rt--rules .rt__row { grid-template-columns: 120px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr) 60px 88px 104px; }
/* T-092: fourth column for the revoke action, same 130px width as .rt--users' own act column. */
.rt--deleg .rt__head, .rt--deleg .rt__row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 210px 130px; }
.rt--audit .rt__head, .rt--audit .rt__row { grid-template-columns: 150px 140px 130px 104px 120px minmax(0,1fr); }
.rt--areq .rt__head, .rt--areq .rt__row { grid-template-columns: 112px minmax(0,1fr) 150px minmax(0,1fr) 118px 110px; }
.rt--secrets .rt__head, .rt--secrets .rt__row { grid-template-columns: minmax(0,1fr) 150px 220px; }
.rt--inflt .rt__head, .rt--inflt .rt__row { grid-template-columns: 70px 130px minmax(0,1fr) 160px minmax(0,1.4fr); }
/* mobile — admin tables keep their columns AND their header row, scrolling
horizontally like the old `.table-wrap` did. A label-less single-column stack
would drop the column headers that act as field labels on the data-dense screens
(audit/rules) — a regression vs the old tables (Diablo S2). Operational screens
(.rt--myreq/--allreq) still use their dedicated stacked cards. */
@media (max-width: 760px) {
.rt--admin { overflow-x: auto; }
.rt--admin .rt__head[data-desk] { display: grid; } /* overrides the global `.rt [data-desk]{display:none}` */
.rt--admin .rt__head, .rt--admin .rt__row { min-width: 680px; }
}
/* prototype-style add/edit form card above admin lists (categories/projects/
delegations/rules) — replaces the old inline style="" attributes */
.admin-form { margin-bottom: var(--space-lg); }
.admin-form--inline { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.admin-form--grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.admin-form--grid .span-2 { grid-column: 1 / -1; }
.admin-form__range { display: flex; gap: .4rem; }
@media (max-width: 640px) { .admin-form--grid { grid-template-columns: 1fr; } }
/* T-099: who-am-I corner — passive, never competes with topbar(20)/skip-link(30)/
modal(70)/toast(80) for attention. */
.user-badge {
position: fixed; left: var(--space-sm); bottom: var(--space-sm); z-index: 10;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
color: var(--muted); font-size: 11px; padding: .3rem .55rem; pointer-events: none;
max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}