[x-cloak] { display: none !important; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-default);
    line-height: normal;
    border: 1px solid transparent;
    gap: 6px;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); filter: brightness(0.95); }

/* Admin primary actions are ink rather than gold; the accent stays
   reserved for selection and focus, where the color carries meaning. */
body.admin .btn-primary {
    background-color: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
}

.btn-secondary {
    background-color: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border-light);
}

.btn-secondary:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.btn-danger {
    background-color: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

.btn-danger:hover {
    filter: brightness(1.1);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
}

.btn-ghost:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 10px 20px;
    font-size: 16px;
}

.btn-icon {
    padding: 8px;
    width: 32px;
    height: 32px;
}

/* Cards */
.card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-subtle);
    margin-bottom: var(--space-4);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-default);
    margin: 0;
}

/* The negative margins exist only to cancel .card's own padding so the
   header can bleed to the card's edges. A .p-0 card has no padding to
   cancel, so inheriting them dragged the header outside the card — which
   is what made these titles look unstyled and mispositioned. */
.card:not(.p-0) > .card-header {
    margin: -18px -20px 18px;
}

/* ── Section head — a label above a container, not a bar inside it ──
   The admin standard, set by the Templates screen: a short tracked label
   sits above its card with an optional count or action opposite. Reads as
   structure rather than as a heading competing with the page title. */
.section-group {
    margin-bottom: 1.5rem;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0.25rem 0.5rem;
}

.section-count {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* .section-head supplies the spacing, so the title drops its own margin. */
.section-head > .section-title {
    margin: 0;
}

/* A section that follows a card needs air above it. */
.card + .section-head,
.table-wrap + .section-head {
    padding-top: 1.25rem;
}

/* Filter/action bar at the top of a card, above its table. */
.card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.card-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Forms */
.form-group {
    margin-bottom: var(--space-4);
}

.form-input,
.form-textarea,
.form-select {
    display: block;
    width: 100%;
    padding: 7px 12px;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    transition: var(--transition-default);
}

select.form-input {
    -webkit-appearance: none;
    appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-muted); opacity: 0.6; }

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.form-label-optional {
    font-weight: 400;
    color: var(--color-text-faint);
}

.form-help {
    margin-top: var(--space-1);
    font-size: 13px;
    color: var(--color-text-faint);
}

.btn-nowrap { white-space: nowrap; }

/* Inline form rows — inputs, selects, and buttons at equal height */
.form-inline .form-input,
.form-inline select.form-input {
    height: 42px;
}

.form-inline .btn {
    height: 42px;
}

/* ── Table system ─────────────────────────────────────────── */

/* Primary table container — standalone white card */
.table-wrap {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(11,18,32,.06);
}

/* Legacy wrapper kept for backward compatibility */
.table-container {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(11,18,32,.06);
}

.table-wrap + .table-container,
.card .table-container {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Round the four outer corners so the table clips cleanly inside .table-wrap
   without needing overflow:hidden (which would clip dropdown menus). */
.table-wrap .table thead tr:first-child th:first-child,
.table-container .table thead tr:first-child th:first-child { border-top-left-radius: 11px; }
.table-wrap .table thead tr:first-child th:last-child,
.table-container .table thead tr:first-child th:last-child  { border-top-right-radius: 11px; }
.table-wrap .table tbody tr:last-child td:first-child,
.table-container .table tbody tr:last-child td:first-child  { border-bottom-left-radius: 11px; }
.table-wrap .table tbody tr:last-child td:last-child,
.table-container .table tbody tr:last-child td:last-child   { border-bottom-right-radius: 11px; }

.table th {
    text-align: left;
    padding: 12px 14px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table th.num     { text-align: right; }
.table th.actions { text-align: right; }
.table th.checkbox { width: 44px; padding-right: 0; }

.table td {
    padding: 14px;
    border-bottom: 1px solid var(--line-2);
    font-size: 13.5px;
    color: var(--ink-2);
    vertical-align: middle;
    background: var(--paper);
    transition: background .12s;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[onclick] { cursor: pointer; }
.table tbody tr:hover td { background: var(--row-hover); }
.table tbody tr.selected td { background: var(--row-selected); }
.table tbody tr.selected:hover td { background: var(--row-selected-hover); }
.table td.checkbox { width: 44px; padding-right: 0; }
.table td.num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--ink-2);
}
.table td.actions { text-align: right; white-space: nowrap; }

/* Alerts */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 1.25rem;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid;
    border-radius: var(--radius-md);
    margin-bottom: 0;
}

.alert-success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-text);
}

.alert-error {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

.alert-warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning-text);
}

.alert-info {
    background: var(--color-info-bg);
    border-color: var(--color-accent);
    color: var(--color-info-text);
}

/* ── Toast — transient confirmation, shared across all modules ─── */
.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    max-width: 340px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-on-nav);
    background: var(--color-bg-chrome);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.toast-success { border-left-color: var(--color-success); }
.toast-error   { border-left-color: var(--color-danger); }
.toast-warning { border-left-color: var(--color-warning); }

.alert-secondary {
    background: var(--color-status-neutral-bg);
    border-color: var(--color-border-default);
    color: var(--color-text-muted);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-down { animation: slideDown 0.2s ease; }


/* ── Identity cell (.user-cell) ──────────────────────────── */
.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.av-sq {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(11,18,32,.08);
    flex: 0 0 36px;
}

.av-sq.admin   { background: linear-gradient(150deg,#B8893A,#8C6529); color: #FAEBC8; }
.av-sq.user    { background: linear-gradient(150deg,#2A6CFF,#1F4FD9); }
.av-sq.staff   { background: linear-gradient(150deg,#7A6BE8,#5240C4); }
.av-sq.pending { background: linear-gradient(150deg,#B7BFCE,#7C8597); }

/* Tonal icon block for non-person rows */
.av-sq.tonal-blue   { background: rgba(31,79,217,.12);  color: #1F4FD9; }
.av-sq.tonal-green  { background: rgba(10,90,57,.10);   color: #0A5A39; }
.av-sq.tonal-amber  { background: rgba(139,105,20,.10); color: #8B6914; }
.av-sq.tonal-red    { background: rgba(180,35,24,.10);  color: #B42318; }
.av-sq.tonal-purple { background: rgba(76,46,146,.10);  color: #4C2E92; }

.user-cell .who {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.user-cell .nm {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 7px;
}

.user-cell .nm .you {
    font-size: 10px;
    font-weight: 500;
    color: var(--accent-ink);
    background: var(--accent-soft);
    border: 1px solid #C7D6FB;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: .04em;
}

.user-cell .em {
    font-size: 12px;
    color: var(--muted);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.15;
}

/* Legacy helpers kept for backward compat */
.table-user-name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}

.table-user-email {
    font-size: 12px;
    line-height: 1.3;
    color: var(--muted);
    margin-top: 2px;
}

/* ── Role pills (rectangular) ────────────────────────────── */
.pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    border: 1px solid transparent;
}

.pill.role.admin   { background: var(--r-admin-bg);   color: var(--r-admin-fg);   border-color: var(--r-admin-bd); }
.pill.role.staff   { background: var(--r-staff-bg);   color: var(--r-staff-fg);   border-color: var(--r-staff-bd); }
.pill.role.user    { background: var(--r-user-bg);    color: var(--r-user-fg);    border-color: var(--r-user-bd); }
.pill.role.pending { background: var(--r-pending-bg); color: var(--r-pending-fg); border-color: var(--r-pending-bd); }

/* Owner codes (J/P/R) reuse role tones */
.pill.role.joint       { background: var(--r-staff-bg);   color: var(--r-staff-fg);   border-color: var(--r-staff-bd); }
.pill.role.petitioner  { background: var(--r-user-bg);    color: var(--r-user-fg);    border-color: var(--r-user-bd); }
.pill.role.respondent  { background: var(--r-admin-bg);   color: var(--r-admin-fg);   border-color: var(--r-admin-bd); }

/* ── Status pills (rounded with dot) ────────────────────── */
.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    border: 1px solid transparent;
}

.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status.active   { background: var(--s-active-bg);   color: var(--s-active-fg);   border-color: var(--s-active-bd); }
.status.pending  { background: var(--s-pending-bg);  color: var(--s-pending-fg);  border-color: var(--s-pending-bd); }
.status.inactive { background: var(--s-inactive-bg); color: var(--s-inactive-fg); border-color: var(--s-inactive-bd); }
.status.banned   { background: var(--s-banned-bg);   color: var(--s-banned-fg);   border-color: var(--s-banned-bd); }

.status.active::before   { background: var(--s-active-dot);   box-shadow: 0 0 0 3px rgba(16,167,91,.15); }
.status.pending::before  { background: var(--s-pending-dot); }
.status.inactive::before { background: var(--s-inactive-dot); }
.status.banned::before   { background: var(--s-banned-dot); }

/* ── Date cell (two-line: absolute + relative) ───────────── */
.date {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}

.date .d {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.15;
    font-family: var(--font-mono);
}

.date .r {
    font-size: 11px;
    color: var(--muted);
    text-transform: lowercase;
    line-height: 1.15;
}

.date.never .d {
    color: var(--muted-2);
    font-style: italic;
    font-family: var(--font-body);
}

/* ── Row action buttons ──────────────────────────────────── */
.rowactions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.rowactions .ra {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-decoration: none;
}

.rowactions .ra:hover           { background: var(--line-2); color: var(--ink-2); }
.rowactions .ra.primary:hover   { background: var(--accent-soft); color: var(--accent-ink); }
.rowactions .ra.danger:hover    { background: #FEF3F2; color: #B42318; }

/* ── Kebab dropdown popover ──────────────────────────────── */
.kebab-pop {
    position: absolute;
    z-index: 200;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 24px 60px -20px rgba(11,18,32,.22), 0 6px 16px -8px rgba(11,18,32,.10);
    min-width: 180px;
    padding: 6px;
}

.kebab-pop .kp-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.kebab-pop .kp-item:hover       { background: var(--line-2); }
.kebab-pop .kp-item.danger      { color: #B42318; }
.kebab-pop .kp-item.danger:hover { background: #FEF3F2; }
.kebab-pop .kp-sep { height: 1px; background: var(--line-2); margin: 4px 0; }

/* ── Table toolbar ───────────────────────────────────────── */
.table-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.table-toolbar .spacer { flex: 1; }

.tsearch {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
    max-width: 400px;
    height: 38px;
    border-radius: 9px;
    background: var(--paper);
    border: 1px solid var(--line);
    transition: border-color .15s, box-shadow .15s;
    overflow: hidden;
}

.tsearch:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(31,79,217,.10);
}

.tsearch svg {
    position: absolute;
    left: 12px;
    color: var(--muted);
    pointer-events: none;
}

.tsearch input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font: 400 13.5px/1 var(--font-body);
    color: var(--ink);
    padding: 0 12px 0 38px;
    height: 100%;
}

.tsearch .k {
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--muted-2);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--paper);
    margin-right: 10px;
    white-space: nowrap;
}

.tfilter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    box-shadow: 0 1px 2px rgba(11,18,32,.06);
    cursor: pointer;
    white-space: nowrap;
}

.tfilter:hover { background: var(--paper-2); border-color: #D7DBE3; }
.tfilter .lbl  { color: var(--muted); }
.tfilter .val  { color: var(--ink); }
.tfilter.has-value { border-color: #C7D6FB; background: var(--accent-soft); color: var(--accent-ink); }
.tfilter.has-value .lbl,
.tfilter.has-value .val { color: var(--accent-ink); }

.ticonbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-2);
    box-shadow: 0 1px 2px rgba(11,18,32,.06);
    cursor: pointer;
}

.ticonbtn:hover { background: var(--paper-2); border-color: #D7DBE3; }

/* ── Bulk action bar ─────────────────────────────────────── */
.bulkbar {
    display: none;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 12px 0 14px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    margin-bottom: 10px;
}

.bulkbar.on { display: flex; animation: tblSlideIn .18s ease; }

@keyframes tblSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.bulkbar .bb-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.bulkbar .bb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-on-nav, #D8B26A);
}

.bulkbar .bb-rule {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.14);
}

.bulkbar .bb-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 7px;
    color: #C9D2E3;
    font-size: 12.5px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
}

.bulkbar .bb-action:hover           { background: rgba(255,255,255,.07); color: #fff; }
.bulkbar .bb-action.danger:hover    { background: rgba(229,72,77,.16); color: #FCA5A5; }
.bulkbar .bb-action.close           { margin-left: auto; color: var(--nav-fg-dim, #9AA9C5); }

/* ── Custom checkbox ─────────────────────────────────────── */
.chk {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
    cursor: pointer;
}

.chk input {
    opacity: 0;
    position: absolute;
    inset: 0;
    cursor: pointer;
    margin: 0;
}

.chk .box {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    background: var(--paper);
    transition: all .12s;
}

.chk:hover .box { border-color: var(--muted); }

.chk input:checked + .box {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.chk input:checked + .box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.chk input:indeterminate + .box {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.chk input:indeterminate + .box::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: 7px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

/* ── Pagination ──────────────────────────────────────────── */
.tbl-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 6px 0;
    color: var(--muted);
    font-size: 13px;
}

.tbl-pagination .left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tbl-pagination .size {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
}

.tbl-pagination .size select {
    appearance: none;
    -webkit-appearance: none;
    padding: 5px 26px 5px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
}

.tbl-pagination .pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tbl-pagination .pgbtn {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-mono);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tbl-pagination .pgbtn:hover         { background: var(--paper-2); }
.tbl-pagination .pgbtn.on            { background: var(--ink); color: #fff; border-color: var(--ink); }
.tbl-pagination .pgbtn[disabled]     { opacity: .4; cursor: not-allowed; }
.tbl-pagination .ellipsis            { padding: 0 4px; color: var(--muted-2); }

/* ── Sub-tabs (in-page section switcher) ─────────────────── */
.subtabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--line-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    width: max-content;
    margin-bottom: 20px;
}

.subtabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
}

.subtabs button:hover { color: var(--ink); }

.subtabs button.on {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(11,18,32,.06), 0 0 0 1px var(--line);
}

.subtabs button .n {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 5px;
    background: var(--line-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-mono);
}

.subtabs button.on .n {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* ── Page header bar (title + CTA) ──────────────────────────
   .page-head and .form-page-header are the same component under two
   names, both already in use across admin and module views. They are
   defined together so a page's title block does not shift depending on
   which name a view happened to pick. */
.page-head,
.form-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0 24px;
    margin: 6px 0 22px;
}

/* Two markup shapes are in use across these views: a wrapped title group
   beside an action, and a bare heading followed by its subtitle. Giving a
   direct-child heading a full row keeps the second shape stacked instead
   of dropping the subtitle alongside the title. */
.page-head > h1,
.form-page-header > h1 {
    flex: 1 0 100%;
}

/* Layout only: typography belongs to .page-title, so every admin page
   renders its heading at one size in one family. */
.page-head h1,
.form-page-header h1 {
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.count {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--font-mono);
    letter-spacing: .02em;
    vertical-align: middle;
}

/* ── Section title — the label above a card or table ─────────
   One treatment for every section label in the admin, set by the
   Templates screen: short, tracked, uppercase, so it reads as structure
   rather than competing with the page title above it. */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 14px;
}

.page-head .sub { margin: 0; color: var(--muted); font-size: 14px; }

/* ── Dashboard stats row ─────────────────────────────────── */
.dash-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.dash-stat {
    flex: 1;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.dash-stat-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    line-height: 1;
    margin-bottom: 4px;
}

.dash-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Avatars */
.avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent-text);
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
}

.avatar-lg {
    width: 64px;
    height: 64px;
    font-size: var(--text-lg);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: normal;
}

.badge-active,
.badge-success  { background: var(--color-success-bg);  color: var(--color-success-text); }

.badge-inactive,
.badge-secondary,
.badge-user,
.badge-role-user { background: var(--color-status-neutral-bg); color: var(--color-text-muted); }

.badge-suspended,
.badge-danger   { background: var(--color-danger-bg);   color: var(--color-danger-text); }

.badge-pending,
.badge-warning  { background: var(--color-warning-bg);  color: var(--color-warning-text); }

.badge-core,
.badge-primary,
.badge-admin,
.badge-role-admin { background: var(--color-info-bg);   color: var(--color-info-text); }

/* User Dropdown */
.user-dropdown {
    position: relative;
    z-index: 300;
}

.user-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    transition: var(--transition-default);
    color: var(--color-text-primary);
}

.user-dropdown-trigger:hover {
    background-color: var(--color-bg-hover);
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-2);
    width: 200px;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
    padding: 6px;
    z-index: 500;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--color-text-secondary);
    font-size: 15px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-default);
}

.user-dropdown-item:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.user-dropdown-item.danger {
    color: var(--color-status-danger-text);
}

.user-dropdown-item.danger:hover {
    background-color: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
}

/* Modal — .modal-overlay defined in layout.css */
.modal {
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-default);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 460px;
    position: relative;
    overflow: hidden;
    animation: scaleIn 0.15s ease-out;
}

.modal-title {
    padding: 16px 20px;
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 600;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-default);
}

.modal-text {
    padding: 20px;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.modal-actions {
    padding: 12px 20px;
    background-color: var(--color-bg-page);
    border-top: 1px solid var(--color-border-default);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.btn-modal-cancel {
    padding: 8px 14px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-modal-confirm {
    padding: 8px 14px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-modal-confirm.danger {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger-text);
    border: 1px solid var(--color-status-danger-border);
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* Refinement Utilities */
.nav-section-footer {
    margin-top: auto;
    border-top: 1px solid var(--color-border-default);
    padding-top: 1rem;
}

.nav-item-accent {
    color: var(--color-accent) !important;
}

.avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.badge-xs {
    font-size: 10px;
    padding: 2px 8px;
}

.search-input-sm {
    height: 32px;
}

.dropdown-divider {
    border: none;
    border-top: 1px solid var(--color-border-default);
    margin: 8px 0;
}

.dropdown-form {
    margin: 0;
}

.dropdown-btn-full {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
}

.logo-suffix {
    font-size: 0.6em;
    opacity: 0.7;
    vertical-align: middle;
    margin-left: 4px;
}

/* Tab Bar */
.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--color-border-default);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 400;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.tab-btn.is-active {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-accent);
    font-weight: 500;
}

.tab-btn:hover:not(.is-active) {
    color: var(--color-text-secondary);
}

/* ── Page / section headings ──────────────────────────────── */
.page-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.page-subtitle {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 4px;
    margin-bottom: 0;
}

.page-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* ── Back link ────────────────────────────────────────────── */
.back-link {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

.back-link:hover {
    color: var(--color-text-primary);
}

/* ── Settings / profile row layout ───────────────────────── */

/* Card-level notice; matches .settings-row horizontal padding so the
   alert edge lines up with the labels below it. */
.settings-alert {
    padding: 12px 18px;
}

/* ── Test result box — dismissible diagnostics after a test send ── */
.test-result {
    margin: 0 18px 18px;
    padding: 14px 16px;
    border: 1px solid;
    border-left-width: 3px;
    border-radius: var(--radius-md);
    font-size: 13px;
}

.test-result--success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-text);
}

.test-result--error {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

.test-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.test-result-title {
    font-weight: 600;
}

.test-result-close {
    flex: none;
    border: none;
    background: none;
    padding: 0 2px;
    line-height: 1;
    font-size: 20px;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
}

.test-result-close:hover {
    opacity: 1;
}

.test-result-error,
.test-result-note {
    margin: 8px 0 0;
    line-height: 1.5;
}

.test-result-label {
    margin: 14px 0 4px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

.test-result-summary {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 2px 12px;
    margin: 12px 0 0;
}

.test-result-summary dt {
    font-weight: 600;
    opacity: 0.75;
}

.test-result-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.test-result-log {
    margin: 0;
    padding: 10px 12px;
    max-height: 260px;
    overflow: auto;
    border-radius: var(--radius-sm);
    background: var(--color-bg-chrome);
    color: #e6e6e6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.settings-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: center;
    padding: 10px 18px;
}

.settings-row--start {
    align-items: start;
}

.settings-row--border {
    border-bottom: 1px solid var(--color-border-light);
}

.settings-row-wide {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    padding: 10px 18px;
}

.settings-row-wide--start {
    align-items: start;
}

.settings-row-narrow {
    display: grid;
    grid-template-columns: 130px 1fr;
    padding: 10px 18px;
    border-bottom: 1px solid var(--color-border-default);
}

.settings-row-narrow:last-child {
    border-bottom: none;
}

.settings-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.settings-value {
    font-size: 14px;
    color: var(--color-text-primary);
}

.settings-divider {
    padding: 6px 18px;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border-light);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-disabled);
}

.settings-hint {
    font-size: 12px;
    color: var(--color-text-disabled);
    margin-top: 4px;
}

.settings-hint-sm {
    font-size: 11px;
    color: var(--color-text-disabled);
    margin-top: 4px;
}

/* ── Radio / checkbox option labels ──────────────────────── */
.radio-group {
    display: flex;
    gap: 16px;
    font-size: 13px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.radio-label input[type="radio"],
.radio-label input[type="checkbox"] {
    accent-color: var(--color-accent);
}

/* ── Sticky save bar ─────────────────────────────────────── */
.sticky-save-bar {
    position: sticky;
    bottom: 0;
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border-default);
    padding: 12px 0;
    margin-top: 8px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Form page width constraint ──────────────────────────── */
.form-page {
    max-width: 680px;
    padding-bottom: 64px;
}

/* ── Inline form row padding ─────────────────────────────── */
.settings-form-body {
    padding: 16px 18px;
}

/* ── Form input width constraints ────────────────────────── */
.form-input-sm  { max-width: 120px; }
.form-input-md  { max-width: 280px; }
.form-input-lg  { max-width: 320px; }
.form-input-xl  { max-width: 260px; }

/* ── Text-align helpers for table cells ──────────────────── */
.th-right { text-align: right; }
.td-right  { text-align: right; }
.td-center { text-align: center; }

/* ── Monospace cell text ─────────────────────────────────── */
.td-mono {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ── Muted small text in table cells ────────────────────── */
.td-meta {
    font-size: 12px;
    color: var(--color-text-muted);
}

.td-meta-sm {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ── Card section header (card-header variant without styling) ── */
.card-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px;
    border-bottom: 1px solid var(--color-border-light);
}

.card-count {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ── Empty state cell ─────────────────────────────────────── */
.td-empty {
    text-align: center;
    padding: 48px 32px;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* The global reset makes svg a block, so the icon is centred here
   rather than relying on the cell's text-align. */
.td-empty-icon {
    display: flex;
    justify-content: center;
    margin: 0 auto 12px;
    color: var(--color-text-muted);
    opacity: 0.35;
}

/* ── Dropdown menu item reset (button inside dropdown) ───── */
.dropdown-item-btn {
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

/* ── Form page header block ──────────────────────────────── */
/* ── Inline delete form ──────────────────────────────────── */
.form-inline-delete {
    display: inline;
}

/* ── Danger text button ──────────────────────────────────── */
.btn-danger-text {
    color: var(--color-danger);
}

/* ── Module upload icon ──────────────────────────────────── */
.upload-icon {
    width: 44px;
    height: 44px;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.upload-icon i {
    font-size: 18px;
}

.upload-hint {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.upload-sub-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* ── Modal close button ──────────────────────────────────── */
.modal-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* ── Widget avatar (mini) ────────────────────────────────── */
.widget-avatar-sm {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Widget icon box ─────────────────────────────────────── */
.widget-icon {
    width: 28px;
    height: 28px;
    background: var(--color-bg-subtle);
    color: var(--color-accent);
    font-size: 13px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Module card icon ────────────────────────────────────── */
.module-card-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Member landing card icon ────────────────────────────── */
.member-card-icon {
    width: 32px;
    height: 32px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 14px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-default);
}

.card:hover .member-card-icon {
    transform: scale(1.07);
}

/* ── Nav flex wrapper (brand + badge) ────────────────────── */
.nav-brand-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Profile / settings card info row ────────────────────── */
.profile-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    padding: 10px 18px;
}

.profile-row--border {
    border-bottom: 1px solid var(--color-border-light);
}

/* ── Card notice bar ─────────────────────────────────────── */
.card-notice {
    padding: 8px 18px;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border-light);
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ── Form action row (below card) ───────────────────────── */
.form-action-row {
    padding: 4px 0;
}

/* ── Inline form row: padding + flex wrap ────────────────── */
.form-row-inline {
    padding: 16px 18px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Content-constrained article/page blocks ─────────────── */
.prose-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-container {
    max-width: 640px;
}

/* ── Honeypot field (visually hidden) ────────────────────── */
.honeypot-field {
    position: absolute;
    left: -9999px;
}

/* ── Readonly input (contact form autofill) ──────────────── */
.form-input-readonly {
    background: var(--color-bg-hover);
    cursor: not-allowed;
}

/* ── Link styled accent ──────────────────────────────────── */
.link-accent {
    color: var(--color-accent);
}

.link-accent:hover {
    color: var(--color-accent);
    filter: brightness(1.15);
}

/* ── Asset editor footer row ─────────────────────────────── */
.editor-status-bar {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

/* ── Editor form flex col ─────────────────────────────────── */
.editor-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

/* ── Page width constraints ──────────────────────────────── */
.page-wide   { max-width: 860px; }
.page-narrow { max-width: 520px; }

/* ── Ban form inline grid ────────────────────────────────── */
.ban-form-grid {
    display: grid;
    grid-template-columns: 180px 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

/* ── Table column widths ─────────────────────────────────── */
.th-w-80  { width: 80px; }
.th-w-120 { width: 120px; }
.th-w-130 { width: 130px; }
.th-w-140 { width: 140px; }

/* ── Text truncation ─────────────────────────────────────── */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-360 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}

/* ── Capitalized / badge-style label ────────────────────── */
.label-caps {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ── Brand icon accent colours ───────────────────────────── */
.icon-css { color: #264de4; }
.icon-js  { color: #f7df1e; }

/* ── Settings label above a field (outside grid rows) ───── */
.settings-label--field {
    display: block;
    margin-bottom: 4px;
}

/* ── Inline settings hint at bottom of card ─────────────── */
.settings-hint--padded {
    padding: 0 18px 14px;
    margin: 0;
}

/* ── Card with top spacing (used when a card follows a form)  */
.card-mt { margin-top: 24px; }

/* ── Search bar button padding overrides ─────────────────── */
.btn.search-input-sm          { padding: 0 10px; }
.btn-primary.search-input-sm  { padding: 0 12px; }

/* ── Widget dashboard row divider ────────────────────────── */
.widget-row-divider td { border-bottom: 1px solid var(--color-border-default); }

/* ── Flex min-width constraint ───────────────────────────── */
.min-w-200 { min-width: 200px; }

/* ── Search bar input width variants ────────────────────── */
input.search-input-sm  { width: 180px; }
select.search-input-sm { width: auto; }

/* ── Block-display inline label ─────────────────────────── */
.label-block { display: block; }

/* ── Settings row narrow — no bottom border ─────────────── */
.settings-row-narrow--no-border { border-bottom: none; }

/* ── Dashboard widget table ──────────────────────────────── */
.widget-stats-bar {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border-default);
}

.widget-table {
    width: 100%;
    border-collapse: collapse;
}

.widget-td-icon {
    padding: 2px 0;
    width: 32px;
}

.widget-td-name {
    padding: 2px 8px;
}

.widget-td-time {
    padding: 2px 0;
    text-align: right;
}

.widget-user-name {
    display: block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Submission modal card ───────────────────────────────── */
.modal-card-lg {
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

/* ── Pre-formatted message body ─────────────────────────── */
.message-body {
    white-space: pre-wrap;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

/* ── Max-width table cell ────────────────────────────────── */
.td-max-300 { max-width: 300px; }

/* ── Page centered container ─────────────────────────────── */
.page-centered {
    max-width: 800px;
    margin: 0 auto;
}

/* ── Value emphasis in settings rows ─────────────────────── */
.value-right {
    text-align: right;
    font-weight: 600;
}

/* ── Card with bottom margin ─────────────────────────────── */
.card-mb { margin-bottom: 16px; }

/* ── Settings textarea / full-width section padding ─────── */
.settings-field-pad { padding: 10px 18px; }

/* ── Settings inline label for field groups ─────────────── */
.settings-field-inner { margin-bottom: 6px; }

/* ── Small form label (12px, muted) ──────────────────────── */
.form-label-sm {
    font-size: 12px;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 4px;
}

/* ── Vertical stacked form group with gaps ───────────────── */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Checkbox / radio inline label ───────────────────────── */
.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

/* ── Form action button row ──────────────────────────────── */
.form-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* ── Module-branded info alert ───────────────────────────── */
.alert-module {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-info-bg);
    border: 1px solid rgba(184,137,58,0.25);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* ── Table link — inherits text colour ───────────────────── */
.table-link {
    color: inherit;
    text-decoration: none;
}

/* ── CMS editor page layout grid ─────────────────────────── */
.editor-page-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}

/* ── Quill editor placeholder height ─────────────────────── */
.quill-placeholder     { min-height: 300px; }
.quill-placeholder--lg { min-height: 400px; }

/* ── Forum profile avatar size ───────────────────────────── */
.post-avatar-xl { width: 120px; height: 120px; }

/* ── Public pages (home, news, contact, legal) ───────────── */
.hero {
    text-align: center;
    padding: 5rem 0 4rem;
}
.hero-title {
    font-size: clamp(2.2rem, 5vw, 3.75rem);
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: -.03em;
}
.hero-tagline {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.pub-hero-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Home news grid */
.pub-news-section   { margin-top: 4rem; }
.pub-news-header    { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.pub-news-title     { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); }
.pub-news-grid      { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.pub-article-card   { padding: 1.5rem; }
.pub-article-title  { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.pub-article-title a { color: var(--color-text-primary); text-decoration: none; }
.pub-article-title a:hover { color: var(--color-accent); }
.pub-article-date   { color: var(--color-text-muted); font-size: .8rem; margin-bottom: .75rem; }
.pub-article-excerpt { color: var(--color-text-secondary); font-size: .9rem; line-height: 1.6; }
.pub-read-more {
    color: var(--color-accent);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .75rem;
}

/* Public page container — pages that would otherwise run to the viewport edges
   while the nav and footer stayed inside theirs. Proportions match the members
   dashboard (.md-page) so the pages read as one system. Shared by the news
   index and the contact page so the two line up exactly. */
.pub-news-page,
.contact-page          { max-width: 1040px; margin: 0 auto; padding: 48px 28px 64px; }

/* News index page */
.pub-news-page-header  { margin-bottom: 2rem; }
.pub-news-page-title   { font-size: 1.75rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: .375rem; }
.pub-news-page-sub     { color: var(--color-text-secondary); }
.pub-news-list         { display: flex; flex-direction: column; gap: 1.25rem; }
.pub-news-item         { padding: 1.5rem; }
.pub-news-item-inner   { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pub-news-item-body    { flex: 1; min-width: 220px; }
.pub-news-item-title   { font-size: 1.2rem; font-weight: 600; margin-bottom: .5rem; }
.pub-news-item-title a { color: var(--color-text-primary); text-decoration: none; }
.pub-news-item-title a:hover { color: var(--color-accent); }
.pub-news-empty        { padding: 3rem 2rem; text-align: center; }
.pub-news-empty-icon   { color: var(--color-text-muted); font-size: 3rem; margin-bottom: 1rem; }
.pub-news-empty-title  { color: var(--color-text-secondary); font-weight: 500; }
.pub-news-empty-sub    { color: var(--color-text-muted); font-size: .9rem; }
.pub-news-pagination   { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 2rem; }
.pub-news-pagination-info { padding: 0 1rem; color: var(--color-text-muted); font-size: .9rem; }

/* Article show page */
.pub-article-wrap  { max-width: 760px; margin: 0 auto; padding: 48px 28px 64px; }
.pub-article-back  { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-text-secondary); text-decoration: none; font-size: .9rem; margin-bottom: 1.5rem; }
.pub-article-header { margin-bottom: 2rem; }
.pub-article-h1    { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text-primary); margin-bottom: 1rem; line-height: 1.2; }
.pub-article-meta  { display: flex; align-items: center; gap: 1rem; color: var(--color-text-muted); font-size: .875rem; }
.pub-article-nav   { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border-default); }
.pub-article-nav-link       { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; max-width: 45%; }
.pub-article-nav-link--right { text-align: right; }
.pub-article-nav-label { font-size: .8rem; color: var(--color-text-muted); }
.pub-article-nav-title { color: var(--color-text-primary); font-weight: 500; }

/* Generic page (terms/privacy/custom) */
.pub-page-wrap    { max-width: 760px; margin: 0 auto; }
.pub-page-updated { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-default); color: var(--color-text-muted); font-size: .875rem; }

/* Contact page */
.pub-contact-wrap { max-width: 600px; margin: 0 auto; }

/* Maintenance page */
.pub-maintenance       { text-align: center; padding: 5rem 0; }
.pub-maintenance-icon  { font-size: 5rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.pub-maintenance-title { font-size: 2.5rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 1rem; }
.pub-maintenance-msg   { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 480px; margin: 0 auto 2rem; }

/* Rich content body (pages/articles) */
.page-content { font-size: 1rem; line-height: 1.8; color: var(--color-text-primary); }
.page-content h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
.page-content h2 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 1rem; }
.page-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
.page-content p  { margin-bottom: 1rem; }
.page-content ul,
.page-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.page-content li { margin-bottom: .5rem; }
.page-content a  { color: var(--color-accent); }
.page-content a:hover { text-decoration: underline; }
.pub-flash { margin-bottom: 1.5rem; }

/* ── Module surface ───────────────────────────────────────────
   One look for every calculator page, taken from the Asset & Debt
   Spreadsheet editor: a Fraunces title over a hairline rule, white
   panels on grey, navy for the primary action and for selection.

   The palette itself lives in variables.css under body.module. What
   follows is only the shape the editor gives those shared components
   — list tables, toolbars and page heads — so a module's list page
   and its editor read as the same document. */

/* Page head — title, rule, and the action on the baseline */
body.module .page-head,
body.module .form-page-header {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

body.module .page-title {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
}

body.module .page-subtitle {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--muted);
}

/* Count chip beside a title — the editor's case badge */
body.module .count {
    height: 24px;
    border-radius: 6px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

/* Primary action — filled slate, the editor's Save button */
body.module .btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

body.module .btn-primary:hover {
    background-color: var(--color-accent-light);
    border-color: var(--color-accent-light);
    filter: none;
    transform: none;
}

body.module .btn-primary:active {
    background-color: var(--color-accent);
    filter: none;
}

/* Table card — the editor's panel radius and a shadow that reads as
   a hairline rather than a lift */
body.module .table-wrap,
body.module .table-container {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(44, 62, 80, 0.05);
}

body.module .table-wrap .table thead tr:first-child th:first-child,
body.module .table-container .table thead tr:first-child th:first-child { border-top-left-radius: 7px; }
body.module .table-wrap .table thead tr:first-child th:last-child,
body.module .table-container .table thead tr:first-child th:last-child  { border-top-right-radius: 7px; }
body.module .table-wrap .table tbody tr:last-child td:first-child,
body.module .table-container .table tbody tr:last-child td:first-child  { border-bottom-left-radius: 7px; }
body.module .table-wrap .table tbody tr:last-child td:last-child,
body.module .table-container .table tbody tr:last-child td:last-child   { border-bottom-right-radius: 7px; }

/* Column headers — the editor's uppercase micro-label */
body.module .table th {
    font-size: 11.5px;
    letter-spacing: 0.06em;
}

/* Toolbar and row actions follow the editor's 4–9px corners */
body.module .tsearch,
body.module .tfilter,
body.module .ticonbtn {
    border-radius: 7px;
}

body.module .tsearch:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}

body.module .rowactions .ra {
    border-radius: 6px;
}

/* Avatar tile in a list row — squared off like the editor's category
   tiles rather than the rounded chrome elsewhere. Each module keeps its
   own tone for wayfinding, drawn from the editor's category palette, so
   the amber reads as amber rather than as brown. */
body.module .av-sq {
    border-radius: 6px;
}

body.module .av-sq.tonal-green  { background: rgba(15, 157, 88, 0.12);  color: #0B7C45; }
body.module .av-sq.tonal-amber  { background: rgba(224, 143, 42, 0.14); color: #B16A12; }
body.module .av-sq.tonal-purple { background: rgba(82, 64, 196, 0.11);  color: #5240C4; }
body.module .av-sq.tonal-red    { background: rgba(229, 72, 77, 0.11);  color: #B42318; }

/* A filter that carries a value tints slate, not blue */
body.module .tfilter.has-value { border-color: #C9D4DF; }
body.module .tfilter:hover,
body.module .ticonbtn:hover { border-color: #CFD4D9; }