/**
 * TASK:RE design system, "Private Ledger" component layer.
 * Loaded LAST on every app page so it can harmonise legacy inline styles.
 *
 * Tokens: taskre-tokens.css (imported below) is the single source; --tr-* are
 * frozen aliases defined there.
 * Palette: graphite neutrals + one accent (Exchange Green). Modes are told
 * apart by glyph and label, never by hue.
 * Type: Geist (UI + display), Geist Mono (figures, IDs, money, dates).
 * Radius rule: 6 inputs/chips, 10 buttons, 14 cards, 22 sheets, pill for avatars + status only.
 */
@import url("taskre-tokens.css?v=1");

/* Pages that load this layer use the button/card radii for the platform names. */
:root {
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
    font-family: var(--taskre-font-sans) !important;
    background: var(--taskre-bg);
    color: var(--taskre-text-2);
    line-height: var(--taskre-leading-body);
    font-feature-settings: "ss01", "cv11";
    font-synthesis: none;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--taskre-font-sans) !important; letter-spacing: var(--taskre-tracking-heading); color: var(--taskre-text); text-wrap: balance; line-height: var(--taskre-leading-tight); }
h1 { letter-spacing: var(--taskre-tracking-title); }
p { text-wrap: pretty; }
strong, b { font-weight: var(--taskre-weight-medium, 500); }
input, select, textarea { font-size: max(1rem, 100%); }
::selection { background: var(--taskre-accent-soft); color: var(--taskre-accent-strong); }
code, kbd, samp, pre, .tr-mono { font-family: var(--taskre-font-mono); }
.tr-num, time, td, th, [data-numeric], .ws-stat-value, .stat-num, .kpi-value, [class*="budget"], [class*="-price"], [class*="-count"], [class*="-date"] { font-variant-numeric: tabular-nums; }

/* Focus: one visible ring everywhere. Inputs swap the ring for a border + glow;
   the transparent outline keeps a ring in Windows forced-colors mode. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible {
    outline: var(--taskre-focus-width) solid var(--taskre-focus-ring);
    outline-offset: var(--taskre-focus-offset);
    border-radius: var(--taskre-radius-chip);
}
:where(input, select, textarea):focus { border-color: var(--taskre-focus-ring) !important; box-shadow: 0 0 0 3px var(--taskre-focus-glow) !important; outline: var(--taskre-focus-width) solid transparent; }
input::placeholder, textarea::placeholder { color: var(--taskre-text-muted); opacity: 1; }
@media (forced-colors: active) {
    :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* ── Brand mark ─────────────────────────────────────────────────────── */
.tr-mark { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; }
.taskre-mark-bg  { fill: var(--taskre-text); }
.taskre-mark-bar { stroke: var(--taskre-surface); }
.taskre-mark-dot { fill: var(--taskre-accent-mark); }
.tr-wordmark { display: inline-flex; align-items: center; gap: .55rem; font-weight: var(--taskre-weight-medium); letter-spacing: 0; color: var(--taskre-text); text-decoration: none; font-size: var(--taskre-text-base); }
.tr-wordmark b { font-weight: var(--taskre-weight-medium); color: var(--taskre-accent); }

/* ── Shared nav ─────────────────────────────────────────────────────── */
.sh-nav { background: var(--taskre-nav-glass) !important; border-bottom: 1px solid var(--taskre-border) !important; backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
.sh-nav-inner { height: var(--taskre-nav-height) !important; }
.sh-logo { gap: .55rem !important; font-weight: var(--taskre-weight-medium) !important; font-size: var(--taskre-text-base) !important; color: var(--taskre-text) !important; }
.taskre-sh-logo-accent { color: var(--taskre-accent) !important; }
.sh-link { color: var(--taskre-text-muted) !important; border-radius: var(--taskre-radius-btn) !important; font-weight: var(--taskre-weight-medium); }
.sh-link:hover { color: var(--taskre-text) !important; background: var(--taskre-surface-2) !important; }
.sh-link.active { color: var(--taskre-text) !important; background: var(--taskre-surface) !important; box-shadow: inset 0 0 0 1px var(--taskre-border); }
.sh-btn-signin { background: var(--taskre-ink-fill) !important; color: var(--taskre-text-inverse) !important; border-radius: var(--taskre-radius-btn) !important; min-height: 40px !important; padding: .45rem 1rem !important; font-size: var(--taskre-text-md) !important; font-weight: var(--taskre-weight-medium) !important; transition: transform var(--taskre-duration) var(--taskre-ease), background var(--taskre-duration) !important; }
.sh-btn-signin:hover { background: var(--taskre-ink-fill-hover) !important; }
.sh-btn-signin:active, .btn-sm:active, .ws-btn:active, .tr-btn:active { transform: translateY(1px) scale(.985); }
.sh-search input { border-radius: var(--taskre-radius-btn) !important; border-color: var(--taskre-border) !important; }
.sh-avatar { background: var(--taskre-ink-fill) !important; color: var(--taskre-text-inverse) !important; }
.sh-dd, .sh-notif-dd { border-radius: var(--taskre-radius-card) !important; border-color: var(--taskre-border) !important; box-shadow: var(--taskre-shadow-3) !important; }
.sh-notif-badge { background: var(--taskre-accent) !important; color: var(--taskre-text-inverse) !important; }
.sh-notif-item.unread { background: var(--taskre-accent-soft-2) !important; border-left-color: var(--taskre-accent) !important; }

/* ── Page chrome ────────────────────────────────────────────────────── */
.page-header h1 { font-weight: var(--taskre-weight-semibold) !important; letter-spacing: var(--taskre-tracking-title); font-size: var(--taskre-text-title) !important; }
.btn-sm:not(.btn-outline):not(.btn-ghost):not(.btn-secondary):not(.btn-light):not(.tm-btn-ghost) { background: var(--taskre-ink-fill) !important; color: var(--taskre-text-inverse); border-radius: var(--taskre-radius-btn) !important; transition: transform var(--taskre-duration) var(--taskre-ease), background var(--taskre-duration); }
.btn-sm:not(.btn-outline):not(.btn-ghost):not(.btn-secondary):not(.btn-light):not(.tm-btn-ghost):hover { background: var(--taskre-ink-fill-hover) !important; }
.btn-sm { border-radius: var(--taskre-radius-btn) !important; }
.mob-nav { background: var(--taskre-nav-glass) !important; border-top-color: var(--taskre-border) !important; }
.mob-nav-item.active { color: var(--taskre-accent) !important; }

/* ── Workspace components ──────────────────────────────────────────── */
.ws-card, .ws-stat, .feed-card, .card, .twc-card {
    border: 1px solid var(--taskre-border) !important;
    border-radius: var(--taskre-radius-card) !important;
    box-shadow: var(--taskre-shadow-1);
}
.ws-stat-value { font-family: var(--taskre-font-mono); font-weight: var(--taskre-weight-medium) !important; letter-spacing: -.015em; }
.ws-subnav { border-bottom: 1px solid var(--taskre-border) !important; background: var(--taskre-surface); }
.ws-subnav a.active { color: var(--taskre-text) !important; border-bottom-color: var(--taskre-accent) !important; }
.ws-btn { border-radius: var(--taskre-radius-btn) !important; transition: transform var(--taskre-duration) var(--taskre-ease), background var(--taskre-duration), border-color var(--taskre-duration) !important; }
.ws-btn-primary { background: var(--taskre-ink-fill) !important; }
.ws-btn-accent { background: var(--taskre-accent) !important; }
.ws-btn-accent:hover:not(:disabled) { background: var(--taskre-accent-hover) !important; }
.ws-btn-secondary { border: 1px solid var(--taskre-border-strong) !important; }
.ws-badge { border-radius: var(--taskre-radius-chip) !important; font-weight: var(--taskre-weight-medium) !important; letter-spacing: 0; }

/* twc core */
.twc-btn-primary, .btn-primary { background: var(--taskre-ink-fill); border-radius: var(--taskre-radius-btn); }
.twc-badge { border-radius: var(--taskre-radius-chip); }

/* ── Mode glyph chips (shared vocabulary) ───────────────────────────── */
.tr-mode { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem .22rem .45rem; border-radius: var(--taskre-radius-chip); background: var(--taskre-surface-2); color: var(--taskre-text-2); font-size: var(--taskre-text-xs); font-weight: var(--taskre-weight-medium); line-height: 1.45; border: 1px solid var(--taskre-border); }
.tr-mode.is-paid { background: var(--taskre-accent-soft); color: var(--taskre-accent-strong); border-color: var(--taskre-accent-border); }

/* ── Empty states ───────────────────────────────────────────────────── */
.tr-empty { text-align: center; padding: 4rem 1.5rem; }
.tr-empty h3 { font-size: var(--taskre-text-xl); font-weight: var(--taskre-weight-medium); margin: .9rem 0 .35rem; }
.tr-empty p { color: var(--taskre-text-muted); font-size: var(--taskre-text-base); max-width: 42ch; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.tr-ico { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }
.tr-mode .tr-ico { width: 14px; height: 14px; }

/* Nav: links sit beside the wordmark, actions on the right (logged in and out). */
.sh-nav-inner > .sh-links { margin-left: 1.75rem; margin-right: auto; }
.sh-nav-inner { gap: .75rem; }

/* ── App-wide harmonisation of legacy page styles ───────────────────── */
.kpi { border: 1px solid var(--taskre-border) !important; box-shadow: var(--taskre-shadow-1); }
.kpi-label, .ws-stat-label, .stat-label { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--taskre-text-md) !important; font-weight: var(--taskre-weight-medium) !important; color: var(--taskre-text-muted) !important; }
.kpi-value { font-family: var(--taskre-font-mono); font-weight: var(--taskre-weight-medium) !important; letter-spacing: -.015em !important; color: var(--taskre-text) !important; }
.kpi.overdue .kpi-value { color: var(--taskre-danger) !important; }
.attn-icon .tr-ico { width: 15px; height: 15px; }
.dash-title { font-weight: var(--taskre-weight-semibold) !important; letter-spacing: var(--taskre-tracking-title) !important; }