/* =============================================================
   ROUNDTABLE ADMIN PRIMITIVES
   Built on top of tailwind.css tokens (--color-paper, --color-ink,
   --color-rule, etc.) and roundtable.css (font-display, chip, hairline,
   ph-stripe, btn-ink, dark-mode flip).

   These classes are admin-flavored but namespace-safe (.tbl, .pill,
   .eyebrow, .field-label, .btn-ghost, etc.) so loading globally
   does not collide with public-facing pages.
   ============================================================= */

:root {
    /* Accent — overridable per page or via Tweaks-style toggle later */
    --accent:     197 106 61;   /* #C56A3D terracotta */
    --rule2:      #C3BAA5;       /* heavier hairline */
    --muted2:     #8C8274;

    /* Six accent presets used by pills + dots */
    --tone-sage:   107 142 90;
    --tone-ochre:  212 162 76;
    --tone-clay:   175 76 68;
    --tone-terra:  197 106 61;
    --tone-dusk:   107 123 168;
    --tone-plum:   146 96 152;
    --tone-mist:   120 120 135;

    /* Density (compact mode toggled via html.density-compact later) */
    --row-y: 14px;
    --row-x: 20px;
    --card-y: 24px;
    --card-x: 24px;
    --gap: 24px;
}
html.dark {
    --rule2: #4E4436;
    --muted2: #7A7468;
}
html.density-compact {
    --row-y: 10px;
    --row-x: 16px;
    --card-y: 18px;
    --card-x: 20px;
    --gap: 16px;
}

/* ---- Typographic utility ---- */
.eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 500;
}
.num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* ---- Surfaces ---- */
.surface  { background: var(--color-paper); }
.surface-2 { background: var(--color-paper2); }
.surface-3 { background: color-mix(in oklab, var(--color-paper2) 60%, var(--color-rule)); }
.hairline-2 { box-shadow: inset 0 0 0 1px var(--rule2); }

/* ---- Buttons ----
   Extends .btn-ink (already in roundtable.css). Adds ghost/accent/danger
   and size modifiers. Use as: <button class="btn btn-ghost btn-sm">.
*/
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 16px;
    border-radius: 999px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 13.5px; font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}
.btn-ghost {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-rule);
}
.btn-ghost:hover { background: var(--color-paper2); }
.btn-accent {
    background: rgb(var(--accent));
    color: var(--color-paper);
}
.btn-accent:hover { filter: brightness(0.94); }
.btn-danger {
    background: transparent;
    color: rgb(var(--tone-clay));
    border-color: rgba(175, 76, 68, 0.35);
}
.btn-danger:hover { background: rgba(175, 76, 68, 0.08); }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12.5px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 14.5px; }

/* ---- Links ---- */
.link {
    color: rgb(var(--accent));
    text-decoration: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: border-color .15s ease;
}
.link:hover { border-bottom-color: rgb(var(--accent)); }
.link-muted { color: var(--color-muted); }
.link-muted:hover { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.link-danger { color: rgb(var(--tone-clay)); text-decoration: none; cursor: pointer; }
.link-danger:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Form controls ---- */
.field-label {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

/* ---- Status pills ----
   Tone variants render as a tinted background + tinted border + readable
   foreground. Light-mode foreground is darkened; dark mode uses the
   light-tinted variant for AA contrast on the dark surface.
*/
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}
.pill-lg { height: 26px; padding: 0 12px; font-size: 12.5px; }

.pill-sage  { background: rgba(107, 142, 90, 0.14);  color: #3f5a30; border-color: rgba(107, 142, 90, 0.35); }
.pill-ochre { background: rgba(212, 162, 76, 0.18);  color: #6a4a10; border-color: rgba(212, 162, 76, 0.45); }
.pill-clay  { background: rgba(175, 76, 68, 0.14);   color: #7a2a23; border-color: rgba(175, 76, 68, 0.35); }
.pill-terra { background: rgba(197, 106, 61, 0.16);  color: #7a3a18; border-color: rgba(197, 106, 61, 0.4); }
.pill-dusk  { background: rgba(107, 123, 168, 0.16); color: #36436a; border-color: rgba(107, 123, 168, 0.4); }
.pill-plum  { background: rgba(146, 96, 152, 0.16);  color: #5a2f60; border-color: rgba(146, 96, 152, 0.38); }
.pill-mist  { background: rgba(120, 120, 135, 0.14); color: #4a4a55; border-color: rgba(120, 120, 135, 0.32); }

html.dark .pill-sage  { color: #b4cfa1; }
html.dark .pill-ochre { color: #ecc885; }
html.dark .pill-clay  { color: #e8a6a0; }
html.dark .pill-terra { color: #ecb38e; }
html.dark .pill-dusk  { color: #b0bbe0; }
html.dark .pill-plum  { color: #d8b0e2; }
html.dark .pill-mist  { color: #c4c4cf; }

/* ---- Color dot (small circular swatch) ---- */
.dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* ---- Tables ----
   Use as: <table class="tbl">. thead cells get an eyebrow look,
   tbody rows get a hover tint.
*/
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.tbl thead th {
    text-align: left;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 14px var(--row-x);
    border-bottom: 1px solid var(--color-rule);
    background: var(--color-paper2);
    white-space: nowrap;
}
.tbl tbody td {
    padding: var(--row-y) var(--row-x);
    border-bottom: 1px solid var(--color-rule);
    vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(0, 0, 0, 0.015); }
html.dark .tbl tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.num-cell {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--color-muted);
    white-space: nowrap;
}

/* ---- KPI delta chip (used on dashboard) ---- */
.delta-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
    display: inline-flex; align-items: center; gap: 4px;
}
.delta-up   { color: #3f5a30; background: rgba(107, 142, 90, 0.14); border-color: rgba(107, 142, 90, 0.3); }
.delta-down { color: #7a2a23; background: rgba(175, 76, 68, 0.14);  border-color: rgba(175, 76, 68, 0.3); }
html.dark .delta-up   { color: #b4cfa1; }
html.dark .delta-down { color: #e8a6a0; }

/* ---- Confirm dialog animations (used by webroot/js/confirm-dialog.js) ---- */
@keyframes rt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rt-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Checkbox grid card (Topics access selector) ---- */
.cbg-card {
    background: var(--color-paper);
    border: 1px solid var(--color-rule);
}
.cbg-card:hover {
    background: var(--color-paper2);
    border-color: var(--rule2);
}
.cbg-card--on {
    background: var(--color-paper2);
    border-color: var(--color-ink);
}
html.dark .cbg-card--on {
    background: var(--color-paper2);
    border-color: rgb(var(--accent));
}