/* Rukukwe portal components.
   The design system ships its primitives as React with inline styles; this is the same visual
   contract expressed as classes so Razor components stay declarative. Every value comes from a
   token in tokens.css: no raw colours, no raw radii. Hover moves one surface step, focus is always
   --shadow-focus, and hierarchy comes from borders before shadows. */

/* ---- base ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
    font: var(--text-body);
    color: var(--ink);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv11', 'ss01';
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.rk-num { font-variant-numeric: tabular-nums; }
.rk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- app shell ----------------------------------------------------------------------------- */
/* The shell fills the window: no page gutter, no frame around it, nothing centred. The sidebar and
   the page run edge to edge, which is what a working tool wants from the space it is given. */
.rk-shell {
    min-height: 100vh;
    background: var(--surface-app);
    padding: 0;
}

.rk-shell-frame {
    display: flex;
    background: var(--surface-app);
    min-height: 100vh;
    width: 100%;
}

.rk-main {
    flex: 1;
    min-width: 0;
    padding: var(--main-padding);
    background: var(--surface-app);
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
}

/* ---- sidebar ------------------------------------------------------------------------------- */
.rk-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-5);
    background: var(--surface-app);
    border-right: 1px solid var(--border);
    /* Full height and pinned, so the navigation is always where it was left while the page scrolls
       under it. It scrolls on its own when a tenant has more sections than the window is tall. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    /* It still scrolls (wheel, trackpad, touch, keyboard), but draws no scrollbar between it and the page (#162). */
    scrollbar-width: none;
}
.rk-sidebar::-webkit-scrollbar { display: none; }

.rk-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-1);
    min-height: 24px;
}

.rk-sidebar-brand-name {
    flex: 1;
    min-width: 0;
    font: 600 18px/24px var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rk-sidebar-brand-logo { height: 24px; width: auto; max-width: 140px; object-fit: contain; }

.rk-sidebar-nav { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; }

.rk-sidebar-foot { display: flex; flex-direction: column; gap: var(--space-4); }

.rk-nav-group { display: flex; flex-direction: column; gap: var(--space-0-5); }

.rk-nav-overline {
    font: var(--text-overline);
    letter-spacing: var(--overline-tracking);
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 0 var(--space-3) var(--space-1-5);
}

/* Workspace switcher: a white bordered control, not a nav row. */
.rk-workspace {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    height: var(--nav-item-height);
    padding: 0 var(--space-2-5);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    font: var(--text-body-medium);
    color: var(--ink);
    text-align: left;
}

.rk-workspace-initial {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--surface-inverse);
    color: var(--ink-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 11px/1 var(--font-sans);
}

.rk-workspace-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- nav item ------------------------------------------------------------------------------ */
.rk-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    height: var(--nav-item-height);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink-secondary);
    font: var(--text-body);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.rk-nav-item:hover { background: var(--surface-sunken); color: var(--ink-secondary); text-decoration: none; }

.rk-nav-item.is-active {
    background: var(--surface-hover);
    color: var(--ink);
    font: var(--text-body-medium);
}

.rk-nav-item.is-active .rk-icon { color: var(--ink); }

.rk-nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rk-nav-item-count { font: var(--text-caption-medium); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.rk-nav-item--nested { padding: 0 var(--space-3) 0 38px; }

/* Expandable groups are <details>: no JavaScript, and they keep working under static rendering. */
.rk-nav-expander { display: contents; }
.rk-nav-expander > summary { list-style: none; }
.rk-nav-expander > summary::-webkit-details-marker { display: none; }
.rk-nav-expander > summary .rk-nav-chevron { transition: transform var(--duration-fast) var(--ease-standard); }
.rk-nav-expander[open] > summary .rk-nav-chevron { transform: rotate(180deg); }

.rk-nav-children { position: relative; display: flex; flex-direction: column; gap: var(--space-0-5); }
.rk-nav-children::before {
    content: '';
    position: absolute;
    left: 21px; top: 4px; bottom: 16px;
    width: 1px;
    background: var(--border-strong);
}

/* ---- promo card ---------------------------------------------------------------------------- */
.rk-promo {
    background: var(--surface-sunken);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
}

.rk-promo-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--text-section-title);
    color: var(--ink);
}

.rk-promo-body { font: var(--text-small); color: var(--ink-secondary); }

/* ---- top bar ------------------------------------------------------------------------------- */
.rk-topbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.rk-topbar-titles { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }

.rk-page-title {
    margin: 0;
    font: var(--text-page-title);
    letter-spacing: var(--page-title-tracking);
    color: var(--ink);
}

.rk-page-subtitle { font: var(--text-caption); color: var(--ink-muted); }

.rk-topbar-divider { width: 1px; height: 24px; background: var(--border); }

.rk-userchip {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    height: var(--control-height-md);
    padding: 0 var(--space-2) 0 var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    color: var(--ink-muted);
    cursor: pointer;
}

.rk-userchip:hover { background: var(--surface-sunken); text-decoration: none; }
.rk-userchip-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- icon ---------------------------------------------------------------------------------- */
.rk-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; color: currentColor; }

/* Circular well: stat cards and activity rows sit their icon in a *-soft disc. */
.rk-icon-well {
    width: var(--icon-well);
    height: var(--icon-well);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rk-icon-well--primary { background: var(--primary-soft); color: var(--primary-soft-ink); }
.rk-icon-well--success { background: var(--success-soft); color: var(--success-ink); }
.rk-icon-well--danger { background: var(--danger-soft); color: var(--danger-ink); }
.rk-icon-well--warning { background: var(--warning-soft); color: var(--warning-ink); }
.rk-icon-well--info { background: var(--info-soft); color: var(--info-ink); }
.rk-icon-well--neutral { background: var(--neutral-soft); color: var(--neutral-ink); }

/* ---- button -------------------------------------------------------------------------------- */
.rk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height-md);
    padding: 0 var(--space-4);
    font: var(--text-body-medium);
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.rk-btn:hover { text-decoration: none; }
.rk-btn--sm { height: var(--control-height-sm); padding: 0 var(--space-3); font: var(--text-caption-medium); font-size: 13px; gap: var(--space-1-5); }
.rk-btn--lg { height: var(--control-height-lg); padding: 0 var(--space-5); }
.rk-btn--block { display: flex; width: 100%; }

.rk-btn--primary { background: var(--primary); color: var(--ink-on-primary); }
.rk-btn--primary:hover { background: var(--primary-hover); color: var(--ink-on-primary); }
.rk-btn--primary:active { background: var(--primary-press); }

.rk-btn--secondary { background: var(--surface-card); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-xs); }
.rk-btn--secondary:hover { background: var(--surface-sunken); color: var(--ink); }
.rk-btn--secondary:active { background: var(--surface-hover); }

.rk-btn--ghost { background: transparent; color: var(--ink-secondary); }
.rk-btn--ghost:hover { background: var(--surface-hover); color: var(--ink-secondary); }

.rk-btn--soft { background: var(--primary-soft); color: var(--primary-soft-ink); }
.rk-btn--soft:hover { background: var(--violet-200); color: var(--primary-soft-ink); }

.rk-btn--inverse { background: var(--surface-inverse); color: var(--ink-inverse); }
.rk-btn--inverse:hover { background: var(--grey-800); color: var(--ink-inverse); }

.rk-btn--danger { background: var(--danger); color: #FFFFFF; }
.rk-btn--danger:hover { background: var(--danger-hover); color: #FFFFFF; }

.rk-btn:disabled,
.rk-btn[aria-disabled="true"] {
    background: var(--surface-sunken);
    color: var(--ink-disabled);
    border-color: var(--border);
    box-shadow: none;
    cursor: not-allowed;
}

.rk-btn--ghost:disabled { background: transparent; border-color: transparent; }

/* ---- icon button --------------------------------------------------------------------------- */
.rk-iconbtn {
    position: relative;
    width: var(--control-height-md);
    height: var(--control-height-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
}

.rk-iconbtn:hover { background: var(--surface-sunken); text-decoration: none; color: var(--ink-secondary); }
.rk-iconbtn--sm { width: var(--control-height-sm); height: var(--control-height-sm); }
.rk-iconbtn--lg { width: var(--control-height-lg); height: var(--control-height-lg); }
.rk-iconbtn--round { border-radius: var(--radius-full); }
.rk-iconbtn--ghost { border-color: transparent; background: transparent; }
.rk-iconbtn:disabled { color: var(--ink-disabled); cursor: not-allowed; }

.rk-iconbtn-dot {
    position: absolute;
    top: 8px; right: 9px;
    width: 7px; height: 7px;
    border-radius: var(--radius-full);
    background: var(--danger);
    box-shadow: 0 0 0 2px var(--surface-card);
}

/* ---- badge --------------------------------------------------------------------------------- */
.rk-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    height: 24px;
    padding: 0 var(--space-2-5);
    border-radius: var(--radius-full);
    font: var(--text-caption-medium);
    font-variant-numeric: tabular-nums;
    background: var(--neutral-soft);
    color: var(--neutral-ink);
}

.rk-badge--sm { height: 20px; padding: 0 var(--space-2); }
.rk-badge--primary { background: var(--primary-soft); color: var(--primary-soft-ink); }
.rk-badge--success { background: var(--success-soft); color: var(--success-ink); }
.rk-badge--danger { background: var(--danger-soft); color: var(--danger-ink); }
.rk-badge--warning { background: var(--warning-soft); color: var(--warning-ink); }
.rk-badge--info { background: var(--info-soft); color: var(--info-ink); }
.rk-badge--neutral { background: var(--neutral-soft); color: var(--neutral-ink); }
.rk-badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }

/* ---- avatar -------------------------------------------------------------------------------- */
.rk-avatar {
    border-radius: var(--radius-full);
    flex-shrink: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-soft);
    color: var(--neutral-ink);
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1;
}

.rk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rk-avatar--tint-0 { background: var(--primary-soft); color: var(--primary-soft-ink); }
.rk-avatar--tint-1 { background: var(--info-soft); color: var(--info-ink); }
.rk-avatar--tint-2 { background: var(--success-soft); color: var(--success-ink); }
.rk-avatar--tint-3 { background: var(--warning-soft); color: var(--warning-ink); }

.rk-avatar-group { display: inline-flex; align-items: center; }
.rk-avatar-group > .rk-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface-app); }
.rk-avatar-group > .rk-avatar:first-child { margin-left: 0; }

/* ---- card ---------------------------------------------------------------------------------- */
.rk-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rk-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--card-padding) var(--card-padding) 0;
}

.rk-card-heading { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.rk-card-title { margin: 0; font: var(--text-section-title); color: var(--ink); }
.rk-card-subtitle { margin: 2px 0 0; font: var(--text-caption); color: var(--ink-muted); }
.rk-card-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.rk-card-body { padding: var(--card-padding); flex: 1; min-width: 0; }
.rk-card-body--flush { padding: 0; }

/* ---- form controls ------------------------------------------------------------------------- */
.rk-field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.rk-label { font: var(--text-caption-medium); font-size: 13px; color: var(--ink); }
.rk-label-optional { color: var(--ink-muted); font-weight: 400; }
.rk-hint { font: var(--text-caption); color: var(--ink-muted); }
.rk-error { font: var(--text-caption); color: var(--danger-ink); }

.rk-control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.rk-control:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.rk-control.is-invalid { border-color: var(--danger); }
.rk-control--sm { height: var(--control-height-sm); }

.rk-control input,
.rk-control select,
.rk-control textarea {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: var(--text-body);
    color: var(--ink);
    padding: 0;
    box-shadow: none;
}

.rk-control input:disabled, .rk-control select:disabled { color: var(--ink-disabled); }
.rk-control:has(input:disabled), .rk-control:has(select:disabled) { background: var(--surface-sunken); }
.rk-control select { appearance: none; cursor: pointer; }
.rk-control textarea { resize: vertical; padding: var(--space-2) 0; }
.rk-control--area { height: auto; align-items: flex-start; }

.rk-kbd {
    font: var(--text-caption-medium);
    color: var(--ink-secondary);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1-5);
}

/* Switch: a checkbox with the track drawn on its label. */
.rk-switch { display: inline-flex; align-items: center; cursor: pointer; }
.rk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.rk-switch-track {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    transition: background var(--duration-fast) var(--ease-standard);
}

.rk-switch-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: var(--radius-full);
    background: var(--surface-card);
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.rk-switch input:checked + .rk-switch-track { background: var(--primary); }
.rk-switch input:checked + .rk-switch-track::after { transform: translateX(16px); }
.rk-switch input:focus-visible + .rk-switch-track { box-shadow: var(--shadow-focus); }
.rk-switch--sm .rk-switch-track { width: 32px; height: 18px; }
.rk-switch--sm .rk-switch-track::after { width: 14px; height: 14px; }
.rk-switch--sm input:checked + .rk-switch-track::after { transform: translateX(14px); }

/* ---- table --------------------------------------------------------------------------------- */
.rk-table-wrap { width: 100%; overflow-x: auto; }
.rk-table { width: 100%; border-collapse: separate; border-spacing: 0; }

.rk-table thead th {
    background: var(--surface-sunken);
    font: var(--text-caption-medium);
    color: var(--ink-secondary);
    text-align: left;
    padding: var(--space-2-5) var(--space-3);
    white-space: nowrap;
}

.rk-table thead th:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.rk-table thead th:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

.rk-table tbody td {
    height: var(--table-row-height);
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.rk-table tbody tr:last-child td { border-bottom: 0; }
.rk-table tbody tr:hover td { background: var(--surface-app); }
.rk-table .rk-cell-end { text-align: right; }
.rk-table .rk-cell-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- tabs ---------------------------------------------------------------------------------- */
.rk-tabs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--surface-sunken);
    border-radius: var(--radius-full);
}

.rk-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    height: var(--control-height-sm);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ink-secondary);
    font: var(--text-caption-medium);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-standard);
}

.rk-tab:hover { color: var(--ink); text-decoration: none; }
.rk-tab.is-active { background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-xs); }

/* ---- feedback ------------------------------------------------------------------------------ */
.rk-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font: var(--text-small);
    background: var(--neutral-soft);
    color: var(--neutral-ink);
}

.rk-alert--danger { background: var(--danger-soft); color: var(--danger-ink); }
.rk-alert--success { background: var(--success-soft); color: var(--success-ink); }
.rk-alert--warning { background: var(--warning-soft); color: var(--warning-ink); }
.rk-alert--info { background: var(--info-soft); color: var(--info-ink); }
.rk-alert-body { flex: 1; min-width: 0; }
.rk-alert-title { font: var(--text-body-medium); margin: 0 0 2px; }

.rk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--ink-muted);
}

.rk-empty-title { font: var(--text-section-title); color: var(--ink); }
.rk-empty-body { font: var(--text-small); color: var(--ink-muted); max-width: 42ch; }

/* ---- utilities ----------------------------------------------------------------------------- */
.rk-row { display: flex; align-items: center; gap: var(--space-2); }
.rk-row--between { justify-content: space-between; }
.rk-col { display: flex; flex-direction: column; gap: var(--space-2); }
.rk-grid { display: grid; gap: var(--grid-gap); }
.rk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rk-spacer { flex: 1; }
.rk-muted { color: var(--ink-muted); }
.rk-secondary { color: var(--ink-secondary); }
.rk-small { font: var(--text-small); }
.rk-caption { font: var(--text-caption); }

/* ---- responsive ---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .rk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .rk-shell-frame { flex-direction: column; }
    .rk-sidebar {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        /* Stacked above the page rather than beside it, so it takes its own height and scrolls with
           the page instead of holding the whole window. */
        position: static;
        height: auto;
        overflow-y: visible;
    }
    .rk-sidebar-nav { gap: var(--space-3); }
    .rk-main { padding: var(--space-5); }
    .rk-grid--4, .rk-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- standalone input ---------------------------------------------------------------------- */
/* For forms built with Blazor's InputText, where wrapping every control in .rk-control would mean
   a div per field. Same shell, applied to the element itself. */
.rk-input {
    width: 100%;
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    background: var(--surface-card);
    color: var(--ink);
    font: var(--text-body);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.rk-input::placeholder { color: var(--ink-disabled); }
.rk-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.rk-input:disabled, .rk-input[readonly] { background: var(--surface-sunken); color: var(--ink-secondary); }
.rk-input.invalid { border-color: var(--danger); }

/* Blazor's own validation output, so forms report errors in the design's voice. */
.validation-message { display: block; font: var(--text-caption); color: var(--danger-ink); }
.valid.modified:not([type=checkbox]) { border-color: var(--border-strong); }
.invalid { border-color: var(--danger); }

/* ---- auth pages ------------------------------------------------------------------------------ */
/* Sign in and sign up: the form on the left, what the product does on the right. The two panels
   wrap on a narrow window, where the preview drops away rather than pushing the form below the
   fold. */
.rk-auth {
    min-height: 100vh;
    box-sizing: border-box;
    background: var(--surface-card);
    display: flex;
}

.rk-auth-split { flex: 1; display: flex; flex-wrap: wrap; background: var(--surface-card); }

.rk-auth-panel {
    flex: 1 1 440px;
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-10);
    box-sizing: border-box;
    min-height: 100vh;
}

.rk-auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.rk-auth-brand { font: 600 18px/24px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.rk-auth-switch { font: var(--text-small); color: var(--ink-muted); }

.rk-auth-middle { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-10) 0; }
.rk-auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 28px; }

/* The segmented control. The pill is a real element so it can slide; under static rendering the
   page it lands on decides where it sits, and the slide becomes the entry movement. */
.rk-segment {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--space-1);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}

.rk-segment-pill {
    position: absolute;
    top: var(--space-1);
    bottom: var(--space-1);
    left: var(--space-1);
    width: calc(50% - var(--space-1));
    background: var(--surface-card);
    border-radius: 6px;
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-slow) var(--ease-standard);
}

.rk-segment--signup .rk-segment-pill { transform: translateX(100%); }

.rk-segment-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    font: 500 13px/18px var(--font-sans);
    color: var(--ink-muted);
    transition: color var(--duration-base) var(--ease-standard);
}

.rk-segment-tab.is-active { color: var(--ink); }
.rk-segment-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* The form fades up as it arrives, the same movement the design makes when the tab changes; here
   the change is a navigation, so it plays on load. */
.rk-auth-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    animation: rk-auth-in var(--duration-slow) var(--ease-standard) both;
}

@keyframes rk-auth-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.rk-auth-heading { display: flex; flex-direction: column; gap: 6px; }
.rk-auth-heading h1 { margin: 0; font: var(--text-page-title); letter-spacing: var(--page-title-tracking); color: var(--ink); }
.rk-auth-sub { margin: 0; font: var(--text-body); color: var(--ink-muted); text-wrap: pretty; }

.rk-auth-step {
    font: 600 11px/16px var(--font-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.rk-auth-fields { display: flex; flex-direction: column; gap: 18px; }
.rk-auth-note { font: var(--text-caption); color: var(--ink-muted); text-align: center; text-wrap: pretty; }

.rk-auth-foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font: var(--text-caption);
    color: var(--ink-muted);
}

.rk-auth-foot-links { display: flex; gap: var(--space-4); }

/* A message inside the form: the reason a sign-in was refused, or the note that an email is
   already taken. Tone carries the meaning and the icon repeats it. */
.rk-auth-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    font: var(--text-small);
}

.rk-auth-msg--danger { background: var(--danger-soft); color: var(--danger-ink); }
.rk-auth-msg--warning { background: var(--warning-soft); color: var(--warning-ink); }
.rk-auth-msg--success { background: var(--success-soft); color: var(--success-ink); }
.rk-auth-msg-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }

/* The email carried into the second step, with a way back to change it. */
.rk-auth-email {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--control-height-md);
    padding: 0 6px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-app);
}

.rk-auth-email-value {
    flex: 1;
    min-width: 0;
    font: var(--text-body);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Password strength: four bars that fill as the password improves. */
.rk-strength { display: flex; flex-direction: column; gap: var(--space-2); }
.rk-strength-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
.rk-strength-bar { height: 4px; border-radius: var(--radius-full); background: var(--border); transition: background var(--duration-base) var(--ease-standard); }
.rk-strength-bar.is-weak { background: var(--danger); }
.rk-strength-bar.is-fair { background: var(--warning); }
.rk-strength-bar.is-good { background: var(--success); }
.rk-strength-label { font: var(--text-caption); color: var(--ink-muted); }

/* Choosing between clinics when an account opens more than one. */
.rk-clinics { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }

.rk-clinic {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 16px;
    border: 0;
    border-top: 1px solid var(--border);
    background: var(--surface-card);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--font-sans);
    transition: background var(--duration-fast) var(--ease-standard);
}

.rk-clinic:first-child { border-top: 0; }
.rk-clinic:hover { background: var(--surface-app); }
.rk-clinic:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rk-clinic-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-clinic-name { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.rk-clinic-meta { font: var(--text-caption); color: var(--ink-muted); }

/* What the product does, beside the form. An anonymous page, so this is fixed copy and never a
   real tenant's data. */
.rk-auth-preview {
    flex: 1 1 440px;
    margin: var(--space-3);
    border-radius: var(--radius-xl);
    background: var(--surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px var(--space-10);
    box-sizing: border-box;
}

.rk-auth-preview-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-8); }
.rk-auth-preview h2 { margin: 0; font: 600 28px/36px var(--font-sans); letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.rk-auth-preview p { margin: 0; font: var(--text-body); color: var(--ink-secondary); text-wrap: pretty; }
.rk-auth-preview-copy { display: flex; flex-direction: column; gap: 10px; }

.rk-preview-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.rk-preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); }
.rk-preview-title { display: flex; align-items: center; gap: var(--space-2); font: 600 16px/24px var(--font-sans); color: var(--ink); }
.rk-preview-date { font: var(--text-caption); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rk-preview-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); }
.rk-preview-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rk-preview-client { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.rk-preview-service { font: var(--text-caption); color: var(--ink-muted); }
.rk-preview-time { font: var(--text-small); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

.rk-channels { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.rk-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    background: var(--surface-card);
    border: 1px solid var(--border);
    font: 500 12px/16px var(--font-sans);
    color: var(--ink-secondary);
}

/* Below this the preview is more in the way than it is worth, and the form takes the window. */
@media (max-width: 900px) {
    .rk-auth-preview { display: none; }
    .rk-auth-panel { padding: var(--space-6); min-height: 100vh; }
}

/* ---- dashboard ------------------------------------------------------------------------------ */
/* A stat tile: the icon well and the figure on one line, detail underneath. */
.rk-stat {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5);
}

.rk-stat-body { min-width: 0; }

.rk-stat-value {
    font: var(--text-stat-value);
    color: var(--ink);
    margin-top: 2px;
}

.rk-stat-hint {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
}

/* The week-ahead bars. Each column is a link to that day's calendar, so the chart is navigation
   rather than decoration; the track keeps every column the same height whatever the counts are. */
.rk-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: end;
}

.rk-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1-5);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    padding: var(--space-1) 0;
    transition: background var(--duration-fast) var(--ease-standard);
}

.rk-bar:hover { background: var(--surface-sunken); }
.rk-bar:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.rk-bar-track {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 96px;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.rk-bar-fill {
    width: 100%;
    background: var(--primary);
    border-radius: var(--radius-sm);
    transition: height var(--duration-base) var(--ease-standard);
}

.rk-bar:hover .rk-bar-fill { background: var(--primary-hover); }
.rk-bar-count { font: var(--text-caption-medium); color: var(--ink); }
.rk-bar-label { font: var(--text-caption); color: var(--ink-muted); }

/* Three tiles across, and the two-then-one split the dashboard's lower half uses. */
.rk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rk-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Padding for a flush card that needs it back on one side only. */
.rk-card-pad { padding: var(--card-padding); }
.rk-card-pad-x { padding: 0 var(--card-padding) var(--card-padding); }

@media (max-width: 1100px) {
    .rk-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rk-grid--2-1 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .rk-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- calendar ------------------------------------------------------------------------------- */
/* Filters sit in the card's heading slot, so the controls belong to the grid they change. */
.rk-filters {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.rk-field--inline { gap: var(--space-1); }
.rk-field--inline .rk-label { font: var(--text-caption); color: var(--ink-muted); }
.rk-input--sm { height: var(--control-height-sm); padding: 0 var(--space-2-5); font-size: 13px; }
select.rk-input { cursor: pointer; }

/* The day grid: a time gutter and one track per practitioner. Every track is the same height and
   each appointment is placed inside it by percentage, so the grid scales with the hours on show. */
.rk-day {
    display: flex;
    gap: var(--space-2);
    padding: 0 var(--card-padding) var(--card-padding);
    overflow-x: auto;
}

.rk-day-gutter { flex: 0 0 56px; }
.rk-day-col { flex: 1 1 0; min-width: 160px; }

.rk-day-colhead {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-2);
    font: var(--text-caption-medium);
    color: var(--ink-secondary);
    white-space: nowrap;
    overflow: hidden;
}

.rk-day-colname { overflow: hidden; text-overflow: ellipsis; }

/* 80px an hour, so the shortest appointment a tenant can sell (a 30-minute slot) still has room for
   the time, the client and the service without clipping a line in half. */
.rk-day-track {
    position: relative;
    height: calc(var(--rk-hour-height) * var(--rk-hours, 12));
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    overflow: hidden;
}

.rk-day { --rk-hour-height: 80px; }

/* The gutter's labels are centred on their hour, so the first one sits half above the track and
   must not be clipped away. */
.rk-day-gutter .rk-day-track { background: transparent; overflow: visible; }

.rk-day-hour {
    position: absolute;
    right: var(--space-2);
    transform: translateY(-50%);
    font: var(--text-caption);
    color: var(--ink-muted);
}

.rk-day-rule {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border);
}

/* One appointment. The soft pair gives the fill, the solid colour the left edge, so a run of
   appointments reads as a column of statuses at a glance. */
.rk-event {
    position: absolute;
    left: 2px;
    right: 2px;
    min-height: 22px;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--neutral-soft);
    color: var(--neutral-ink);
    border-left: 3px solid var(--ink-muted);
    text-decoration: none;
    overflow: hidden;
    font: var(--text-caption);
    line-height: 15px;
    transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.rk-event:hover { box-shadow: var(--shadow-sm); }
.rk-event:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rk-event.is-open { box-shadow: var(--shadow-focus); }

.rk-event-time { font-weight: 500; margin-right: var(--space-1); }
.rk-event-who { font-weight: 500; }
.rk-event-what { display: block; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rk-event--primary { background: var(--primary-soft); color: var(--primary-soft-ink); border-left-color: var(--primary); }
.rk-event--success { background: var(--success-soft); color: var(--success-ink); border-left-color: var(--success); }
.rk-event--danger  { background: var(--danger-soft);  color: var(--danger-ink);  border-left-color: var(--danger); }
.rk-event--warning { background: var(--warning-soft); color: var(--warning-ink); border-left-color: var(--warning); }
.rk-event--info    { background: var(--info-soft);    color: var(--info-ink);    border-left-color: var(--info); }

/* The week: seven columns of chips rather than a time grid, because a week of half-hour rows is
   unreadable at this width and the question a week answers is "how full is each day". */
.rk-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
    padding: 0 var(--card-padding) var(--card-padding);
}

.rk-week-day {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.rk-week-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-2) 0;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--ink-secondary);
}

.rk-week-head:hover { background: var(--surface-sunken); }
.rk-week-dow { font: var(--text-caption); text-transform: uppercase; letter-spacing: 0.04em; }
.rk-week-date { font-size: 18px; font-weight: 600; color: var(--ink); }
.rk-week-day.is-today .rk-week-head { background: var(--primary-soft); }
.rk-week-day.is-today .rk-week-date { color: var(--primary-soft-ink); }

.rk-week-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    min-height: 120px;
    padding: var(--space-2);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}

.rk-week-quiet { font: var(--text-caption); color: var(--ink-muted); text-align: center; margin: auto 0; }

.rk-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    border-left: 3px solid var(--ink-muted);
    text-decoration: none;
    color: var(--ink);
    font: var(--text-caption);
    overflow: hidden;
}

.rk-chip:hover { box-shadow: var(--shadow-sm); }
.rk-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rk-chip.is-open { box-shadow: var(--shadow-focus); }
.rk-chip-time { font-weight: 500; color: var(--ink-secondary); }
.rk-chip-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rk-chip--primary { border-left-color: var(--primary); }
.rk-chip--success { border-left-color: var(--success); }
.rk-chip--danger  { border-left-color: var(--danger); }
.rk-chip--warning { border-left-color: var(--warning); }
.rk-chip--info    { border-left-color: var(--info); }

/* The action row under an appointment's detail: each action is its own form, so they lay out as a
   row of buttons rather than as a stack of forms. */
.rk-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.rk-cancel { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.rk-cancel .rk-input { width: 200px; }
.rk-cancel .rk-input--amount { width: 120px; }

.rk-total { border-top: 1px solid var(--border); padding-top: var(--space-2); }
.rk-mt-4 { margin-top: var(--space-4); }

@media (max-width: 900px) {
    .rk-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rk-cancel { margin-left: 0; width: 100%; }
    .rk-cancel .rk-input { flex: 1; width: auto; }
}

/* ---- reschedule ----------------------------------------------------------------------------- */
/* A strip of days to choose from, scrolling sideways rather than wrapping, so the shape of the
   choice stays the same however many days are offered. */
.rk-daypicker {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.rk-daypick {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 58px;
    padding: var(--space-2) 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--ink-secondary);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.rk-daypick:hover { border-color: var(--primary); }
.rk-daypick:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rk-daypick.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.rk-daypick.is-active .rk-daypick-date { color: #fff; }
.rk-daypick-dow { font: var(--text-caption); text-transform: uppercase; letter-spacing: 0.04em; }
.rk-daypick-date { font-size: 18px; font-weight: 600; color: var(--ink); }
.rk-daypick-month { font: var(--text-caption); }

/* The free windows. Each is its own form so pressing one commits that time and nothing else. */
.rk-slots { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.rk-slot {
    height: var(--control-height-sm);
    padding: 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    color: var(--ink);
    font: var(--text-caption-medium);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.rk-slot:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-soft-ink); }
.rk-slot:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---- catalog forms (#50) -------------------------------------------------------------------- */
/* Selects and text areas wear the input's dress; a form lays its fields out in a two-column grid
   that collapses on a narrow screen. */
select.rk-input, textarea.rk-input { width: 100%; }
textarea.rk-input { min-height: 88px; height: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); resize: vertical; }

.rk-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
}

.rk-form-grid .rk-span-2 { grid-column: span 2; }

.rk-form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.rk-form-actions .rk-push { margin-left: auto; }

/* A row of checkbox choices: a practitioner or a service to tick, with a price beside it. */
.rk-choice-list { display: flex; flex-direction: column; gap: var(--space-2); }

.rk-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 140px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.rk-choice input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.rk-choice-label { font: var(--text-small); color: var(--ink); cursor: pointer; }
.rk-choice-label .rk-muted { display: block; font: var(--text-caption); }

/* The week editor: seven rows of day, closed switch, open and close times. */
.rk-week-editor { display: flex; flex-direction: column; gap: var(--space-2); }

.rk-week-row {
    display: grid;
    grid-template-columns: 110px auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.rk-week-row .rk-day-name { font: var(--text-small); font-weight: 500; }
.rk-week-row.is-closed .rk-day-name { color: var(--ink-muted); }
.rk-week-row .rk-time-label { font: var(--text-caption); color: var(--ink-muted); }
input[type="time"].rk-input, input[type="date"].rk-input, input[type="datetime-local"].rk-input { font-variant-numeric: tabular-nums; }

/* A table row's trailing actions. */
.rk-table .rk-cell-actions { text-align: right; white-space: nowrap; }
.rk-table .rk-cell-actions .rk-btn { margin-left: var(--space-1); }
.rk-table tbody tr.is-inactive td { color: var(--ink-muted); }

@media (max-width: 760px) {
    .rk-form-grid { grid-template-columns: minmax(0, 1fr); }
    .rk-form-grid .rk-span-2 { grid-column: span 1; }
    .rk-choice { grid-template-columns: auto minmax(0, 1fr); }
    .rk-choice .rk-input { grid-column: span 2; }
    .rk-week-row { grid-template-columns: minmax(0, 1fr) auto; }
    .rk-week-row .rk-time-label, .rk-week-row .rk-input { grid-column: span 1; }
}

/* ---- clients and the appointment list (#51) ------------------------------------------------- */
/* Where a booking came from: an icon and a word, quieter than a status badge. */
.rk-channel-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: var(--text-caption);
    color: var(--ink-secondary);
    white-space: nowrap;
}

/* The search box leads a filter row and takes the room the other controls leave. */
.rk-search-field { flex: 1 1 260px; min-width: 200px; }
.rk-search-field .rk-control input { font-size: 13px; }
.rk-search-field input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* The list's filters wrap onto a second line on anything narrower than a wide screen. */
.rk-filters--list { width: 100%; }
.rk-card-heading:has(> .rk-filters--list) { flex: 1 1 100%; }

/* A row of toggle pills: checkboxes that read as chips, several on at once. */
.rk-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); border: 0; margin: 0; padding: 0; min-width: 0; }
.rk-pills legend { float: left; margin-right: var(--space-2); font: var(--text-caption); color: var(--ink-muted); }

.rk-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    font: var(--text-caption);
    color: var(--ink-secondary);
    cursor: pointer;
    user-select: none;
}

.rk-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rk-pill:hover { border-color: var(--border-strong); }
.rk-pill:focus-within { box-shadow: var(--shadow-focus); }
.rk-pill:has(input:checked) { background: var(--neutral-soft); color: var(--neutral-ink); border-color: transparent; }
.rk-pill--primary:has(input:checked) { background: var(--primary-soft); color: var(--primary-soft-ink); }
.rk-pill--success:has(input:checked) { background: var(--success-soft); color: var(--success-ink); }
.rk-pill--danger:has(input:checked)  { background: var(--danger-soft); color: var(--danger-ink); }
.rk-pill--warning:has(input:checked) { background: var(--warning-soft); color: var(--warning-ink); }

/* Previous and next under a paged list. */
.rk-pager { display: flex; align-items: center; gap: var(--space-2); }
.rk-spacer { flex: 1; }

/* The row whose appointment is open in the panel. */
.rk-table tbody tr.is-open td { background: var(--primary-soft); }

/* A read-only form keeps its layout; the browser greys the controls. */
.rk-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---- staff booking (#51) -------------------------------------------------------------------- */
/* What has been chosen so far, each with a way back to change it. */
.rk-steps { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.rk-step { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }

/* A list of things to choose, each a whole-row link. */
.rk-pick-list { display: flex; flex-direction: column; gap: var(--space-2); }

.rk-pick {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.rk-pick:hover { border-color: var(--primary); background: var(--surface-app); text-decoration: none; }
.rk-pick:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rk-pick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* A free time as a radio: the pill is the label, and the chosen one is filled. */
.rk-slots { border: 0; margin: 0; padding: 0; min-width: 0; }
.rk-slot-choice { position: relative; }
.rk-slot-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rk-slot-choice .rk-slot { display: inline-flex; align-items: center; gap: var(--space-2); }
.rk-slot-choice .rk-slot .rk-caption { color: inherit; opacity: .75; }
.rk-slot-choice input:checked + .rk-slot { border-color: var(--primary); background: var(--primary); color: var(--ink-on-primary); }
.rk-slot-choice input:focus-visible + .rk-slot { box-shadow: var(--shadow-focus); }

@media (max-width: 640px) {
    .rk-steps { gap: var(--space-4); }
    .rk-search-field { flex-basis: 100%; }
}

/* ---- users, roles and settings (#52) -------------------------------------------------------- */
/* A secret shown once: big enough to read out, easy to select in one go. */
.rk-secret {
    display: inline-block;
    margin: var(--space-2) 0;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-app);
    font: 600 18px/24px var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.04em;
    user-select: all;
}

/* A checkbox choice without the price column the catalogue pages give it. */
.rk-choice--plain { grid-template-columns: auto minmax(0, 1fr); }
.rk-mr-1 { margin-right: var(--space-1); }

/* The tab strip may wrap on a narrow header. */
.rk-tabs--wrap { flex-wrap: wrap; }


.rk-overline { margin: 0 0 var(--space-2); font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* Settings: a list of on/off choices, each with a line of explanation. */
.rk-switch-list { display: flex; flex-direction: column; gap: var(--space-2); }
.rk-switch-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start;
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.rk-switch-row input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); }
.rk-switch-row > span { display: flex; flex-direction: column; gap: 2px; font: var(--text-small); }

.rk-table--matrix td:not(:first-child), .rk-table--matrix th:not(:first-child) { text-align: center; width: 110px; }
.rk-table--matrix input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

/* The branding preview: the header a customer would see, in the tenant's own colour. */
.rk-brand-preview {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-app);
}
.rk-brand-logo { width: 40px; height: 40px; border-radius: var(--radius-md); object-fit: contain; background: var(--surface-card); }
.rk-brand-name { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.rk-input--colour { width: 72px; height: var(--control-height-md); padding: 2px; cursor: pointer; }

/* The calendar's month (#88): a count per day, each day a link to its day view. */
.rk-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.rk-month-head { padding: var(--space-2); background: var(--surface-card); font: var(--text-caption); color: var(--ink-muted); text-align: center; }
.rk-month-day {
    display: flex; flex-direction: column; gap: 2px; min-height: 88px; padding: var(--space-2);
    background: var(--surface-card); color: var(--ink); text-decoration: none;
}
.rk-month-day:hover { background: var(--surface-sunken); }
.rk-month-day.is-outside { color: var(--ink-muted); background: var(--surface-page); }
.rk-month-day.is-today .rk-month-date { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--on-primary, #fff); }
.rk-month-date { font: var(--text-small); font-weight: 600; }
.rk-month-count { font: var(--text-body); font-weight: 600; color: var(--primary-soft-ink); }
@media (max-width: 700px) { .rk-month-day { min-height: 56px; } .rk-month-count .rk-caption { display: none; } }

/* RkBars (#61): bars for named things, columns for days. Lengths are set inline, invariantly. Its own
   rk-hbar-* names: the dashboard's week-ahead chart owns rk-bars and rk-bar-* (#151). */
.rk-hbars { display: flex; flex-direction: column; gap: var(--space-2); }
.rk-hbar-row { display: grid; grid-template-columns: minmax(96px, 200px) 1fr 56px; align-items: center; gap: var(--space-3); }
.rk-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-hbar-track { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.rk-hbar-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.rk-hbar-value { text-align: right; }
.rk-columns { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-bottom: var(--space-2); }
.rk-column { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; align-items: flex-end; }
.rk-column-fill { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--primary); min-height: 1px; }
@media (max-width: 600px) { .rk-hbar-row { grid-template-columns: 96px 1fr 40px; } }

/* History (#57): who changed what, newest first. */
.rk-history { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.rk-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rk-history-item { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
.rk-history-old { color: var(--ink-muted); text-decoration: line-through; }

/* A component class that sets display must still yield to the hidden attribute (#142). */
.rk-badge[hidden], .rk-btn[hidden] { display: none; }

/* ---- Appearance (#133): the booking widget's theme editor, after the Claude Design mock-up ----------------
   An editor column and a sticky preview column. Everything is drawn in the portal's own tokens, so it follows
   light and dark mode; only the preset thumbnails, the swatches, the specimen and the preview itself show the
   tenant's theme colours, which are the same in either mode. */
.rk-appearance { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.rk-appearance-editor { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.rk-appearance-aside { flex: 1 1 400px; max-width: 480px; min-width: 0; position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.rk-appearance-savebar {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs);
}
.rk-appearance-savebar-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.rk-appearance-savebar-title { font: var(--text-body); font-weight: 600; color: var(--ink); }
.rk-btn.is-disabled { opacity: .5; pointer-events: none; }
.rk-appearance-errors { margin: 0; padding-left: 1.1em; }

.rk-appearance-section { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }
.rk-appearance-section > summary {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
    cursor: pointer; list-style: none; color: var(--ink);
}
.rk-appearance-section > summary::-webkit-details-marker { display: none; }
.rk-appearance-chevron { color: var(--ink-muted); transition: transform var(--duration-fast, 120ms) ease; flex: none; }
.rk-appearance-section[open] > summary .rk-appearance-chevron { transform: rotate(90deg); }
.rk-appearance-section-title { font: var(--text-section-title); color: var(--ink); }
.rk-appearance-section-reset { margin-left: auto; }
.rk-appearance-section-body { padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.rk-appearance-section-body--rows { padding-bottom: var(--space-2); gap: 0; }
.rk-appearance-section-body--ruled { border-top: 1px solid var(--border); padding-top: var(--space-4); gap: var(--space-4); }
.rk-appearance-section-body > p { margin: 0; }

.rk-appearance-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); }
.rk-preset-card {
    display: flex; flex-direction: column; padding: 0; margin: 1px; text-align: left; font: inherit; cursor: pointer; overflow: hidden;
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink);
}
.rk-preset-card:hover { border-color: var(--border-strong); }
.rk-preset-card.is-selected { margin: 0; border: 2px solid var(--ink); }
.rk-preset-thumb { display: block; margin: 8px 8px 0; height: 76px; border: 1px solid; border-radius: var(--radius-md); overflow: hidden; }
.rk-preset-thumb-head { display: block; height: 22px; }
.rk-preset-thumb-body { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; }
.rk-preset-line { display: block; height: 5px; width: 70%; border-radius: 3px; opacity: .8; }
.rk-preset-line--short { width: 45%; opacity: .6; }
.rk-preset-pill { display: block; height: 14px; width: 44px; align-self: flex-end; }
.rk-preset-name { display: flex; align-items: center; gap: 6px; padding: 10px 12px 2px; font: var(--text-body); font-weight: 500; }
.rk-preset-name > span:first-child { flex: 1; }
.rk-preset-check { display: none; color: var(--ink); }
.rk-preset-card.is-selected .rk-preset-check { display: inline-block; }
.rk-preset-blurb { display: block; padding: 0 12px 12px; }

.rk-appearance-group { border-top: 1px solid var(--border); padding: 14px 0 6px; }
.rk-appearance-group-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 4px; }
.rk-appearance-overline { font: var(--text-overline); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.rk-appearance-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; flex-wrap: wrap; }
.rk-appearance-row[hidden] { display: none; }
.rk-appearance-row-label { flex: 1 1 180px; min-width: 0; padding-top: 6px; }
.rk-appearance-row-name { font: var(--text-body); color: var(--ink); }
.rk-appearance-var { font: var(--text-caption); font-family: var(--font-mono, ui-monospace, monospace); color: var(--ink-muted); }
.rk-appearance-edited {
    border: 0; height: 20px; padding: 0 6px; cursor: pointer;
    background: var(--surface-sunken); color: var(--ink-secondary); font: var(--text-caption); border-radius: var(--radius-sm);
}
.rk-appearance-edited[hidden] { display: none; }
.rk-appearance-control { padding-top: 6px; }
.rk-appearance-colour { display: flex; align-items: flex-start; gap: var(--space-2); }
.rk-appearance-swatch {
    position: relative; width: 32px; height: 32px; flex: none; overflow: hidden; cursor: pointer;
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
.rk-appearance-swatch > span { position: absolute; inset: 0; }
.rk-appearance-swatch > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.rk-appearance-hex { width: 124px; text-transform: uppercase; }
.rk-appearance-hex[aria-invalid="true"] { border-color: var(--danger, #C62828); }
.rk-appearance-contrast { width: 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 4px; }
.rk-appearance-contrast .rk-badge:empty { display: none; }

.rk-appearance-selects { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.rk-appearance-selects > p, .rk-appearance-section-body--ruled > p { margin: 0; }
.rk-appearance-line { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.rk-appearance-line-label { flex: 1 1 180px; }
.rk-appearance-slider { display: flex; align-items: center; gap: var(--space-3); width: 280px; max-width: 100%; padding-top: 6px; }
.rk-appearance-line .rk-appearance-slider { padding-top: 0; }
.rk-appearance-slider input[type="range"] { flex: 1; accent-color: var(--ink); }
.rk-appearance-slider output { width: 44px; text-align: right; color: var(--ink); }
.rk-appearance-tabs {
    display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-md);
    background: var(--surface-sunken); border: 1px solid var(--border);
}
.rk-appearance-tab { position: relative; cursor: pointer; }
.rk-appearance-tab input { position: absolute; opacity: 0; width: 0; height: 0; }
.rk-appearance-tab span {
    display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3);
    border-radius: calc(var(--radius-md) - 2px); font: var(--text-small); color: var(--ink-secondary);
}
.rk-appearance-tab input:checked + span { background: var(--surface-card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-xs); }
.rk-appearance-tab input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }

.rk-appearance-preview { padding: 0; overflow: hidden; }
.rk-appearance-preview-head { display: flex; align-items: center; gap: 10px; padding: var(--space-4) var(--space-5); }
.rk-appearance-preview-title { flex: 1; }
.rk-appearance-browserbar {
    display: flex; align-items: center; gap: var(--space-2); height: 28px; margin: 0 var(--space-3); padding: 0 10px;
    background: var(--surface-sunken); border: 1px solid var(--border); border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0; font: var(--text-caption); color: var(--ink-muted);
}
.rk-appearance-browserbar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-appearance-frame { margin: 0 var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden; }
.rk-appearance-frame iframe { display: block; width: 100%; height: 600px; border: 0; background: #FFFFFF; }

.rk-appearance-specimen { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.rk-appearance-specimen-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3);
    background: var(--rkb-card); border: 1px solid var(--border); border-radius: var(--radius-lg); font-family: var(--rkb-font-body); font-size: 14px;
}
.rk-appearance-specimen-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rk-appearance-specimen-item .rk-caption { font-family: var(--font-sans); }
.rk-specimen-btn {
    font: inherit; font-weight: var(--rkb-weight-button); text-transform: var(--rkb-btn-transform); letter-spacing: var(--rkb-btn-tracking);
    padding: 8px 14px; border-radius: var(--rkb-radius-button); border: var(--rkb-border-width) solid;
}
.rk-specimen-btn--primary { background: var(--rkb-btn-primary-bg); color: var(--rkb-btn-primary-text); border-color: var(--rkb-btn-primary-border); }
.rk-specimen-btn--secondary { background: var(--rkb-btn-secondary-bg); color: var(--rkb-btn-secondary-text); border-color: var(--rkb-btn-secondary-border); }
.rk-specimen-btn--danger { background: var(--rkb-btn-danger-bg); color: var(--rkb-btn-danger-text); border-color: var(--rkb-btn-danger-border); }
.rk-specimen-btn--disabled { background: var(--rkb-btn-disabled-bg); color: var(--rkb-btn-disabled-text); border-color: var(--rkb-btn-disabled-bg); cursor: not-allowed; }

.rk-appearance-guard {
    display: flex; flex-direction: column; gap: 10px; padding: var(--space-4) var(--space-5);
    background: var(--surface-sunken); border-radius: var(--radius-xl); font: var(--text-small); color: var(--ink-secondary);
}
.rk-appearance-guard p { margin: 0; }

@media (max-width: 900px) {
    .rk-appearance-aside { position: static; max-width: none; }
}

/* ----- Saved reports (#144, Reports.dc.html) ------------------------------------------------------- */
.rk-report-search { width: 280px; max-width: 100%; display: flex; }
.rk-report-search .rk-search-field { flex: 1 1 auto; min-width: 0; }
.rk-report-name { color: var(--ink); font-weight: 500; text-decoration: none; }
.rk-report-name:hover { color: var(--primary-hover); }
.rk-mono-link { font: 12px/16px var(--font-mono); color: var(--primary-soft-ink); }

.rk-report-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: space-between; }
.rk-crumbs { display: flex; align-items: center; gap: 6px; font: var(--text-small); color: var(--ink-muted); }
.rk-crumbs a { color: var(--ink-secondary); text-decoration: none; }
.rk-crumbs a:hover { color: var(--ink); }
.rk-crumbs [aria-current] { color: var(--ink); }
.rk-url-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; max-width: 100%; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-card);
    font: 12px/16px var(--font-mono); color: var(--ink-secondary); white-space: nowrap; text-overflow: ellipsis;
}

.rk-report-filters { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.rk-report-filters .rk-field { width: 170px; }
.rk-report-filters .rk-field:has(select) { width: 190px; }
@media (max-width: 560px) { .rk-report-filters .rk-field, .rk-report-filters .rk-field:has(select) { width: 100%; } }

/* A heading that sorts its column: the whole label is the link. */
.rk-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.rk-sort:hover, .rk-sort.is-sorted { color: var(--ink); }
.rk-cell-num .rk-sort { flex-direction: row-reverse; }

/* The export menu: a <details> that opens a panel under its button, no script needed. */
.rk-menu { position: relative; }
.rk-menu > summary { list-style: none; cursor: pointer; }
.rk-menu > summary::-webkit-details-marker { display: none; }
.rk-menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 260px; padding: 6px;
    display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.rk-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.rk-menu-item:hover, .rk-menu-item:focus-visible { background: var(--surface-sunken); }
.rk-menu-item > span { display: flex; flex-direction: column; }
.rk-menu-label { font: var(--text-body); }
.rk-menu-note { margin: 4px 0 0; padding: 6px 10px 4px; border-top: 1px solid var(--border); }

/* The query, folded away under its heading. */
.rk-report-query { padding: 0; }
.rk-report-query > summary {
    display: flex; align-items: center; gap: var(--space-3); padding: 16px 24px; cursor: pointer; list-style: none;
}
.rk-report-query > summary::-webkit-details-marker { display: none; }
.rk-report-query-chevron { transition: transform var(--duration-fast, 120ms) ease; }
.rk-report-query[open] .rk-report-query-chevron { transform: rotate(90deg); }
.rk-report-query-body { padding: 0 24px 24px; display: flex; flex-direction: column; gap: var(--space-3); }
.rk-report-query-body p { margin: 0; }
.rk-sql {
    margin: 0; padding: 16px; background: var(--surface-sunken); border-radius: var(--radius-lg);
    font: 12px/20px var(--font-mono); color: var(--ink); white-space: pre-wrap; overflow-x: auto;
}
.rk-param-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.rk-param-chip {
    display: inline-flex; gap: 4px; align-items: center; height: 22px; padding: 0 8px;
    border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-secondary);
}
.rk-param-chip code { font-family: var(--font-mono); }
.rk-report-missing { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: 32px 0; text-align: center; }
.rk-report-missing p { margin: 0; max-width: 420px; font: var(--text-small); }
@media (prefers-reduced-motion: reduce) { .rk-report-query-chevron { transition: none; } }

/* ----- Theme token sheet (#148, "Theme Token Sheet") ------------------------------------------------ */
.rk-token-table { min-width: 1180px; }
.rk-token-table th, .rk-token-table td { white-space: nowrap; }
.rk-token-table tbody tr.rk-token-group th {
    padding: 14px 12px 4px; background: none; border: 0; text-align: left;
    font: var(--text-overline); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.rk-token-table tbody tr.rk-token-group:hover th { background: none; }
.rk-token-vars { display: flex; flex-direction: column; gap: 2px; }
.rk-token-vars code { font: 12px/16px var(--font-mono); color: var(--ink); }
.rk-token-value { font-variant-numeric: tabular-nums; }
.rk-token-value > span:last-child { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.rk-token-swatch {
    display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: middle;
    border-radius: 4px; border: 1px solid var(--border-strong);
}
.rk-token-code { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--space-4); }
.rk-token-code > div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.rk-token-code pre { max-height: 720px; overflow: auto; }
.rk-token-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.rk-token-note {
    padding: 14px 16px; background: var(--surface-app); border: 1px solid var(--border); border-radius: var(--radius-lg);
    font: var(--text-small); color: var(--ink-secondary);
}
.rk-token-note strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); }

/* ----- Dashboard (#150, "Dashboard") ---------------------------------------------------------------- */
/* Six figures in one strip: hairlines between them, wrapping to fewer per row on narrow screens. */
.rk-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); overflow: hidden;
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs);
}
.rk-kpi { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-left: 1px solid var(--border); margin-left: -1px; }
.rk-kpi-label { display: flex; align-items: center; gap: 8px; font: var(--text-small); color: var(--ink-secondary); }
.rk-kpi-dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-full); background: var(--ink-muted); }
.rk-kpi-dot--primary { background: var(--primary); }
.rk-kpi-dot--success { background: var(--success); }
.rk-kpi-dot--danger { background: var(--danger); }
.rk-kpi-dot--warning { background: var(--warning); }
.rk-kpi-dot--info { background: var(--info-ink); }
.rk-kpi-value { font: 600 28px/36px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }

.rk-dash-grid { display: flex; flex-wrap: wrap; gap: var(--grid-gap); align-items: flex-start; }
.rk-dash-today { flex: 2 1 520px; min-width: 0; }
.rk-dash-week { flex: 1 1 320px; min-width: 0; }

.rk-dash-outcome {
    display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-3); padding: 12px 14px;
    border-radius: var(--radius-lg); background: var(--warning-soft); color: var(--warning-ink); font: var(--text-small);
}

/* Today: time, a rail with a dot, who, and the outcome buttons or the status. */
.rk-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rk-timeline-row { display: grid; grid-template-columns: 56px 20px minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.rk-timeline-time { padding-top: 14px; font: 500 13px/18px var(--font-sans); color: var(--ink); }
.rk-timeline-rail { position: relative; display: flex; justify-content: center; }
.rk-timeline-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border); }
.rk-timeline-row:first-child .rk-timeline-rail::before { top: 18px; }
.rk-timeline-row:last-child .rk-timeline-rail::before { bottom: calc(100% - 18px); }
.rk-timeline-dot {
    position: relative; margin-top: 18px; width: 10px; height: 10px; flex: none; box-sizing: border-box;
    border-radius: var(--radius-full); border: 2px solid var(--primary); background: var(--surface-card);
}
.rk-timeline-row.is-past .rk-timeline-time { color: var(--ink-muted); }
.rk-timeline-row.is-past .rk-timeline-dot { border-color: var(--border); background: var(--border); }
.rk-timeline-row.needs-outcome .rk-timeline-time { color: var(--ink-muted); }
.rk-timeline-row.needs-outcome .rk-timeline-dot { border-color: var(--warning); }
.rk-timeline-row.is-now .rk-timeline-time { color: var(--primary); }
.rk-timeline-row.is-now .rk-timeline-dot { background: var(--primary); }
.rk-timeline-now { display: flex; align-items: center; padding: 10px 0; font: 600 12px/16px var(--font-sans); color: var(--primary); grid-column: span 2; }
.rk-timeline-who { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-width: 0; color: inherit; text-decoration: none; }
.rk-timeline-who:hover .rk-timeline-client { color: var(--primary-hover); }
.rk-timeline-text { display: flex; flex-direction: column; min-width: 0; }
.rk-timeline-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-timeline-client { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.rk-timeline-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.rk-timeline-end form { gap: 8px; }
.rk-timeline-foot { margin: var(--space-2) 0 0; padding-left: 88px; }

/* Coming up: a date chip, who and what, and the time. */
.rk-dash-coming { display: flex; flex-direction: column; margin-top: var(--space-5); }
.rk-dash-coming .rk-overline { margin-bottom: var(--space-2); }
.rk-dash-coming-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.rk-dash-coming-row:hover .rk-timeline-client { color: var(--primary-hover); }
.rk-dash-coming-row .rk-timeline-text { flex: 1; }
.rk-dash-day { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: var(--radius-md); background: var(--surface-sunken); }
.rk-dash-dow { font: 600 11px/14px var(--font-sans); text-transform: uppercase; color: var(--ink-muted); }
.rk-dash-date { font: 600 15px/20px var(--font-sans); color: var(--ink); }

@media (max-width: 560px) {
    .rk-timeline-row { grid-template-columns: 44px 16px minmax(0, 1fr); }
    .rk-timeline-end { grid-column: 3; justify-content: flex-start; padding-bottom: 8px; }
    .rk-timeline-foot { padding-left: 0; }
}

/* ----- Business hours (#164, "Business Hours") ------------------------------------------------------ */
.rk-hours-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--grid-gap); align-items: start; }
.rk-hours-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rk-hours-head { display: flex; align-items: flex-start; gap: 12px; }
.rk-hours-head > .rk-icon, .rk-hours-head > svg { margin-top: 3px; }
.rk-hours-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-hours-week { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rk-hours-week li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
    height: 40px; padding: 0 12px; border-radius: var(--radius-md); font: 400 13px/18px var(--font-sans); color: var(--ink);
}
.rk-hours-week li.is-closed { color: var(--ink-muted); }
.rk-hours-week li.is-today { background: var(--surface-sunken); font-weight: 600; }

/* A dialog that is its own address: a dimmed page and a panel over it. Closing is a link back. */
.rk-dialog-backdrop {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgb(15 17 21 / 0.45); overflow-y: auto;
}
.rk-dialog {
    width: 520px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 16px; padding: 24px;
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
}
.rk-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rk-dialog-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* A day of the week: switch, name, then its times, or "Closed" while the switch is off (CSS alone, no script). */
.rk-hours-edit { display: flex; flex-direction: column; }
.rk-hours-row { display: grid; grid-template-columns: 44px 96px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 48px; }
.rk-hours-row + .rk-hours-row { border-top: 1px solid var(--border); }
.rk-hours-day { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.rk-hours-times { display: flex; align-items: center; gap: 8px; }
.rk-hours-times .rk-control { flex: 1; min-width: 0; }
.rk-hours-closed { display: none; }
.rk-hours-row:has(.rk-switch input:not(:checked)) .rk-hours-times { display: none; }
.rk-hours-row:has(.rk-switch input:not(:checked)) .rk-hours-closed { display: inline; }
.rk-hours-row.is-invalid .rk-hours-times .rk-control:last-child { border-color: var(--danger); }
.rk-hours-errors { margin-top: 8px; font: var(--text-caption); color: var(--danger); }
.rk-hours-errors p { margin: 0; }
@media (max-width: 480px) {
    .rk-hours-row { grid-template-columns: 40px minmax(0, 1fr); padding: 6px 0; }
    .rk-hours-times, .rk-hours-closed { grid-column: 2; }
}

/* ----- Calendar (#166, "Calendar") ---------------------------------------------------------------- */
/* The day grid: a taller hour, blocks as the design draws them (time and client, then service and length), and
   the open appointment ringed. Status colours stay the .rk-event--{tone} pairs above. */
.rk-day { --rk-hour-height: 64px; }
.rk-event { left: 4px; right: 4px; padding: 6px 10px; border-radius: var(--radius-md); line-height: 16px; }
.rk-event-head { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-event-what { opacity: 0.85; }
.rk-event.is-open { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--primary); }
.rk-day-colhead .rk-caption { margin-left: auto; }
.rk-row--end { justify-content: flex-end; }

/* One appointment's detail (AppointmentPanel): a dialog on the calendar, a card on the list and a client's page. */
.rk-appt-card { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.rk-appt-dialog { gap: 20px; }
.rk-appt-when {
    display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--radius-lg); background: var(--neutral-soft);
}
.rk-appt-when--primary { background: var(--primary-soft); }
.rk-appt-when--success { background: var(--success-soft); }
.rk-appt-when--warning { background: var(--warning-soft); }
.rk-appt-when--danger { background: var(--danger-soft); }
.rk-appt-when-time { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rk-appt-start { font: 600 28px/36px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.rk-appt-when.is-cancelled .rk-appt-start { text-decoration: line-through; }
.rk-appt-when-status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rk-appt-client { display: flex; align-items: center; gap: 12px; }
.rk-appt-client-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rk-appt-client-name { font: 600 14px/20px var(--font-sans); }
.rk-appt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rk-appt-facts > div { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; min-width: 0; }
.rk-appt-facts > div + div { border-left: 1px solid var(--border); }
.rk-appt-fact { display: flex; align-items: center; gap: 6px; font: 500 13px/18px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-appt-money { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rk-appt-money-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rk-appt-price { font: 600 18px/24px var(--font-sans); color: var(--ink); }
.rk-appt-fold > summary, .rk-appt-cancel > summary { list-style: none; cursor: pointer; width: max-content; }
.rk-appt-fold > summary::-webkit-details-marker, .rk-appt-cancel > summary::-webkit-details-marker { display: none; }
.rk-appt-fold[open] > summary { display: none; }
.rk-appt-pay { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding-top: 12px; border-top: 1px solid var(--border); }
.rk-appt-pay .rk-input--amount { width: 100%; }
.rk-appt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
.rk-appt-actions form { display: contents; }
.rk-appt-cancel-open {
    height: 32px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--radius-md);
    color: var(--danger); font: 500 13px/18px var(--font-sans);
}
.rk-appt-cancel-open:hover { background: var(--danger-soft); }
.rk-appt-cancel[open] > summary { display: none; }
.rk-appt-cancel-form {
    display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg);
    background: var(--danger-soft); color: var(--danger-ink);
}
@media (max-width: 560px) {
    .rk-appt-facts { grid-template-columns: minmax(0, 1fr); }
    .rk-appt-facts > div + div { border-left: 0; border-top: 1px solid var(--border); }
    .rk-appt-pay { grid-template-columns: minmax(0, 1fr); }
}
.rk-appt-actions .rk-appt-cancel[open] { flex-basis: 100%; order: 10; }
/* A block is never shorter than its two lines, as in the design; a 15-minute booking still reads. */
.rk-event { min-height: 40px; }
.rk-filters > .rk-tabs { align-self: flex-end; }

/* ----- Users (#168, "Users Roles Settings") --------------------------------------------------------- */
.rk-users-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.rk-users-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rk-users-search { width: 260px; max-width: 100%; display: flex; }
.rk-users-search .rk-search-field { flex: 1 1 auto; min-width: 0; }
.rk-users-table tbody td { height: 60px; }
.rk-users-table tbody tr.is-open td { background: var(--surface-app); }
.rk-users-who { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.rk-users-who:hover .rk-users-name { color: var(--primary-hover); }
.rk-users-text { display: flex; flex-direction: column; min-width: 0; }
.rk-users-name { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.rk-users-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-users-none { padding: 32px 16px; text-align: center; margin: 0; }
.rk-users-dialog { width: 560px; gap: 20px; }
.rk-users-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rk-users-sep { width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--ink-muted); }
.rk-users-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-app); color: var(--ink); }
.rk-users-banner--invited { background: var(--info-soft); color: var(--info-ink); }
.rk-users-banner--deactivated { background: var(--surface-sunken); }
.rk-users-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-users-banner-title { font: 500 13px/18px var(--font-sans); }
.rk-users-form { display: flex; flex-direction: column; gap: 16px; }
.rk-users-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rk-users-fields .rk-span-2 { grid-column: 1 / -1; }
.rk-users-deactivate { margin-top: -8px; }

/* Roles as cards: a real checkbox, hidden, with the card drawn around it. */
.rk-role-cards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: -6px; }
.rk-role-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rk-role-card {
    position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card);
    transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.rk-role-card:hover { background: var(--surface-app); }
.rk-role-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.rk-role-card:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); }
.rk-role-card:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.rk-role-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rk-role-card-name { font: 600 13px/18px var(--font-sans); color: var(--ink); }
.rk-role-card-check {
    width: 18px; height: 18px; flex: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); border: 1.5px solid var(--border); color: transparent;
}
.rk-role-card:has(input:checked) .rk-role-card-check { background: var(--primary); border-color: var(--primary); color: var(--surface-card); }
@media (max-width: 560px) {
    .rk-role-cards, .rk-users-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .rk-role-card { transition: none; } }

/* ----- Roles (#170, "Users Roles Settings") --------------------------------------------------------- */
.rk-roles { display: flex; flex-wrap: wrap; gap: var(--grid-gap); align-items: flex-start; }
.rk-roles-list, .rk-roles-panel {
    min-width: 0; background: var(--surface-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); display: flex; flex-direction: column;
}
.rk-roles-list { flex: 1 1 280px; padding: 12px; gap: 4px; }
.rk-roles-item {
    display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-lg);
    color: inherit; text-decoration: none; transition: background var(--duration-fast) var(--ease-standard);
}
.rk-roles-item:hover { background: var(--surface-hover, var(--surface-app)); text-decoration: none; }
.rk-roles-item.is-active { background: var(--primary-soft); }
.rk-roles-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rk-roles-item-head { display: flex; align-items: center; gap: 8px; }
.rk-roles-item-name { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.rk-roles-item-head .rk-push { margin-left: auto; white-space: nowrap; }
.rk-roles-item-members { display: flex; align-items: center; gap: 8px; }
.rk-roles-item-members .rk-avatar { box-shadow: 0 0 0 2px var(--surface-card); }
.rk-avatar--more { background: var(--surface-sunken); color: var(--ink-secondary); }
.rk-roles-panel { flex: 2 1 480px; padding: 24px; gap: 20px; }
.rk-roles-grants { display: flex; flex-direction: column; gap: 20px; }
.rk-roles-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rk-roles-panel-title { display: flex; flex-direction: column; gap: 4px; }
.rk-roles-panel-title .rk-card-title { margin: 0; font: 600 16px/24px var(--font-sans); }
.rk-roles-key {
    font: 500 12px/16px var(--font-mono, monospace); color: var(--ink-muted);
    background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 2px 6px;
}
.rk-roles-groups { display: flex; flex-direction: column; gap: 20px; }
.rk-roles-group-head .rk-overline { margin: 0; }
.rk-roles-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; }
.rk-roles-perms { border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.rk-roles-perm { display: flex; align-items: center; gap: 16px; padding: 12px 16px; cursor: pointer; }
.rk-roles-perm + .rk-roles-perm { border-top: 1px solid var(--border); }
.rk-roles-perm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-roles-perm-label { font: var(--text-body); color: var(--ink); }
.rk-roles-perm code { font: 12px/16px var(--font-mono, monospace); }
.rk-roles-perm:has(input:focus-visible) .rk-switch-track { box-shadow: var(--shadow-focus); }
.rk-roles-groups:disabled .rk-roles-perm { cursor: default; }
.rk-roles-groups:disabled .rk-switch { opacity: 0.6; cursor: default; }
.rk-roles-own { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.rk-roles-own p { margin: 0; }
.rk-roles-own-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rk-roles-own .rk-input { width: 220px; max-width: 100%; }
.rk-roles-panel > .rk-caption { margin: 0; }
.rk-roles-dialog { width: 420px; gap: 20px; }
@media (prefers-reduced-motion: reduce) { .rk-roles-item { transition: none; } }

/* ----- Settings (#174, "Users Roles Settings") ------------------------------------------------------ */
.rk-settings { display: flex; gap: var(--grid-gap); align-items: flex-start; flex-wrap: wrap; }
.rk-settings-nav { position: sticky; top: 24px; flex: 0 0 210px; display: flex; flex-direction: column; gap: 2px; }
.rk-settings-nav-item {
    display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 8px 12px; box-sizing: border-box;
    white-space: nowrap; border-radius: var(--radius-md); color: var(--ink-secondary); font: 500 13px/18px var(--font-sans);
    text-decoration: none; transition: background var(--duration-fast) var(--ease-standard);
}
.rk-settings-nav-item:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.rk-settings-nav-item.is-active { background: var(--surface-hover); color: var(--ink); }
.rk-settings-nav-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rk-settings-body { flex: 1 1 520px; min-width: 0; max-width: 820px; display: flex; flex-direction: column; gap: var(--grid-gap); }
.rk-settings-section {
    scroll-margin-top: 24px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs); padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.rk-settings-section .rk-alert { margin: 0; }
.rk-settings-head { display: flex; flex-direction: column; gap: 2px; }
.rk-settings-head--split { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rk-settings-title { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--ink); }
.rk-settings-form { display: flex; flex-direction: column; gap: 16px; }
.rk-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.rk-settings-narrow { max-width: 320px; }
.rk-settings-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.rk-input[readonly] { background: var(--surface-app); color: var(--ink-secondary); }
.rk-settings-toggles { border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.rk-settings-toggle { display: flex; align-items: center; gap: 16px; padding: 14px 16px; cursor: pointer; }
.rk-settings-toggle + .rk-settings-toggle { border-top: 1px solid var(--border); }
.rk-settings-toggle:has(input:focus-visible) .rk-switch-track { box-shadow: var(--shadow-focus); }
.rk-settings-toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-settings-toggle-label { font: var(--text-body); color: var(--ink); }
.rk-settings-head--split .rk-settings-lead { width: 200px; flex: none; }
.rk-settings-matrix-wrap { overflow-x: auto; }
.rk-settings-matrix { min-width: 520px; display: flex; flex-direction: column; }
.rk-settings-matrix-head, .rk-settings-matrix-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 88px; gap: 16px; align-items: center; padding: 0 16px; }
.rk-settings-matrix-head { height: 36px; background: var(--surface-sunken); border-radius: var(--radius-lg); font: 500 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rk-settings-matrix-head span + span, .rk-settings-matrix-row > span + span { text-align: center; }
.rk-settings-matrix-row { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.rk-settings-matrix-row .rk-settings-toggle-label { font: 500 13px/18px var(--font-sans); }
.rk-settings-matrix-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-settings-matrix-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.rk-settings-wa { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); flex-wrap: wrap; }
.rk-settings-wa-icon {
    width: 36px; height: 36px; flex: none; border-radius: var(--radius-full); background: var(--success-soft); color: var(--success-ink);
    display: flex; align-items: center; justify-content: center;
}
.rk-settings-wa-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.rk-settings-wa-number { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.rk-settings-more { border-top: 1px solid var(--border); padding-top: 12px; }
.rk-settings-more-summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
    font: 500 13px/18px var(--font-sans); color: var(--primary);
}
.rk-settings-more-summary::-webkit-details-marker { display: none; }
.rk-settings-more[open] .rk-settings-more-summary { margin-bottom: 16px; }
.rk-settings-more[open] .rk-settings-more-summary svg { transform: rotate(180deg); }
.rk-settings-link { display: flex; align-items: center; gap: 8px; }
.rk-settings-link-value {
    flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; padding: 0 12px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-app);
    font: var(--text-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-settings-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rk-settings-code {
    margin: 0; padding: 14px 16px; background: var(--surface-sunken); border-radius: var(--radius-lg);
    font: 12px/20px var(--font-mono, monospace); color: var(--ink); white-space: pre-wrap; word-break: break-all;
}
.rk-settings-copied:empty { display: none; }
@media (max-width: 900px) {
    .rk-settings-nav { position: static; flex: 1 1 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
}
@media (prefers-reduced-motion: reduce) { .rk-settings-nav-item { transition: none; } }

/* All appointments (#181), from the Claude Design screen: one card holding the filters, the rows and the count. */
.rk-appts { padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rk-appts-filters { display: flex; flex-direction: column; gap: 16px; }
.rk-appts-selects { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rk-appts-selects > .rk-input { width: 150px; }
.rk-appts-search { flex: 1 1 260px; min-width: 220px; }
.rk-appts-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.rk-appts-chips { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; }
.rk-appts-chips .rk-pill { gap: 6px; font: 500 12px/16px var(--font-sans); transition: background 160ms cubic-bezier(0.2, 0, 0, 1); }
.rk-appts-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Status chips carry their status as a dot, and take its colour, ground and ink when on. */
.rk-pill-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--ink-muted); flex: none; }
.rk-pill--primary .rk-pill-dot { background: var(--primary); }
.rk-pill--success .rk-pill-dot { background: var(--success); }
.rk-pill--warning .rk-pill-dot { background: var(--warning); }
.rk-pill--danger .rk-pill-dot { background: var(--danger); }
.rk-pill--dot:has(input:checked) { background: var(--surface-sunken); border-color: var(--ink-muted); color: var(--ink); }
.rk-pill--dot.rk-pill--primary:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-soft-ink); }
.rk-pill--dot.rk-pill--success:has(input:checked) { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }
.rk-pill--dot.rk-pill--warning:has(input:checked) { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-ink); }
.rk-pill--dot.rk-pill--danger:has(input:checked) { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink); }
.rk-pill--outline:has(input:checked) { background: var(--surface-hover); border-color: var(--ink-secondary); color: var(--ink); }

/* Appointment rows: a grid of links, so the whole row opens the appointment. The columns follow the design;
   the client and price columns come and go with the page (a client's own page leaves the client out). */
.rk-appt-list-wrap { overflow-x: auto; }
.rk-appt-list {
    --appt-cols: 150px minmax(140px, 1fr) 110px 120px 130px;
    display: flex; flex-direction: column; min-width: 700px;
}
.rk-appt-list.has-client { --appt-cols: 150px minmax(180px, 1.4fr) minmax(140px, 1fr) 110px 120px 130px; min-width: 880px; }
.rk-appt-list.has-price { --appt-cols: 150px minmax(140px, 1fr) 110px 120px 130px 96px; }
.rk-appt-list.has-client.has-price { --appt-cols: 150px minmax(180px, 1.4fr) minmax(140px, 1fr) 110px 120px 130px 96px; min-width: 960px; }
.rk-appt-list-head, .rk-appt-row { display: grid; grid-template-columns: var(--appt-cols); gap: 16px; align-items: center; padding: 0 16px; }
.rk-appt-list-head {
    height: 40px; background: var(--surface-sunken); border-radius: var(--radius-lg);
    font: 500 12px/16px var(--font-sans); color: var(--ink-secondary);
}
.rk-appt-row {
    min-height: 56px; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none;
    font: 13px/18px var(--font-sans); font-weight: 400; transition: background 160ms cubic-bezier(0.2, 0, 0, 1);
}
.rk-appt-row:hover, .rk-appt-row.is-open { background: var(--surface-app); color: var(--ink); }
.rk-appt-row:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rk-appt-row > * { min-width: 0; }
.rk-appt-row-stack { display: flex; flex-direction: column; min-width: 0; }
.rk-appt-row-strong { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.rk-appt-row-client { display: flex; align-items: center; gap: 10px; }
.rk-appt-row-service { display: flex; align-items: center; gap: 6px; }
.rk-appt-row-price { align-items: flex-end; text-align: right; }
.rk-appt-row-paid { color: var(--success-ink); }
.rk-appt-row .rk-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-appt-list-head .rk-cell-num { text-align: right; }

/* The dialog's note, the lock line under a finished appointment, and its history as a timeline. */
.rk-appt-note { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-app); }
.rk-appt-note > svg { margin-top: 1px; flex: none; }
.rk-appt-note-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-wrap: pretty; }
.rk-appt-locked { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.rk-appt-locked > .rk-small { flex: 1; }
:is(.rk-appt-card, .rk-appt-dialog) .rk-history { margin-top: 0; gap: 10px; }
:is(.rk-appt-card, .rk-appt-dialog) .rk-history > .rk-label { margin: 0; font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
:is(.rk-appt-card, .rk-appt-dialog) .rk-history-list { gap: 0; }
:is(.rk-appt-card, .rk-appt-dialog) .rk-history-item { position: relative; padding: 0 0 12px 24px; border: 0; border-radius: 0; background: none; }
:is(.rk-appt-card, .rk-appt-dialog) .rk-history-item::before {
    content: ""; position: absolute; left: 2px; top: 5px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border);
}
:is(.rk-appt-card, .rk-appt-dialog) .rk-history-item:first-child::before { background: var(--ink-secondary); }
:is(.rk-appt-card, .rk-appt-dialog) .rk-history-item::after {
    content: ""; position: absolute; left: 5.5px; top: 15px; bottom: 0; width: 1px; background: var(--border);
}
:is(.rk-appt-card, .rk-appt-dialog) .rk-history-item:last-child::after { display: none; }

/* A toast for a finished action: bottom right, fading on its own after a few seconds, or dismissed. */
.rk-toast-host { position: fixed; right: 24px; bottom: 24px; z-index: 80; max-width: calc(100vw - 32px); animation: rk-toast-life 5s ease forwards; }
.rk-toast {
    display: flex; align-items: flex-start; gap: 12px; width: 360px; max-width: 100%; padding: 14px; box-sizing: border-box;
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.rk-toast-icon {
    width: 28px; height: 28px; border-radius: var(--radius-full); flex: none;
    display: inline-flex; align-items: center; justify-content: center; background: var(--success-soft); color: var(--success-ink);
}
.rk-toast-text { flex: 1; min-width: 0; padding-top: 4px; }
.rk-toast-title { font: var(--text-body-medium); color: var(--ink); }
.rk-toast-close { display: flex; padding: 4px; color: var(--ink-muted); }
.rk-toast-close:hover { color: var(--ink); }
@keyframes rk-toast-life {
    0% { opacity: 0; transform: translateY(8px); }
    6%, 88% { opacity: 1; transform: none; }
    100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .rk-toast-host { animation: none; } }
@media (max-width: 640px) { .rk-appts { padding: 16px; } .rk-appts-selects > .rk-input { flex: 1 1 140px; width: auto; } }

/* ---- one client (#185): the Claude Design "Client Detail" screen -------------------------------- */
.rk-client-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rk-client-id { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.rk-client-id .rk-page-title { margin: 0; }
.rk-client-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: var(--text-small); color: var(--ink-muted); }
.rk-client-contacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.rk-contact-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-card);
    font: 500 13px/18px var(--font-sans); color: var(--ink); text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard);
}
.rk-contact-chip:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }
.rk-contact-chip > svg { color: var(--ink-secondary); }
.rk-contact-chip.is-whatsapp > svg { color: var(--success); }

.rk-client-layout { display: flex; flex-wrap: wrap; gap: var(--grid-gap); align-items: flex-start; }
.rk-client-main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--grid-gap); }
.rk-client-side { flex: 1 1 320px; min-width: 0; position: sticky; top: 24px; }
.rk-client-section { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.rk-client-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rk-client-new { max-width: 560px; }

/* The four counts as one strip, each with its colour as a dot. */
.rk-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); overflow: hidden; padding: 0; }
.rk-stat-cell { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-left: 1px solid var(--border); margin-left: -1px; }
.rk-stat-cell-label { display: flex; align-items: center; gap: 8px; font: var(--text-small); color: var(--ink-secondary); }
.rk-stat-cell-value { font: 600 24px/32px var(--font-sans); color: var(--ink); }
.rk-dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-full); background: var(--ink-muted); }
.rk-dot--primary { background: var(--primary); }
.rk-dot--success { background: var(--success); }
.rk-dot--danger { background: var(--danger); }
.rk-dot--warning { background: var(--warning); }

/* An appointment row: a date tile, what and with whom, the price, how it stands. The whole row opens it. */
.rk-client-appts { display: flex; flex-direction: column; }
.rk-client-appt {
    display: flex; align-items: center; gap: 16px; padding: 12px 8px; margin: 0 -8px; border-radius: var(--radius-md);
    color: inherit; text-decoration: none; transition: background var(--duration-fast) var(--ease-standard);
}
.rk-client-appt + .rk-client-appt { border-top: 1px solid var(--border); }
.rk-client-appt:hover, .rk-client-appt.is-open { background: var(--surface-app); text-decoration: none; color: inherit; }
.rk-date-tile { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: var(--radius-md); background: var(--surface-sunken); }
.rk-date-tile-dow { font: 600 11px/14px var(--font-sans); text-transform: uppercase; color: var(--ink-muted); }
.rk-date-tile-day { font: 600 16px/20px var(--font-sans); color: var(--ink); }
.rk-date-tile-mon { font: 11px/14px var(--font-sans); color: var(--ink-muted); }
.rk-client-appt-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-client-appt-service { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.rk-client-appt-when { display: flex; align-items: center; gap: 2px 6px; flex-wrap: wrap; min-width: 0; font: var(--text-small); color: var(--ink-muted); }
.rk-client-appt-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rk-nowrap { white-space: nowrap; }
.rk-client-appt-price { font: var(--text-small); color: var(--ink-secondary); white-space: nowrap; }
.rk-client-appt-status { width: 96px; flex: none; display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .rk-client-appt-price { display: none; } .rk-client-appt-status { width: auto; } }

/* Activity: the client's own history as a timeline, each entry a dot on a line. */
.rk-client-activity .rk-history { margin-top: 0; }
.rk-client-activity .rk-history > .rk-label { display: none; }
.rk-client-activity .rk-history-list { gap: 0; }
.rk-client-activity .rk-history-item { position: relative; padding: 0 0 16px 24px; border: 0; border-radius: 0; background: none; }
.rk-client-activity .rk-history-item::before {
    content: ""; position: absolute; left: 2px; top: 5px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border);
}
.rk-client-activity .rk-history-item:first-child::before { background: var(--primary); }
.rk-client-activity .rk-history-item::after { content: ""; position: absolute; left: 5.5px; top: 15px; bottom: 0; width: 1px; background: var(--border); }
.rk-client-activity .rk-history-item:last-child::after { display: none; }

/* Details: read as rows, edited in place. */
.rk-detail-rows { display: flex; flex-direction: column; margin: 0; }
.rk-detail-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.rk-detail-row + .rk-detail-row { border-top: 1px solid var(--border); }
.rk-detail-row > svg { margin-top: 2px; flex: none; }
.rk-detail-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-detail-row dd { margin: 0; font: 14px/20px var(--font-sans); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.rk-detail-row dd.rk-muted { color: var(--ink-muted); }
.rk-client-form { display: flex; flex-direction: column; gap: 14px; }
.rk-client-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rk-client-form textarea.rk-input { height: auto; min-height: 80px; resize: vertical; padding-block: 10px; }
.rk-client-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 420px) { .rk-client-form-pair { grid-template-columns: 1fr; } }

/* ---- the service catalogue (#189): the Claude Design "Services" screen --------------------------- */
.rk-services { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.rk-services-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rk-services-search { width: 240px; max-width: 100%; }
.rk-services-wrap { overflow-x: auto; }
.rk-services-list { min-width: 780px; display: flex; flex-direction: column; }
.rk-services-head, .rk-services-row {
    display: grid; grid-template-columns: minmax(240px, 2.2fr) 110px 110px minmax(150px, 1fr) 150px 24px; gap: 16px; align-items: center; padding: 0 16px;
}
.rk-services-head { height: 40px; background: var(--surface-sunken); border-radius: var(--radius-lg); font: 500 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rk-services-row { position: relative; min-height: 64px; padding-block: 10px; border-bottom: 1px solid var(--border); transition: background var(--duration-fast) var(--ease-standard); }
.rk-services-row:hover, .rk-services-row.is-open { background: var(--surface-app); }
.rk-services-row.is-hidden > :not(.rk-services-switch) { opacity: .7; }
.rk-services-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rk-services-well {
    width: 36px; height: 36px; flex: none; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
    background: var(--primary-soft); color: var(--primary-soft-ink);
}
.rk-services-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* The name is the row's link, stretched over the whole row; the switch sits above it and keeps its own click. */
.rk-services-link { font: 500 14px/20px var(--font-sans); color: var(--ink); text-decoration: none; }
.rk-services-link::after { content: ""; position: absolute; inset: 0; }
.rk-services-link:hover { color: var(--ink); text-decoration: none; }
.rk-services-link:focus-visible { outline: none; }
.rk-services-link:focus-visible::after { box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }
.rk-services-mins { display: inline-flex; align-items: center; gap: 6px; font: var(--text-small); color: var(--ink); }
.rk-services-price { font: 500 14px/20px var(--font-sans); color: var(--ink); text-align: right; }
.rk-services-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rk-services-nobody { color: var(--warning-ink); }
.rk-services-switch { position: relative; z-index: 1; }
.rk-services-none { padding: 40px 16px; text-align: center; font: var(--text-body); color: var(--ink-muted); }

.rk-avatar-stack { display: inline-flex; align-items: center; flex: none; }
.rk-avatar-stack > * + * { margin-left: -8px; }
.rk-avatar-stack > .rk-avatar { box-shadow: 0 0 0 2px var(--surface-card); }
.rk-avatar-more {
    display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 24px; padding: 0 6px; box-sizing: border-box;
    border-radius: var(--radius-full); background: var(--surface-sunken); box-shadow: 0 0 0 2px var(--surface-card);
    font: 600 11px/1 var(--font-sans); color: var(--ink-secondary);
}

/* A switch that is a submit button (a form per row), drawn like .rk-switch--sm. */
.rk-switch-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer;
    font: var(--text-small); color: var(--ink);
}
.rk-switch-btn .rk-switch-track { width: 32px; height: 18px; }
.rk-switch-btn .rk-switch-track::after { width: 14px; height: 14px; }
.rk-switch-btn[aria-checked="true"] .rk-switch-track { background: var(--primary); }
.rk-switch-btn[aria-checked="true"] .rk-switch-track::after { transform: translateX(14px); }
.rk-switch-btn:focus-visible { outline: none; }
.rk-switch-btn:focus-visible .rk-switch-track { box-shadow: var(--shadow-focus); }

/* The service dialog. */
.rk-service-dialog { width: 540px; }
.rk-service-form { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.rk-service-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rk-service-who { display: flex; flex-direction: column; gap: 10px; }
.rk-service-who-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rk-service-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-person-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-card);
    font: 500 13px/18px var(--font-sans); color: var(--ink); cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.rk-person-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.rk-person-chip .rk-person-chip-check { display: none; color: var(--primary); }
.rk-person-chip:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); }
.rk-person-chip:has(input:checked) .rk-person-chip-check { display: inline-block; }
.rk-person-chip:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.rk-service-bookable { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rk-service-bookable > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-service-form-actions { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
@media (max-width: 480px) { .rk-service-form-pair { grid-template-columns: 1fr; } }
.rk-services-head .rk-cell-num { text-align: right; }

/* ---- the team (#193): the Claude Design "Practitioners" screen ---------------------------------- */
.rk-team-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rk-team-branch { width: 200px; max-width: 100%; }
.rk-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--grid-gap); align-items: start; }
.rk-team-card { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: border-color var(--duration-fast) var(--ease-standard); }
.rk-team-card:hover { border-color: var(--ink-muted); }
.rk-team-card.is-off { opacity: .65; }
.rk-team-card-body { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.rk-team-card-head { display: flex; align-items: flex-start; gap: 12px; }
.rk-team-avatar { position: relative; flex: none; display: inline-flex; }
.rk-team-dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: var(--radius-full); border: 2px solid var(--surface-card); background: var(--ink-muted); box-sizing: border-box; }
.rk-team-dot.is-on { background: var(--success); }
.rk-team-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* The name is the card's link, stretched over the card. */
.rk-team-link { font: 600 16px/24px var(--font-sans); color: var(--ink); text-decoration: none; }
.rk-team-link::after { content: ""; position: absolute; inset: 0; }
.rk-team-link:hover { color: var(--ink); text-decoration: none; }
.rk-team-link:focus-visible { outline: none; }
.rk-team-link:focus-visible::after { box-shadow: var(--shadow-focus); border-radius: var(--radius-xl); }
.rk-team-services { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-team-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--radius-full); font: 500 12px/16px var(--font-sans); color: var(--ink-secondary);
}
.rk-team-warn { display: inline-flex; align-items: center; gap: 6px; font: var(--text-caption); color: var(--warning-ink); }
.rk-team-card-foot {
    margin-top: auto; padding: 14px 20px; background: var(--surface-app); border-top: 1px solid var(--border);
    display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
}
.rk-team-strong { font-weight: 600; color: var(--ink); }
.rk-team-booked { flex-basis: 100%; }
.rk-person-chip--plain { padding: 0 12px; }
.rk-grow { flex: 1; }
.rk-team-bar > .rk-team-branch { width: 200px; flex: none; }

/* ---- one practitioner (#195): the Claude Design "Practitioner Detail" screen ------------------- */
.rk-meta-dot { width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--ink-muted); }
.rk-client-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.rk-prac-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rk-prac-section-title { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.rk-prac-indent { padding-left: 28px; text-wrap: pretty; }
.rk-prac-services { display: flex; flex-direction: column; gap: 16px; }
.rk-prac-svc-wrap { overflow-x: auto; }
.rk-prac-svc-list { min-width: 520px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rk-prac-svc {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) 90px 150px; gap: 14px; align-items: center; padding: 12px 16px;
    background: var(--surface-card); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard);
}
.rk-prac-svc + .rk-prac-svc { border-top: 1px solid var(--border); }
.rk-prac-svc.is-off { background: var(--surface-app); }
.rk-prac-svc > input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.rk-prac-svc-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-prac-svc-title { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.rk-prac-away-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-sunken); }
.rk-prac-away-form .rk-service-chips { border: 0; margin: 0; padding: 0; }
.rk-prac-away-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rk-prac-away-list { display: flex; flex-direction: column; }
.rk-prac-away { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.rk-prac-away + .rk-prac-away { border-top: 1px solid var(--border); }
.rk-prac-away-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-prac-away-range { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.rk-prac-well { width: 36px; height: 36px; flex: none; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--ink-secondary); }
.rk-prac-well--info { background: var(--info-soft); color: var(--info-ink); }
.rk-prac-well--warning { background: var(--warning-soft); color: var(--warning-ink); }
.rk-prac-well--primary { background: var(--primary-soft); color: var(--primary-soft-ink); }
.rk-prac-status { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.rk-danger-text { color: var(--danger); }
.rk-danger-text:hover { background: var(--danger-soft); color: var(--danger); }

/* ---- branches (#197): the Claude Design "Facilities" screen ------------------------------------ */
.rk-branches { padding: 0; overflow: hidden; }
.rk-branch {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 20px 24px;
    transition: background var(--duration-fast) var(--ease-standard);
}
.rk-branch + .rk-branch { border-top: 1px solid var(--border); }
.rk-branch:hover { background: var(--surface-app); }
.rk-branch.is-off > :not(.rk-branch-name) { opacity: .65; }
.rk-branch.is-off .rk-branch-text { opacity: .65; }
.rk-branch-name { flex: 1 1 300px; min-width: 260px; display: flex; align-items: center; gap: 14px; }
.rk-branch-well { width: 44px; height: 44px; flex: none; border-radius: var(--radius-full); background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; color: var(--ink-secondary); }
.rk-branch-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-branch-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rk-branch-link { font: 600 16px/24px var(--font-sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.rk-branch-link::after { content: ""; position: absolute; inset: 0; }
.rk-branch-link:hover { color: var(--ink); text-decoration: none; }
.rk-branch-link:focus-visible { outline: none; }
.rk-branch-link:focus-visible::after { box-shadow: var(--shadow-focus); }
.rk-branch-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; white-space: nowrap; flex: none;
    border-radius: var(--radius-full); background: var(--surface-sunken); font: 500 12px/16px var(--font-sans); color: var(--ink-secondary);
}
.rk-branch-pill-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--ink-muted); }
.rk-branch-pill--open { background: var(--success-soft); color: var(--success-ink); }
.rk-branch-pill--open .rk-branch-pill-dot { background: var(--success); }
.rk-branch-week { flex: 0 1 250px; min-width: 210px; display: flex; flex-direction: column; gap: 6px; }
.rk-branch-days { display: grid; grid-template-columns: repeat(7, 24px); gap: 4px; }
.rk-branch-day {
    height: 24px; box-sizing: border-box; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
    background: var(--surface-sunken); border: 1px solid var(--surface-sunken); font: 500 12px/16px var(--font-sans); color: var(--ink);
}
.rk-branch-day.is-closed { background: transparent; border-color: var(--border); color: var(--ink-muted); }
.rk-branch-day.is-today { border-color: var(--ink-muted); font-weight: 600; }
.rk-branch-team { flex: 0 1 220px; min-width: 200px; display: flex; align-items: center; gap: 10px; }
.rk-branch-team-text { min-width: 0; display: flex; flex-direction: column; }
.rk-branch-team-names { font: 500 13px/18px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-branch-foot { flex: 1 1 200px; min-width: 180px; display: flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.rk-branch-foot.is-closing { color: var(--warning-ink); }
.rk-branch-foot > svg { flex: none; }
.rk-facility-dialog { width: 600px; }
.rk-facility-address { display: flex; flex-direction: column; gap: 8px; }
.rk-facility-address-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 8px; }
.rk-facility-settings { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rk-facility-setting { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.rk-facility-setting + .rk-facility-setting { border-top: 1px solid var(--border); }
.rk-facility-setting > svg { flex: none; }
.rk-facility-setting > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-facility-setting > .rk-input { width: 210px; flex: none; }
.rk-facility-setting--note { background: var(--surface-app); }
@media (max-width: 560px) { .rk-facility-address-row { grid-template-columns: 1fr; } .rk-facility-setting { flex-wrap: wrap; } .rk-facility-setting > .rk-input { width: 100%; } }
.rk-tabs--fit { align-self: flex-start; }
.rk-branch { padding-right: 56px; }
.rk-branch .rk-branch-chevron { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.rk-branch { column-gap: 24px; }
.rk-branch-name { flex-basis: 260px; min-width: 240px; }
.rk-branch-foot { flex-basis: 170px; min-width: 160px; }
.rk-auth-forgot { align-self: flex-end; margin-top: -8px; font: 500 13px/18px var(--font-sans); color: var(--primary); text-decoration: none; }
.rk-auth-forgot:hover { text-decoration: underline; }

/* ---- one facility (#206): the Claude Design "Facility Detail" screen ---------------------------- */
.rk-fac-well { width: 56px; height: 56px; }
/* The details card is narrower than the new-facility dialog: two fields a row, the second the short one. */
.rk-client-side .rk-facility-address-row { grid-template-columns: minmax(0, 1fr) 110px; }
.rk-fac-week { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rk-fac-day { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; background: var(--surface-card); }
.rk-fac-day + .rk-fac-day { border-top: 1px solid var(--border); }
.rk-fac-day.is-today { background: var(--surface-app); }
.rk-fac-day-name { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.rk-fac-day.is-today .rk-fac-day-name { font-weight: 600; }
.rk-fac-place { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rk-fac-place-pick { width: 210px; max-width: 100%; }
.rk-fac-warning { display: inline-flex; align-items: center; gap: 6px; font: var(--text-small); color: var(--warning-ink); }
.rk-fac-team { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rk-fac-member {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; font-weight: 400; text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard);
}
.rk-fac-member + .rk-fac-member { border-top: 1px solid var(--border); }
.rk-fac-member:hover { background: var(--surface-app); color: inherit; text-decoration: none; }
.rk-fac-member-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-fac-member-title { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.rk-fac-member-services { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rk-fac-service {
    display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-full);
    font: 500 12px/16px var(--font-sans); color: var(--ink-secondary);
}
.rk-fac-active { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rk-fac-active-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-wrap: pretty; }
.rk-fac-active-title { font: 500 13px/18px var(--font-sans); color: var(--ink); }
/* A switch that is a submit button: its state is aria-checked, and pressing it posts the change. */
.rk-switch-button { padding: 0; border: 0; background: none; }
.rk-switch-button[aria-checked="true"] .rk-switch-track { background: var(--primary); }
.rk-switch-button[aria-checked="true"] .rk-switch-track::after { transform: translateX(16px); }
.rk-switch-button:focus-visible .rk-switch-track { box-shadow: var(--shadow-focus); }
@media (max-width: 560px) {
    .rk-fac-day { grid-template-columns: 96px minmax(0, 1fr) auto; }
    .rk-fac-member-services { display: none; }
}

/* A pick list where several rows may be ticked (#243): the tick box fills when the row is selected. */
.rk-pick-tick {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 18px; height: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: transparent; background: var(--surface-card);
}
.rk-pick.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.rk-pick.is-selected .rk-pick-tick { border-color: var(--primary); background: var(--primary); color: var(--ink-on-primary); }
.rk-pick-total { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* Desk payments and refunds (#213): the method, the amounts and the reference on one row, the transactions under them. */
.rk-appt-pay--desk { grid-template-columns: 120px 110px 110px minmax(0, 1fr) auto; }
.rk-appt-pay--desk .rk-appt-change { grid-column: 1 / -2; align-self: center; }
.rk-appt-transactions { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.rk-appt-transaction { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* A receipt's number and links under its payment or refund (#214): its own line. */
.rk-appt-receipt { flex-basis: 100%; padding-left: 12px; }
@media (max-width: 720px) { .rk-appt-pay--desk { grid-template-columns: minmax(0, 1fr); } }

/* How long for a per-block service (#245): one row per service under the pick list. */
.rk-durations { display: flex; flex-direction: column; gap: var(--space-2); }
.rk-durations .rk-field--inline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }